@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.77

package/dist/editCartItem.scss

@@ -0,0 +1,111 @@
+@use "sass:color";
+
+// Variables
+$primary: #222299;
+$gray: #ddd;
+$text: #333;
+$font: "Segoe UI", sans-serif;
+$border-radius: 6px;
+$spacing: 1rem;
+
+.variant-selector {
+  font-family: $font;
+  padding: $spacing;
+
+  .title {
+    font-size: 1.5rem;
+    margin-bottom: $spacing;
+  }
+
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing;
+
+    h3 {
+      font-size: 1.2rem;
+      margin-bottom: 0.5rem;
+      color: $text;
+    }
+  }
+
+  .group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    .group-label {
+      font-weight: 500;
+      color: $text;
+    }
+
+    .color-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+
+      .color-swatch {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        border: 2px solid transparent;
+        cursor: pointer;
+        transition: border 0.3s;
+
+        &.selected {
+          border-color: $primary;
+        }
+      }
+    }
+
+    .button-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+
+      .option-button {
+        padding: 0.4rem 0.75rem;
+        border: 1px solid $gray;
+        background: white;
+        border-radius: $border-radius;
+        cursor: pointer;
+        font-size: 0.95rem;
+        transition: all 0.3s ease;
+
+        &.selected {
+          background-color: $primary;
+          opacity: 0.6;
+          border-color: $primary;
+          color: $primary;
+          font-weight: 600;
+        }
+
+        &:hover {
+          border-color: $primary;
+        }
+      }
+
+      &.size-options {
+        .option-button {
+          min-width: 40px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+// Responsive
+@media (max-width: 600px) {
+  .variant-selector {
+    .color-options,
+    .button-options {
+      gap: 0.4rem;
+    }
+
+    .option-button {
+      font-size: 0.85rem;
+      padding: 0.3rem 0.6rem;
+    }
+  }
+}

package/dist/embed-temp.scss

@@ -7,13 +7,23 @@
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);
     // padding: var(--_lt-pg);
-    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    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);
+    // width: var(--_ctm-lt-wh, var(--_ctm-lt-wh));
+    // width: var(--_sf-nw-wh, var(--_ctm-lt-wh));
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     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)))
+      1 * var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
+        var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
     );
 
     & > .wrapper {
@@ -25,8 +35,8 @@
     }
 
     .embed-element {
-      background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
-      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       display: flex;
       flex-direction: column;
       --_sf-gp: 16px;
@@ -34,18 +44,23 @@
       row-gap: var(--_sf-gp);
       width: 100%;
       height: 100%;
-      border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
-      border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
-      border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
-      border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
+      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+
+      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+
+      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+
       box-shadow: var(
         --_show-shadow,
-        var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
-          var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
+        var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+          var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+          var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+          var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
       );
 
       // transform: scale(var(--_ctm-dn-zm-ie));
-      scale: var(--_ctm-dn-zm-ie);
+      scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
       &[data-flip-x="true"] {
         transform: scaleX(-1);
       }

package/dist/faq.scss

@@ -13,14 +13,11 @@
     width: var(
       --_sf-el-wh-st-mx,
       calc(
-        1% *
-          var(
-            --_ctm-mob-ele-nw-wh-vl,
-            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-          )
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
       )
     );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn)));
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
     // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
     // height: var(--_ctm-lt-ht);
     // height: ;

package/dist/filters.scss

