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

package/src/LikertScaleLegacy/LikertScaleLegacy.module.scss

@@ -2,365 +2,363 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  /* stylelint-disable no-descending-specificity */
-  @mixin respond-to($media) {
-    @if $media == print {
-      @media only print {
-        @content;
-      }
-    } @else if $media == iphone {
-      @media only screen and (max-width: 767px) {
-        @content;
-      }
-    } @else if $media == ipad {
-      @media only screen and (max-width: 959px) {
-        @content;
-      }
+/* stylelint-disable no-descending-specificity */
+@mixin respond-to($media) {
+  @if $media == print {
+    @media only print {
+      @content;
+    }
+  } @else if $media == iphone {
+    @media only screen and (max-width: 767px) {
+      @content;
+    }
+  } @else if $media == ipad {
+    @media only screen and (max-width: 959px) {
+      @content;
     }
   }
+}
 
-  $block-height: 35px;
-  $desktop-rater-width: 220px;
-  $desktop-rater-height: 63px;
-
-  $classical-first: $color-yellow-300;
-  $classical-second: $color-yellow-400;
-  $classical-third: $color-orange-400;
-  $classical-fourth: $color-orange-500;
-  $classical-fifth: $color-red-500;
+$block-height: 35px;
+$desktop-rater-width: 220px;
+$desktop-rater-height: 63px;
 
-  $blue-first: $color-blue-100;
-  $blue-second: $color-blue-200;
-  $blue-third: $color-blue-300;
-  $blue-fourth: $color-blue-400;
-  $blue-fifth: $color-blue-500;
+$classical-first: $color-yellow-300;
+$classical-second: $color-yellow-400;
+$classical-third: $color-orange-400;
+$classical-fourth: $color-orange-500;
+$classical-fifth: $color-red-500;
 
-  @mixin pop {
-    -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
-  }
+$blue-first: $color-blue-100;
+$blue-second: $color-blue-200;
+$blue-third: $color-blue-300;
+$blue-fourth: $color-blue-400;
+$blue-fifth: $color-blue-500;
 
-  @mixin fill($height) {
-    &:first-child .likertItemFill,
-    &:first-child .likertItemFill::after {
-      border-start-start-radius: $height;
-      border-end-start-radius: $height;
-    }
+@mixin pop {
+  -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
+}
 
-    &:last-child .likertItemFill,
-    &:last-child .likertItemFill::after {
-      border-start-end-radius: $height;
-      border-end-end-radius: $height;
-    }
+@mixin fill($height) {
+  &:first-child .likertItemFill,
+  &:first-child .likertItemFill::after {
+    border-start-start-radius: $height;
+    border-end-start-radius: $height;
   }
 
-  .container {
-    width: $desktop-rater-width;
-    position: relative;
-    box-sizing: border-box;
-
-    @include respond-to(iphone) {
-      width: 258px;
-      position: static;
-    }
+  &:last-child .likertItemFill,
+  &:last-child .likertItemFill::after {
+    border-start-end-radius: $height;
+    border-end-end-radius: $height;
+  }
+}
 
-    &.rated .likertItem.unselected .likertItemFill {
-      transition: background 0.1s;
-    }
+@keyframes pop {
+  0% {
+    opacity: 50%;
+    -webkit-transform: scale(1);
+  }
 
-    &.reversed.rated .likertItem.unselected .likertItemFill {
-      background-color: transparent;
-      border-color: rgba($color-white-rgb, 0.65);
-    }
+  100% {
+    opacity: 0%;
+    -webkit-transform: scale(1.78);
+  }
+}
 
-    :where(.likertItem4, .likertItem5) .check {
-      color: white;
-    }
+.container {
+  width: $desktop-rater-width;
+  position: relative;
+  box-sizing: border-box;
 
-    :is(.likertItem4.suggested, .likertItem5.suggested) .check {
-      color: white;
-    }
+  @include respond-to(iphone) {
+    width: 258px;
+    position: static;
   }
 
-  .likertItem:focus,
-  .likertItemFill:focus {
-    outline: none;
+  &.rated .likertItem.unselected .likertItemFill {
+    transition: background 0.1s;
   }
 
-  .likertItem:focus-visible .likertItemFill {
-    outline-offset: 1px;
-    outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
+  &.reversed.rated .likertItem.unselected .likertItemFill {
+    background-color: transparent;
+    border-color: rgba($color-white-rgb, 0.65);
   }
 
-  .reversed .likertItem:focus-visible .likertItemFill {
-    outline-color: $color-blue-300;
+  :where(.likertItem4, .likertItem5) .check {
+    color: white;
   }
 
-  .itemContainer {
-    width: 100%;
-    white-space: nowrap;
-    display: inline-block;
-    height: $block-height + 2px;
-    font-size: 0;
+  :is(.likertItem4.suggested, .likertItem5.suggested) .check {
+    color: white;
   }
+}
 
-  .legend {
-    text-align: center;
-    position: absolute;
-    top: calc(-1 * #{$spacing-md});
-    left: 0;
-    right: 0;
+.likertItem:focus,
+.likertItemFill:focus {
+  outline: none;
+}
 
-    @include respond-to(iphone) {
-      position: initial;
-      top: 0;
-    }
-  }
+.likertItem:focus-visible .likertItemFill {
+  outline-offset: 1px;
+  outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
+}
 
-  .likertItem {
-    margin-inline: 2px;
-    font-size: 1px;
-    line-height: 1;
-    padding: 0;
-    overflow-x: visible;
-    display: inline-block;
-    width: 18.5%; // 5 columns
-    position: relative;
+.reversed .likertItem:focus-visible .likertItemFill {
+  outline-color: $color-blue-300;
+}
 
-    @include fill($block-height);
+.itemContainer {
+  width: 100%;
+  white-space: nowrap;
+  display: inline-block;
+  height: $block-height + 2px;
+  font-size: 0;
+}
 
-    &:first-child {
-      margin-inline-start: 0;
-    }
+.legend {
+  text-align: center;
+  position: absolute;
+  top: calc(-1 * #{$spacing-md});
+  left: 0;
+  right: 0;
 
-    &:last-child {
-      margin-inline-end: 0;
-    }
+  @include respond-to(iphone) {
+    position: initial;
+    top: 0;
+  }
+}
 
-    // Hack to bridge the gaps between items so mouse always hovers on something
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 100%;
-      width: 2px;
-      height: 100%;
-    }
+.likertItem {
+  margin-inline: 2px;
+  font-size: 1px;
+  line-height: 1;
+  padding: 0;
+  overflow-x: visible;
+  display: inline-block;
+  width: 18.5%; // 5 columns
+  position: relative;
 
-    &::after {
-      right: auto;
-      left: 100%;
-    }
+  @include fill($block-height);
 
-    &.suggested.classicalColorSchema,
-    &.selected.classicalColorSchema {
-      .field1 {
-        background-color: $classical-first;
+  &:first-child {
+    margin-inline-start: 0;
+  }
 
-        &::after {
-          background-color: $classical-first;
-        }
-      }
+  &:last-child {
+    margin-inline-end: 0;
+  }
 
-      .field2 {
-        background-color: $classical-second;
+  // Hack to bridge the gaps between items so mouse always hovers on something
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 100%;
+    width: 2px;
+    height: 100%;
+  }
 
-        &::after {
-          background-color: $classical-second;
-        }
-      }
+  &::after {
+    right: auto;
+    left: 100%;
+  }
 
-      .field3 {
-        background-color: $classical-third;
+  &.suggested.classicalColorSchema,
+  &.selected.classicalColorSchema {
+    .field1 {
+      background-color: $classical-first;
 
-        &::after {
-          background-color: $classical-third;
-        }
+      &::after {
+        background-color: $classical-first;
       }
+    }
 
-      .field4 {
-        background-color: $classical-fourth;
+    .field2 {
+      background-color: $classical-second;
 
-        &::after {
-          background-color: $classical-fourth;
-        }
+      &::after {
+        background-color: $classical-second;
       }
+    }
 
-      .field5 {
-        background-color: $classical-fifth;
+    .field3 {
+      background-color: $classical-third;
 
-        &::after {
-          background-color: $classical-fifth;
-        }
+      &::after {
+        background-color: $classical-third;
       }
     }
 
-    &.suggested.blueColorSchema,
-    &.selected.blueColorSchema {
-      .field1 {
-        background-color: $blue-first;
+    .field4 {
+      background-color: $classical-fourth;
 
-        &::after {
-          background-color: $blue-first;
-        }
+      &::after {
+        background-color: $classical-fourth;
       }
+    }
 
-      .field2 {
-        background-color: $blue-second;
+    .field5 {
+      background-color: $classical-fifth;
 
-        &::after {
-          background-color: $blue-second;
-        }
+      &::after {
+        background-color: $classical-fifth;
       }
+    }
+  }
 
-      .field3 {
-        background-color: $blue-third;
+  &.suggested.blueColorSchema,
+  &.selected.blueColorSchema {
+    .field1 {
+      background-color: $blue-first;
 
-        &::after {
-          background-color: $blue-third;
-        }
+      &::after {
+        background-color: $blue-first;
       }
+    }
 
-      .field4 {
-        background-color: $blue-fourth;
+    .field2 {
+      background-color: $blue-second;
 
-        &::after {
-          background-color: $blue-fourth;
-        }
+      &::after {
+        background-color: $blue-second;
       }
+    }
 
-      .field5 {
-        background-color: $blue-fifth;
+    .field3 {
+      background-color: $blue-third;
 
-        &::after {
-          background-color: $blue-fifth;
-        }
+      &::after {
+        background-color: $blue-third;
       }
     }
-  }
 
-  .likertItemFill {
-    transition:
-      background 0.1s,
-      border-color 0.1s;
-    height: $block-height;
-    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+    .field4 {
+      background-color: $blue-fourth;
 
-    &:hover {
-      transition:
-        background 0s,
-        border-color 0s;
+      &::after {
+        background-color: $blue-fourth;
+      }
     }
 
-    &::after {
-      content: ' ';
-      display: block;
-      height: 100%;
-      width: 100%;
-      pointer-events: none;
-    }
+    .field5 {
+      background-color: $blue-fifth;
 
-    &.pop::after {
-      @include pop;
+      &::after {
+        background-color: $blue-fifth;
+      }
     }
   }
+}
 
-  .reversed .likertItemFill {
-    border-color: rgba($color-white-rgb, 0.65);
+.likertItemFill {
+  transition:
+    background 0.1s,
+    border-color 0.1s;
+  height: $block-height;
+  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+
+  &:hover {
+    transition:
+      background 0s,
+      border-color 0s;
   }
 
-  .check {
+  &::after {
+    content: ' ';
     display: block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -10px 0 0 -10px;
-    color: black;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
 
-    .likertItem1 & {
-      margin-left: -9px;
+  &.pop::after {
+    @include pop;
+  }
+}
 
-      [dir='rtl'] & {
-        margin-left: -11px;
-      }
-    }
+.reversed .likertItemFill {
+  border-color: rgba($color-white-rgb, 0.65);
+}
 
-    .likertItem5 & {
-      margin-left: -12px;
+.check {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -10px 0 0 -10px;
+  color: black;
 
-      [dir='rtl'] & {
-        margin-left: -9px;
-      }
+  .likertItem1 & {
+    margin-left: -9px;
+
+    [dir='rtl'] & {
+      margin-left: -11px;
     }
   }
 
-  .hovered :where(.likertItem4, .likertItem5) .check {
-    color: black;
-  }
+  .likertItem5 & {
+    margin-left: -12px;
 
-  .hovered.reversed .itemContainer > :not(.suggested.likertItem) .check {
-    color: white;
+    [dir='rtl'] & {
+      margin-left: -9px;
+    }
   }
+}
 
-  @media only screen and (max-width: 767px) {
-    $block-height: 48px;
+.hovered :where(.likertItem4, .likertItem5) .check {
+  color: black;
+}
 
-    .container {
-      min-width: 258px;
-    }
+.hovered.reversed .itemContainer > :not(.suggested.likertItem) .check {
+  color: white;
+}
 
-    .itemContainer {
-      height: $block-height + 2px;
-    }
+@media only screen and (max-width: 767px) {
+  $block-height: 48px;
 
-    .likertItem {
-      @include fill($block-height);
-    }
+  .container {
+    min-width: 258px;
+  }
 
-    .likertItemFill {
-      height: $block-height;
-    }
+  .itemContainer {
+    height: $block-height + 2px;
   }
 
-  @media print {
-    .legend {
-      display: none;
-    }
+  .likertItem {
+    @include fill($block-height);
+  }
 
-    .container {
-      top: 1em;
-      right: 2em;
-      width: 150px;
+  .likertItemFill {
+    height: $block-height;
+  }
+}
 
-      .likertItem {
+@media print {
+  .legend {
+    display: none;
+  }
+
+  .container {
+    top: 1em;
+    right: 2em;
+    width: 150px;
+
+    .likertItem {
+      .likertItemFill {
+        height: 25px;
+        background: white;
+        border: 1px solid #d7d8d8;
+      }
+
+      &:first-child,
+      &:last-child {
         .likertItemFill {
-          height: 25px;
           background: white;
-          border: 1px solid #d7d8d8;
-        }
-
-        &:first-child,
-        &:last-child {
-          .likertItemFill {
-            background: white;
-            border-width: 2px;
-          }
+          border-width: 2px;
         }
       }
     }
   }
-  /* stylelint-enable no-descending-specificity */
-}
-
-@keyframes pop {
-  0% {
-    opacity: 50%;
-    -webkit-transform: scale(1);
-  }
-
-  100% {
-    opacity: 0%;
-    -webkit-transform: scale(1.78);
-  }
 }
+/* stylelint-enable no-descending-specificity */