@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

package/dist/animation-control.scss

@@ -1,23 +1,23 @@
-@use "sass:map";
-@use "sass:list";
-
-$animSelector: ".animate__animated";
-$animCommonSelector: "[data-anim-id='flex-animation-element']";
-
-@mixin FlexAnimationModuleStyles() {
-  @media (prefers-reduced-motion: reduce) {
-    #{$animSelector} {
-      animation: none !important;
-    }
-  }
-  #{$animCommonSelector} {
-    &:not(#{$animSelector}) {
-      opacity: 0;
-    }
-
-    &#{$animSelector} {
-      animation-fill-mode: backwards;
-      animation-delay: calc(1ms * var(--_ctm-flex-anim-delay, 1));
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+$animSelector: ".animate__animated";
+$animCommonSelector: "[data-anim-id='flex-animation-element']";
+
+@mixin FlexAnimationModuleStyles() {
+  @media (prefers-reduced-motion: reduce) {
+    #{$animSelector} {
+      animation: none !important;
+    }
+  }
+  #{$animCommonSelector} {
+    &:not(#{$animSelector}) {
+      opacity: 0;
+    }
+
+    &#{$animSelector} {
+      animation-fill-mode: backwards;
+      animation-delay: calc(1ms * var(--_ctm-flex-anim-delay, 1));
+    }
+  }
+}

package/dist/badge.scss

@@ -4,16 +4,19 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
+
 [data-div-type="element"] {
   &[data-element-type="badge"] {
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
     min-width: 100px;
+
     &.vtl {
       min-height: 100px !important;
       min-width: 30px;
       height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
       width: auto;
+
       .badge__wrapper {
         flex-direction: column;
         justify-content: center;
@@ -26,6 +29,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           justify-content: center;
           width: 26px;
           padding: 0px 24px 24px;
+
           &[data-styletag="style1"] {
             border-radius: 12px;
             font-weight: bold;
@@ -33,6 +37,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             border: 2px solid #fff;
             text-transform: uppercase;
           }
+
           &[data-styletag="style2"] {
             text-transform: uppercase;
             //clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
@@ -42,9 +47,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           &[data-styletag="style3"] {
             clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0% 100%);
           }
+
           &[data-styletag="style4"] {
             clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
           }
+
           &[data-styletag="style5"] {
             clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%);
           }
@@ -60,10 +67,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
     }
+
     &.hrz {
       min-height: 30px !important;
       min-width: 100px !important;
       height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+
       .badge__wrapper {
         flex-direction: row;
         justify-content: center;
@@ -74,6 +83,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           align-items: center;
           justify-content: center;
           padding: 8px 12px;
+
           &[data-styletag="style1"] {
             border-radius: 12px;
             font-weight: bold;
@@ -81,6 +91,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             border: 2px solid #fff;
             text-transform: uppercase;
           }
+
           &[data-styletag="style2"] {
             text-transform: uppercase;
             white-space: nowrap;
@@ -94,6 +105,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           &[data-styletag="style4"] {
             clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
           }
+
           &[data-styletag="style5"] {
             clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
           }
@@ -109,12 +121,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
       }
     }
-    & > div {
+
+    &>div {
       &.wrapper {
         //width: 100%;
         height: 100%;
       }
     }
+
     .badge__wrapper {
       display: flex;
       align-items: center;
@@ -149,15 +163,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           border-color: prepareMediaVariable(--_ctm-dn-be-nw-se-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-be-nw-se-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-be-nw-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-nw-se-sw-ae)
-            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-br)
-            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-sd)
-            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-cr);
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-nw-se-sw-ae) prepareMediaVariable(--_ctm-dn-be-nw-se-sw-br) prepareMediaVariable(--_ctm-dn-be-nw-se-sw-sd) prepareMediaVariable(--_ctm-dn-be-nw-se-sw-cr);
+
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
+
             svg {
               width: prepareMediaVariable(--_ctm-dn-be-nw-se-in-se);
               height: prepareMediaVariable(--_ctm-dn-be-nw-se-in-se);
+
               path {
                 stroke: prepareMediaVariable(--_ctm-dn-be-nw-se-in-c1);
                 // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -166,6 +180,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
+
         &[data-producttag="Bestseller"] {
           //background-color: #f57c00;
           background-color: prepareMediaVariable(--_ctm-dn-be-br-se-bd-cr);
@@ -173,12 +188,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           border-color: prepareMediaVariable(--_ctm-dn-be-br-se-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-be-br-se-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-be-br-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-br-se-sw-ae)
-            prepareMediaVariable(--_ctm-dn-be-br-se-sw-br)
-            prepareMediaVariable(--_ctm-dn-be-br-se-sw-sd)
-            prepareMediaVariable(--_ctm-dn-be-br-se-sw-cr);
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-br-se-sw-ae) prepareMediaVariable(--_ctm-dn-be-br-se-sw-br) prepareMediaVariable(--_ctm-dn-be-br-se-sw-sd) prepareMediaVariable(--_ctm-dn-be-br-se-sw-cr);
+
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
+
             svg {
               width: prepareMediaVariable(--_ctm-dn-be-br-se-in-se);
               height: prepareMediaVariable(--_ctm-dn-be-br-se-in-se);
@@ -191,6 +205,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
+
         &[data-producttag="Limited"] {
           //background-color: #6a1b9a;
           background-color: prepareMediaVariable(--_ctm-dn-be-ld-se-bd-cr);
@@ -198,12 +213,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           border-color: prepareMediaVariable(--_ctm-dn-be-ld-se-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-be-ld-se-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-be-ld-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-ld-se-sw-ae)
-            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-br)
-            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-sd)
-            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-cr);
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-ld-se-sw-ae) prepareMediaVariable(--_ctm-dn-be-ld-se-sw-br) prepareMediaVariable(--_ctm-dn-be-ld-se-sw-sd) prepareMediaVariable(--_ctm-dn-be-ld-se-sw-cr);
+
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
+
             svg {
               width: prepareMediaVariable(--_ctm-dn-be-ld-se-in-se);
               height: prepareMediaVariable(--_ctm-dn-be-ld-se-in-se);
@@ -216,6 +230,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
           }
         }
