@sc-360-v2/storefront-cms-library 0.4.79 → 0.4.80

package/dist/language-selector.scss

@@ -687,11 +687,11 @@
               // }
             }
             &.show__panel {
-              animation: slideUp 0.4s ease-in-out;
+              animation: slideUp 0.4s ease-in-out forwards;
             }
 
             &.hide__panel {
-              animation: slideDown 0.4s ease-in-out;
+              animation: slideDown 0.4s ease-in-out forwards;
               pointer-events: none;
             }
           }

package/dist/menu-v2.scss

@@ -15,13 +15,13 @@ $hamburgerActive: "[data-hamburger-active='true']";
 
 $wrapperData: (
   start: (
-    left: prepareMediaVariable(--_ctm-meg-dn-hr-os-cr-ot-x, 0px),
+    left: prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-x, 0px),
   ),
   end: (
-    right: prepareMediaVariable(--_ctm-meg-dn-hr-os-cr-ot-x, 0px),
+    right: prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-x, 0px),
   ),
   center: (
-    left: calc(50% + #{prepareMediaVariable(--_ctm-meg-dn-hr-os-cr-ot-x, 0px)}),
+    left: calc(50% + #{prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-x, 0px)}),
     transform: translateX(-50%),
   ),
 );

package/dist/modal.scss

@@ -439,7 +439,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
 
 .modalV2-main {
   position: fixed;
-  z-index: 9999;
+  z-index: $z-index-modal;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
 
@@ -2059,7 +2059,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
 
       .footer-actions {
         display: flex;
-        gap: 10px;
+        gap: 12px;
 
         .cancel-btn {
           // border-radius: $radius;

package/dist/multi-select-dropdown.scss

@@ -1,282 +1,293 @@
-/* ----------------------------------------------
-   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;
-  }
-}
+/* ----------------------------------------------
+   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 var(--_gray-300);
+  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: var(--_gray-300);
+    box-shadow: 0px 0px 0px 2px var(--_gray-100);
+  }
+}
+
+.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%);
+    transition:
+      padding 0.2s ease,
+      background-color 0.2s ease;
+    .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;
+      }
+    }
+    &:hover {
+      // border: 1px solid var(--_gray-300);
+      background-color: var(--_base-white);
+      padding: 5px 10px;
+      svg path {
+        stroke: var(--_gray-900);
+      }
+    }
+  }
+  &--single {
+    .msd__chip {
+      background-color: transparent;
+      border: none !important;
+      border-radius: 0px !important;
+    }
+  }
+}
+
+.msd__chipLabel {
+  font-size: 12px;
+  color: $msd-chip-text;
+}
+
+.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(--_gray-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-700);
+    }
+  }
+  .is__selected {
+    margin-left: auto;
+  }
+
+  &:not(.is-disabled):hover {
+    // @include BgColorLighter(var(--_thm-cs-at-py), 8%);
+    background-color: var(--_gray-50);
+  }
+  // &.is-active {
+  //   background: #f1f5f9;
+  // }
+  &.is-selected {
+    font-weight: normal;
+    // @include BgColorLighter(var(--_thm-cs-at-py), 8%);
+    background-color: var(--_gray-100);
+    // color: var(--_thm-cs-at-py);
+    color: var(--_gray-900);
+    // background: var(--_thm-cs-at-py);
+    svg path {
+      // stroke: var(--_thm-cs-at-py);
+      stroke: var(--_gray-900);
+    }
+  }
+  &.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 var(--_gray-600);
+  background: #fff;
+  position: relative;
+  top: 2px;
+
+  &.is-checked {
+    border-color: var(--_gray-600);
+    background: var(--_gray-600);
+    &::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;
+  }
+}

package/dist/order-status.scss

@@ -1019,14 +1019,14 @@ $defaultValues: (
         //   var(--_ctm-tab-dn-qk-as-as-im-gp, var(--_ctm-dn-qk-as-as-im-gp))
         // );
 
-        background-color: var(--_ctm-dn-dn-qk-as-bd-cr);
-        margin: var(--_ctm-dn-dn-qk-as-mn);
-        padding: var(--_ctm-dn-dn-qk-as-pg);
-        border-color: var(--_ctm-dn-dn-qk-as-br-cr);
+        background-color: prepareMediaVariable(--_ctm-dn-dn-qk-as-bd-cr);
+        margin: prepareMediaVariable(--_ctm-dn-dn-qk-as-mn);
+        padding: prepareMediaVariable(--_ctm-dn-dn-qk-as-pg);
+        border-color: prepareMediaVariable(--_ctm-dn-dn-qk-as-br-cr);
 
-        border-style: var(--_ctm-dn-dn-qk-as-br-se);
-        border-width: var(--_ctm-dn-dn-qk-as-br-wh);
-        border-radius: var(--_ctm-dn-dn-qk-as-br-rs);
+        border-style: prepareMediaVariable(--_ctm-dn-dn-qk-as-br-se);
+        border-width: prepareMediaVariable(--_ctm-dn-dn-qk-as-br-wh);
+        border-radius: prepareMediaVariable(--_ctm-dn-dn-qk-as-br-rs);
 
         box-shadow: var(
           --_show-shadow,
@@ -1866,6 +1866,27 @@ $defaultValues: (
     }
   }
 
+  .order-summary-breakup {
+    .breakup-item {
+      display: flex;
+      justify-content: space-between;
+      .breakup-label {
+        line-height: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-le-ht);
+        font-family: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-fy);
+        font-size: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se);
+        // font-size: 16px;
+        color: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-cr);
+        font-weight: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-wt);
+        text-decoration: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ue);
+        letter-spacing: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-lr-sg);
+
+        font-style: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se-ic);
+        text-align: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-an);
+        padding: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-pg);
+      }
+    }
+  }
+
   &:hover .os-order-info-wrapper {
     display: block;
   }