@sc-360-v2/storefront-cms-library 0.4.39 → 0.4.41

package/dist/cart-summary.scss

@@ -31,7 +31,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       align-items: center;
       align-self: stretch;
       border-radius: 4px;
-      border: 0.5px solid #d0d5dd;
+      border: 0.5px solid var(--_thm-cs-be-se-3);
       background: #fff;
       // gap: var(--_ctm-lt-im-gp);
       padding: var(--_ctm-lt-pg);
@@ -48,26 +48,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           --_ctm-mob-dn-hr-cr-bd-cr,
           var(--_ctm-tab-dn-hr-cr-bd-cr, var(--_ctm-dn-hr-cr-bd-cr))
         );
-        border-bottom: 0.5px solid #d0d5dd;
-        // border-color: var(
+        // border-bottom: 0.5px solid var(--_thm-cs-be-se-3);
+        border-color: prepareMediaVariable(--_ctm-dn-hr-cr-br-cr);
+        //  var(
         //   --_ctm-mob-dn-hr-cr-br-cr,
         //   var(--_ctm-tab-dn-hr-cr-br-cr, var(--_ctm-dn-hr-cr-br-cr))
         // );
-        // border-style: var(
+        border-style: prepareMediaVariable(--_ctm-dn-hr-cr-br-se);
+        // var(
         //   --_ctm-mob-dn-hr-cr-br-se,
         //   var(--_ctm-tab-dn-hr-cr-br-se, var(--_ctm-dn-hr-cr-br-se))
         // );
-        // border-width: var(
+        border-width: prepareMediaVariable(--_ctm-dn-hr-cr-br-wh);
+        //  var(
         //   --_ctm-mob-dn-hr-cr-br-wh,
         //   var(--_ctm-tab-dn-hr-cr-br-wh, var(--_ctm-dn-hr-cr-br-wh))
         // );
