@kaizen/components 1.78.0 → 1.79.0

package/src/LikertScaleLegacy/LikertScaleLegacy.module.scss

@@ -2,363 +2,365 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-/* 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;
+@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;
+      }
     }
   }
-}
 
-$block-height: 35px;
-$desktop-rater-width: 220px;
-$desktop-rater-height: 63px;
+  $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;
+  $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;
 
-$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;
+  $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 pop {
-  -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
-}
-
-@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;
+    }
 
-@keyframes pop {
-  0% {
-    opacity: 50%;
-    -webkit-transform: scale(1);
+    &:last-child .likertItemFill,
+    &:last-child .likertItemFill::after {
+      border-start-end-radius: $height;
+      border-end-end-radius: $height;
+    }
   }
 
-  100% {
-    opacity: 0%;
-    -webkit-transform: scale(1.78);
-  }
-}
+  .container {
+    width: $desktop-rater-width;
+    position: relative;
+    box-sizing: border-box;
 
-.container {
-  width: $desktop-rater-width;
-  position: relative;
-  box-sizing: border-box;
+    @include respond-to(iphone) {
+      width: 258px;
+      position: static;
+    }
 
-  @include respond-to(iphone) {
-    width: 258px;
-    position: static;
-  }
+    &.rated .likertItem.unselected .likertItemFill {
+      transition: background 0.1s;
+    }
 
-  &.rated .likertItem.unselected .likertItemFill {
-    transition: background 0.1s;
-  }
+    &.reversed.rated .likertItem.unselected .likertItemFill {
+      background-color: transparent;
+      border-color: rgba($color-white-rgb, 0.65);
+    }
 
-  &.reversed.rated .likertItem.unselected .likertItemFill {
-    background-color: transparent;
-    border-color: rgba($color-white-rgb, 0.65);
-  }
+    :where(.likertItem4, .likertItem5) .check {
+      color: white;
+    }
 
-  :where(.likertItem4, .likertItem5) .check {
-    color: white;
+    :is(.likertItem4.suggested, .likertItem5.suggested) .check {
+      color: white;
+    }
   }
 
-  :is(.likertItem4.suggested, .likertItem5.suggested) .check {
-    color: white;
+  .likertItem:focus,
+  .likertItemFill:focus {
+    outline: none;
   }
-}
 
-.likertItem:focus,
-.likertItemFill:focus {
-  outline: none;
-}
-
-.likertItem:focus-visible .likertItemFill {
-  outline-offset: 1px;
-  outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
-}
+  .likertItem:focus-visible .likertItemFill {
+    outline-offset: 1px;
+    outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
+  }
 
-.reversed .likertItem:focus-visible .likertItemFill {
-  outline-color: $color-blue-300;
-}
+  .reversed .likertItem:focus-visible .likertItemFill {
+    outline-color: $color-blue-300;
+  }
 
-.itemContainer {
-  width: 100%;
-  white-space: nowrap;
-  display: inline-block;
-  height: $block-height + 2px;
-  font-size: 0;
-}
+  .itemContainer {
+    width: 100%;
+    white-space: nowrap;
+    display: inline-block;
+    height: $block-height + 2px;
+    font-size: 0;
+  }
 
-.legend {
-  text-align: center;
-  position: absolute;
-  top: calc(-1 * #{$spacing-md});
-  left: 0;
-  right: 0;
+  .legend {
+    text-align: center;
+    position: absolute;
+    top: calc(-1 * #{$spacing-md});
+    left: 0;
+    right: 0;
 
-  @include respond-to(iphone) {
-    position: initial;
-    top: 0;
+    @include respond-to(iphone) {
+      position: initial;
+      top: 0;
+    }
   }
-}
-
-.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;
 
-  @include fill($block-height);
+  .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;
 
-  &:first-child {
-    margin-inline-start: 0;
-  }
+    @include fill($block-height);
 
-  &:last-child {
-    margin-inline-end: 0;
-  }
+    &:first-child {
+      margin-inline-start: 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%;
-  }
+    &:last-child {
+      margin-inline-end: 0;
+    }
 
-  &::after {
-    right: auto;
-    left: 100%;
-  }
+    // 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%;
+    }
 
-  &.suggested.classicalColorSchema,
-  &.selected.classicalColorSchema {
-    .field1 {
-      background-color: $classical-first;
+    &::after {
+      right: auto;
+      left: 100%;
+    }
 
-      &::after {
+    &.suggested.classicalColorSchema,
+    &.selected.classicalColorSchema {
+      .field1 {
         background-color: $classical-first;
-      }
-    }
 
-    .field2 {
-      background-color: $classical-second;
+        &::after {
+          background-color: $classical-first;
+        }
+      }
 
-      &::after {
+      .field2 {
         background-color: $classical-second;
-      }
-    }
 
-    .field3 {
-      background-color: $classical-third;
+        &::after {
+          background-color: $classical-second;
+        }
+      }
 
-      &::after {
+      .field3 {
         background-color: $classical-third;
-      }
-    }
 
-    .field4 {
-      background-color: $classical-fourth;
+        &::after {
+          background-color: $classical-third;
+        }
+      }
 
-      &::after {
+      .field4 {
         background-color: $classical-fourth;
-      }
-    }
 
-    .field5 {
-      background-color: $classical-fifth;
+        &::after {
+          background-color: $classical-fourth;
+        }
+      }
 
-      &::after {
+      .field5 {
         background-color: $classical-fifth;
+
+        &::after {
+          background-color: $classical-fifth;
+        }
       }
     }
-  }
-
-  &.suggested.blueColorSchema,
-  &.selected.blueColorSchema {
-    .field1 {
-      background-color: $blue-first;
 
-      &::after {
+    &.suggested.blueColorSchema,
+    &.selected.blueColorSchema {
+      .field1 {
         background-color: $blue-first;
-      }
-    }
 
-    .field2 {
-      background-color: $blue-second;
+        &::after {
+          background-color: $blue-first;
+        }
+      }
 
-      &::after {
+      .field2 {
         background-color: $blue-second;
-      }
-    }
 
-    .field3 {
-      background-color: $blue-third;
+        &::after {
+          background-color: $blue-second;
+        }
+      }
 
-      &::after {
+      .field3 {
         background-color: $blue-third;
-      }
-    }
 
-    .field4 {
-      background-color: $blue-fourth;
+        &::after {
+          background-color: $blue-third;
+        }
+      }
 
-      &::after {
+      .field4 {
         background-color: $blue-fourth;
-      }
-    }
 
-    .field5 {
-      background-color: $blue-fifth;
+        &::after {
+          background-color: $blue-fourth;
+        }
+      }
 
-      &::after {
+      .field5 {
         background-color: $blue-fifth;
+
+        &::after {
+          background-color: $blue-fifth;
+        }
       }
     }
   }
-}
-
-.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 {
+  .likertItemFill {
     transition:
-      background 0s,
-      border-color 0s;
-  }
+      background 0.1s,
+      border-color 0.1s;
+    height: $block-height;
+    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
 
-  &::after {
-    content: ' ';
-    display: block;
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-  }
+    &:hover {
+      transition:
+        background 0s,
+        border-color 0s;
+    }
+
+    &::after {
+      content: ' ';
+      display: block;
+      height: 100%;
+      width: 100%;
+      pointer-events: none;
+    }
 
-  &.pop::after {
-    @include pop;
+    &.pop::after {
+      @include pop;
+    }
   }
-}
 
-.reversed .likertItemFill {
-  border-color: rgba($color-white-rgb, 0.65);
-}
+  .reversed .likertItemFill {
+    border-color: rgba($color-white-rgb, 0.65);
+  }
 
-.check {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -10px 0 0 -10px;
-  color: black;
+  .check {
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -10px 0 0 -10px;
+    color: black;
 
-  .likertItem1 & {
-    margin-left: -9px;
+    .likertItem1 & {
+      margin-left: -9px;
 
-    [dir='rtl'] & {
-      margin-left: -11px;
+      [dir='rtl'] & {
+        margin-left: -11px;
+      }
     }
-  }
 
-  .likertItem5 & {
-    margin-left: -12px;
+    .likertItem5 & {
+      margin-left: -12px;
 
-    [dir='rtl'] & {
-      margin-left: -9px;
+      [dir='rtl'] & {
+        margin-left: -9px;
+      }
     }
   }
-}
-
-.hovered :where(.likertItem4, .likertItem5) .check {
-  color: black;
-}
-
-.hovered.reversed .itemContainer > :not(.suggested.likertItem) .check {
-  color: white;
-}
 
-@media only screen and (max-width: 767px) {
-  $block-height: 48px;
-
-  .container {
-    min-width: 258px;
+  .hovered :where(.likertItem4, .likertItem5) .check {
+    color: black;
   }
 
-  .itemContainer {
-    height: $block-height + 2px;
+  .hovered.reversed .itemContainer > :not(.suggested.likertItem) .check {
+    color: white;
   }
 
-  .likertItem {
-    @include fill($block-height);
-  }
+  @media only screen and (max-width: 767px) {
+    $block-height: 48px;
 
-  .likertItemFill {
-    height: $block-height;
-  }
-}
+    .container {
+      min-width: 258px;
+    }
 
-@media print {
-  .legend {
-    display: none;
+    .itemContainer {
+      height: $block-height + 2px;
+    }
+
+    .likertItem {
+      @include fill($block-height);
+    }
+
+    .likertItemFill {
+      height: $block-height;
+    }
   }
 
-  .container {
-    top: 1em;
-    right: 2em;
-    width: 150px;
+  @media print {
+    .legend {
+      display: none;
+    }
 
-    .likertItem {
-      .likertItemFill {
-        height: 25px;
-        background: white;
-        border: 1px solid #d7d8d8;
-      }
+    .container {
+      top: 1em;
+      right: 2em;
+      width: 150px;
 
-      &:first-child,
-      &:last-child {
+      .likertItem {
         .likertItemFill {
+          height: 25px;
           background: white;
-          border-width: 2px;
+          border: 1px solid #d7d8d8;
+        }
+
+        &:first-child,
+        &:last-child {
+          .likertItemFill {
+            background: white;
+            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 */