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

package/dist/embroider-template-1.scss

@@ -15,28 +15,26 @@ $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);
@@ -65,7 +63,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));
@@ -80,7 +78,7 @@ $previewMainOuput: ".output__ele__v1";
 
         // Preview
 
-        &>#{$previewMain} {
+        & > #{$previewMain} {
           width: 100%;
           display: var(--_d-flex);
           align-items: flex-start;
@@ -92,16 +90,18 @@ $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,13 +118,15 @@ $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;
@@ -149,7 +151,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;
@@ -157,14 +159,20 @@ $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;
@@ -175,34 +183,39 @@ $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);
@@ -219,9 +232,13 @@ $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))
+                    )
+                  );
                 }
               }
             }
@@ -241,7 +258,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);
@@ -255,7 +272,7 @@ $previewMainOuput: ".output__ele__v1";
 
           // Image Upload
 
-          &>.img__div {
+          & > .img__div {
             background: var(--_gray-100);
             height: 100px;
             width: 100%;
@@ -268,7 +285,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;
@@ -282,7 +299,7 @@ $previewMainOuput: ".output__ele__v1";
               }
             }
 
-            &>span {
+            & > span {
               &.label__span {
                 position: var(--_p-absolute);
                 pointer-events: none;
@@ -301,7 +318,7 @@ $previewMainOuput: ".output__ele__v1";
               }
             }
 
-            &>input {
+            & > input {
               &[type="file"] {
                 position: var(--_p-absolute);
                 inset: 0 0 0 0;
@@ -312,13 +329,19 @@ $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;
 
@@ -326,7 +349,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);
@@ -348,23 +371,29 @@ $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;
 
@@ -376,7 +405,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;
@@ -389,7 +418,6 @@ $previewMainOuput: ".output__ele__v1";
                     --_sf-at-op: 1;
                   }
                 }
-
                 &,
                 * {
                   user-select: none;
@@ -400,9 +428,8 @@ $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);
@@ -427,19 +454,29 @@ $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))
+                            )
+                          );
                         }
                       }
                     }
@@ -447,7 +484,6 @@ $previewMainOuput: ".output__ele__v1";
 
                   &.list__img {
                     width: 100%;
-
                     img {
                       width: 100%;
                       height: 100%;
@@ -462,4 +498,4 @@ $previewMainOuput: ".output__ele__v1";
       }
     }
   }
-}
+}

package/dist/embroidery.scss

@@ -24,9 +24,12 @@ $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;
   }
@@ -35,7 +38,6 @@ $apiLoader: '[data-spinner-state="loading"]';
     from {
       transform: translate(0%, -50%) rotate(0deg);
     }
-
     to {
       transform: translate(0%, -50%) rotate(360deg);
     }
@@ -44,7 +46,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);
@@ -62,11 +64,12 @@ $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;
@@ -113,7 +116,10 @@ $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"] {
@@ -123,7 +129,6 @@ $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);
@@ -131,15 +136,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%;
 
@@ -147,12 +152,10 @@ $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));
@@ -163,23 +166,22 @@ $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;
@@ -206,7 +208,6 @@ $apiLoader: '[data-spinner-state="loading"]';
         display: inline-block;
         animation: fadeIn 0.3s ease-in-out;
       }
-
       .message.info {
         background-color: #eff6ff;
         color: #1e40af;
@@ -214,18 +215,19 @@ $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);
@@ -237,10 +239,9 @@ $apiLoader: '[data-spinner-state="loading"]';
             // min-height: 250px;
             height: calc(100dvh - (2 * (24px)));
           }
-
           @include EmbroideryTemplate1StylesV2();
         }
       }
     }
   }
-}
+}