@sc-360-v2/storefront-cms-library 0.4.26 → 0.4.28

package/dist/language-selector.scss

@@ -475,10 +475,13 @@
             left: 0;
             width: 100%;
             background-color: #fff;
-            border-radius: 4px;
+            border-radius: prepareMediaVariable(--_ctm-dn-wt-dn-br-rs);
             z-index: var(--_higher-zIndex);
             max-height: 200px;
             overflow-y: auto;
+            border-width: prepareMediaVariable(--_ctm-dn-wt-dn-br-wh);
+            border-style: prepareMediaVariable(--_ctm-dn-wt-dn-br-se);
+            border-color: prepareMediaVariable(--_ctm-dn-wt-dn-br-cr);
             margin-top: var(
               --_ctm-mob-lt-gp-bn-is,
               var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))

package/dist/layouter-pro.scss

@@ -33,6 +33,14 @@ $flexColumnReverse: "cln-rv";
       border-width: prepareMediaVariable(--_ctm-layou-dn-br-wh);
     }
 
+    &[data-show-boxshadow="true"] {
+      box-shadow: var(
+        --_hide-grid-shadow,
+        prepareMediaVariable(--_ctm-layou-dn-sw-ae) prepareMediaVariable(--_ctm-layou-dn-sw-br)
+          prepareMediaVariable(--_ctm-layou-dn-sw-sd) prepareMediaVariable(--_ctm-layou-dn-sw-cr)
+      );
+    }
+
     & > div {
       &.wrapper {
         width: 100%;

package/dist/modal.scss

@@ -2048,40 +2048,50 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         gap: 10px;
 
         .cancel-btn {
-          border-radius: $radius;
+          // border-radius: $radius;
           padding: 10px 14px;
-          font-weight: 500;
-          font-size: $font-size-base;
-          color: var(--_gray-900);
-          cursor: pointer;
-          transition: background 0.2s;
-
-          &:hover {
-            background: var(--_gray-100);
-          }
+          // font-weight: 500;
+          // font-size: $font-size-base;
+          // color: var(--_gray-900);
+          // cursor: pointer;
+          // transition: background 0.2s;
+
+          // &:hover {
+          //   background: var(--_gray-100);
+          // }
         }
 
         .cart-btn {
-          background: $primary;
-          color: $white;
-          border-radius: $radius;
+          // background: $primary;
+          // color: $white;
+          // border-radius: $radius;
           padding: 10px 16px;
-          font-weight: 600;
-          font-size: $font-size-base;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          cursor: pointer;
-          transition: background 0.2s;
-          span {
+          // font-weight: 600;
+          // font-size: $font-size-base;
+          // display: flex;
+          // align-items: center;
+          // gap: 8px;
+          // cursor: pointer;
+          // transition: background 0.2s;
+          // span {
+          //   display: flex;
+          // }
+          // svg path {
+          //   stroke: var(--_base-white);
+          // }
+
+          // &:hover {
+          //   background: $primary-hover;
+          // }
+          & > span {
             display: flex;
+            svg path {
+              stroke: var(--_base-white);
+            }
           }
-          svg path {
-            stroke: var(--_base-white);
-          }
-
-          &:hover {
-            background: $primary-hover;
+          &.disabled {
+            opacity: 0.4;
+            pointer-events: none;
           }
         }
       }

package/dist/multi-select-dropdown.scss

@@ -4,6 +4,7 @@
 ------------------------------------------------*/
 @use "sass:map";
 @use "sass:list";
+@use "./functions.scss" as *;
 
 $msd-bg: #fff;
 $msd-border: #dcdfe4;
@@ -18,17 +19,6 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 
 .msd {
   position: relative;
-  font-family:
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    Segoe UI,
-    Roboto,
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
-    "Apple Color Emoji",
-    "Segoe UI Emoji";
   color: $msd-text;
   &--disabled {
     opacity: 0.6;
@@ -40,11 +30,11 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   position: relative; // anchor for ellipsis
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-height: 42px;
+  gap: 14px;
+  min-height: 40px;
   border: 1px solid $msd-border;
   background: $msd-bg;
-  border-radius: 10px;
+  border-radius: 4px;
   padding: 6px 8px;
   cursor: text;
   transition:
@@ -71,19 +61,25 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   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: 4px 8px;
-  background: $msd-chip-bg;
-  border-radius: 999px;
-  line-height: 1;
-  border: 1px solid lighten($msd-border, 6%);
+  .msd__chip {
+    // ensure chips do not wrap individually
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 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 {
@@ -110,7 +106,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   outline: 0;
   flex: 0 0 auto;
   min-width: 100px; // keep single line
-  max-width: 40%; // avoid pushing actions off-screen
+  max-width: 45%; // avoid pushing actions off-screen
   font-size: 14px;
   background: transparent;
   color: $msd-text;
@@ -132,7 +128,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   font-size: 12px;
   color: $msd-muted;
   padding: 4px 6px;
-  border-radius: 6px;
+  border-radius: 4px;
   &:hover {
     background: #f8fafc;
     color: #374151;
@@ -141,12 +137,13 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 
 .msd__ellipsis {
   position: absolute;
-  right: 30px; // leave room for the arrow
-  top: 50%;
-  transform: translateY(-50%);
+  right: 33px; // leave room for the arrow
+  top: 3px;
+  // transform: translateY(-50%);
   pointer-events: none;
   background: $msd-bg;
   padding-left: 6px;
+  width: 30px;
 }
 
 .msd__menu {
@@ -176,23 +173,34 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }
 
 .msd__option {
-  display: grid;
-  grid-template-columns: 16px 1fr;
-  align-items: center;
+  // display: grid;
+  // grid-template-columns: 16px 1fr;
+  // align-items: center;
   gap: 10px;
-  padding: 8px 10px;
-  border-radius: 8px;
+  padding: 10px;
+  border-radius: 4px;
   cursor: pointer;
   font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  svg path {
+    stroke: var(--_primary-50);
+  }
 
   &:not(.is-disabled):hover {
-    background: #f8fafc;
-  }
-  &.is-active {
-    background: #f1f5f9;
+    @include BgColorLighter(var(--_thm-cs-at-py), 8%);
   }
+  // &.is-active {
+  //   background: #f1f5f9;
+  // }
   &.is-selected {
     font-weight: 600;
+    @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;
@@ -201,6 +209,9 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   &--selectAll {
     font-weight: 600;
   }
+  &:not(:last-child) {
+    margin-bottom: 2px;
+  }
 }
 
 .msd__checkbox {
@@ -210,6 +221,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   border: 1.5px solid $msd-border;
   background: #fff;
   position: relative;
+  top: 2px;
 
   &.is-checked {
     border-color: $msd-border-focus;

package/dist/option-bar.scss

@@ -194,8 +194,8 @@
             var(--_ctm-tab-dn-tb-hr-se-in-c1, var(--_ctm-dn-tb-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-tb-hr-ue,
-            var(--_ctm-tab-dn-tb-hr-ue, var(--_ctm-dn-tb-hr-ue))
+            --_ctm-mob-dn-tb-hr-se-ue,
+            var(--_ctm-tab-dn-tb-hr-se-ue, var(--_ctm-dn-tb-hr-se-ue))
           );
 
           // for pading and width

package/dist/order-status.scss

@@ -1656,7 +1656,7 @@ $defaultValues: (
               --_ctm-mob-dn-pt-wt-pt-pe-tt-an,
               var(--_ctm-tab-dn-pt-wt-pt-pe-tt-an, var(--_ctm-dn-pt-wt-pt-pe-tt-an))
             );
-            margin-left: 12px;
+            // margin-left: 12px;
           }
         }
 
@@ -1664,7 +1664,8 @@ $defaultValues: (
           margin: 32px 16px 16px 0px;
           button {
             padding: 12px 16px;
-            color: var(--_primary-400);
+            // color: var(--_primary-400);
+            color: var(--_thm-cs-tt-ls-as);
             font-weight: 600;
             border-radius: 6px;
             &:hover {
@@ -1678,20 +1679,23 @@ $defaultValues: (
       .order-attributes {
         border-top: 1px solid #eaecf0;
         padding-top: 24px;
-
-        h4 {
-          font-size: 14px;
-          font-weight: 400;
-          color: var(--_gray-500);
-          line-height: 20px;
+        .order_attribute_text {
+          font-weight: 700;
         }
 
-        p {
-          font-size: 14px;
-          font-weight: 600;
-          line-height: 20px;
-          color: var(--_gray-900);
-        }
+        // h4 {
+        //   font-size: 14px;
+        //   font-weight: 400;
+        //   color: var(--_gray-500);
+        //   line-height: 20px;
+        // }
+
+        // p {
+        //   font-size: 14px;
+        //   font-weight: 600;
+        //   line-height: 20px;
+        //   color: var(--_gray-900);
+        // }
       }
 
       /* ───────── Responsive ───────── */

package/dist/product-actions.scss

@@ -189,8 +189,8 @@
             var(--_ctm-tab-dn-ad-to-ct-hr-se-in-c1, var(--_ctm-dn-ad-to-ct-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-ad-to-ct-hr-ue,
-            var(--_ctm-tab-dn-ad-to-ct-hr-ue, var(--_ctm-dn-ad-to-ct-hr-ue))
+            --_ctm-mob-dn-ad-to-ct-hr-se-ue,
+            var(--_ctm-tab-dn-ad-to-ct-hr-se-ue, var(--_ctm-dn-ad-to-ct-hr-se-ue))
           );
 
           // for pading and width
@@ -288,7 +288,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -408,8 +408,8 @@
             var(--_ctm-tab-dn-by-nw-hr-se-in-c1, var(--_ctm-dn-by-nw-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-by-nw-hr-ue,
-            var(--_ctm-tab-dn-by-nw-hr-ue, var(--_ctm-dn-by-nw-hr-ue))
+            --_ctm-mob-dn-by-nw-hr-se-ue,
+            var(--_ctm-tab-dn-by-nw-hr-se-ue, var(--_ctm-dn-by-nw-hr-se-ue))
           );
 
           // for pading and width
@@ -508,7 +508,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -628,8 +628,8 @@
             var(--_ctm-tab-dn-wt-hr-se-in-c1, var(--_ctm-dn-wt-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-wt-hr-ue,
-            var(--_ctm-tab-dn-wt-hr-ue, var(--_ctm-dn-wt-hr-ue))
+            --_ctm-mob-dn-wt-hr-se-ue,
+            var(--_ctm-tab-dn-wt-hr-se-ue, var(--_ctm-dn-wt-hr-se-ue))
           );
 
           // for pading and width
@@ -725,7 +725,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -844,8 +844,8 @@
             var(--_ctm-tab-dn-ce-hr-se-in-c1, var(--_ctm-dn-ce-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-ce-hr-ue,
-            var(--_ctm-tab-dn-ce-hr-ue, var(--_ctm-dn-ce-hr-ue))
+            --_ctm-mob-dn-ce-hr-se-ue,
+            var(--_ctm-tab-dn-ce-hr-se-ue, var(--_ctm-dn-ce-hr-se-ue))
           );
 
           // for pading and width
@@ -941,7 +941,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1060,8 +1060,8 @@
             var(--_ctm-tab-dn-ad-to-qe-hr-se-in-c1, var(--_ctm-dn-ad-to-qe-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-ad-to-qe-hr-ue,
-            var(--_ctm-tab-dn-ad-to-qe-hr-ue, var(--_ctm-dn-ad-to-qe-hr-ue))
+            --_ctm-mob-dn-ad-to-qe-hr-se-ue,
+            var(--_ctm-tab-dn-ad-to-qe-hr-se-ue, var(--_ctm-dn-ad-to-qe-hr-se-ue))
           );
 
           // for pading and width
@@ -1160,7 +1160,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1279,8 +1279,8 @@
             var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-c1, var(--_ctm-dn-ad-to-or-te-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-ad-to-or-te-hr-ue,
-            var(--_ctm-tab-dn-ad-to-or-te-hr-ue, var(--_ctm-dn-ad-to-or-te-hr-ue))
+            --_ctm-mob-dn-ad-to-or-te-hr-se-ue,
+            var(--_ctm-tab-dn-ad-to-or-te-hr-se-ue, var(--_ctm-dn-ad-to-or-te-hr-se-ue))
           );
 
           // for pading and width
@@ -1394,7 +1394,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1512,8 +1512,8 @@
             var(--_ctm-tab-dn-ny-me-hr-se-in-c1, var(--_ctm-dn-ny-me-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-ny-me-hr-ue,
-            var(--_ctm-tab-dn-ny-me-hr-ue, var(--_ctm-dn-ny-me-hr-ue))
+            --_ctm-mob-dn-ny-me-hr-se-ue,
+            var(--_ctm-tab-dn-ny-me-hr-se-ue, var(--_ctm-dn-ny-me-hr-se-ue))
           );
 
           // for pading and width
@@ -1609,7 +1609,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1727,8 +1727,8 @@
             var(--_ctm-tab-dn-dd-hr-se-in-c1, var(--_ctm-dn-dd-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-dd-hr-ue,
-            var(--_ctm-tab-dn-dd-hr-ue, var(--_ctm-dn-dd-hr-ue))
+            --_ctm-mob-dn-dd-hr-se-ue,
+            var(--_ctm-tab-dn-dd-hr-se-ue, var(--_ctm-dn-dd-hr-se-ue))
           );
 
           // for pading and width
@@ -1824,7 +1824,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1942,8 +1942,8 @@
             var(--_ctm-tab-dn-me-hr-se-in-c1, var(--_ctm-dn-me-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-me-hr-ue,
-            var(--_ctm-tab-dn-me-hr-ue, var(--_ctm-dn-me-hr-ue))
+            --_ctm-mob-dn-me-hr-se-ue,
+            var(--_ctm-tab-dn-me-hr-se-ue, var(--_ctm-dn-me-hr-se-ue))
           );
 
           // for pading and width
@@ -2039,7 +2039,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {

package/dist/product-image.scss

@@ -1,5 +1,7 @@
 @use "sass:map";
 @use "sass:list";
+@use "./functions.scss";
+
 [data-div-type="element"] {
   &[data-element-type="productImage"] {
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
@@ -301,7 +303,8 @@
             var(--_ctm-tab-dn-gy-wt-se-cr, var(--_ctm-dn-gy-wt-se-cr))
           );
 
-          font-family: var(
+          font-family:
+            var(
               --_ctm-mob-dn-gy-wt-se-ft-fy,
               var(--_ctm-tab-dn-gy-wt-se-ft-fy, var(--_ctm-dn-gy-wt-se-ft-fy))
             ),
@@ -349,7 +352,8 @@
             var(--_ctm-tab-dn-gy-wt-se-cr-dc, var(--_ctm-dn-gy-wt-se-cr-dc))
           );
 
-          font-family: var(
+          font-family:
+            var(
               --_ctm-mob-dn-gy-wt-se-ft-fy-dc,
               var(--_ctm-tab-dn-gy-wt-se-ft-fy-dc, var(--_ctm-dn-gy-wt-se-ft-fy-dc))
             ),
@@ -1127,7 +1131,8 @@
 
         & h3 {
           color: var(--_ctm-mob-dn-im-se-cr, var(--_ctm-tab-dn-im-se-cr, var(--_ctm-dn-im-se-cr)));
-          font-family: var(
+          font-family:
+            var(
               --_ctm-mob-dn-im-se-ft-fy,
               var(--_ctm-tab-dn-im-se-ft-fy, var(--_ctm-dn-im-se-ft-fy))
             ),
@@ -1167,7 +1172,8 @@
             --_ctm-mob-dn-im-se-cr-dc,
             var(--_ctm-tab-dn-im-se-cr-dc, var(--_ctm-dn-im-se-cr-dc))
           );
-          font-family: var(
+          font-family:
+            var(
               --_ctm-mob-dn-im-se-ft-fy-dc,
               var(--_ctm-tab-dn-im-se-ft-fy-dc, var(--_ctm-dn-im-se-ft-fy-dc))
             ),
@@ -1312,6 +1318,10 @@
       img {
         width: 100%;
         height: 100%;
+        border-radius: var(
+          --_ctm-mob-dn-im-se-br-rs,
+          var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
+        );
         //   object-fit: cover;
 
         // object-fit: var(--_ctm-dn-im-se-ot-ft, var(--_tst-dn-im-se-ot-ft));

package/dist/product-options.scss

@@ -307,6 +307,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        transition: width 0.3s ease;
         // border: 1px solid gray;
 
         &[data-display-style="Swatch"] {