@sc-360-v2/storefront-cms-library 0.3.85 → 0.3.87

package/dist/embroidery.scss

@@ -0,0 +1,177 @@
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+@use "./embroider-template-1.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)), sans-serif;
+            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));
+              }
+            }
+          }
+        }
+      }
+
+      // Playground
+      & > #{$mainWrapper} {
+        & > #{$libraryWrapper} {
+          @include EmbroideryTemplate1Styles();
+        }
+      }
+    }
+  }
+}