+
         &[data-producttag="Exclusive"] {
           //background-color: #1976d2;
           background-color: prepareMediaVariable(--_ctm-dn-be-ee-se-bd-cr);
@@ -223,12 +238,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           border-color: prepareMediaVariable(--_ctm-dn-be-ee-se-br-cr);
           border-style: prepareMediaVariable(--_ctm-dn-be-ee-se-br-se);
           border-radius: prepareMediaVariable(--_ctm-dn-be-ee-se-br-rs);
-          box-shadow: prepareMediaVariable(--_ctm-dn-be-ee-se-sw-ae)
-            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-br)
-            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-sd)
-            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-cr);
+          box-shadow: prepareMediaVariable(--_ctm-dn-be-ee-se-sw-ae) prepareMediaVariable(--_ctm-dn-be-ee-se-sw-br) prepareMediaVariable(--_ctm-dn-be-ee-se-sw-sd) prepareMediaVariable(--_ctm-dn-be-ee-se-sw-cr);
+
           .icon {
             display: var(--_hover-show-icon, var(--_show-icon, flex));
+
             svg {
               width: prepareMediaVariable(--_ctm-dn-be-ee-se-in-se);
               height: prepareMediaVariable(--_ctm-dn-be-ee-se-in-se);
@@ -245,6 +259,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         .product_tag {
           &[data-producttag="New"] {
             font-family: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-be-nw-se-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-be-nw-se-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-be-nw-se-wd-bk);
             font-size: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-se);
             color: prepareMediaVariable(--_ctm-dn-be-nw-se-cr);
             font-weight: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-wt);
@@ -254,8 +271,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             letter-spacing: prepareMediaVariable(--_ctm-dn-be-nw-se-lr-sg);
             line-height: prepareMediaVariable(--_ctm-dn-be-nw-se-le-ht);
           }
+
           &[data-producttag="Bestseller"] {
             font-family: prepareMediaVariable(--_ctm-dn-be-br-se-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-be-br-se-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-be-br-se-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-be-br-se-wd-bk);
             font-size: prepareMediaVariable(--_ctm-dn-be-br-se-ft-se);
             color: prepareMediaVariable(--_ctm-dn-be-br-se-cr);
             font-weight: prepareMediaVariable(--_ctm-dn-be-br-se-ft-wt);
@@ -265,8 +286,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             letter-spacing: prepareMediaVariable(--_ctm-dn-be-br-se-lr-sg);
             line-height: prepareMediaVariable(--_ctm-dn-be-br-se-le-ht);
           }
+
           &[data-producttag="Limited"] {
             font-family: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-be-ld-se-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-be-ld-se-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-be-ld-se-wd-bk);
             font-size: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-se);
             color: prepareMediaVariable(--_ctm-dn-be-ld-se-cr);
             font-weight: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-wt);
@@ -276,8 +301,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             letter-spacing: prepareMediaVariable(--_ctm-dn-be-ld-se-lr-sg);
             line-height: prepareMediaVariable(--_ctm-dn-be-ld-se-le-ht);
           }
+
           &[data-producttag="Exclusive"] {
             font-family: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-fy);
+            text-transform: prepareMediaVariable(--_ctm-dn-be-ee-se-tt-tm);
+            word-wrap: prepareMediaVariable(--_ctm-dn-be-ee-se-wd-wp);
+            word-break: prepareMediaVariable(--_ctm-dn-be-ee-se-wd-bk);
             font-size: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-se);
             color: prepareMediaVariable(--_ctm-dn-be-ee-se-cr);
             font-weight: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-wt);
@@ -289,6 +318,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
         }
       }
+
       .badge_vertical_pill {
         background-color: #4caf50;
         color: #fff;
@@ -301,6 +331,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         white-space: nowrap;
         border: 2px solid #fff;
       }
+
       .badge_big_sale {
         background-color: #ffa726;
         color: #fff;
@@ -323,6 +354,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           font-weight: normal;
         }
       }
+
       .badge_bogo {
         background-color: #d5a373;
         color: #fff;
@@ -335,6 +367,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         white-space: nowrap;
         border: 2px dashed #fff;
       }
+
       .badgerightarrow {
         background-color: #c49b6c;
         color: white;
@@ -343,6 +376,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-weight: bold;
         font-size: 14px;
       }
+
       .badgebigsale {
         background-color: #ff9800;
         color: white;
@@ -361,6 +395,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           font-size: 12px;
         }
       }
+
       .badge_verticalpill {
         writing-mode: vertical-rl;
         text-align: center;
@@ -371,6 +406,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-weight: bold;
         font-size: 14px;
       }
+
       .badge_tail_down {
         background-color: #8bc34a;
         color: white;
@@ -381,6 +417,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         font-size: 14px;
         line-height: 1.3;
       }
+
       .badge_ribbon {
         background-color: #d2b48c;
         color: white;
@@ -393,4 +430,4 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       }
     }
   }
-}
+}