-        // border-bottom: 1px solid
-        //   var(--_ctm-mob-dn-hr-cr-br-wh, var(--_ctm-tab-dn-hr-cr-br-wh, var(--_ctm-dn-hr-cr-br-wh)));
-        // border-radius: var(
-        //   --_ctm-mob-dn-hr-cr-br-rs,
-        //   var(--_ctm-tab-dn-hr-cr-br-rs, var(--_ctm-dn-hr-cr-br-rs))
-        // );
-        padding: var(--_ctm-mob-dn-hr-cr-pg, var(--_ctm-tab-dn-hr-cr-pg, var(--_ctm-dn-hr-cr-pg)));
+        padding: prepareMediaVariable(
+          --_ctm-dn-hr-cr-pg
+        ); // var(--_ctm-mob-dn-hr-cr-pg, var(--_ctm-tab-dn-hr-cr-pg, var(--_ctm-dn-hr-cr-pg)))
         box-shadow: var(
           var(
               --_ctm-mob-dn-hr-cr-sw-ae,
@@ -167,7 +166,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         // padding: calc(var(--_ctm-lt-by-pg) / 2) var(--_ctm-lt-by-pg);
         // padding: var(--_ctm-lt-by-pg);
         // gap: var(--_ctm-lt-im-gp);
-        border-top: 1px solid var(--_gray-300);
+        border-top: 1px solid var(--_thm-cs-be-se-3);
         background-color: var(
           --_ctm-mob-dn-ct-by-wt-bd-cr,
           var(--_ctm-tab-dn-ct-by-wt-bd-cr, var(--_ctm-dn-ct-by-wt-bd-cr))
@@ -592,6 +591,86 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               var(--_ctm-tab-dn-nr-of-is-tt-an-dc, var(--_ctm-dn-nr-of-is-tt-an-dc))
             );
           }
+          .cart_summary_show_coupon_text {
+            // color: var(--_gray-500);
+            // font-size: 14px;
+            // font-weight: 400;
+            font-family: var(
+              --_ctm-mob-dn-sw-cn-ce-ft-fy,
+              var(--_ctm-tab-dn-sw-cn-ce-ft-fy, var(--_ctm-dn-sw-cn-ce-ft-fy))
+            );
+            color: var(
+              --_ctm-mob-dn-sw-cn-ce-cr,
+              var(--_ctm-tab-dn-sw-cn-ce-cr, var(--_ctm-dn-sw-cn-ce-cr))
+            );
+            font-weight: var(
+              --_ctm-mob-dn-sw-cn-ce-ft-wt,
+              var(--_ctm-tab-dn-sw-cn-ce-ft-wt, var(--_ctm-dn-sw-cn-ce-ft-wt))
+            );
+            font-size: var(
+              --_ctm-mob-dn-sw-cn-ce-ft-se,
+              var(--_ctm-tab-dn-sw-cn-ce-ft-se, var(--_ctm-dn-sw-cn-ce-ft-se))
+            );
+            // font-size: 14px;
+            text-decoration: var(
+              --_ctm-mob-dn-sw-cn-ce-ue,
+              var(--_ctm-tab-dn-sw-cn-ce-ue, var(--_ctm-dn-sw-cn-ce-ue))
+            );
+            letter-spacing: var(
+              --_ctm-mob-dn-sw-cn-ce-lr-sg,
+              var(--_ctm-tab-dn-sw-cn-ce-lr-sg, var(--_ctm-dn-sw-cn-ce-lr-sg))
+            );
+            line-height: var(
+              --_ctm-mob-dn-sw-cn-ce-le-ht,
+              var(--_ctm-tab-dn-sw-cn-ce-le-ht, var(--_ctm-dn-sw-cn-ce-le-ht))
+            );
+            font-style: var(
+              --_ctm-mob-dn-sw-cn-ce-ft-se-ic,
+              var(--_ctm-tab-dn-sw-cn-ce-ft-se-ic, var(--_ctm-dn-sw-cn-ce-ft-se-ic))
+            );
+            text-align: var(
+              --_ctm-mob-dn-sw-cn-ce-tt-an,
+              var(--_ctm-tab-dn-sw-cn-ce-tt-an, var(--_ctm-dn-sw-cn-ce-tt-an))
+            );
+          }
+          .cart_summary_show_coupon_value {
+            font-family: var(
+              --_ctm-mob-dn-sw-cn-ce-ft-fy-dc,
+              var(--_ctm-tab-dn-sw-cn-ce-ft-fy-dc, var(--_ctm-dn-sw-cn-ce-ft-fy-dc))
+            );
+            color: var(
+              --_ctm-mob-dn-sw-cn-ce-cr-dc,
+              var(--_ctm-tab-dn-sw-cn-ce-cr-dc, var(--_ctm-dn-sw-cn-ce-cr-dc))
+            );
+            font-weight: var(
+              --_ctm-mob-dn-sw-cn-ce-ft-wt-dc,
+              var(--_ctm-tab-dn-sw-cn-ce-ft-wt-dc, var(--_ctm-dn-sw-cn-ce-ft-wt-dc))
+            );
+            font-size: var(
+              --_ctm-mob-dn-sw-cn-ce-ft-se-dc,
+              var(--_ctm-tab-dn-sw-cn-ce-ft-se-dc, var(--_ctm-dn-sw-cn-ce-ft-se-dc))
+            );
+            text-decoration: var(
+              --_ctm-mob-dn-sw-cn-ce-ue-dc,
+              var(--_ctm-tab-dn-sw-cn-ce-ue-dc, var(--_ctm-dn-sw-cn-ce-ue-dc))
+            );
+            letter-spacing: var(
+              --_ctm-mob-dn-sw-cn-ce-lr-sg-dc,
+              var(--_ctm-tab-dn-sw-cn-ce-lr-sg-dc, var(--_ctm-dn-sw-cn-ce-lr-sg-dc))
+            );
+            line-height: var(
+              --_ctm-mob-dn-sw-cn-ce-le-ht-dc,
+              var(--_ctm-tab-dn-sw-cn-ce-le-ht-dc, var(--_ctm-dn-sw-cn-ce-le-ht-dc))
+            );
+            font-style: var(
+              --_ctm-mob-dn-sw-cn-ce-ft-se-ic-dc,
+              var(--_ctm-tab-dn-sw-cn-ce-ft-se-ic-dc, var(--_ctm-dn-sw-cn-ce-ft-se-ic-dc))
+            );
+            text-align: var(
+              --_ctm-mob-dn-sw-cn-ce-tt-an-dc,
+              var(--_ctm-tab-dn-sw-cn-ce-tt-an-dc, var(--_ctm-dn-sw-cn-ce-tt-an-dc))
+            );
+          }
         }
         .cart_summary_content_details_wrapper {
           display: flex;
@@ -2645,5 +2724,5 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 }
 
 .border_dashed {
-  border: 1px dashed var(--_gray-300);
+  border: 1px dashed var(--_thm-cs-be-se-3);
 }

package/dist/dropdownTemplate.scss

@@ -11,13 +11,13 @@
     display: flex;
     justify-content: space-between;
     padding: 0px 12px;
-    border-radius: 6px;
+    border-radius: 4px;
     width: 100%;
     align-items: center;
     height: 40px;
     line-height: 40px;
     outline: 2px solid var(--_base-white);
