1 files changed, 95 insertions, 0 deletions
diff --git a/public/css/widget/object-meta-info.less b/public/css/widget/object-meta-info.less
new file mode 100644
index 0000000..82ad044
--- /dev/null
+++ b/public/css/widget/object-meta-info.less
@@ -0,0 +1,95 @@
+// Style
+
+.object-meta-info {
+  .vertical-key-value .value {
+    font-weight: normal;
+  }
+
+  .vertical-key-value:first-child {
+    text-align: left;
+  }
+
+  .vertical-key-value:last-child {
+    text-align: right;
+  }
+}
+
+.object-meta-info-control {
+  .link-button();
+
+  .rounded-corners(0 0 .5em .5em);
+  border: 1px solid;
+  border-color: @gray-lighter;
+  border-top-width: 0;
+  background: @body-bg-color;
+}
+
+// Layout
+
+.object-meta-info {
+  display: flex;
+  justify-content: space-between;
+
+  .horizontal-key-value {
+    padding: 0;
+
+    .key {
+      width: 9em;
+    }
+  }
+
+  .vertical-key-value {
+    &:first-child {
+      .text-ellipsis();
+      margin-right: 1em;
+    }
+
+    &:last-child {
+      white-space: nowrap;
+      margin-left: 1em;
+    }
+  }
+
+  .horizontal-key-value .value,
+  .horizontal-key-value .key,
+  .vertical-key-value .value,
+  .vertical-key-value .key {
+    font-size: 16/18em;
+    line-height: 18/16; // compensate smaller font-size (1/font-size)
+  }
+}
+
+.object-meta-info-control {
+  position: absolute;
+  right: 2.25em;
+  bottom: -2.5em; // height + margin-bottom
+  height: 2em;
+  padding: .25em;
+
+  .collapse-icon,
+  .expand-icon {
+    font-size: 1.2em;
+
+    &:before {
+      margin-right: 0;
+    }
+  }
+
+  .collapse-icon {
+    display: block;
+  }
+
+  .expand-icon {
+    display: none;
+  }
+}
+
+.collapsed + .object-meta-info-control {
+  .collapse-icon {
+    display: none;
+  }
+
+  .expand-icon {
+    display: block;
+  }
+}