@@ -5,8 +5,17 @@ $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="filters"] {
-    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);
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
 
     & > div {
       &.wrapper {

package/dist/form-preview.scss

@@ -5,108 +5,143 @@
  * Preview Form Styles
  **************************************************************/
 
-$list: ("checkbox", "radio");
-
-.preview-form-main {
-  --color-primary: #4f46e5;
-  --color-primary-hover: #4338ca;
-  --color-danger: #dc3545;
-  --color-danger-hover: #b02a37;
-  --color-success: #10b981;
-  --color-success-hover: #0c8a67;
-  --color-text: #111827;
-  --color-muted: #6b7280;
-  --color-border: #e5e7eb;
-  --font-family-base: "Inter", system-ui, -apple-system, sans-serif;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem;
-  background: #ffffff;
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-
-  input {
-    --_sp-vl: var(--_width-15);
-    @each $value in $list {
-      &:is([type="#{$value}"]) {
-        width: var(--_sp-vl);
-        height: var(--_sp-vl);
-      }
-    }
-  }
+// $list: ("checkbox", "radio");
 
-  .preview-field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-  }
+// .preview-form-main {
+//   --color-primary: #4f46e5;
+//   --color-primary-hover: #4338ca;
+//   --color-danger: #dc3545;
+//   --color-danger-hover: #b02a37;
+//   --color-success: #10b981;
+//   --color-success-hover: #0c8a67;
+//   --color-text: #111827;
+//   --color-muted: #6b7280;
+//   --color-border: #e5e7eb;
+//   --font-family-base: "Inter", system-ui, -apple-system, sans-serif;
+//   display: flex;
+//   flex-direction: column;
+//   gap: 1rem;
+//   padding: 1.5rem;
+//   background: #ffffff;
+//   border: 1px solid var(--color-border);
+//   border-radius: 6px;
 
-  .preview-label {
-    font-weight: 500;
-  }
+//   input {
+//     --_sp-vl: var(--_width-15);
+//     @each $value in $list {
+//       &:is([type="#{$value}"]) {
+//         width: var(--_sp-vl);
+//         height: var(--_sp-vl);
+//       }
+//     }
+//   }
 
-  .input {
-    background: #fff;
-    border: 1px solid var(--color-border);
-    border-radius: 4px;
-    padding: 0.4rem 0.6rem;
-    font-size: 0.95rem;
-    transition: border-color 0.2s ease;
-    color: var(--color-text);
-    width: 100%;
-    box-sizing: border-box;
-  }
+//   .preview-field {
+//     display: flex;
+//     flex-direction: column;
+//     gap: 0.3rem;
+//   }
 
-  .input:focus {
-    outline: none;
-    border-color: var(--color-primary);
-  }
+//   .preview-label {
+//     font-weight: 500;
+//   }
 
-  .option {
-    display: flex;
-    gap: 5px;
-    align-items: center;
-  }
-  /* Select & Checkbox */
-  .select,
-  .radio,
-  .checkbox {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
+//   .input {
+//     background: #fff;
+//     border: 1px solid var(--color-border);
+//     border-radius: 4px;
+//     padding: 0.4rem 0.6rem;
+//     font-size: 0.95rem;
+//     transition: border-color 0.2s ease;
+//     color: var(--color-text);
+//     width: 100%;
+//     box-sizing: border-box;
+//   }
+
+//   .input:focus {
+//     outline: none;
+//     border-color: var(--color-primary);
+//   }
 
-  /* Error Messages */
-  .error {
-    color: var(--color-danger);
-    font-size: 0.85rem;
-    margin-top: 0.2rem;
+//   .option {
+//     display: flex;
+//     gap: 5px;
+//     align-items: center;
+//   }
+//   /* Select & Checkbox */
+//   .select,
+//   .radio,
+//   .checkbox {
+//     display: flex;
+//     align-items: center;
+//     gap: 1rem;
+//   }
+
+//   /* Error Messages */
+//   .error {
+//     color: var(--color-danger);
+//     font-size: 0.85rem;
+//     margin-top: 0.2rem;
+//   }
+
+//   /* Buttons */
+//   .test-button {
+//     background-color: var(--_primary-500);
+//     color: #fff;
+//     border: 1px solid vvar(--_primary-500);
+//     border-radius: 4px;
+//     padding: 0.5rem 1rem;
+//     font-weight: 500;
+//     cursor: pointer;
+//     transition:
+//       background-color 0.2s ease,
+//       border-color 0.2s ease;
+//   }
+
+//   /* Animations */
+//   @keyframes fadeIn {
+//     from {
+//       opacity: 0;
+//       transform: translateY(-2%);
+//     }
+//     to {
+//       opacity: 1;
+//       transform: translateY(0);
+//     }
+//   }
+// }
+
+.new-form-template {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  height: 100%;
+  width: 100%;
+  border-radius: 5px;
+  text-align: center;
+  background-color: #ffffff;
+
+  .icon-container {
+    margin-bottom: 10px;
+
+    svg {
+      width: 50px;
+      height: 50px;
+      color: #666;
+    }
   }
 
-  /* Buttons */
-  .test-button {
-    background-color: var(--_primary-500);
-    color: #fff;
-    border: 1px solid vvar(--_primary-500);
-    border-radius: 4px;
-    padding: 0.5rem 1rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition:
-      background-color 0.2s ease,
-      border-color 0.2s ease;
+  .title {
+    font-size: 1.2em;
+    color: #8b4513;
+    margin-bottom: 10px;
   }
 
-  /* Animations */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-2%);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+  .description {
+    font-size: 0.9em;
+    color: #777;
+    line-height: 1.4;
   }
 }