-    border: 1px solid var(--_gray-300);
+    border: 1px solid var(--_thm-cs-be-se-3);
 
     .selected-display {
       .selected-item {
@@ -49,7 +49,7 @@
         align-items: center;
         gap: 8px;
         .selected-item {
-          border: 1px solid var(--_gray-300);
+          border: 1px solid var(--_thm-cs-be-se-3);
           border-radius: 4px;
           padding: 2px 4px;
           font-size: 12px;
@@ -91,7 +91,7 @@
       user-select: none;
 
       input {
-        background-color: #f5f5f5;
+        background-color: var(--_thm-cs-be-se-2);
         cursor: not-allowed;
       }
     }
@@ -106,7 +106,7 @@
       min-width: 88%;
       overflow: hidden;
       .dropdown-chip {
-        background: #e2e2e2;
+        background: var(--_thm-cs-be-se-2);
         padding: 4px 8px;
         border-radius: 12px;
         font-size: 12px;
@@ -142,8 +142,11 @@
     .readonly-input,
     .dropdown__clear__icon,
     .dropdown__icon {
+      // transition: transform 0.4s ease-in-out;
       .icon {
+        // transition: transform 0.4s ease-in-out;
         display: flex;
+        // transform: rotate(0deg);
         &:hover {
           svg path {
             stroke: var(--_gray-700);
@@ -153,6 +156,12 @@
           width: 16px;
           height: 16px;
         }
+        // &.up {
+        //   transform: rotate(0deg);
+        // }
+        // &.down {
+        //   transform: rotate(180deg);
+        // }
         &.up,
         &.down {
           svg {
@@ -200,8 +209,8 @@
     position: fixed;
     width: 100%;
     background: white;
-    border: 1px solid var(--_gray-200);
-    border-radius: 6px;
+    border: 1px solid var(--_thm-cs-be-se-3);
+    border-radius: 4px;
     max-height: 200px;
     box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);
     z-index: 10;
@@ -222,7 +231,7 @@
     .dropdown_template_panel_search {
       background: none;
       padding: 8px;
-      border-bottom: 1px solid var(--_gray-100);
+      border-bottom: 1px solid var(--_thm-cs-be-se-3);
       height: max-content !important;
       position: relative;
       &:hover {
@@ -233,7 +242,7 @@
         width: 100%;
         padding-inline: 10px;
         border-radius: 4px;
-        border: 1px solid var(--_gray-200);
+        border: 1px solid var(--_thm-cs-be-se-3);
         height: 40px;
         &:focus {
           border: 1px solid var(--_gray-300);
@@ -333,7 +342,7 @@
           height: 32px;
           border-radius: 50%;
           overflow: hidden;
-          background-color: var(--_gray-200);
+          background-color: var(--_thm-cs-be-se-3);
           display: flex;
           justify-content: center;
           align-items: center;
@@ -479,7 +488,7 @@
       // bottom: 0;
       width: 100%;
       background: #fff;
-      border-top: 1px solid var(--_gray-200);
+      border-top: 1px solid var(--_thm-cs-be-se-3);
       .opts_selection_action {
         width: 50%;
         height: 100%;
@@ -497,7 +506,7 @@
           }
         }
         &:not(:last-child) {
-          border-right: 1px solid var(--_gray-200);
+          border-right: 1px solid var(--_thm-cs-be-se-3);
         }
         &.discard_selection {
           &:hover {

package/dist/filters.scss

@@ -2099,7 +2099,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         //   padding: 20px;
         width: 100%;
         max-width: 300px;
-        margin: auto;
+        // margin: auto;
       }
 
       .range-slider {

package/dist/language-selector.scss

@@ -422,10 +422,6 @@
 
           width: 100%;
 
-          &.open .list {
-            display: flex;
-            animation: slideDown 0.8s ease-in-out;
-          }
           .dropdown__button__wrapper {
             width: 100%;
             padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
@@ -452,10 +448,10 @@
             right: 0;
             transition: transform 0.4s ease-in-out;
             display: flex;
-            &.open {
+            &.rotate__180 {
               transform: rotate(180deg);
             }
-            &.close {
+            &.rotate__0 {
               transform: rotate(0deg);
             }
             width: prepareMediaVariable(--_ctm-dn-te-in-in-se);
@@ -475,8 +471,6 @@
           }
 
           .list {
-            animation: slideDown 0.8s ease-in-out;
-            display: none;
             flex-direction: column;
             border: 1px solid var(--_gray-200);
             border-radius: 6px;
@@ -514,6 +508,14 @@
               //   border-radius: 4px;
               // }
             }
+            &.show__panel {
+              animation: slideUp 0.4s ease-in-out;
+            }
+
+            &.hide__panel {
+              animation: slideDown 0.4s ease-in-out;
+              pointer-events: none;
+            }
           }
         }
       }
@@ -522,23 +524,31 @@
 }
 
 @keyframes slideUp {
-  0% {
-    transform: translateY(0px);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(20px);
+  from {
+    transform: translateY(10px);
     opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
   }
 }
 
 @keyframes slideDown {
-  0% {
-    transform: translateY(20px);
-    opacity: 0;
+  from {
+    transform: translateY(10);
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
   }
-  100% {
+  to {
     transform: translateY(0px);
-    opacity: 1;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
   }
 }