@sc-360-v2/storefront-cms-library 0.4.27 → 0.4.29

package/dist/filters.scss

@@ -87,7 +87,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         --_ctm-mob-dn-fs-wt-br-rs,
         var(--_ctm-tab-dn-fs-wt-br-rs, var(--_ctm-dn-fs-wt-br-rs))
       );
-      @mixin flex($justifyItems: flex-start, $alignItems: flex-start) {
+      @mixin flex($justifyItems: flex-start, $alignItems: center) {
         display: var(--_d-flex);
         justify-content: $justifyItems;
         align-items: $alignItems;
@@ -108,9 +108,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           &.divider_filter {
             border-bottom: 1px solid var(--_gray-300);
           }
+          &:last-child {
+            border-bottom: none !important;
+          }
           .filter__Header {
             display: flex;
             justify-content: space-between;
+            align-items: center;
             gap: 12px;
 
             h2 {
@@ -313,8 +317,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               // }
               .selected_item {
                 display: flex;
-                gap: 8px;
-                border: 1px solid var(--_gray-200);
+                gap: 6px;
+                border: 1px solid var(--_thm-cs-be-se-3);
                 border-radius: 30px;
                 padding: 6px 12px;
                 align-items: center;
@@ -650,13 +654,45 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   height: 16px;
                 }
               }
+              .rotate_0 {
+                transform: rotate(0);
+              }
+              .rotate_180 {
+                transform: rotate(180deg);
+              }
             }
             .filter__search {
               display: flex;
               align-items: center;
-              padding: 6px 10px;
-              border: 1px solid var(--_gray-300);
-              border-radius: 6px;
+              // padding: 6px 10px;
+              padding: var(
+                --_sf-hr-sd-im-pg,
+                var(--_ctm-mob-dn-sh-br-pg, var(--_ctm-tab-dn-sh-br-pg, var(--_ctm-dn-sh-br-pg)))
+              );
+              // border: 1px solid var(--_gray-300);
+              border-color: var(
+                --_sf-hr-br-cr,
+                var(
+                  --_ctm-mob-dn-sh-br-br-cr,
+                  var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr))
+                )
+              );
+              border-style: var(
+                --_sf-hr-br-st,
+                var(
+                  --_ctm-mob-dn-sh-br-br-se,
+                  var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se))
+                )
+              );
+              border-width: var(
+                --_sf-hr-br-wh,
+                var(
+                  --_ctm-mob-dn-sh-br-br-wh,
+                  var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh))
+                )
+              );
+              // border-radius: 6px;
+              border-radius: prepareMediaVariable(--_ctm-dn-sh-br-br-rs);
               width: 100%;
 
               button {
@@ -667,13 +703,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 }
               }
               input[type="text"] {
-                padding-inline: 10px;
+                padding-left: 6px;
               }
             }
           }
 
           ul {
-            margin-top: 15px;
+            margin-top: 10px;
             &:not(:last-child) {
               border-bottom: 1px solid var(--_gray-300);
             }
@@ -712,14 +748,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 height: 16px;
                 border-radius: 50%;
                 object-fit: cover;
-                border: 1px solid var(--_gray-300);
+                border: 1px solid var(--_thm-cs-be-se-3);
               }
 
               .color-circle {
                 width: 16px;
                 height: 16px;
                 border-radius: 50%;
-                border: 1px solid var(--_gray-300);
+                border: 1px solid var(--_thm-cs-be-se-3);
               }
 
               a {
@@ -1066,7 +1102,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             .selected_item {
               display: flex;
               gap: 8px;
-              border: 1px solid var(--_gray-200);
+              border: 1px solid var(--_thm-cs-be-se-3);
               border-radius: 30px;
               padding: 6px 12px;
               align-items: center;
@@ -1245,8 +1281,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
       .clear__btn {
         svg {
-          width: 18px;
-          height: 18px;
+          width: 16px;
+          height: 16px;
           &:hover {
             path {
               stroke: var(--_gray-900);
@@ -1273,14 +1309,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           width: 15px;
           height: 15px;
           border-radius: 50%;
-          border: 1px solid var(--_gray-200);
+          border: 1px solid var(--_thm-cs-be-se-3);
           object-fit: "cover";
           display: "block";
         }
         .color {
           width: 15px;
           height: 15px;
-          border: 1px solid var(--_gray-200);
+          border: 1px solid var(--_thm-cs-be-se-3);
           border-radius: 50%;
         }
 
@@ -2059,40 +2095,89 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         height: 5px;
         margin: 16px 0 30px 0px;
         // background-color: var(--_primary-400);
+        // background: linear-gradient(
+        //   to right,
+        //   var(
+        //       --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+        //       var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+        //     )
+        //     0%,
+        //   var(
+        //       --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+        //       var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+        //     )
+        //     var(--left),
+        //   var(
+        //       --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
+        //       var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
+        //     )
+        //     var(--left),
+        //   var(
+        //       --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
+        //       var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
+        //     )
+        //     var(--right),
+        //   var(
+        //       --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+        //       var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+        //     )
+        //     var(--right),
+        //   var(
+        //       --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
+        //       var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr, #ccc))
+        //     )
+        //     100%
+        // );
+
         background: linear-gradient(
           to right,
           var(
-              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
-              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+              --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
+              var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
             )
             0%,
           var(
-              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
-              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+              --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
+              var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
             )
             var(--left),
           var(
-              --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
-              var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
+              --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
+              var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
             )
             var(--left),
           var(
-              --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
-              var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
+              --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
+              var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
             )
             var(--right),
           var(
-              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
-              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
+              --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
+              var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
             )
             var(--right),
           var(
-              --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
-              var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr, #ccc))
+              --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
+              var(
+                --_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr,
+                var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr, #ccc)
+              )
             )
             100%
         );
-        border-radius: 5px;
+        // background-color: var(
+        //   --_sf-hr-bd-cr,
+        //   #{prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr)}
+        // );
+        // border-radius: 5px;
+        border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-rs));
+        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-cr));
+        border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-wh));
+        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-se));
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-cr));
       }
 
       .slider-track {
@@ -2118,13 +2203,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       input[type="range"]::-webkit-slider-thumb {
         height: 20px;
         width: 20px;
-        border-radius: 50%;
-        border: 3px solid #fff;
-        background: var(--_base-white);
+        // border-radius: 50%;
+        // border: 3px solid #fff;
+        border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-rs));
+        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-cr));
+        border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-wh));
+        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-se));
+        background: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-bd-cr));
         pointer-events: auto;
         appearance: none;
         cursor: pointer;
