@sc-360-v2/storefront-cms-library 0.5.72 → 0.5.73

package/dist/embroider-template-1.scss

@@ -15,26 +15,28 @@ $previewMainWrapper: ".emb__preview__me__wrapper";
 $previewMainOuput: ".output__ele__v1";
 
 @mixin EmbroideryTemplate1Styles() {
-  & > #{$tmpWrapper} {
-    & > #{$paListParent} {
+  &>#{$tmpWrapper} {
+    &>#{$paListParent} {
       display: var(--_d-flex);
       flex-direction: column;
       row-gap: 16px;
       width: 100%;
-      & > #{$pacListParent} {
+
+      &>#{$pacListParent} {
         display: var(--_d-flex);
         flex-direction: column;
         row-gap: 16px;
 
         // Header
-        & > #{$positionHeader} {
+        &>#{$positionHeader} {
           display: var(--_d-flex);
           align-items: center;
           justify-content: space-between;
           gap: 8px;
 
-          & > span {
+          &>span {
             display: var(--_d-flex);
+
             &.tt1 {
               color: prepareMediaVariable(--_ctm-dn-te-cr, #101828);
               font-size: prepareMediaVariable(--_ctm-dn-te-ft-se, 30px);
@@ -63,7 +65,7 @@ $previewMainOuput: ".output__ele__v1";
                 transform: rotate(180deg);
               }
 
-              & > svg {
+              &>svg {
                 --_perc: 0.75;
                 width: calc(var(--_sf-size) * var(--_perc));
                 height: calc(var(--_sf-size) * var(--_perc));
@@ -78,7 +80,7 @@ $previewMainOuput: ".output__ele__v1";
 
         // Preview
 
-        & > #{$previewMain} {
+        &>#{$previewMain} {
           width: 100%;
           display: var(--_d-flex);
           align-items: flex-start;
@@ -90,18 +92,16 @@ $previewMainOuput: ".output__ele__v1";
           //   transparent var(--_perc-1, 0%)
           // );
           --_alpha: 85%;
-          background: color-mix(
-            in srgb,
-            #000 calc(100% - var(--_alpha)),
-            transparent var(--_alpha)
-          );
+          background: color-mix(in srgb,
+              #000 calc(100% - var(--_alpha)),
+              transparent var(--_alpha));
           padding: 8px;
           border-radius: 6px;
 
           flex-direction: column;
           row-gap: 6px;
 
-          & > .emb__preview__title {
+          &>.emb__preview__title {
             // color: color-mix(in srgb, #fff 70%, transparent 30%);
             --_alpha: 15%;
             color: color-mix(in srgb, #000 calc(100% - var(--_alpha)), transparent var(--_alpha));
@@ -109,7 +109,7 @@ $previewMainOuput: ".output__ele__v1";
             font-weight: 600;
           }
 
-          & > #{$previewMainWrapper} {
+          &>#{$previewMainWrapper} {
             display: var(--_d-flex);
             // flex-direction: column;
             max-width: min(500px, 100%);
@@ -118,15 +118,13 @@ $previewMainOuput: ".output__ele__v1";
             justify-content: center;
             position: var(--_p-relative);
             --_blk-perc: 5%;
-            background: color-mix(
-              in srgb,
+            background: color-mix(in srgb,
               var(--_base-white) calc(100% - #{var(--_blk-perc)}),
-              var(--_base-black) var(--_blk-perc)
-            );
+              var(--_base-black) var(--_blk-perc));
             border-radius: 6px;
             min-height: var(--_sf-emb-prw-mn-ht-vl, 150px);
 
-            & > #{$previewMainOuput} {
+            &>#{$previewMainOuput} {
               display: var(--_d-grid);
               width: 100%;
               align-self: stretch;
@@ -151,7 +149,7 @@ $previewMainOuput: ".output__ele__v1";
           grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
           align-items: center;
 
-          & > button {
+          &>button {
             min-height: 40px;
             display: var(--_d-flex);
             align-items: center;
@@ -159,20 +157,14 @@ $previewMainOuput: ".output__ele__v1";
             padding: 8px 12px;
             border-radius: 4px;
             --_perc-clr-bb: 50%;
-            border: 0.5px solid
-              var(
-                --_sp-color,
-                color-mix(
-                  in srgb,
-                  #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)}
-                    calc(100% - var(--_perc-clr-bb)),
-                  transparent var(--_perc-clr-bb)
-                )
-              );
+            border: 0.5px solid var(--_sp-color,
+              color-mix(in srgb,
+                #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)} calc(100% - var(--_perc-clr-bb)),
+                transparent var(--_perc-clr-bb)));
             background: color-mix(in srgb, var(--_sp-color, transparent) 6%, transparent 94%);
             gap: 6px;
 
-            & > .icn__spn {
+            &>.icn__spn {
               display: var(--_d-flex);
               align-items: center;
               justify-content: center;
@@ -183,39 +175,34 @@ $previewMainOuput: ".output__ele__v1";
 
                 path {
                   &:not(.acv *) {
-                    stroke: color-mix(
-                      in srgb,
-                      var(
-                          --_sp-color,
-                          var(
-                            --_ctm-mob-dn-dt-tt-cr,
-                            var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-                          )
-                        )
-                        75%,
-                      transparent 25%
-                    );
+                    stroke: color-mix(in srgb,
+                        var(--_sp-color,
+                          var(--_ctm-mob-dn-dt-tt-cr,
+                            var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467)))) 75%,
+                        transparent 25%);
                   }
                 }
               }
             }
 
-            & > .pac__name__div {
+            &>.pac__name__div {
               display: var(--_d-flex);
               align-items: center;
               gap: 8px;
 
-              & > .pac__name__span {
+              &>.pac__name__span {
                 display: var(--_d-flex);
                 color: var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)});
                 font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
                 font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
                 word-wrap: prepareMediaVariable(--_ctm-dn-dt-tt-wd-wp);
                 word-break: prepareMediaVariable(--_ctm-dn-dt-tt-wd-bk);
+
                 &.flex__overflow {
                   white-space: normal;
                   @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                 }
+
                 font-style: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se-ic, normal);
                 font-weight: var(--_fw-wt, prepareMediaVariable(--_ctm-dn-dt-tt-ft-wt, 400));
                 line-height: prepareMediaVariable(--_ctm-dn-dt-tt-le-ht, 24px);
@@ -232,13 +219,9 @@ $previewMainOuput: ".output__ele__v1";
 
               svg {
                 rect {
-                  fill: var(
-                    --_sp-color,
-                    var(
-                      --_ctm-mob-dn-dt-tt-cr,
-                      var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-                    )
-                  );
+                  fill: var(--_sp-color,
+                      var(--_ctm-mob-dn-dt-tt-cr,
+                        var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))));
                 }
               }
             }
@@ -258,7 +241,7 @@ $previewMainOuput: ".output__ele__v1";
           flex-direction: column;
           row-gap: 6px;
 
-          & > label {
+          &>label {
             color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
             font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
             text-transform: prepareMediaVariable(--_ctm-dn-dt-tt-tt-tm);
@@ -272,7 +255,7 @@ $previewMainOuput: ".output__ele__v1";
 
           // Image Upload
 
-          & > .img__div {
+          &>.img__div {
             background: var(--_gray-100);
             height: 100px;
             width: 100%;
@@ -285,7 +268,7 @@ $previewMainOuput: ".output__ele__v1";
               --_sf-vt-im: hidden;
               --_sf-vt-op: 0;
 
-              & > .output__div {
+              &>.output__div {
                 display: var(--_d-flex);
                 align-self: stretch;
                 justify-self: stretch;
@@ -299,7 +282,7 @@ $previewMainOuput: ".output__ele__v1";
               }
             }
 
-            & > span {
+            &>span {
               &.label__span {
                 position: var(--_p-absolute);
                 pointer-events: none;
@@ -318,7 +301,7 @@ $previewMainOuput: ".output__ele__v1";
               }
             }
 
-            & > input {
+            &>input {
               &[type="file"] {
                 position: var(--_p-absolute);
                 inset: 0 0 0 0;
@@ -329,19 +312,13 @@ $previewMainOuput: ".output__ele__v1";
           }
 
           // Text Editor
-          & > .text__div {
+          &>.text__div {
             --_perc-clr-bb: 50%;
             border-radius: 4px;
-            border: 0.5px solid
-              var(
-                --_fcs-clr,
-                color-mix(
-                  in srgb,
-                  #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)}
-                    calc(100% - var(--_perc-clr-bb)),
-                  transparent var(--_perc-clr-bb)
-                )
-              );
+            border: 0.5px solid var(--_fcs-clr,
+              color-mix(in srgb,
+                #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)} calc(100% - var(--_perc-clr-bb)),
+                transparent var(--_perc-clr-bb)));
             background: #fff;
             padding: 8px 12px;
 
@@ -349,7 +326,7 @@ $previewMainOuput: ".output__ele__v1";
               --_fcs-clr: #{prepareMediaVariable(--_ctm-dn-ae-tt-cr, #243dc6)};
             }
 
-            & > input {
+            &>input {
               color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
               font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
               font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
@@ -371,29 +348,23 @@ $previewMainOuput: ".output__ele__v1";
 
           // Common Dropdown
 
-          & > .cmn__drp__parent__v2 {
-            & > ul {
+          &>.cmn__drp__parent__v2 {
+            &>ul {
               display: var(--_d-flex);
               flex-wrap: wrap;
               gap: 12px;
 
-              & > li {
+              &>li {
                 display: var(--_d-flex);
                 align-content: center;
                 gap: 6px;
                 padding: 8px 12px;
                 border-radius: 4px;
                 --_perc-clr-bb: 50%;
-                border: 0.5px solid
-                  var(
-                    --_sp-color,
-                    color-mix(
-                      in srgb,
-                      #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)}
-                        calc(100% - var(--_perc-clr-bb)),
-                      transparent var(--_perc-clr-bb)
-                    )
-                  );
+                border: 0.5px solid var(--_sp-color,
+                  color-mix(in srgb,
+                    #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)} calc(100% - var(--_perc-clr-bb)),
+                    transparent var(--_perc-clr-bb)));
                 background: color-mix(in srgb, var(--_sp-color, transparent) 6%, transparent 94%);
                 cursor: pointer;
 
@@ -405,7 +376,7 @@ $previewMainOuput: ".output__ele__v1";
                   height: var(--_size-h);
                   position: var(--_p-relative);
 
-                  & > .list__icon {
+                  &>.list__icon {
                     position: var(--_p-absolute);
                     left: 2px;
                     top: 2px;
@@ -418,6 +389,7 @@ $previewMainOuput: ".output__ele__v1";
                     --_sf-at-op: 1;
                   }
                 }
+
                 &,
                 * {
                   user-select: none;
@@ -428,8 +400,9 @@ $previewMainOuput: ".output__ele__v1";
                   --_fw-wt: #{prepareMediaVariable(--_ctm-dn-ae-tt-ft-wt, 600)};
                 }
 
-                & > span {
+                &>span {
                   display: var(--_d-flex);
+
                   &.list__text {
                     color: var(--_sp-color, #{prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467)});
                     font-size: prepareMediaVariable(--_ctm-dn-dt-tt-ft-se, 16px);
@@ -454,29 +427,19 @@ $previewMainOuput: ".output__ele__v1";
 
                       path {
                         &:not(.active *) {
-                          stroke: color-mix(
-                            in srgb,
-                            var(
-                                --_sp-color,
-                                var(
-                                  --_ctm-mob-dn-dt-tt-cr,
-                                  var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-                                )
-                              )
-                              75%,
-                            transparent 25%
-                          );
+                          stroke: color-mix(in srgb,
+                              var(--_sp-color,
+                                var(--_ctm-mob-dn-dt-tt-cr,
+                                  var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467)))) 75%,
+                              transparent 25%);
                         }
                       }
+
                       &:is(.active *) {
                         rect {
-                          fill: var(
-                            --_sp-color,
-                            var(
-                              --_ctm-mob-dn-dt-tt-cr,
-                              var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))
-                            )
-                          );
+                          fill: var(--_sp-color,
+                              var(--_ctm-mob-dn-dt-tt-cr,
+                                var(--_ctm-tab-dn-dt-tt-cr, var(--_ctm-dn-dt-tt-cr, #475467))));
                         }
                       }
                     }
@@ -484,6 +447,7 @@ $previewMainOuput: ".output__ele__v1";
 
                   &.list__img {
                     width: 100%;
+
                     img {
                       width: 100%;
                       height: 100%;
@@ -498,4 +462,4 @@ $previewMainOuput: ".output__ele__v1";
       }
     }
   }
-}
+}

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,15 +131,15 @@ $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%;
 
@@ -152,10 +147,12 @@ $apiLoader: '[data-spinner-state="loading"]';
               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));
@@ -166,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;
@@ -208,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;
@@ -215,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);
@@ -239,9 +237,10 @@ $apiLoader: '[data-spinner-state="loading"]';
             // min-height: 250px;
             height: calc(100dvh - (2 * (24px)));
           }
+
           @include EmbroideryTemplate1StylesV2();
         }
       }
     }
   }
-}
+}