@kaizen/components 1.4.22-canary.5 → 1.4.23

package/dist/iife/Input.module-FBWZRX37.scss

@@ -0,0 +1,336 @@
+@import "~@kaizen/design-tokens/sass/border";
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/component-library/styles/mixins/forms";
+@import "../../variables";
+@import "../mixins";
+
+$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;
+  }
+
+  &:focus-within {
+    z-index: 3;
+  }
+}
+
+.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: 1;
+  }
+
+  &:focus:not([disabled]),
+  &:hover:focus:not([disabled]) {
+    @include form-input-placeholder {
+      opacity: 0;
+    }
+  }
+
+  &.disabled {
+    &:not(.reversed) {
+      background: $input-disabled-background;
+    }
+
+    @include form-input-placeholder {
+      color: rgba($color-purple-800-rgb, $input-disabled-opacity);
+    }
+  }
+}
+
+.input:focus + .focusRing {
+  $focus-ring-offset: 3px;
+  position: absolute;
+  background: transparent;
+  border-radius: $border-focus-ring-border-radius;
+  border-width: $border-focus-ring-border-width;
+  border-style: $border-focus-ring-border-style;
+  border-color: transparent;
+  top: -$focus-ring-offset;
+  left: -$focus-ring-offset;
+  right: -$focus-ring-offset;
+  bottom: -$focus-ring-offset;
+  pointer-events: none;
+}
+
+///////////////////////////////////////////////////
+// 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;
+    right: auto;
+    left: $spacing-sm;
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      right: $spacing-sm;
+      left: auto;
+    }
+  }
+
+  &.withDisabled {
+    .startIconAdornment {
+      opacity: $input-disabled-opacity;
+    }
+  }
+
+  .input {
+    padding-right: $input-base-padding-horizontal;
+    padding-left: $input-with-icon-padding;
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      padding-right: $input-with-icon-padding;
+      padding-left: $input-base-padding-horizontal;
+    }
+  }
+}
+
+.withEndIconAdornment {
+  .endIconAdornment {
+    @include vertically-center-icon;
+    right: $spacing-sm;
+    left: auto;
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      right: auto;
+      left: $spacing-sm;
+    }
+  }
+
+  &.isDisabled {
+    .endIconAdornment {
+      opacity: $input-disabled-opacity;
+    }
+  }
+
+  .input {
+    padding-right: $input-with-icon-padding;
+    padding-left: $input-base-padding-horizontal;
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      padding-right: $input-base-padding-horizontal;
+      padding-left: $input-with-icon-padding;
+    }
+  }
+}
+
+.withStartIconAdornment.withEndIconAdornment {
+  .input {
+    padding-right: $input-with-icon-padding;
+    padding-left: $input-with-icon-padding;
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      padding-right: $input-with-icon-padding;
+      padding-left: $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: 0.5;
+  }
+
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  &.withDisabled {
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    .startIconAdornment {
+      opacity: 0.3;
+    }
+  }
+
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  &:hover:not(.withDisabled),
+  &:focus-within:not(.withDisabled) {
+    .startIconAdornment {
+      opacity: 0.7;
+    }
+  }
+}
+
+// Reversed
+.withStartIconAdornment.withReversed {
+  .startIconAdornment {
+    color: $color-white;
+    opacity: 1;
+  }
+
+  &.withDisabled {
+    .startIconAdornment {
+      opacity: 0.3;
+    }
+  }
+
+  &:hover:not(.withDisabled),
+  &:focus-within:not(.withDisabled) {
+    .startIconAdornment {
+      opacity: 1;
+    }
+  }
+}
+///////////////////////////////////////////////////
+// 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;
+  }
+
+  @include form-input-focus-state {
+    background-color: $color-gray-200;
+  }
+
+  &:focus + .focusRing {
+    border-color: $color-blue-500;
+  }
+
+  &.disabled {
+    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;
+    }
+  }
+
+  &:not(.error):not(.caution) {
+    border-color: $color-gray-500;
+
+    &:disabled {
+      border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
+    }
+
+    @include form-input-focus-state {
+      border-color: $color-gray-600;
+    }
+  }
+
+  &.error {
+    border-color: $color-red-500;
+
+    &.disabled {
+      border-color: rgba($color-red-500-rgb, $input-disabled-opacity);
+    }
+  }
+
+  &.caution {
+    border-color: $color-yellow-600;
+
+    &.disabled {
+      border-color: rgba($color-yellow-600-rgb, $input-disabled-opacity);
+    }
+  }
+}
+
+// Reversed (Dark Backgrounds)
+.input.reversed {
+  background: transparent;
+  color: $color-white;
+
+  @include form-input-placeholder {
+    color: $color-white;
+    opacity: $input-placeholder-opacity;
+  }
+
+  @include form-input-focus-state {
+    background: rgba($color-white-rgb, 0.1);
+  }
+
+  &:focus + .focusRing {
+    border-color: $color-blue-300;
+  }
+
+  &:not(.error):not(.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 {
+    background: transparent;
+    color: rgba($color-white-rgb, $input-disabled-opacity);
+
+    @include form-input-placeholder {
+      opacity: $input-disabled-opacity;
+    }
+  }
+
+  &.error {
+    border-color: $color-red-300;
+
+    &.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);
+    }
+  }
+}

