@kaizen/components 1.78.0 → 1.79.0

package/src/Input/Input/Input.module.scss

@@ -4,310 +4,312 @@
 @import '../../../styles/utils/form-variables';
 @import '../../../styles/utils/forms';
 
-$input-height: 48px;
-$input-base-padding-horizontal: $spacing-sm;
-$input-icon-size: 1.25rem; // 20px
-$input-placeholder-opacity: 0.5;
-$input-disabled-background: $color-gray-300;
-$input-disabled-opacity: 0.3;
-$input-disabled-border-alpha: 50%;
-$input-with-icon-padding: calc(#{$input-icon-size} + calc(#{$spacing-md} * 0.75));
-
-.wrapper {
-  position: relative;
-
-  &.hasStatus {
-    z-index: 1;
-  }
-
-  &:hover {
-    z-index: 2;
-  }
+@layer kz-components {
+  $input-height: 48px;
+  $input-base-padding-horizontal: $spacing-sm;
+  $input-icon-size: 1.25rem; // 20px
+  $input-placeholder-opacity: 0.5;
+  $input-disabled-background: $color-gray-300;
+  $input-disabled-opacity: 0.3;
+  $input-disabled-border-alpha: 50%;
+  $input-with-icon-padding: calc(#{$input-icon-size} + calc(#{$spacing-md} * 0.75));
+
+  .wrapper {
+    position: relative;
+
+    &.hasStatus {
+      z-index: 1;
+    }
 
-  &:focus-within {
-    z-index: 3;
-  }
-}
+    &:hover {
+      z-index: 2;
+    }
 
-.input {
-  @include form-input-reset;
-
-  background-color: transparent;
-  background-clip: padding-box;
-  border: $border-solid-border-width $border-solid-border-style transparent;
-  border-radius: $border-solid-border-radius;
-  display: block;
-  font-size: 1rem;
-  line-height: 1.5;
-  padding: 0 $input-base-padding-horizontal;
-  height: $input-height;
-  width: 100%;
-  margin-bottom: 2px;
-
-  @include form-input-placeholder {
-    opacity: 100%;
+    &:focus-within {
+      z-index: 3;
+    }
   }
 
-  &:focus:not([disabled]),
-  &:hover:focus:not([disabled]) {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: 1px;
+  .input {
+    @include form-input-reset;
+
+    background-color: transparent;
+    background-clip: padding-box;
+    border: $border-solid-border-width $border-solid-border-style transparent;
+    border-radius: $border-solid-border-radius;
+    display: block;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0 $input-base-padding-horizontal;
+    height: $input-height;
+    width: 100%;
+    margin-bottom: 2px;
 
     @include form-input-placeholder {
-      opacity: 0%;
+      opacity: 100%;
     }
-  }
 
-  &.disabled {
-    &:not(.reversed) {
-      background: $input-disabled-background;
+    &:focus:not([disabled]),
+    &:hover:focus:not([disabled]) {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: 1px;
+
+      @include form-input-placeholder {
+        opacity: 0%;
+      }
     }
 
-    @include form-input-placeholder {
-      color: rgba($color-purple-800-rgb, $input-disabled-opacity);
+    &.disabled {
+      &:not(.reversed) {
+        background: $input-disabled-background;
+      }
+
+      @include form-input-placeholder {
+        color: rgba($color-purple-800-rgb, $input-disabled-opacity);
+      }
     }
   }
-}
 
-/* stylelint-disable no-descending-specificity */
-///////////////////////////////////////////////////
-// ICON ADORNMENT STYLES
-///////////////////////////////////////////////////
-
-@mixin vertically-center-icon {
-  position: absolute;
-  height: $input-icon-size;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1;
-}
-
-.withStartIconAdornment {
-  .startIconAdornment {
-    @include vertically-center-icon;
+  /* stylelint-disable no-descending-specificity */
+  ///////////////////////////////////////////////////
+  // ICON ADORNMENT STYLES
+  ///////////////////////////////////////////////////
 
-    inset-inline: $spacing-sm auto;
+  @mixin vertically-center-icon {
+    position: absolute;
+    height: $input-icon-size;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
   }
 
-  &.withDisabled {
+  .withStartIconAdornment {
     .startIconAdornment {
-      opacity: $input-disabled-opacity;
-    }
-  }
+      @include vertically-center-icon;
 
-  .input {
-    padding-inline: $input-with-icon-padding $input-base-padding-horizontal;
-  }
-}
+      inset-inline: $spacing-sm auto;
+    }
 
-.withEndIconAdornment {
-  .endIconAdornment {
-    @include vertically-center-icon;
+    &.withDisabled {
+      .startIconAdornment {
+        opacity: $input-disabled-opacity;
+      }
+    }
 
-    inset-inline: auto $spacing-sm;
+    .input {
+      padding-inline: $input-with-icon-padding $input-base-padding-horizontal;
+    }
   }
 
-  &.withDisabled {
+  .withEndIconAdornment {
     .endIconAdornment {
-      opacity: $input-disabled-opacity;
+      @include vertically-center-icon;
+
+      inset-inline: auto $spacing-sm;
     }
-  }
 
-  .input {
-    padding-inline: $input-base-padding-horizontal $input-with-icon-padding;
-  }
-}
+    &.withDisabled {
+      .endIconAdornment {
+        opacity: $input-disabled-opacity;
+      }
+    }
 
-.withStartIconAdornment.withEndIconAdornment {
-  .input {
-    padding-inline: $input-with-icon-padding $input-with-icon-padding;
+    .input {
+      padding-inline: $input-base-padding-horizontal $input-with-icon-padding;
+    }
   }
-}
 
-// Default theme
-/* stylelint-disable-next-line no-duplicate-selectors */
-.withStartIconAdornment {
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  .startIconAdornment {
-    color: $color-purple-800;
-    opacity: 50%;
+  .withStartIconAdornment.withEndIconAdornment {
+    .input {
+      padding-inline: $input-with-icon-padding $input-with-icon-padding;
+    }
   }
 
+  // Default theme
   /* stylelint-disable-next-line no-duplicate-selectors */
-  &.withDisabled {
+  .withStartIconAdornment {
     /* stylelint-disable-next-line no-duplicate-selectors */
     .startIconAdornment {
-      opacity: 30%;
+      color: $color-purple-800;
+      opacity: 50%;
     }
-  }
 
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  &:hover:not(.withDisabled),
-  &:focus-within:not(.withDisabled) {
-    .startIconAdornment {
-      opacity: 70%;
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    &.withDisabled {
+      /* stylelint-disable-next-line no-duplicate-selectors */
+      .startIconAdornment {
+        opacity: 30%;
+      }
     }
-  }
-}
 
-// Reversed
-.withStartIconAdornment.withReversed {
-  .startIconAdornment {
-    color: $color-white;
-    opacity: 100%;
-  }
-
-  &.withDisabled {
-    .startIconAdornment {
-      opacity: 30%;
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    &:hover:not(.withDisabled),
+    &:focus-within:not(.withDisabled) {
+      .startIconAdornment {
+        opacity: 70%;
+      }
     }
   }
 
-  &:hover:not(.withDisabled),
-  &:focus-within:not(.withDisabled) {
+  // Reversed
+  .withStartIconAdornment.withReversed {
     .startIconAdornment {
+      color: $color-white;
       opacity: 100%;
     }
-  }
-}
 
-.withEndIconAdornment.withReversed {
-  .endIconAdornment {
-    color: $color-white;
-    opacity: 100%;
-  }
+    &.withDisabled {
+      .startIconAdornment {
+        opacity: 30%;
+      }
+    }
 
-  &.withDisabled {
-    .endIconAdornment {
-      opacity: 30%;
+    &:hover:not(.withDisabled),
+    &:focus-within:not(.withDisabled) {
+      .startIconAdornment {
+        opacity: 100%;
+      }
     }
   }
 
-  &:hover:not(.withDisabled),
-  &:focus-within:not(.withDisabled) {
+  .withEndIconAdornment.withReversed {
     .endIconAdornment {
+      color: $color-white;
       opacity: 100%;
     }
-  }
-}
 
-///////////////////////////////////////////////////
-// THEMES
-///////////////////////////////////////////////////
-
-// Default
-.input.default {
-  background-color: $color-white;
-  color: $color-purple-800;
-  display: flex;
-  align-items: center;
-
-  @include form-input-placeholder {
-    color: $color-purple-800;
-    opacity: $input-placeholder-opacity;
-  }
+    &.withDisabled {
+      .endIconAdornment {
+        opacity: 30%;
+      }
+    }
 
-  @include form-input-focus-state {
-    background-color: $color-gray-200;
+    &:hover:not(.withDisabled),
+    &:focus-within:not(.withDisabled) {
+      .endIconAdornment {
+        opacity: 100%;
+      }
+    }
   }
 
-  &:focus + .focusRing {
-    border-color: $color-blue-500;
-  }
+  ///////////////////////////////////////////////////
+  // THEMES
+  ///////////////////////////////////////////////////
 
-  &.disabled {
+  // Default
+  .input.default {
     background-color: $color-white;
-    border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
-    color: rgba($color-purple-800-rgb, $input-disabled-opacity);
+    color: $color-purple-800;
+    display: flex;
+    align-items: center;
 
     @include form-input-placeholder {
-      opacity: $input-disabled-opacity;
-    }
-  }
-
-  &:not(.error, .caution) {
-    border-color: $color-gray-500;
-
-    &:disabled {
-      border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
+      color: $color-purple-800;
+      opacity: $input-placeholder-opacity;
     }
 
     @include form-input-focus-state {
-      border-color: $color-gray-600;
+      background-color: $color-gray-200;
     }
-  }
 
-  &.error {
-    border-color: $color-red-500;
+    &:focus + .focusRing {
+      border-color: $color-blue-500;
+    }
 
     &.disabled {
-      border-color: rgba($color-red-500-rgb, $input-disabled-opacity);
+      background-color: $color-white;
+      border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
+      color: rgba($color-purple-800-rgb, $input-disabled-opacity);
+
+      @include form-input-placeholder {
+        opacity: $input-disabled-opacity;
+      }
     }
-  }
 
-  &.caution {
-    border-color: $color-yellow-600;
+    &:not(.error, .caution) {
+      border-color: $color-gray-500;
 
-    &.disabled {
-      border-color: rgba($color-yellow-600-rgb, $input-disabled-opacity);
+      &:disabled {
+        border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
+      }
+
+      @include form-input-focus-state {
+        border-color: $color-gray-600;
+      }
     }
-  }
-}
 
-// Reversed (Dark Backgrounds)
-.input.reversed {
-  background: transparent;
-  color: $color-white;
+    &.error {
+      border-color: $color-red-500;
 
-  @include form-input-placeholder {
-    color: $color-white;
-    opacity: $input-placeholder-opacity;
-  }
+      &.disabled {
+        border-color: rgba($color-red-500-rgb, $input-disabled-opacity);
+      }
+    }
 
-  @include form-input-focus-state {
-    background: rgba($color-white-rgb, 0.1);
-  }
+    &.caution {
+      border-color: $color-yellow-600;
 
-  &:focus {
-    outline-color: var(--color-blue-300);
+      &.disabled {
+        border-color: rgba($color-yellow-600-rgb, $input-disabled-opacity);
+      }
+    }
   }
 
-  &:not(.error, .caution) {
-    border-color: rgba($color-white-rgb, 0.65);
+  // Reversed (Dark Backgrounds)
+  .input.reversed {
+    background: transparent;
+    color: $color-white;
 
-    &:disabled {
-      border-color: rgba($color-white-rgb, $input-disabled-opacity);
+    @include form-input-placeholder {
+      color: $color-white;
+      opacity: $input-placeholder-opacity;
     }
 
     @include form-input-focus-state {
-      border-color: $color-white;
+      background: rgba($color-white-rgb, 0.1);
     }
-  }
 
-  &.disabled {
-    background: transparent;
-    color: rgba($color-white-rgb, $input-disabled-opacity);
-
-    @include form-input-placeholder {
-      opacity: $input-disabled-opacity;
+    &:focus {
+      outline-color: var(--color-blue-300);
     }
-  }
 
-  &.error {
-    border-color: $color-red-300;
+    &:not(.error, .caution) {
+      border-color: rgba($color-white-rgb, 0.65);
+
+      &:disabled {
+        border-color: rgba($color-white-rgb, $input-disabled-opacity);
+      }
+
+      @include form-input-focus-state {
+        border-color: $color-white;
+      }
+    }
 
     &.disabled {
-      border-color: rgba($color-red-300-rgb, $input-disabled-opacity);
+      background: transparent;
+      color: rgba($color-white-rgb, $input-disabled-opacity);
+
+      @include form-input-placeholder {
+        opacity: $input-disabled-opacity;
+      }
     }
-  }
 
-  &.caution {
-    border-color: $color-yellow-400;
+    &.error {
+      border-color: $color-red-300;
 
-    &.disabled {
-      border-color: rgba($color-yellow-400-rgb, $input-disabled-opacity);
+      &.disabled {
+        border-color: rgba($color-red-300-rgb, $input-disabled-opacity);
+      }
+    }
+
+    &.caution {
+      border-color: $color-yellow-400;
+
+      &.disabled {
+        border-color: rgba($color-yellow-400-rgb, $input-disabled-opacity);
+      }
     }
   }
+  /* stylelint-enable no-descending-specificity */
 }
-/* stylelint-enable no-descending-specificity */