1 files changed, 72 insertions, 0 deletions
diff --git a/public/css/widget/table-layout.less b/public/css/widget/table-layout.less
new file mode 100644
index 0000000..f67ec0f
--- /dev/null
+++ b/public/css/widget/table-layout.less
@@ -0,0 +1,72 @@
+// HostGroup- and -ServiceGroupTable styles
+
+.item-table.table-layout {
+  --columns: 1;
+}
+
+ul.item-table.table-layout {
+  grid-template-columns: 1fr repeat(var(--columns), auto);
+
+  > li {
+    display: contents;
+
+    &:hover,
+    &.active {
+      .col, &::before, &::after {
+        // The li might get a background on hover. Though, this won't be visible
+        // as it has no box model since we apply display:contents to it.
+        background-color: inherit;
+      }
+    }
+  }
+
+  li:not(:last-of-type) {
+    .col {
+      border-bottom: 1px solid @gray-light;
+    }
+
+    .visual {
+      border-bottom: 1px solid @default-bg;
+    }
+  }
+
+  > .table-row {
+    &:not(:last-of-type) .title .visual {
+      margin-bottom: ~"calc(-.5em - 1px)";
+    }
+
+    .col {
+      padding: .5em 0;
+    }
+
+    .col:not(:last-child) {
+      padding-right: 1em;
+    }
+  }
+}
+
+.content.full-width ul.item-table.table-layout {
+  // Again, since the li has no box model, it cannot have padding. So the first
+  // and last child need to get the left and right padding respectively.
+  // But we don't want to have a border that spans to the very right or left,
+  // so pseudo elements are required. We could add empty cells instead, but
+  // that would require hard coding the width here, which I'd like to avoid.
+
+  grid-template-columns: ~"auto 1fr repeat(calc(var(--columns) + 1), auto)";
+
+  > li.table-row {
+    &::before, &::after {
+      display: inline-block;
+      content: '\00a0';
+      margin-bottom: 1px;
+    }
+
+    &::before {
+      padding-left: inherit;
+    }
+
+    &::after {
+      padding-right: inherit;
+    }
+  }
+}