package/dist/iife/InputEditModal.module-X3TLJPFO.scss

@@ -0,0 +1,36 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/layout";
+@import "~@kaizen/design-tokens/sass/spacing";
+
+.modal {
+  composes: genericModal from "../Primitives/GenericModal.module.scss";
+  min-width: 300px;
+  max-width: 600px;
+}
+
+.header {
+  color: $color-purple-800;
+  text-align: left;
+
+  &.textAlignRTL {
+    text-align: right;
+  }
+
+  &.padded {
+    padding: $spacing-md $spacing-lg;
+    @media (max-width: $layout-breakpoints-medium) {
+      padding: $spacing-md;
+    }
+  }
+}
+
+.body {
+  background: $color-gray-200;
+
+  &.padded {
+    padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
+    @media (max-width: $layout-breakpoints-medium) {
+      padding: $spacing-md;
+    }
+  }
+}

package/dist/iife/InputRange.module-RGISUI4D.scss

@@ -0,0 +1,181 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/color";
+
+$thumb-color: $color-blue-500;
+$thumb-color-hover: $color-blue-600;
+$thumb-radius: 100%;
+$thumb-border-width: 4px;
+$thumb-border-color: $color-white;
+$thumb-height: 26px;
+$thumb-width: 26px;
+$thumb-height-with-border: $thumb-height + ($thumb-border-width * 2);
+$thumb-width-with-border: $thumb-width + ($thumb-border-width * 2);
+
+// The range
+$track-color: $color-gray-500;
+$track-radius: 4px;
+
+@mixin track {
+  width: auto;
+  height: 0;
+  box-sizing: border-box;
+  border-top: 1px solid $track-color;
+  border-bottom: 2px solid $track-color;
+  border-radius: $track-radius;
+}
+
+@mixin thumb {
+  box-sizing: content-box;
+  width: $thumb-width;
+  height: $thumb-height;
+  border: $thumb-border-width solid $thumb-border-color;
+  border-radius: $thumb-radius;
+  background: $thumb-color;
+
+  &:not(:disabled) {
+    transition: all 0.2s;
+    transition-property: background, height, width;
+
+    &:hover {
+      background: $thumb-color-hover;
+      width: $thumb-height + 6px;
+      height: $thumb-width + 6px;
+    }
+  }
+}
+
+@mixin hiddenThumb {
+  width: 0;
+  height: 0;
+  border: none;
+}
+
+//extra input[type="range"] is required to override materialize.css in performance-ui
+input[type="range"].ratingScaleRange {
+  all: unset;
+  appearance: none;
+  width: 100%;
+  margin: 0; //performance-ui materialize override
+
+  &.disabled {
+    opacity: 0.4;
+  }
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  :global(.js-focus-visible) &:global(.focus-visible) {
+    outline: 2px solid $color-blue-500;
+  }
+
+  &::-webkit-slider-runnable-track {
+    @include track;
+    margin: $spacing-sm 0;
+  }
+
+  &::-moz-range-track {
+    @include track;
+  }
+
+  &::-webkit-slider-thumb {
+    @include thumb;
+    -webkit-appearance: none;
+    margin-top: ($thumb-height-with-border/2) * -1;
+  }
+  &::-moz-range-thumb {
+    @include thumb;
+  }
+
+  &.hideThumb::-webkit-slider-thumb {
+    @include hiddenThumb;
+  }
+  &.hideThumb::-moz-range-thumb {
+    @include hiddenThumb;
+  }
+
+  &::-ms-track {
+    @include track;
+    color: transparent;
+    border-width: $thumb-width 0;
+    border-color: transparent;
+    background: transparent;
+  }
+
+  &::-ms-fill-lower {
+    border: none;
+    border-radius: $track-radius * 2;
+    background: $track-color;
+  }
+
+  &::-ms-fill-upper {
+    border: none;
+    border-radius: $track-radius * 2;
+    background: $track-color;
+  }
+
+  &::-ms-thumb {
+    @include thumb;
+  }
+}
+
+.spokes {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 $thumb-width-with-border/2 $spacing-sm;
+}
+
+.spokes.disabled {
+  opacity: 0.4;
+}
+
+.spokeContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1px;
+}
+
+.spoke {
+  width: 0;
+  height: 0;
+  background: $track-color;
+  border: 2px solid $track-color;
+  border-radius: 100%;
+}
+
+.labelsContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.sliderLabels {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.sliderLabels.disabled {
+  opacity: 0.4;
+}
+
+// If the .visually-hidden class is applied to natively focusable elements
+// (such as a, button, input, etc) they must become visible when they receive
+// keyboard focus. Otherwise, a sighted keyboard user would have to try and
+// figure out where their visible focus indicator had gone to.
+.visuallyHidden:not(:focus):not(:active) {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+}