@sc-360-v2/storefront-cms-library 0.2.42 → 0.2.44

package/dist/button.scss

@@ -266,7 +266,10 @@
         );
         font-style: var(
           --_sf-hr-ft,
-          var(--_ctm-mob-dn-dt-se-ft-wt, var(--_ctm-tab-dn-dt-se-ft-wt, var(--_ctm-dn-dt-se-ft-wt)))
+          var(
+            --_ctm-mob-dn-dt-se-ft-se-ic,
+            var(--_ctm-tab-dn-dt-se-ft-se-ic, var(--_ctm-dn-dt-se-ft-se-ic))
+          )
         );
         text-align: var(
           --_sf-hr-ta,

package/dist/cart.scss

@@ -6,11 +6,56 @@
     width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    position: relative;
 
     & > .wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 100%;
     }
+
+    .icon {
+      position: relative;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        width: 100%;
+        height: 100%;
+        max-width: 20px;
+        max-height: 20px;
+        // width: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));
+        // height: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));
+
+        path {
+          // stroke: var(--_ctm-dn-im-se-in-c1, var(--_tst-dn-im-se-in-c1));
+        }
+      }
+    }
+
+    .cart-count {
+      position: absolute;
+      top: 4px;
+      right: 10px;
+      background-color: #243dc6;
+      color: white;
+      font-size: 10px;
+      font-weight: bold;
+      min-width: 16px;
+      height: 16px;
+      border-radius: 30%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      padding: 2px;
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    }
+
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }

package/dist/container.scss

@@ -35,6 +35,47 @@ $activeElementSelector: "[data-has-clicked='true']";
           --_ctm-mob-con-dn-bd-cr,
           var(--_ctm-tab-con-dn-bd-cr, var(--_ctm-con-dn-bd-cr))
         );
