@ostack.tech/ui 0.1.0

package/scss/components/Table/_Table.scss

@@ -0,0 +1,632 @@
+@use "sass:map";
+
+@use "Table-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/maybe-important" as *;
+@use "../../scss/utils/transition" as *;
+
+.#{$prefix}table {
+  width: 100%;
+  height: 100%;
+  border-collapse: initial;
+  border-spacing: 0;
+  font-size: $table-font-size;
+  line-height: $table-line-height;
+
+  &--fixed {
+    table-layout: fixed;
+  }
+
+  // Scrollable container
+  &__container {
+    display: flex;
+    position: relative;
+    width: 100%;
+    overflow: auto;
+
+    border-radius: var(--#{$prefix}table-border-radius);
+    border-width: var(--#{$prefix}table-border-width, 0);
+    border-style: solid;
+    border-color: var(--#{$prefix}table-border-color);
+
+    @include accessible-transition();
+
+    &:focus-visible {
+      outline: 0;
+      border-radius: var(
+        --#{$prefix}table-focus-border-radius,
+        var(--#{$prefix}table-border-radius)
+      );
+      border-color: var(--#{$prefix}table-focus-border-color);
+      box-shadow: var(--#{$prefix}table-focus-box-shadow);
+    }
+
+    // Variants
+    @each $variant in $table-variants {
+      &--#{$variant} {
+        @include declare-var(
+          --#{$prefix}table-border-radius,
+          map.get($table-border-radius-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-border-width,
+          map.get($table-border-width-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-border-color,
+          map.get($table-border-color-by-variant, $variant)
+        );
+
+        // Focus
+        @include declare-var(
+          --#{$prefix}table-focus-border-radius,
+          map.get($table-focus-border-radius-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-focus-border-color,
+          map.get($table-focus-border-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-focus-box-shadow,
+          map.get($table-focus-box-shadow-by-variant, $variant)
+        );
+
+        // Status
+        &[data-status] {
+          @include declare-var(
+            --#{$prefix}table-border-color,
+            map.get($table-status-border-color-by-variant, $variant)
+          );
+
+          // Status + Focus
+          @include declare-var(
+            --#{$prefix}table-focus-border-color,
+            map.get($table-focus-status-border-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}table-focus-box-shadow,
+            map.get($table-focus-status-box-shadow-by-variant, $variant)
+          );
+        }
+      }
+    }
+  }
+
+  @each $variant in $table-variants {
+    &--#{$variant} {
+      // Head
+      @include declare-var(
+        --#{$prefix}table-head-border-width,
+        map.get($table-head-border-width-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}table-head-border-color,
+        map.get($table-head-border-color-by-variant, $variant)
+      );
+
+      // Foot
+      @include declare-var(
+        --#{$prefix}table-foot-border-width,
+        map.get($table-foot-border-width-by-variant, $variant)
+      );
+      @include declare-var(
+        --#{$prefix}table-foot-border-color,
+        map.get($table-foot-border-color-by-variant, $variant)
+      );
+
+      // Row - Unframed cell + Odd
+      & > .#{$prefix}table__row,
+      & > .#{$prefix}table__body > .#{$prefix}table__row {
+        &:is(:nth-of-type(odd):not([data-even-row]), [data-odd-row])
+          > .#{$prefix}table__cell:not([data-framed]) {
+          @include declare-var(
+            --#{$prefix}table-cell-background-color,
+            map.get(
+              $table-row-unframed-odd-background-color-by-variant,
+              $variant
+            )
+          );
+        }
+      }
+
+      // Status
+      &[data-status] {
+        // Head - Status
+        @include declare-var(
+          --#{$prefix}table-head-border-color,
+          map.get($table-head-status-border-color-by-variant, $variant)
+        );
+
+        // Foot - Status
+        @include declare-var(
+          --#{$prefix}table-foot-border-color,
+          map.get($table-foot-status-border-color-by-variant, $variant)
+        );
+
+        // Row - Unframed cell + Odd + Status
+        & > .#{$prefix}table__row,
+        & > .#{$prefix}table__body > .#{$prefix}table__row {
+          &:is(:nth-of-type(odd):not([data-even-row]), [data-odd-row])
+            > .#{$prefix}table__cell:not([data-framed]) {
+            @include declare-var(
+              --#{$prefix}table-cell-background-color,
+              map.get(
+                $table-row-unframed-odd-status-background-color-by-variant,
+                $variant
+              )
+            );
+          }
+        }
+      }
+
+      // Cell
+      .#{$prefix}table__cell {
+        @include declare-var(
+          --#{$prefix}table-cell-padding-y,
+          map.get($table-cell-padding-y-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-cell-padding-x,
+          map.get($table-cell-padding-x-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-cell-border-style,
+          map.get($table-cell-border-style-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-cell-border-color,
+          map.get($table-cell-border-color-by-variant, $variant)
+        );
+
+        // Cell - Header + Framed
+        &[data-variant="header"][data-framed] {
+          @include declare-var(
+            --#{$prefix}table-cell-border-color,
+            map.get($table-cell-header-framed-border-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}table-cell-background-color,
+            map.get(
+              $table-cell-header-framed-background-color-by-variant,
+              $variant
+            )
+          );
+          @include declare-var(
+            --#{$prefix}table-cell-color,
+            map.get($table-cell-header-framed-color-by-variant, $variant)
+          );
+          @include declare-var(
+            --#{$prefix}table-cell-font-weight,
+            map.get($table-cell-header-framed-font-weight-by-variant, $variant)
+          );
+
+          // Status
+          &[data-status] {
+            @include declare-var(
+              --#{$prefix}table-cell-border-color,
+              map.get(
+                $table-cell-header-framed-status-border-color-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}table-cell-background-color,
+              map.get(
+                $table-cell-header-framed-status-background-color-by-variant,
+                $variant
+              )
+            );
+            @include declare-var(
+              --#{$prefix}table-cell-color,
+              map.get(
+                $table-cell-header-framed-status-color-by-variant,
+                $variant
+              )
+            );
+          }
+        }
+      }
+
+      // Head cell - Header
+      & > .#{$prefix}table__head .#{$prefix}table__cell[data-variant="header"] {
+        @include declare-var(
+          --#{$prefix}table-cell-border-color,
+          map.get($table-head-cell-header-border-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-cell-background-color,
+          map.get($table-head-cell-header-background-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-cell-color,
+          map.get($table-head-cell-header-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-cell-font-weight,
+          map.get($table-head-cell-header-font-weight-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-cell-text-transform,
+          map.get($table-head-cell-header-text-transform-by-variant, $variant)
+        );
+
+        &[data-status] {
+          @include declare-var(
+            --#{$prefix}table-cell-border-color,
+            map.get(
+              $table-head-cell-header-status-border-color-by-variant,
+              $variant
+            )
+          );
+          @include declare-var(
+            --#{$prefix}table-cell-background-color,
+            map.get(
+              $table-head-cell-header-status-background-color-by-variant,
+              $variant
+            )
+          );
+          @include declare-var(
+            --#{$prefix}table-cell-color,
+            map.get($table-head-cell-header-status-color-by-variant, $variant)
+          );
+        }
+      }
+
+      // Foot cell - Header
+      & > .#{$prefix}table__foot .#{$prefix}table__cell[data-variant="header"] {
+        @include declare-var(
+          --#{$prefix}table-cell-border-color,
+          map.get($table-foot-cell-header-border-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-cell-background-color,
+          map.get($table-foot-cell-header-background-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-cell-color,
+          map.get($table-foot-cell-header-color-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-cell-font-weight,
+          map.get($table-foot-cell-header-font-weight-by-variant, $variant)
+        );
+        @include declare-var(
+          --#{$prefix}table-cell-text-transform,
+          map.get($table-foot-cell-header-text-transform-by-variant, $variant)
+        );
+
+        &[data-status] {
+          @include declare-var(
+            --#{$prefix}table-cell-border-color,
+            map.get(
+              $table-foot-cell-header-status-border-color-by-variant,
+              $variant
+            )
+          );
+          @include declare-var(
+            --#{$prefix}table-cell-background-color,
+            map.get(
+              $table-foot-cell-header-status-background-color-by-variant,
+              $variant
+            )
+          );
+          @include declare-var(
+            --#{$prefix}table-cell-color,
+            map.get($table-foot-cell-header-status-color-by-variant, $variant)
+          );
+        }
+      }
+    }
+  }
+
+  &__row {
+    vertical-align: middle;
+    outline: 0;
+  }
+
+  // Set border radius on edge cells
+  & > &__row:first-child,
+  & > :first-child > &__row:first-child {
+    & > .#{$prefix}table__cell:first-child {
+      border-top-left-radius: var(--#{$prefix}table-border-radius);
+    }
+
+    & > .#{$prefix}table__cell:last-child {
+      border-top-right-radius: var(--#{$prefix}table-border-radius);
+    }
+  }
+
+  & > &__row:last-child,
+  & > :last-child > &__row:last-child {
+    & > .#{$prefix}table__cell:first-child {
+      border-bottom-left-radius: var(--#{$prefix}table-border-radius);
+    }
+
+    & > .#{$prefix}table__cell:last-child {
+      border-bottom-right-radius: var(--#{$prefix}table-border-radius);
+    }
+  }
+
+  // Add borders to rows
+  & > &__head > &__row > &__cell,
+  &__row:not(:last-child) > &__cell {
+    border-bottom-width: $table-cell-border-width;
+  }
+
+  // Bottom border of table head rows
+  & > &__head > &__row > &__cell {
+    border-bottom: var(--#{$prefix}table-head-border-width) solid
+      var(
+        --#{$prefix}table-head-border-color,
+        var(--#{$prefix}table-cell-border-color)
+      );
+  }
+
+  // Top-border of table foot
+  & > &__foot > &__row:first-child > &__cell {
+    border-top: var(--#{$prefix}table-foot-border-width) solid
+      var(
+        --#{$prefix}table-foot-border-color,
+        var(--#{$prefix}table-cell-border-color)
+      );
+  }
+
+  // Cell
+  &__cell {
+    height: 100%;
+
+    @include declare-var(
+      --#{$prefix}table-cell-padding-y,
+      $table-cell-padding-y
+    );
+    @include declare-var(
+      --#{$prefix}table-cell-padding-x,
+      $table-cell-padding-x
+    );
+    padding: var(--#{$prefix}table-cell-padding-y)
+      var(--#{$prefix}table-cell-padding-x);
+
+    text-align: var(--#{$prefix}table-cell-align, left);
+    font-weight: var(--#{$prefix}table-cell-font-weight);
+    text-transform: var(--#{$prefix}table-cell-text-transform);
+
+    @include declare-var(
+      --#{$prefix}table-cell-border-color,
+      $table-cell-border-color
+    );
+    border: 0 var(--#{$prefix}table-cell-border-style, solid)
+      var(--#{$prefix}table-cell-border-color);
+    background-color: var(
+      --#{$prefix}table-cell-background-color,
+      $table-cell-background-color
+    );
+    color: var(--#{$prefix}table-cell-color);
+
+    @include accessible-transition((color, background-color));
+
+    &[data-variant="data"][data-framed]:empty {
+      background-image: $table-cell-empty-background-image !important;
+      background-size: $table-cell-empty-background-size !important;
+    }
+
+    // Framed styles
+    &[data-framed] {
+      .#{$prefix}table__head &:not([data-left-most-column]):not(:first-child),
+      .#{$prefix}table > .#{$prefix}table__row > &:not(:first-child),
+      .#{$prefix}table
+        > .#{$prefix}table__body
+        > .#{$prefix}table__row
+        > &:not(:first-child) {
+        border-left-width: $table-cell-framed-border-width;
+      }
+
+      .#{$prefix}table__head &:not([data-right-most-column]),
+      .#{$prefix}table > .#{$prefix}table__row > &:not(:last-child),
+      .#{$prefix}table
+        > .#{$prefix}table__body
+        > .#{$prefix}table__row
+        > &:not(:last-child),
+      .#{$prefix}table
+        > .#{$prefix}table__foot
+        > .#{$prefix}table__row
+        > &:not(:last-child) {
+        border-right-width: $table-cell-framed-border-width;
+      }
+
+      & + & {
+        border-left-width: 0 !important;
+      }
+    }
+
+    &[data-paddingless] {
+      padding: 0;
+    }
+
+    // Sticky styles
+    &[data-sticky] {
+      position: sticky;
+      z-index: $table-cell-stuck-z-index;
+
+      &[data-stuck]::before {
+        content: "";
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        width: $table-cell-stuck-shadow-size;
+        height: calc(100% + $table-cell-border-width);
+      }
+    }
+
+    &[data-sticky="left"] {
+      border-right: 0;
+      left: 0;
+      box-shadow: inset calc($table-cell-border-width * -1) 0 0 0
+        var(--#{$prefix}table-cell-border-color);
+
+      &[data-stuck]::before {
+        right: -$table-cell-stuck-shadow-size;
+        background-image: linear-gradient(
+          90deg,
+          $table-cell-stuck-shadow-color,
+          transparent
+        );
+      }
+    }
+
+    &[data-sticky="right"] {
+      border-left-width: 0;
+      right: 0;
+      box-shadow: calc($table-cell-border-width * -1) 0 0 0
+        var(--#{$prefix}table-cell-border-color);
+
+      &[data-stuck]::before {
+        left: -$table-cell-stuck-shadow-size;
+        background-image: linear-gradient(
+          270deg,
+          $table-cell-stuck-shadow-color,
+          transparent
+        );
+      }
+    }
+  }
+
+  // Vertically align head cells
+  &__head &__cell {
+    vertical-align: $table-head-cell-vertical-align;
+  }
+
+  // Table head/foot sticky style
+  &__head,
+  &__foot {
+    &[data-sticky] {
+      position: sticky;
+      z-index: $table-head-foot-stuck-z-index;
+    }
+
+    &[data-stuck]::before {
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      width: 100%;
+      height: $table-head-foot-stuck-shadow-size;
+    }
+  }
+
+  &__head {
+    &[data-sticky] {
+      top: 0;
+    }
+
+    &[data-stuck]::before {
+      bottom: -$table-head-foot-stuck-shadow-size;
+      background-image: linear-gradient(
+        180deg,
+        $table-head-foot-stuck-shadow-color,
+        transparent
+      );
+    }
+  }
+
+  &__foot {
+    &[data-sticky] {
+      bottom: 0;
+    }
+
+    &[data-stuck]::before {
+      top: -$table-head-foot-stuck-shadow-size;
+      background-image: linear-gradient(
+        0,
+        $table-head-foot-stuck-shadow-color,
+        transparent
+      );
+    }
+  }
+
+  &__column-label,
+  &__column-sort-button {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  // Column sort button
+  &__column-sort-button {
+    padding: $table-column-sort-button-padding-y
+      $table-column-sort-button-padding-x;
+    margin: calc($table-column-sort-button-padding-y * -1)
+      calc($table-column-sort-button-padding-x * -1);
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    text-transform: inherit;
+    text-align: inherit;
+    color: inherit !important;
+
+    &[data-align="right"] {
+      padding: $table-column-sort-button-padding-y
+        $table-column-sort-button-padding-x;
+      margin: calc($table-column-sort-button-padding-y * -1)
+        calc($table-column-sort-button-padding-x * -1);
+
+      .#{$prefix}table__column-icon-container {
+        order: -1;
+        margin: 0
+          calc(
+            $table-column-sort-button-icon-margin-x-offset +
+              $table-column-sort-button-icon-margin-x
+          )
+          0 $table-column-sort-button-icon-margin-x-offset;
+      }
+    }
+  }
+
+  &__column-icon-container {
+    display: block;
+    flex-shrink: 0;
+    height: $table-column-sort-button-icon-height;
+    width: $table-column-sort-button-icon-width;
+    margin: 0 $table-column-sort-button-icon-margin-x-offset 0
+      calc(
+        $table-column-sort-button-icon-margin-x-offset +
+          $table-column-sort-button-icon-margin-x
+      );
+  }
+
+  &__column-icon {
+    &[data-state="inactive"],
+    &[data-state="next-active"] {
+      opacity: $table-column-sort-button-icon-inactive-opacity;
+    }
+
+    @include accessible-transition();
+  }
+
+  // Helper button
+  &__column-helper-button {
+    display: inline-flex;
+    min-width: auto;
+    min-height: auto;
+    vertical-align: middle;
+
+    margin-top: calc($table-column-helper-button-padding * -1) !important;
+    margin-bottom: calc($table-column-helper-button-padding * -1) !important;
+    padding: $table-column-helper-button-padding;
+
+    font-size: $table-column-helper-button-font-size;
+    color: maybe-important($table-column-helper-button-color);
+  }
+
+  &__column-helper-popover {
+    max-width: min(
+      $table-column-helper-popover-max-width,
+      var(--radix-popover-content-available-width)
+    );
+    max-height: min(
+      $table-column-helper-popover-max-height,
+      var(--radix-popover-content-available-height)
+    );
+    padding: $table-column-helper-popover-padding-y
+      $table-column-helper-popover-padding-x;
+  }
+}