@sc-360-v2/storefront-cms-library 0.4.49 → 0.4.51

package/dist/embroidery.scss

@@ -1,213 +1,213 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-// @use "./embroider-template-1.scss" as *;
-@use "./embroider-template-1-v2.scss" as *;
-
-$mainWrapper: ".emb__main__wrapper";
-$libraryWrapper: ".emb__library__wrapper";
-$embBtn: ".emb__config__btn";
-$embBtnIcon: ".emb__cnf__icn";
-$embBtnText: "[data-type='text']";
-$apiLoader: '[data-spinner-state="loading"]';
-
-@mixin spinnerStylesV2() {
-  &::before {
-    content: "";
-    position: var(--_p-absolute);
-    --_sz-vl: 10px;
-    width: var(--_sz-vl);
-    height: var(--_sz-vl);
-    display: var(--_d-flex);
-    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-top-color: var(--_sf-fnt-clr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-cr));
-    animation: circlerotate 2s ease-in-out infinite forwards;
-  }
-
-  @keyframes circlerotate {
-    from {
-      transform: translate(0%, -50%) rotate(0deg);
-    }
-    to {
-      transform: translate(0%, -50%) rotate(360deg);
-    }
-  }
-}
-
-[data-div-type="element"] {
-  &[data-element-type="embroidery"] {
-    & > .wrapper {
-      width: 100%;
-      min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
-      padding: prepareMediaVariable(--_ctm-lt-pg);
-      border-radius: prepareMediaVariable(--_ctm-dn-ey-cr-br-rs);
-      background-color: prepareMediaVariable(--_ctm-dn-ey-cr-bd-cr);
-
-      display: var(--_d-flex) !important;
-      flex-direction: column;
-      row-gap: 16px;
-
-      &[data-show-border="true"] {
-        border-color: prepareMediaVariable(--_ctm-dn-ey-cr-br-cr);
-        border-style: prepareMediaVariable(--_ctm-dn-ey-cr-br-se);
-        border-width: prepareMediaVariable(--_ctm-dn-ey-cr-br-wh);
-      }
-
-      &[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);
-      }
-      // Config Button
-      & > #{$embBtn} {
-        display: var(--_d-flex);
-        justify-content: space-between;
-        align-items: center;
-        gap: var(--_ctm-lt-gp);
-        padding: prepareMediaVariable(--_ctm-lt-bn-pg);
-        border-radius: var(--_sf-br-rs, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-rs));
-        background-color: var(--_sf-bd-cr-e, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-bd-cr));
-
-        &[data-icon-position="left"] {
-          flex-direction: row-reverse;
-        }
-
-        &:hover {
-          --_sf-br-rs: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-rs)};
-          --_sf-bd-cr-e: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-bd-cr)};
-
-          --_sf-br-cr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-cr)};
-          --_sf-br-st: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-se)};
-          --_sf-br-wt: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-wh)};
-
-          --_sf-bx-xy: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-ae)};
-          --_sf-bx-br: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-br)};
-          --_sf-bx-sd: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-sd)};
-          --_sf-bx-cr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-cr)};
-
-          --_sf-icn-sz: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-in-se)};
-          --_sf-icn-cr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-in-c1)};
-
-          --_sf-fnt-fmy: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-fy)};
-          --_sf-fnt-sz: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-se)};
-          --_sf-fnt-clr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-cr)};
-          --_sf-fnt-wet: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-wt)};
-          --_sf-fnt-td: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ue)};
-          --_sf-fnt-sty: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-se-ic)};
-          --_sf-fnt-lts: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-lr-sg)};
-          --_sf-fnt-lht: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-le-ht)};
-          --_sf-fnt-ta: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-tt-an)};
-        }
-
-        &[data-show-shadow="true"] {
-          border-color: var(--_sf-br-cr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-cr));
-          border-style: var(--_sf-br-st, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-se));
-          border-width: var(--_sf-br-wt, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-wh));
-        }
-
-        &[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));
-        }
-
-        &[data-show-icon="false"] {
-          --_sf-btn-icn-dp: var(--_d-none);
-        }
-
-        &[data-state="open"] {
-          --_sf-rt-icn-vl: -90deg;
-        }
-        &#{$apiLoader} {
-          --_sf-btn-icn-dp: var(--_d-none);
-          position: var(--_p-relative);
-
-          @include spinnerStylesV2();
-        }
-
-        & > span {
-          &#{$embBtnText} {
-            display: var(--_d-flex);
-            width: 100%;
-
-            font-family: var(--_sf-fnt-fmy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-fy));
-            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));
-            color: var(--_sf-fnt-clr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-cr));
-            letter-spacing: var(--_sf-fnt-lts, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-lr-sg));
-            line-height: var(--_sf-fnt-lht, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-le-ht));
-            text-decoration: var(--_sf-fnt-td, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ue));
-            text-align: var(--_sf-fnt-ta, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-tt-an));
-          }
-          &#{$embBtnIcon} {
-            display: var(--_sf-btn-icn-dp, var(--_d-flex));
-            transition: transform 0.45s ease-in-out;
-            transform: rotate(var(--_sf-rt-icn-vl, 0deg));
-
-            svg {
-              width: var(--_sf-icn-sz, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-in-se));
-              height: var(--_sf-icn-sz, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-in-se));
-
-              path {
-                stroke: var(--_sf-icn-cr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-in-c1));
-              }
-            }
-          }
-        }
-      }
-
-      .message {
-        font-family: "Lato";
-        font-size: 14px;
-        padding: 12px 16px;
-        border-radius: 8px;
-        display: inline-block;
-        animation: fadeIn 0.3s ease-in-out;
-      }
-      .message.info {
-        background-color: #eff6ff;
-        color: #1e40af;
-        border: 1px solid #bfdbfe;
-      }
-
-      // Playground
-      & > #{$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)
-          );
-        }
-        & > #{$libraryWrapper} {
-          &:is(.v2 *) {
-            position: var(--_p-absolute);
-            background: var(--_white-v2);
-            border-radius: 8px;
-            width: min(960px, 95%);
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            // min-height: 250px;
-            height: calc(100dvh - (2 * (24px)));
-          }
-          @include EmbroideryTemplate1StylesV2();
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+// @use "./embroider-template-1.scss" as *;
+@use "./embroider-template-1-v2.scss" as *;
+
+$mainWrapper: ".emb__main__wrapper";
+$libraryWrapper: ".emb__library__wrapper";
+$embBtn: ".emb__config__btn";
+$embBtnIcon: ".emb__cnf__icn";
+$embBtnText: "[data-type='text']";
+$apiLoader: '[data-spinner-state="loading"]';
+
+@mixin spinnerStylesV2() {
+  &::before {
+    content: "";
+    position: var(--_p-absolute);
+    --_sz-vl: 10px;
+    width: var(--_sz-vl);
+    height: var(--_sz-vl);
+    display: var(--_d-flex);
+    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-top-color: var(--_sf-fnt-clr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-cr));
+    animation: circlerotate 2s ease-in-out infinite forwards;
+  }
+
+  @keyframes circlerotate {
+    from {
+      transform: translate(0%, -50%) rotate(0deg);
+    }
+    to {
+      transform: translate(0%, -50%) rotate(360deg);
+    }
+  }
+}
+
+[data-div-type="element"] {
+  &[data-element-type="embroidery"] {
+    & > .wrapper {
+      width: 100%;
+      min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
+      padding: prepareMediaVariable(--_ctm-lt-pg);
+      border-radius: prepareMediaVariable(--_ctm-dn-ey-cr-br-rs);
+      background-color: prepareMediaVariable(--_ctm-dn-ey-cr-bd-cr);
+
+      display: var(--_d-flex) !important;
+      flex-direction: column;
+      row-gap: 16px;
+
+      &[data-show-border="true"] {
+        border-color: prepareMediaVariable(--_ctm-dn-ey-cr-br-cr);
+        border-style: prepareMediaVariable(--_ctm-dn-ey-cr-br-se);
+        border-width: prepareMediaVariable(--_ctm-dn-ey-cr-br-wh);
+      }
+
+      &[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);
+      }
+      // Config Button
+      & > #{$embBtn} {
+        display: var(--_d-flex);
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--_ctm-lt-gp);
+        padding: prepareMediaVariable(--_ctm-lt-bn-pg);
+        border-radius: var(--_sf-br-rs, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-rs));
+        background-color: var(--_sf-bd-cr-e, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-bd-cr));
+
+        &[data-icon-position="left"] {
+          flex-direction: row-reverse;
+        }
+
+        &:hover {
+          --_sf-br-rs: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-rs)};
+          --_sf-bd-cr-e: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-bd-cr)};
+
+          --_sf-br-cr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-cr)};
+          --_sf-br-st: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-se)};
+          --_sf-br-wt: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-br-wh)};
+
+          --_sf-bx-xy: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-ae)};
+          --_sf-bx-br: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-br)};
+          --_sf-bx-sd: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-sd)};
+          --_sf-bx-cr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-sw-cr)};
+
+          --_sf-icn-sz: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-in-se)};
+          --_sf-icn-cr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-in-c1)};
+
+          --_sf-fnt-fmy: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-fy)};
+          --_sf-fnt-sz: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-se)};
+          --_sf-fnt-clr: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-cr)};
+          --_sf-fnt-wet: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-wt)};
+          --_sf-fnt-td: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ue)};
+          --_sf-fnt-sty: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-ft-se-ic)};
+          --_sf-fnt-lts: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-lr-sg)};
+          --_sf-fnt-lht: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-le-ht)};
+          --_sf-fnt-ta: #{prepareMediaVariable(--_ctm-dn-ce-bn-hr-se-tt-an)};
+        }
+
+        &[data-show-shadow="true"] {
+          border-color: var(--_sf-br-cr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-cr));
+          border-style: var(--_sf-br-st, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-se));
+          border-width: var(--_sf-br-wt, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-br-wh));
+        }
+
+        &[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));
+        }
+
+        &[data-show-icon="false"] {
+          --_sf-btn-icn-dp: var(--_d-none);
+        }
+
+        &[data-state="open"] {
+          --_sf-rt-icn-vl: -90deg;
+        }
+        &#{$apiLoader} {
+          --_sf-btn-icn-dp: var(--_d-none);
+          position: var(--_p-relative);
+
+          @include spinnerStylesV2();
+        }
+
+        & > span {
+          &#{$embBtnText} {
+            display: var(--_d-flex);
+            width: 100%;
+
+            font-family: var(--_sf-fnt-fmy, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ft-fy));
+            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));
+            color: var(--_sf-fnt-clr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-cr));
+            letter-spacing: var(--_sf-fnt-lts, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-lr-sg));
+            line-height: var(--_sf-fnt-lht, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-le-ht));
+            text-decoration: var(--_sf-fnt-td, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-ue));
+            text-align: var(--_sf-fnt-ta, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-tt-an));
+          }
+          &#{$embBtnIcon} {
+            display: var(--_sf-btn-icn-dp, var(--_d-flex));
+            transition: transform 0.45s ease-in-out;
+            transform: rotate(var(--_sf-rt-icn-vl, 0deg));
+
+            svg {
+              width: var(--_sf-icn-sz, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-in-se));
+              height: var(--_sf-icn-sz, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-in-se));
+
+              path {
+                stroke: var(--_sf-icn-cr, prepareMediaVariable(--_ctm-dn-ce-bn-dt-se-in-c1));
+              }
+            }
+          }
+        }
+      }
+
+      .message {
+        font-family: "Lato";
+        font-size: 14px;
+        padding: 12px 16px;
+        border-radius: 8px;
+        display: inline-block;
+        animation: fadeIn 0.3s ease-in-out;
+      }
+      .message.info {
+        background-color: #eff6ff;
+        color: #1e40af;
+        border: 1px solid #bfdbfe;
+      }
+
+      // Playground
+      & > #{$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)
+          );
+        }
+        & > #{$libraryWrapper} {
+          &:is(.v2 *) {
+            position: var(--_p-absolute);
+            background: var(--_white-v2);
+            border-radius: 8px;
+            width: min(960px, 95%);
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            // min-height: 250px;
+            height: calc(100dvh - (2 * (24px)));
+          }
+          @include EmbroideryTemplate1StylesV2();
+        }
+      }
+    }
+  }
+}