@kaizen/components 1.78.1 → 1.79.0

package/src/Table/Table.module.scss

@@ -4,306 +4,308 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/color';
 
-// Taken from design-tokens/sass/shadow
-// we need control of the x and y offset in this component
-$box-shadow-color-sm: rgb(53, 55, 74, 0.09);
-$row-height: 60px;
-$row-height-data-variant: 48px;
-
-@mixin anchor-reset {
-  text-decoration: none;
-  color: $color-purple-800;
-  display: block;
-}
-
-@mixin anchor-reset-pseudo-states {
-  &:hover,
-  &:active,
-  &:focus {
+@layer kz-components {
+  // Taken from design-tokens/sass/shadow
+  // we need control of the x and y offset in this component
+  $box-shadow-color-sm: rgb(53, 55, 74, 0.09);
+  $row-height: 60px;
+  $row-height-data-variant: 48px;
+
+  @mixin anchor-reset {
     text-decoration: none;
+    color: $color-purple-800;
+    display: block;
   }
-}
-
-// Special Table-only button reset
-@mixin button-reset {
-  appearance: none;
-  background: transparent;
-  border: none;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-  transition: none; // override Murmur global styles :(
-  outline: none;
-}
 
-.container {
-  width: 100%;
-  margin-bottom: $spacing-sm;
-}
-
-.headerRowCell {
-  display: flex;
-  align-items: stretch;
-  text-align: start;
-  justify-content: flex-start;
-  // The 8px usually makes the height of the header cell 40px
-  padding: 8px $spacing-md;
-  // This is required as so the tooltip will display directly above the header cell
-  position: relative;
-}
-
-.headerRowCellNoWrap {
-  .headerRowCellLabel {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+  @mixin anchor-reset-pseudo-states {
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: none;
+    }
   }
-}
-
-.headerRowCellAlignCenter {
-  justify-content: center;
-  text-align: center;
-}
-
-.headerRowCellAlignEnd {
-  justify-content: flex-end;
-  text-align: end;
-}
 
-.headerRowCellCheckbox {
-  margin-inline-end: 10px;
-}
-
-// The .headerRowCell wrapper is required to increase the specificity, as so
-// we can override the `Tooltip` component's styling.
-.headerRowCell .headerRowCellTooltip {
-  display: flex;
-  align-items: stretch;
-  max-width: 100%;
-}
-
-.headerRowCell.headerRowCellNoWrap .headerRowCellContent {
-  max-width: 100%;
-}
-
-.headerRowCellButton {
-  @include button-reset;
-  @include anchor-reset;
-
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  // Ensures that the 100% doesn't go outside of the `headerRowCell` width
-  box-sizing: border-box;
+  // Special Table-only button reset
+  @mixin button-reset {
+    appearance: none;
+    background: transparent;
+    border: none;
+    font: inherit;
+    margin: 0;
+    padding: 0;
+    transition: none; // override Murmur global styles :(
+    outline: none;
+  }
 
-  @include anchor-reset-pseudo-states;
+  .container {
+    width: 100%;
+    margin-bottom: $spacing-sm;
+  }
 
-  &:focus-visible {
-    outline: none;
+  .headerRowCell {
+    display: flex;
+    align-items: stretch;
+    text-align: start;
+    justify-content: flex-start;
+    // The 8px usually makes the height of the header cell 40px
+    padding: 8px $spacing-md;
+    // This is required as so the tooltip will display directly above the header cell
     position: relative;
+  }
 
-    &::after {
-      // This offset provide enough gap on reverse for contrast ratios
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: calc(100% + #{$focus-ring-offset});
-      height: calc(100% + #{$focus-ring-offset});
-      content: '';
-      position: absolute;
-      background: transparent;
-      border-color: $color-blue-500;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-radius: $border-focus-ring-border-radius;
+  .headerRowCellNoWrap {
+    .headerRowCellLabel {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
     }
   }
-}
 
-.headerRowCellButtonReversed {
-  color: $color-white;
-
-  &:focus-visible::after {
-    border-color: $color-blue-100;
+  .headerRowCellAlignCenter {
+    justify-content: center;
+    text-align: center;
   }
-}
 
-.headerRowCellNoButton {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-  // Ensures that the 100% doesn't go outside of the `headerRowCell` width
-  box-sizing: border-box;
-}
+  .headerRowCellAlignEnd {
+    justify-content: flex-end;
+    text-align: end;
+  }
 
-.headerRowCellLabelAndIcons {
-  display: flex;
-  align-items: center;
-  flex: 1 1 100%;
-  width: 100%;
-}
+  .headerRowCellCheckbox {
+    margin-inline-end: 10px;
+  }
 
-.headerRowCellTooltipIcon {
-  color: $color-blue-500;
-  margin-inline-end: $spacing-xs;
-}
+  // The .headerRowCell wrapper is required to increase the specificity, as so
+  // we can override the `Tooltip` component's styling.
+  .headerRowCell .headerRowCellTooltip {
+    display: flex;
+    align-items: stretch;
+    max-width: 100%;
+  }
 
-.headerRowCellIcon {
-  color: rgba($color-purple-800-rgb, 0.7);
-  height: 20px;
+  .headerRowCell.headerRowCellNoWrap .headerRowCellContent {
+    max-width: 100%;
+  }
 
-  .headerRowCellActive & {
-    color: $color-purple-800;
+  .headerRowCellButton {
+    @include button-reset;
+    @include anchor-reset;
+
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    // Ensures that the 100% doesn't go outside of the `headerRowCell` width
+    box-sizing: border-box;
+
+    @include anchor-reset-pseudo-states;
+
+    &:focus-visible {
+      outline: none;
+      position: relative;
+
+      &::after {
+        // This offset provide enough gap on reverse for contrast ratios
+        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: calc(100% + #{$focus-ring-offset});
+        height: calc(100% + #{$focus-ring-offset});
+        content: '';
+        position: absolute;
+        background: transparent;
+        border-color: $color-blue-500;
+        border-width: $border-focus-ring-border-width;
+        border-style: $border-focus-ring-border-style;
+        border-radius: $border-focus-ring-border-radius;
+      }
+    }
   }
 
-  .headerRowCellButtonReversed & {
+  .headerRowCellButtonReversed {
     color: $color-white;
+
+    &:focus-visible::after {
+      border-color: $color-blue-100;
+    }
   }
-}
 
-.card {
-  @include button-reset;
-  // These css properties are required for when the rows are anchor elements
-  @include anchor-reset;
-
-  // This is an optical hack to stop the card shadow from overlapping over
-  // the proceeding cards
-  box-shadow: 0 4px 6px rgb(53, 55, 74, 0.04);
-  border: solid 1px rgba($color-purple-700-rgb, 0.1);
-  transition:
-    box-shadow $animation-duration-rapid,
-    border-color $animation-duration-rapid,
-    margin $animation-duration-rapid,
-    padding $animation-duration-rapid,
-    width $animation-duration-rapid;
-  background: $color-white;
-
-  @include anchor-reset-pseudo-states;
-
-  &:not(:first-child) {
-    margin-top: -1px;
+  .headerRowCellNoButton {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    // Ensures that the 100% doesn't go outside of the `headerRowCell` width
+    box-sizing: border-box;
   }
 
-  &:last-child {
-    border-bottom-left-radius: $border-solid-border-radius;
-    border-bottom-right-radius: $border-solid-border-radius;
+  .headerRowCellLabelAndIcons {
+    display: flex;
+    align-items: center;
+    flex: 1 1 100%;
+    width: 100%;
   }
 
-  &:hover {
-    will-change: box-shadow, border-color, margin, padding, width;
+  .headerRowCellTooltipIcon {
+    color: $color-blue-500;
+    margin-inline-end: $spacing-xs;
   }
 
-  &:focus-visible {
-    outline: none;
-    position: relative;
+  .headerRowCellIcon {
+    color: rgb($color-purple-800-rgb, 0.7);
+    height: 20px;
 
-    &::after {
-      // This offset provide enough gap on on reverse for contrast ratios
-      $focus-ring-offset: calc(#{$border-focus-ring-border-width} + 2px);
-
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: calc(100% + #{$focus-ring-offset});
-      height: calc(100% + #{$focus-ring-offset});
-      content: '';
-      position: absolute;
-      background: transparent;
-      border-color: $color-blue-500;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-radius: inherit;
+    .headerRowCellActive & {
+      color: $color-purple-800;
     }
-  }
 
-  &.well {
-    margin-top: $spacing-sm;
+    .headerRowCellButtonReversed & {
+      color: $color-white;
+    }
   }
-}
 
-// target the first child card when there is a heading present
-[role='rowgroup'] + .card {
-  border-top-left-radius: $border-solid-border-radius;
-  border-top-right-radius: $border-solid-border-radius;
-  box-shadow: $shadow-small-box-shadow;
-}
+  .card {
+    @include button-reset;
+    // These css properties are required for when the rows are anchor elements
+    @include anchor-reset;
+
+    // This is an optical hack to stop the card shadow from overlapping over
+    // the proceeding cards
+    box-shadow: 0 4px 6px rgb(53, 55, 74, 0.04);
+    border: solid 1px rgb($color-purple-700-rgb, 0.1);
+    transition:
+      box-shadow $animation-duration-rapid,
+      border-color $animation-duration-rapid,
+      margin $animation-duration-rapid,
+      padding $animation-duration-rapid,
+      width $animation-duration-rapid;
+    background: $color-white;
+
+    @include anchor-reset-pseudo-states;
+
+    &:not(:first-child) {
+      margin-top: -1px;
+    }
 
-.card:first-child {
-  border-top-left-radius: $border-solid-border-radius;
-  border-top-right-radius: $border-solid-border-radius;
-  box-shadow: $shadow-small-box-shadow;
-}
+    &:last-child {
+      border-bottom-left-radius: $border-solid-border-radius;
+      border-bottom-right-radius: $border-solid-border-radius;
+    }
 
-.row {
-  display: flex;
-}
+    &:hover {
+      will-change: box-shadow, border-color, margin, padding, width;
+    }
 
-.well {
-  border-color: $border-borderless-border-color;
-  box-shadow: none;
-  border-radius: $border-solid-border-radius;
-  background-color: $color-gray-300;
-  margin-bottom: $spacing-sm;
-}
+    &:focus-visible {
+      outline: none;
+      position: relative;
+
+      &::after {
+        // This offset provide enough gap on on reverse for contrast ratios
+        $focus-ring-offset: calc(#{$border-focus-ring-border-width} + 2px);
+
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: calc(100% + #{$focus-ring-offset});
+        height: calc(100% + #{$focus-ring-offset});
+        content: '';
+        position: absolute;
+        background: transparent;
+        border-color: $color-blue-500;
+        border-width: $border-focus-ring-border-width;
+        border-style: $border-focus-ring-border-style;
+        border-radius: inherit;
+      }
+    }
 
-.popout {
-  box-shadow: $shadow-large-box-shadow;
-}
+    &.well {
+      margin-top: $spacing-sm;
+    }
+  }
 
-.expanded {
-  position: relative;
-  z-index: 1;
-  margin-left: calc(#{$spacing-sm} * -1);
-  margin-right: calc(#{$spacing-sm} * -1);
-  padding-left: $spacing-sm;
-  padding-right: $spacing-sm;
-}
+  // target the first child card when there is a heading present
+  [role='rowgroup'] + .card {
+    border-top-left-radius: $border-solid-border-radius;
+    border-top-right-radius: $border-solid-border-radius;
+    box-shadow: $shadow-small-box-shadow;
+  }
 
-.hasHoverState {
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
+  .card:first-child {
+    border-top-left-radius: $border-solid-border-radius;
+    border-top-right-radius: $border-solid-border-radius;
+    box-shadow: $shadow-small-box-shadow;
+  }
 
-  &.expanded {
-    width: calc(100% + #{$spacing-md});
+  .row {
+    display: flex;
   }
 
-  &:focus,
-  &:hover {
-    background-color: $color-gray-100;
+  .well {
+    border-color: $border-borderless-border-color;
+    box-shadow: none;
+    border-radius: $border-solid-border-radius;
+    background-color: $color-gray-300;
+    margin-bottom: $spacing-sm;
+  }
+
+  .popout {
+    box-shadow: $shadow-large-box-shadow;
+  }
+
+  .expanded {
+    position: relative;
+    z-index: 1;
+    margin-left: calc(#{$spacing-sm} * -1);
+    margin-right: calc(#{$spacing-sm} * -1);
+    padding-left: $spacing-sm;
+    padding-right: $spacing-sm;
   }
-}
 
-.rowCell {
-  // These css properties are required for when the cells are anchor elements
-  @include anchor-reset;
+  .hasHoverState {
+    width: 100%;
+    text-align: left;
+    cursor: pointer;
 
-  min-height: $row-height;
-  padding: 0 $spacing-md;
-  display: flex;
-  align-items: center;
+    &.expanded {
+      width: calc(100% + #{$spacing-md});
+    }
 
-  .defaultSpacing & {
-    padding: $spacing-sm $spacing-md;
+    &:focus,
+    &:hover {
+      background-color: $color-gray-100;
+    }
   }
 
-  .dataVariant & {
-    min-height: $row-height-data-variant;
+  .rowCell {
+    // These css properties are required for when the cells are anchor elements
+    @include anchor-reset;
+
+    min-height: $row-height;
+    padding: 0 $spacing-md;
+    display: flex;
+    align-items: center;
+
+    .defaultSpacing & {
+      padding: $spacing-sm $spacing-md;
+    }
+
+    .dataVariant & {
+      min-height: $row-height-data-variant;
+    }
   }
-}
 
-.rowCellAlignCenter {
-  justify-content: center;
-  text-align: center;
-}
+  .rowCellAlignCenter {
+    justify-content: center;
+    text-align: center;
+  }
 
-.rowCellAlignEnd {
-  justify-content: flex-end;
-  text-align: right;
-}
+  .rowCellAlignEnd {
+    justify-content: flex-end;
+    text-align: right;
+  }
 
-.whiteText {
-  color: $color-white;
+  .whiteText {
+    color: $color-white;
+  }
 }