1 files changed, 147 insertions, 0 deletions
diff --git a/apps/web-shared/src/styles/components/table.scss b/apps/web-shared/src/styles/components/table.scss
new file mode 100644
index 0000000..af8207f
--- /dev/null
+++ b/apps/web-shared/src/styles/components/table.scss
@@ -0,0 +1,147 @@
+@use '../base'as *;
+
+/* --------------------------------
+
+File#: _1_table
+Title: Table
+Descr: Data tables used to organize and display information in rows and columns
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+// >>> style affecting all (block + expanded) versions 👇
+.table {
+  position: relative;
+  z-index: 1;
+}
+
+// <<< end style affecting all versions
+
+// >>> block version only (mobile) 👇
+.table:not(.table--expanded) {
+  border-collapse: separate;
+  border-spacing: 0 var(--space-md); // row gap
+  margin-top: calc(-2 * var(--space-md)); // set spacing variable = row gap ☝️
+
+  .table__header {
+    // hide table header - but keep it accessible to SR
+    @include srHide;
+  }
+
+  .table__row {
+    .table__cell:first-child {
+      border-radius: var(--radius-md) var(--radius-md) 0 0;
+    }
+
+    .table__cell:last-child {
+      border-radius: 0 0 var(--radius-md) var(--radius-md);
+
+      &::after {
+        // hide border bottom
+        display: none;
+      }
+    }
+  }
+
+  .table__cell {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    text-align: right;
+    padding: var(--space-md);
+    background-color: var(--color-bg-light);
+
+    &::after {
+      // border bottom
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: var(--space-md);
+      width: calc(100% - (2 * var(--space-md)));
+      height: 1px;
+      background-color: var(--color-contrast-lower);
+    }
+  }
+
+  .table__label {
+    // inline labels -> visible when table header is hidden
+    font-weight: bold;
+    text-align: left;
+    color: var(--color-contrast-higher);
+    margin-right: var(--space-md);
+  }
+}
+
+// <<< end block version
+
+// >>> expanded version only (desktop) 👇 -> show standard rows and cols
+.table--expanded {
+  border-bottom: 1px solid var(--color-contrast-lower); // table border bottom
+
+  .table__header {
+    .table__cell {
+      // header cell style
+      position: relative;
+      z-index: 10;
+      background-color: var(--color-bg);
+      border-bottom: 1px solid var(--color-contrast-lower); // header border bottom
+      font-weight: bold;
+      color: var(--color-contrast-higher);
+    }
+  }
+
+  .table__body {
+    .table__row {
+      &:nth-child(odd) {
+        background-color: alpha(var(--color-bg-dark), 0.85);
+      }
+    }
+  }
+
+  .table__cell {
+    padding: var(--space-xxxs);
+  }
+
+  .table__label {
+    // hide inline labels
+    display: none;
+  }
+
+  // --header-sticky
+  .table__header--sticky {
+    .table__cell {
+      // header cell style
+      position: sticky;
+      top: 0;
+    }
+  }
+}
+
+// <<< end expanded version
+
+.js {
+  .table {
+    opacity: 0; // hide table while it is initialized in JS
+  }
+
+  .table--loaded {
+    opacity: 1;
+  }
+}
+
+// detect when the table needs to switch from the mobile layout to an expanded one - used in JS
+[class*="table--expanded"]::before {
+  display: none;
+}
+
+@each $breakpoint,
+$value in $breakpoints {
+  .table--expanded\@#{$breakpoint}::before {
+    content: 'collapsed';
+
+    @include breakpoint(#{$breakpoint}) {
+      content: 'expanded';
+    }
+  }
+}