-        box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
+        // box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-cr));
         position: relative;
         z-index: 2; /* Ensure thumbs appear above the track */
       }
@@ -2162,7 +2255,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       input[type="number"] {
         width: 90px;
         padding: 10px;
-        border: 1px solid #ccc;
+        border: 1px solid var(--_thm-cs-be-se-3);
         border-radius: 5px;
         text-align: center;
       }
@@ -2174,7 +2267,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-size: 12px;
         color: #555;
         // background-color: #fff;
-        border: 1px solid #ddd;
+        border: 1px solid var(--_thm-cs-be-se-3);
         border-radius: 5px;
         white-space: nowrap;
         padding-inline: 15px;
@@ -2252,7 +2345,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       .price-range-max-input {
         width: 100%;
         padding: 8px;
-        border: 1px solid #d1d5db;
+        border: 1px solid var(--_thm-cs-be-se-3);
         border-radius: 4px;
         text-align: center;
         font-size: 14px;

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

@@ -1587,6 +1587,14 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           display: flex;
           align-items: center;
           gap: 12px;
+          .bulk-order-pad-header-body {
+            .checkout_btn {
+              padding: 8px 16px;
+              border-radius: 4px;
+              background-color: var(--_thm-cs-at-py);
+              color: var(--_base-white);
+            }
+          }
           .employee_bulk_order_header {
             display: flex;
             justify-self: end;

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"] {

package/dist/profile.scss

@@ -86,7 +86,7 @@
       .collapse__icon {
         width: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
         height: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
-
+        transition: rotate 0.4s ease-in-out;
         svg {
           width: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
           height: prepareMediaVariable(--_ctm-dn-ce-in-in-se);
@@ -103,7 +103,7 @@
       .expand__icon {
         width: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
         height: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
-
+        transition: rotate 0.4s ease-in-out;
         svg {
           width: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
           height: prepareMediaVariable(--_ctm-dn-ed-in-in-se);
@@ -304,7 +304,7 @@
       border-radius: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-rs);
       // padding: 8px 0;
       padding: prepareMediaVariable(--_ctm-dn-dn-is-cr-pg);
-      z-index: 1001;
+      z-index: 100000;
       overflow: hidden;
       &[data-show-items-container-border="true"] {
         border-color: prepareMediaVariable(--_ctm-dn-dn-is-cr-br-cr);

package/dist/repeater.scss

@@ -104,10 +104,15 @@ $rai: "repeater-advertise-item";
           display: var(--_d-grid);
           row-gap: prepareMediaVariable(--_ctm-rep-lt-im-gp-lt);
           grid-template-columns: 100%;
-          grid-template-rows: repeat(
-            auto-fit,
-            minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
-          );
+          // grid-template-rows: repeat(
+          //   auto-fit,
+          //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
+          // );
+          // grid-template-rows: repeat(
+          //   1,
+          //   minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, 1fr)
+          // );
+          grid-auto-rows: minmax(#{prepareMediaVariable(--_ctm-rep-lt-rw-mn-ht-lt)}, auto);
           width: 100%;
 
           & > div {

package/dist/review-cart.scss

@@ -51,11 +51,13 @@
     }
   }
   .shipping_address {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto auto;
     padding: 24px 0;
     border-bottom: 1px solid var(--_gray-200);
+
     .shipping {
-      min-width: 45%;
+      // min-width: 45%;
       margin-right: 16px;
       border-right: 1px solid var(--_gray-200);
       &:last-of-type {
@@ -76,7 +78,7 @@
       }
     }
     .cart_main {
-      width: 10%;
+      // width: 10%;
       display: flex;
       gap: 16px;
       align-items: center;