+        border-radius: var(
+          --_ctm-mob-con-dn-br-rs,
+          var(--_ctm-tab-con-dn-br-rs, var(--_ctm-con-dn-br-rs))
+        );
+        border-color: var(
+          --_ctm-mob-con-dn-br-cr,
+          var(--_ctm-tab-con-dn-br-cr, var(--_ctm-con-dn-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-con-dn-br-se,
+          var(--_ctm-tab-con-dn-br-se, var(--_ctm-con-dn-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-con-dn-br-wh,
+          var(--_ctm-tab-con-dn-br-wh, var(--_ctm-con-dn-br-wh))
+        );
+        box-shadow: var(
+          --_hover-show-shadow,
+          var(
+            --_sf-hr-bx-sw,
+            var(
+              --_show-shadow,
+              var(
+                  --_ctm-mob-dn-dt-se-sw-ae,
+                  var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-br,
+                  var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-sd,
+                  var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-cr,
+                  var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
+                )
+            )
+          )
+        );
       }
     }
 

package/dist/countdown.scss

@@ -219,7 +219,7 @@
         width: 100%;
         display: grid;
         grid-auto-flow: column;
-        column-gap: 15px;
+        column-gap: 4px;
         text-align: center;
         &[data-text-align="left"] {
           .countdown__element .countdown__digits {
@@ -245,6 +245,12 @@
       .countdown__element {
         border-radius: var(--_ctm-dn-cr-se-br-rs, var(--_tst-dn-cr-se-br-rs));
         padding: 5px;
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: center;
+        align-items: center;
+        width: max-content;
+        gap: 6px;
 
         label {
           width: 100%;
@@ -257,6 +263,7 @@
           text-align: var(--_ctm-dn-cr-se-tt-an, var(--_tst-dn-cr-se-tt-an));
           letter-spacing: var(--_ctm-dn-cr-se-lr-sg, var(--_tst-dn-cr-se-lr-sg));
           line-height: var(--_ctm-dn-cr-se-le-ht, var(--_tst-dn-cr-se-le-ht));
+          padding-top: 6px;
           text-decoration: var(
             --_ctm-dn-cr-se-lh,
             var(--_ctm-dn-cr-se-ue),
@@ -283,12 +290,12 @@
         }
         .countdown__digits {
           display: flex;
-          gap: 5px;
+          // gap: 5px;
           // justify-content: center;
         }
 
         .countdown__digit-box {
-          padding: 5px 10px;
+          // padding: 5px 10px;
           border-radius: 3px;
           width: auto;
         }
@@ -335,6 +342,7 @@
         svg {
           width: var(--_ctm-dn-dr-se-se, var(--_tst-dn-dr-se-se));
           height: var(--_ctm-dn-dr-se-se, var(--_tst-dn-dr-se-se));
+          margin-top: 6px;
 
           path {
             stroke: var(--_ctm-dn-dr-se-in-cr, var(--_tst-dn-dr-se-in-cr));

package/dist/custom-fonts.scss

@@ -57,3 +57,44 @@
   src: url("https://sellerscommerce.sirv.com/fonts/poppins-font/poppins-black.woff2")
     format("woff2");
 }
+
+/* Lato Fonts */
+@font-face {
+  font-family: "Lato";
+  src: url("https://sellerscommerce.sirv.com/fonts/lato-font/Lato-Regular.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lato";
+  src: url("https://sellerscommerce.sirv.com/fonts/lato-font/Lato-Bold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lato Hairline";
+  src: url("https://sellerscommerce.sirv.com/fonts/lato-font/Lato-Hairline.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lato";
+  src: url("https://sellerscommerce.sirv.com/fonts/lato-font/Lato-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Lato";
+  src: url("https://sellerscommerce.sirv.com/fonts/lato-font/Lato-Black.woff2") format("woff2");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}

package/dist/globals.scss

@@ -1,94 +1,94 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
-    "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
-    "Courier New", monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
+    "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
+    "Courier New", monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

package/dist/hotspot.scss

@@ -150,10 +150,10 @@ $data: (
     width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    --_aspect-ratio: calc(
-      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
-    );
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // --_aspect-ratio: calc(
+    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    // );
 
     & > .wrapper {
       width: 100%;
@@ -309,7 +309,7 @@ $data: (
       --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
       row-gap: var(--_sf-gp);
       width: 100%;
-
+      height: 100%;
       scale: var(--_ctm-dn-ie-se-zm-ie);
       transition: transform 0.3s ease-in-out;
       rotate: calc(var(--_ctm-dn-ie-se-ud) * 1deg);

package/dist/image-temp.scss

@@ -30,9 +30,15 @@
       }
     }
 
+    :is(:not([data-iframe-body="true"] *)) {
+      & > .wrapper {
+        overflow: clip;
+      }
+    }
+
     & > .wrapper {
       width: 100%;
-      overflow: clip;
+      // overflow: clip;
       rotate: calc(var(--_ctm-dn-re) * 1deg);
 
       // height: 100%;

package/dist/layouter-item.scss

@@ -0,0 +1,65 @@
+@use "sass:map";
+@use "sass:list";
+[data-div-type="element"] {
+  &[data-element-type="layouter-item"] {
+    // width: var(--_sf-con-nw-wh);
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // width: calc(1% * var(--_ctm-rep-ele-nw-wh-vl, auto));
+    // width: 100%;
+    // height: var(--_ctm-con-lt-ht);
+    // margin: var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
+
+    // width: 100%;
+    // background: var(--_ctm-repe-dn-bd-cr);
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        height: 100%;
+        padding: var(--_ctm-layo-lt-pg);
+        background: var(--_ctm-layo-dn-bd-cr);
+        border-radius: var(
+          --_ctm-mob-layo-dn-br-rs,
+          var(--_ctm-tab-layo-dn-br-rs, var(--_ctm-layo-dn-br-rs))
+        );
+        border-color: var(
+          --_ctm-mob-layo-dn-br-cr,
+          var(--_ctm-tab-layo-dn-br-cr, var(--_ctm-layo-dn-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-layo-dn-br-se,
+          var(--_ctm-tab-layo-dn-br-se, var(--_ctm-layo-dn-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-layo-dn-br-wh,
+          var(--_ctm-tab-layo-dn-br-wh, var(--_ctm-layo-dn-br-wh))
+        );
+        box-shadow: var(
+          --_hover-show-shadow,
+          var(
+            --_sf-hr-bx-sw,
+            var(
+              --_show-shadow,
+              var(
+                  --_ctm-mob-dn-dt-se-sw-ae,
+                  var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-br,
+                  var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-sd,
+                  var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-cr,
+                  var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
+                )
+            )
+          )
+        );
+      }
+    }
+  }
+}