@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/table/table.module.less

@@ -0,0 +1,145 @@
+@import '../../style/variables.less';
+@import './table.variables.less';
+
+:root {
+  --color-background-table-header: var(--color-neutral-100);
+  --color-background-table-row-tinted: var(--color-neutral-50);
+}
+
+html[data-theme='dark'] {
+  --color-background-table-header: var(--color-neutral-750);
+  --color-background-table-row-tinted: var(--color-neutral-850);
+}
+
+.scrollWrapper {
+  &.bordered {
+    border: 1px solid var(--color-border);
+    border-radius: 0.28571429rem;
+  }
+
+  &.maxHeight {
+    display: block;
+    overflow-y: auto;
+
+    tfoot td {
+      position: sticky;
+      bottom: 0;
+    }
+  }
+}
+
+.table {
+  width: 100%;
+  background: var(--color-background-raised);
+  box-shadow: none;
+  text-align: left;
+  color: var(--color-text);
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: inherit;
+
+  > :first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+
+    > :first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+
+      > :first-child {
+        border-top-left-radius: inherit;
+      }
+
+      > :last-child {
+        border-top-right-radius: inherit;
+      }
+    }
+  }
+
+  > :last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+
+    > :last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+
+      > :first-child {
+        border-bottom-left-radius: inherit;
+      }
+
+      > :last-child {
+        border-bottom-right-radius: inherit;
+      }
+    }
+  }
+}
+
+th,
+td {
+  line-height: 17px;
+  height: 36px;
+  border-left: 1px solid var(--color-border);
+
+  &:first-child {
+    border-left: none;
+  }
+}
+
+// Fix for cell height in Firefox from https://stackoverflow.com/a/51053670
+@-moz-document url-prefix() {
+  tr {
+    height: 36px;
+  }
+  td {
+    height: 100%;
+  }
+}
+
+thead th,
+tfoot td {
+  background-color: var(--color-background-table-header);
+}
+
+thead th {
+  cursor: auto;
+  text-align: inherit;
+  color: var(--color-text);
+  padding: 0.92857143em 0.78571429em;
+  vertical-align: inherit;
+  font-style: none;
+  font-weight: 700;
+  text-transform: none;
+  border-bottom: 1px solid var(--color-border);
+  border-left: 1px solid var(--color-border);
+}
+
+td {
+  border-top: 1px solid var(--color-border);
+
+  tr:first-child & {
+    border-top: none;
+  }
+}
+
+.cellWrapper {
+  .cellWrapperPadding();
+}
+
+.title,
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.striped tbody {
+  tr:nth-child(even) {
+    background-color: var(--color-background-table-row-tinted);
+  }
+}
+
+tfoot td {
+  border-top: 1px solid var(--color-border) !important;
+  padding: 8px 12px;
+}