1 files changed, 156 insertions, 0 deletions
diff --git a/apps/web-shared/src/styles/components/interactive-table.scss b/apps/web-shared/src/styles/components/interactive-table.scss
new file mode 100644
index 0000000..f239c62
--- /dev/null
+++ b/apps/web-shared/src/styles/components/interactive-table.scss
@@ -0,0 +1,156 @@
+@use '../base' as *;
+@use 'menu.scss' as *;
+@use 'menu-bar.scss' as *;
+
+/* --------------------------------
+
+File#: _3_interactive-table
+Title: Interactive Table
+Descr: Table with the option of sorting data and selecting rows to perform specific actions
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.int-table {
+  overflow: hidden;
+  border-bottom: 2px solid var(--color-contrast-lower);
+}
+
+.int-table__inner {
+  position: relative;
+  overflow: auto;
+
+  &::-webkit-scrollbar { // custom scrollbar style
+    height: 8px;
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track { // progress bar
+    background-color: var(--color-contrast-lower);
+  }
+
+  &::-webkit-scrollbar-thumb { // handle
+    background-color: alpha(var(--color-contrast-higher), 0.9);
+    border-radius: 50em;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-contrast-higher);
+  }
+}
+
+.int-table__table {
+  width: 100%;
+}
+
+.int-table__header {
+  .int-table__cell {
+    background-color: var(--color-bg);
+    box-shadow: 0 2px 0 var(--color-contrast-lower);
+  }
+}
+
+.int-table__body {
+  .int-table__row {
+    border-bottom: 1px solid var(--color-contrast-lower);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .int-table__row--checked {
+    background-color: alpha(var(--color-primary), 0.1);
+    border-color: alpha(var(--color-primary), 0.25);
+  }
+}
+
+.int-table__cell { // standard cell
+  padding: var(--space-xxxs);
+}
+
+.int-table__cell--th { // header cell
+  font-weight: 600;
+}
+
+.int-table__cell--sort { // header cell with sorting option
+  user-select: none;
+
+  &:hover, &:focus-within {
+    background-color: alpha(var(--color-contrast-higher), 0.075);
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.int-table__cell--focus {
+  background-color: alpha(var(--color-primary), 0.15);
+}
+
+.int-table__sort-icon { // sorting icon indicator
+  .arrow-up, .arrow-down {
+    fill: alpha(var(--color-contrast-higher), 0.3);
+  }
+}
+
+.int-table__cell--asc .int-table__sort-icon .arrow-up,
+.int-table__cell--desc .int-table__sort-icon .arrow-down {
+  fill: var(--color-contrast-higher);
+}
+
+.int-table__checkbox {
+  --custom-checkbox-size: 18px;
+  --custom-checkbox-marker-size: 16px;
+  display: block;
+  width: var(--custom-checkbox-size);
+  height: var(--custom-checkbox-size);
+}
+
+.int-table__menu-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2em;
+  cursor: pointer;
+
+  .icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+  }
+}
+
+// --sticky-header
+.int-table--sticky-header {
+  position: relative;
+  z-index: 1;
+
+  .int-table__inner {
+    max-height: 605px;
+  }
+
+  .int-table__header {
+    .int-table__cell {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    }
+  }
+}
+
+// actions
+.int-table-actions {
+  .menu-bar {
+    --menu-bar-button-size: 38px; // size of the menu buttons
+    --menu-bar-icon-size: 16px; // size of the icons inside the buttons
+    --menu-bar-horizontal-gap: var(--space-xxxxs); // horizontal gap between buttons
+    --menu-bar-vertical-gap: 4px; // vertical gap between buttons and labels (tooltips)
+    --menu-bar-label-size: var(--text-xs); // label font size
+  }
+
+  .menu-bar__icon {
+    color: alpha(var(--color-contrast-higher), 0.5);
+  }
+}