@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

package/src/Table/Table.module.scss

@@ -4,308 +4,306 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/color';
 
-@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;
-  }
-
-  @mixin anchor-reset-pseudo-states {
-    &:hover,
-    &:active,
-    &:focus {
-      text-decoration: none;
-    }
-  }
+// Taken from design-tokens/sass/shadow
+// we need control of the x and y offset in this component
+$box-shadow-color-sm: rgba(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;
+@mixin anchor-reset-pseudo-states {
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
   }
+}
 
-  .container {
-    width: 100%;
-    margin-bottom: $spacing-sm;
-  }
+// 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;
+}
 
-  .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;
-  }
+.container {
+  width: 100%;
+  margin-bottom: $spacing-sm;
+}
 
-  .headerRowCellNoWrap {
-    .headerRowCellLabel {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
+.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;
+}
 
-  .headerRowCellAlignCenter {
-    justify-content: center;
-    text-align: center;
+.headerRowCellNoWrap {
+  .headerRowCellLabel {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
+}
 
-  .headerRowCellAlignEnd {
-    justify-content: flex-end;
-    text-align: end;
-  }
+.headerRowCellAlignCenter {
+  justify-content: center;
+  text-align: center;
+}
 
-  .headerRowCellCheckbox {
-    margin-inline-end: 10px;
-  }
+.headerRowCellAlignEnd {
+  justify-content: flex-end;
+  text-align: end;
+}
 
-  // 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%;
-  }
+.headerRowCellCheckbox {
+  margin-inline-end: 10px;
+}
 
-  .headerRowCell.headerRowCellNoWrap .headerRowCellContent {
-    max-width: 100%;
-  }
+// 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%;
+}
 
-  .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;
-      }
-    }
-  }
+.headerRowCell.headerRowCellNoWrap .headerRowCellContent {
+  max-width: 100%;
+}
 
-  .headerRowCellButtonReversed {
-    color: $color-white;
+.headerRowCellButton {
+  @include button-reset;
+  @include anchor-reset;
 
-    &:focus-visible::after {
-      border-color: $color-blue-100;
-    }
-  }
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  // Ensures that the 100% doesn't go outside of the `headerRowCell` width
+  box-sizing: border-box;
 
-  .headerRowCellNoButton {
-    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;
 
-  .headerRowCellLabelAndIcons {
-    display: flex;
-    align-items: center;
-    flex: 1 1 100%;
-    width: 100%;
-  }
+  &:focus-visible {
+    outline: none;
+    position: relative;
 
-  .headerRowCellTooltipIcon {
-    color: $color-blue-500;
-    margin-inline-end: $spacing-xs;
+    &::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;
+    }
   }
+}
 
-  .headerRowCellIcon {
-    color: rgb($color-purple-800-rgb, 0.7);
-    height: 20px;
-
-    .headerRowCellActive & {
-      color: $color-purple-800;
-    }
+.headerRowCellButtonReversed {
+  color: $color-white;
 
-    .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 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;
-    }
+.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;
-
-      &::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;
-      }
-    }
+.headerRowCellIcon {
+  color: rgba($color-purple-800-rgb, 0.7);
+  height: 20px;
 
-    &.well {
-      margin-top: $spacing-sm;
-    }
+  .headerRowCellActive & {
+    color: $color-purple-800;
   }
 
-  // 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;
+  .headerRowCellButtonReversed & {
+    color: $color-white;
   }
+}
 
-  .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;
+.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 rgba(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;
   }
 
-  .row {
-    display: flex;
+  &:last-child {
+    border-bottom-left-radius: $border-solid-border-radius;
+    border-bottom-right-radius: $border-solid-border-radius;
   }
 
-  .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;
+  &:hover {
+    will-change: box-shadow, border-color, margin, padding, width;
   }
 
-  .popout {
-    box-shadow: $shadow-large-box-shadow;
+  &: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;
+    }
   }
 
-  .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;
+  &.well {
+    margin-top: $spacing-sm;
   }
+}
 
-  .hasHoverState {
-    width: 100%;
-    text-align: left;
-    cursor: pointer;
+// 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;
+}
 
-    &.expanded {
-      width: calc(100% + #{$spacing-md});
-    }
+.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;
+}
 
-    &:focus,
-    &:hover {
-      background-color: $color-gray-100;
-    }
-  }
+.row {
+  display: flex;
+}
+
+.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;
+}
 
-  .rowCell {
-    // These css properties are required for when the cells are anchor elements
-    @include anchor-reset;
+.popout {
+  box-shadow: $shadow-large-box-shadow;
+}
 
-    min-height: $row-height;
-    padding: 0 $spacing-md;
-    display: flex;
-    align-items: center;
+.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;
+}
 
-    .defaultSpacing & {
-      padding: $spacing-sm $spacing-md;
-    }
+.hasHoverState {
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
 
-    .dataVariant & {
-      min-height: $row-height-data-variant;
-    }
+  &.expanded {
+    width: calc(100% + #{$spacing-md});
   }
 
-  .rowCellAlignCenter {
-    justify-content: center;
-    text-align: center;
+  &:focus,
+  &:hover {
+    background-color: $color-gray-100;
   }
+}
+
+.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;
 
-  .rowCellAlignEnd {
-    justify-content: flex-end;
-    text-align: right;
+  .defaultSpacing & {
+    padding: $spacing-sm $spacing-md;
   }
 
-  .whiteText {
-    color: $color-white;
+  .dataVariant & {
+    min-height: $row-height-data-variant;
   }
 }
+
+.rowCellAlignCenter {
+  justify-content: center;
+  text-align: center;
+}
+
+.rowCellAlignEnd {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.whiteText {
+  color: $color-white;
+}