@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.50

package/dist/multi-select-dropdown.scss

@@ -1,279 +1,282 @@
-/* ----------------------------------------------
-   File: MultiSelect.scss
-   Place this in the same folder. This file contains styles only.
-------------------------------------------------*/
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-$msd-bg: #fff;
-$msd-border: #dcdfe4;
-$msd-border-focus: #6b9cff;
-$msd-text: #1f2937;
-$msd-muted: #6b7280;
-$msd-chip-bg: #f3f4f6;
-$msd-chip-text: #111827;
-$msd-chip-remove: #9ca3af;
-$msd-chip-remove-hover: #4b5563;
-$msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
-
-.msd {
-  position: relative;
-  color: $msd-text;
-  &--disabled {
-    opacity: 0.6;
-    pointer-events: none;
-    background-color: var(--_gray-100);
-  }
-}
-
-.msd__control {
-  position: relative; // anchor for ellipsis
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  min-height: 40px;
-  border: 1px solid $msd-border;
-  background: var(--_base-white);
-  border-radius: 4px;
-  padding: 6px 8px;
-  cursor: text;
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-
-  &--open {
-    box-shadow: $msd-shadow;
-    border-color: lighten($msd-border, 5%);
-  }
-
-  &:focus-within {
-    border-color: $msd-border-focus;
-    box-shadow: 0 0 0 3px rgba($msd-border-focus, 0.25);
-  }
-}
-
-.msd__chips {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap; // single line only
-  overflow: hidden; // hide overflowed chips
-  white-space: nowrap; // prevent wrapping
-  gap: 6px;
-  min-height: 28px;
-  flex: 1 1 auto;
-  .msd__chip {
-    // ensure chips do not wrap individually
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 5px 8px 5px 8px;
-    background: $msd-chip-bg;
-    border-radius: 999px;
-    line-height: 1;
-    border: 1px solid lighten($msd-border, 6%);
-  }
-  &--single {
-    .msd__chip {
-      background-color: transparent;
-      border: none !important;
-      border-radius: 0px !important;
-    }
-  }
-}
-
-.msd__chipLabel {
-  font-size: 12px;
-  color: $msd-chip-text;
-}
-
-.msd__chipRemove {
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  color: $msd-chip-remove;
-  font-size: 14px;
-  line-height: 1;
-  padding: 0;
-  margin: 0;
-  svg {
-    width: 10px;
-    height: 10px;
-  }
-  &:hover {
-    color: $msd-chip-remove-hover;
-  }
-}
-
-.msd__input {
-  border: 0;
-  outline: 0;
-  flex: 0 0 auto;
-  min-width: 100px; // keep single line
-  max-width: 45%; // avoid pushing actions off-screen
-  font-size: 14px;
-  background: transparent;
-  color: $msd-text;
-  line-height: 19px;
-
-  &::placeholder {
-    color: $msd-muted;
-  }
-}
-.msd__clear {
-  margin-right: 15px;
-  svg {
-    width: 16px;
-    height: 16px;
-  }
-}
-.msd__clear,
-.msd__arrow {
-  width: 26px;
-  // height: 26px;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  font-size: 12px;
-  color: $msd-muted;
-  // padding: 4px 6px;
-  border-radius: 4px;
-  display: flex;
-  // &:hover {
-  //   color: #374151;
-  // }
-}
-
-.msd__ellipsis {
-  position: absolute;
-  right: 30px; // leave room for the arrow
-  top: 5px;
-  // transform: translateY(-50%);
-  pointer-events: none;
-  background: $msd-bg;
-  padding-left: 6px;
-  width: 24px;
-}
-
-.msd__menu {
-  position: absolute;
-  z-index: 20;
-  top: 99%;
-  left: 0;
-  right: 0;
-  background: $msd-bg;
-  border: 1px solid $msd-border;
-  border-radius: 4px;
-  box-shadow: $msd-shadow;
-  overflow: auto;
-  padding: 6px;
-}
-
-.msd__empty {
-  padding: 10px;
-  text-align: center;
-  color: $msd-muted;
-  font-size: 13px;
-}
-
-.msd__menu--up {
-  top: auto;
-  bottom: 100%;
-}
-
-.msd__option {
-  // display: grid;
-  // grid-template-columns: 16px 1fr;
-  // align-items: center;
-  gap: 10px;
-  padding: 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  svg path {
-    stroke: var(--_primary-50);
-  }
-  &__img {
-    border-radius: 4px;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    width: 32px;
-    height: 32px;
-    border: 1px solid var(--_gray-200);
-    overflow: hidden;
-    img {
-      max-height: 100%;
-      max-width: 100%;
-    }
-  }
-  .msd__option__text {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    .msd__option__subtitle {
-      font-size: 12px;
-      color: var(--_gray-500);
-    }
-  }
-  .is__selected {
-    margin-left: auto;
-  }
-
-  &:not(.is-disabled):hover {
-    @include BgColorLighter(var(--_thm-cs-at-py), 8%);
-  }
-  // &.is-active {
-  //   background: #f1f5f9;
-  // }
-  &.is-selected {
-    font-weight: normal;
-    @include BgColorLighter(var(--_thm-cs-at-py), 8%);
-    color: var(--_thm-cs-at-py);
-    // background: var(--_thm-cs-at-py);
-    svg path {
-      stroke: var(--_thm-cs-at-py);
-    }
-  }
-  &.is-disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-  &--selectAll {
-    font-weight: 600;
-  }
-  &:not(:last-child) {
-    margin-bottom: 2px;
-  }
-}
-
-.msd__checkbox {
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  border: 1.5px solid $msd-border;
-  background: #fff;
-  position: relative;
-  top: 2px;
-
-  &.is-checked {
-    border-color: $msd-border-focus;
-    background: $msd-border-focus;
-    &::after {
-      content: "";
-      position: absolute;
-      top: 2px;
-      inset: 0;
-      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 13.296L3.7 9.367l1.414-1.414 2.515 2.515L14.886 3.21l1.414 1.415z"/></svg>')
-        center/12px 12px no-repeat;
-    }
-  }
-
-  &.is-disabled {
-    opacity: 0.6;
-  }
-}
+/* ----------------------------------------------
+   File: MultiSelect.scss
+   Place this in the same folder. This file contains styles only.
+------------------------------------------------*/
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+$msd-bg: #fff;
+$msd-border: #dcdfe4;
+$msd-border-focus: #6b9cff;
+$msd-text: #1f2937;
+$msd-muted: #6b7280;
+$msd-chip-bg: #f3f4f6;
+$msd-chip-text: #111827;
+$msd-chip-remove: #9ca3af;
+$msd-chip-remove-hover: #4b5563;
+$msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+
+.msd {
+  position: relative;
+  color: $msd-text;
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+    background-color: var(--_gray-100);
+  }
+}
+
+.msd__control {
+  position: relative; // anchor for ellipsis
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 40px;
+  border: 1px solid $msd-border;
+  background: var(--_base-white);
+  border-radius: 4px;
+  padding: 6px 8px;
+  cursor: text;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &--open {
+    box-shadow: $msd-shadow;
+    border-color: lighten($msd-border, 5%);
+  }
+
+  &:focus-within {
+    border-color: $msd-border-focus;
+    box-shadow: 0 0 0 3px rgba($msd-border-focus, 0.25);
+  }
+}
+
+.msd__chips {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap; // single line only
+  overflow: hidden; // hide overflowed chips
+  white-space: nowrap; // prevent wrapping
+  gap: 6px;
+  min-height: 28px;
+  flex: 1 1 auto;
+  .msd__chip {
+    // ensure chips do not wrap individually
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 8px 5px 8px;
+    background: $msd-chip-bg;
+    border-radius: 999px;
+    line-height: 1;
+    border: 1px solid lighten($msd-border, 6%);
+    &:hover {
+      border: 1px solid var(--_gray-300);
+    }
+  }
+  &--single {
+    .msd__chip {
+      background-color: transparent;
+      border: none !important;
+      border-radius: 0px !important;
+    }
+  }
+}
+
+.msd__chipLabel {
+  font-size: 12px;
+  color: $msd-chip-text;
+}
+
+.msd__chipRemove {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  color: $msd-chip-remove;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  svg {
+    width: 10px;
+    height: 10px;
+  }
+  &:hover {
+    color: $msd-chip-remove-hover;
+  }
+}
+
+.msd__input {
+  border: 0;
+  outline: 0;
+  flex: 0 0 auto;
+  min-width: 100px; // keep single line
+  max-width: 45%; // avoid pushing actions off-screen
+  font-size: 14px;
+  background: transparent;
+  color: $msd-text;
+  line-height: 19px;
+
+  &::placeholder {
+    color: $msd-muted;
+  }
+}
+.msd__clear {
+  margin-right: 15px;
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+.msd__clear,
+.msd__arrow {
+  width: 26px;
+  // height: 26px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  color: $msd-muted;
+  // padding: 4px 6px;
+  border-radius: 4px;
+  display: flex;
+  // &:hover {
+  //   color: #374151;
+  // }
+}
+
+.msd__ellipsis {
+  position: absolute;
+  right: 30px; // leave room for the arrow
+  top: 5px;
+  // transform: translateY(-50%);
+  pointer-events: none;
+  background: $msd-bg;
+  padding-left: 6px;
+  width: 24px;
+}
+
+.msd__menu {
+  position: absolute;
+  z-index: 20;
+  top: 99%;
+  left: 0;
+  right: 0;
+  background: $msd-bg;
+  border: 1px solid $msd-border;
+  border-radius: 4px;
+  box-shadow: $msd-shadow;
+  overflow: auto;
+  padding: 6px;
+}
+
+.msd__empty {
+  padding: 10px;
+  text-align: center;
+  color: $msd-muted;
+  font-size: 13px;
+}
+
+.msd__menu--up {
+  top: auto;
+  bottom: 100%;
+}
+
+.msd__option {
+  // display: grid;
+  // grid-template-columns: 16px 1fr;
+  // align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  svg path {
+    stroke: var(--_primary-50);
+  }
+  &__img {
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--_gray-200);
+    overflow: hidden;
+    img {
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+  .msd__option__text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    .msd__option__subtitle {
+      font-size: 12px;
+      color: var(--_gray-500);
+    }
+  }
+  .is__selected {
+    margin-left: auto;
+  }
+
+  &:not(.is-disabled):hover {
+    @include BgColorLighter(var(--_thm-cs-at-py), 8%);
+  }
+  // &.is-active {
+  //   background: #f1f5f9;
+  // }
+  &.is-selected {
+    font-weight: normal;
+    @include BgColorLighter(var(--_thm-cs-at-py), 8%);
+    color: var(--_thm-cs-at-py);
+    // background: var(--_thm-cs-at-py);
+    svg path {
+      stroke: var(--_thm-cs-at-py);
+    }
+  }
+  &.is-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  &--selectAll {
+    font-weight: 600;
+  }
+  &:not(:last-child) {
+    margin-bottom: 2px;
+  }
+}
+
+.msd__checkbox {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1.5px solid $msd-border;
+  background: #fff;
+  position: relative;
+  top: 2px;
+
+  &.is-checked {
+    border-color: $msd-border-focus;
+    background: $msd-border-focus;
+    &::after {
+      content: "";
+      position: absolute;
+      top: 2px;
+      inset: 0;
+      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 13.296L3.7 9.367l1.414-1.414 2.515 2.515L14.886 3.21l1.414 1.415z"/></svg>')
+        center/12px 12px no-repeat;
+    }
+  }
+
+  &.is-disabled {
+    opacity: 0.6;
+  }
+}