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

package/dist/embroidery.scss

@@ -24,12 +24,9 @@ $apiLoader: '[data-spinner-state="loading"]';
     right: 12px;
     top: 50%;
     border-radius: 50%;
-    border: 0.25rem solid
-      color-mix(
-        in srgb,
-        var(--_sf-bd-cr-e, #{prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-bd-cr)}) 65%,
-        var(--_sf-fnt-clr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-cr)) 35%
-      );
+    border: 0.25rem solid color-mix(in srgb,
+      var(--_sf-bd-cr-e, #{prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-bd-cr)}) 65%,
+      var(--_sf-fnt-clr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-cr)) 35%);
     border-top-color: var(--_sf-fnt-clr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-cr));
     animation: circlerotateV2 2s ease-in-out infinite forwards;
   }
@@ -38,6 +35,7 @@ $apiLoader: '[data-spinner-state="loading"]';
     from {
       transform: translate(0%, -50%) rotate(0deg);
     }
+
     to {
       transform: translate(0%, -50%) rotate(360deg);
     }
@@ -46,7 +44,7 @@ $apiLoader: '[data-spinner-state="loading"]';
 
 [data-div-type="element"] {
   &[data-element-type="embroidery"] {
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
       padding: prepareMediaVariable(--_ctm-lt-pg);
@@ -64,12 +62,11 @@ $apiLoader: '[data-spinner-state="loading"]';
       }
 
       &[data-show-boxshadow="true"] {
-        box-shadow: prepareMediaVariable(--_ctm-dn-ey-cr-sw-ae)
-          prepareMediaVariable(--_ctm-dn-ey-cr-sw-br) prepareMediaVariable(--_ctm-dn-ey-cr-sw-sd)
-          prepareMediaVariable(--_ctm-dn-ey-cr-sw-cr);
+        box-shadow: prepareMediaVariable(--_ctm-dn-ey-cr-sw-ae) prepareMediaVariable(--_ctm-dn-ey-cr-sw-br) prepareMediaVariable(--_ctm-dn-ey-cr-sw-sd) prepareMediaVariable(--_ctm-dn-ey-cr-sw-cr);
       }
+
       // Config Button
-      & > #{$embBtn} {
+      &>#{$embBtn} {
         display: var(--_d-flex);
         justify-content: var(--_ctm-lt-at, space-between);
         align-items: flex-start;
@@ -116,10 +113,7 @@ $apiLoader: '[data-spinner-state="loading"]';
         }
 
         &[data-show-border="true"] {
-          box-shadow: var(--_sf-bx-xy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-ae))
-            var(--_sf-bx-br, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-br))
-            var(--_sf-bx-sd, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-sd))
-            var(--_sf-bx-cr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-cr));
+          box-shadow: var(--_sf-bx-xy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-ae)) var(--_sf-bx-br, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-br)) var(--_sf-bx-sd, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-sd)) var(--_sf-bx-cr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-sw-cr));
         }
 
         &[data-show-icon="false"] {
@@ -129,6 +123,7 @@ $apiLoader: '[data-spinner-state="loading"]';
         &[data-state="open"] {
           --_sf-rt-icn-vl: -90deg;
         }
+
         &#{$apiLoader} {
           --_sf-btn-icn-dp: var(--_d-none);
           position: var(--_p-relative);
@@ -136,19 +131,28 @@ $apiLoader: '[data-spinner-state="loading"]';
           @include spinnerStylesV2();
         }
 
-        & > span {
+        &>span {
           &#{$embTxtMainSpan} {
             display: var(--_d-flex);
             width: 100%;
             flex-direction: column;
             row-gap: 6px;
 
-            & > #{$embBtnText},
-            & > #{$embBtnDesc} {
+            &>#{$embBtnText},
+            &>#{$embBtnDesc} {
               display: var(--_d-flex);
               width: 100%;
 
               font-family: var(--_sf-fnt-fmy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-fy));
+              text-transform: var(--_sf-fnt-fmy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-tt-tm));
+              word-wrap: var(--_sf-fnt-fmy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-wd-wp));
+              word-break: var(--_sf-fnt-fmy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-wd-bk));
+
+              &.flex__overflow {
+                white-space: normal;
+                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+              }
+
               font-size: var(--_sf-fnt-sz, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-se));
               font-weight: var(--_sf-fnt-wet, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-wt));
               font-style: var(--_sf-fnt-sty, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-se-ic));
@@ -159,22 +163,23 @@ $apiLoader: '[data-spinner-state="loading"]';
               text-align: var(--_sf-fnt-ta, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-tt-an));
             }
 
-            & > #{$embBtnDesc} {
+            &>#{$embBtnDesc} {
+
               &,
               * {
                 &:not(b, strong) {
                   font-weight: 400;
                 }
-                font-size: min(
-                  #{prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal)},
-                  var(--_sf-fnt-sz, #{prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-se)})
-                );
+
+                font-size: min(#{prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal)},
+                  var(--_sf-fnt-sz, #{prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-se)}));
                 color: #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)};
                 line-height: 1.5;
                 text-align: start;
               }
             }
           }
+
           &#{$embBtnIcon} {
             display: var(--_sf-btn-icn-dp, var(--_d-flex));
             transition: transform 0.45s ease-in-out;
@@ -201,6 +206,7 @@ $apiLoader: '[data-spinner-state="loading"]';
         display: inline-block;
         animation: fadeIn 0.3s ease-in-out;
       }
+
       .message.info {
         background-color: #eff6ff;
         color: #1e40af;
@@ -208,19 +214,18 @@ $apiLoader: '[data-spinner-state="loading"]';
       }
 
       // Playground
-      & > #{$mainWrapper} {
+      &>#{$mainWrapper} {
         &.v2 {
           position: var(--_p-fixed);
           inset: 0 0 0 0;
           z-index: calc(99999 + 25);
           --_alpha: 40%;
-          background: color-mix(
-            in srgb,
-            var(--_base-black) calc(100% - var(--_alpha)),
-            transparent var(--_alpha)
-          );
+          background: color-mix(in srgb,
+              var(--_base-black) calc(100% - var(--_alpha)),
+              transparent var(--_alpha));
         }
-        & > #{$libraryWrapper} {
+
+        &>#{$libraryWrapper} {
           &:is(#{$mainWrapper}.v2 *) {
             position: var(--_p-absolute);
             background: var(--_white-v2);
@@ -232,9 +237,10 @@ $apiLoader: '[data-spinner-state="loading"]';
             // min-height: 250px;
             height: calc(100dvh - (2 * (24px)));
           }
+
           @include EmbroideryTemplate1StylesV2();
         }
       }
     }
   }
-}
+}