@sc-360-v2/storefront-cms-library 0.2.79 → 0.2.81

package/dist/cartDropdownOverlay.scss

@@ -1,3 +1,5 @@
+@use "sass:color"; // Import the sass:color module
+
 // Variables
 $primary-color: #243dc6;
 $background-color: #ffffff;
@@ -5,6 +7,8 @@ $text-color: #333333;
 $border-radius: 8px;
 $shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 $font-size: 14px;
+$header-text-font-size: 16px;
+$header-btn-font-size: 24px;
 $spacing-sm: 6px;
 $spacing-md: 12px;
 $button-padding: 6px 12px;
@@ -32,7 +36,37 @@ $button-padding: 6px 12px;
     padding: $spacing-md;
     z-index: 1000;
     // width: 220px;
+    .header-template {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-bottom: $spacing-md;
+      border-bottom: 1px solid #eee;
+      margin-bottom: $spacing-md;
+
+      span {
+        font-size: $header-text-font-size;
+        font-weight: 600;
+        color: $text-color;
+      }
 
+      button {
+        color: $primary-color;
+        font-size: $header-btn-font-size;
+        background: none;
+        border: none;
+        cursor: pointer;
+        transition: color 0.2s ease-in-out;
+
+        &:hover {
+          color: color.scale($primary-color, $lightness: -10%); // Use color.scale
+        }
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
     .option {
       display: flex;
       align-items: center;
@@ -88,31 +122,4 @@ $button-padding: 6px 12px;
     top: -192px; /* shows above the button */
     margin-bottom: 8px;
   }
-  .cta-text-button {
-    background: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-    color: #2563eb; // Blue-600
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    text-decoration: underline;
-    transition: color 0.2s ease;
-
-    &:hover {
-      color: #1d4ed8; // Blue-700
-    }
-
-    &:focus {
-      outline: none;
-      text-decoration: underline;
-    }
-
-    &:disabled {
-      color: #9ca3af; // Gray-400
-      cursor: not-allowed;
-      text-decoration: none;
-    }
-  }
 }

package/dist/checkout.scss

@@ -0,0 +1,173 @@
+@use "sass:map";
+@use "sass:list";
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+
+$primary-color: var(--_primary-400);
+$secondary-color: var(--_gray-300);
+$light-color: #f5f5f5;
+$dark-color: #343a40;
+
+[data-div-type="element"] {
+  &[data-element-type="checkout"] {
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_mob-ctm-ele-nw-wh-vl,
+            var(--_tab-ctm-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 {
+        width: 100%;
+      }
+    }
+
+    .checkout_wrapper {
+      font-family: Arial, sans-serif;
+      font-size: 0.95rem;
+      color: $dark-color;
+      .accordion {
+        border-radius: 4px;
+        margin-bottom: 1rem;
+
+        .accordion-header {
+          padding: 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          cursor: pointer;
+          background-color: $light-color;
+
+          .accordion-title {
+            font-weight: 600;
+            margin-right: 1rem;
+            white-space: nowrap;
+          }
+          .edit-btn {
+            align-self: flex-end;
+            background: none;
+            border: none;
+            color: $primary-color;
+            cursor: pointer;
+            font-size: 0.875rem;
+            padding: 0;
+            margin-top: 4px;
+
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+
+        .accordion-body {
+          padding: 1rem 0;
+
+          .accordion-summary {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            color: $dark-color;
+            font-size: 0.95rem;
+            gap: 0.25rem;
+
+            .summary-content {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              gap: 0.5rem;
+
+              .shipping-summary {
+                display: flex;
+                flex-direction: column;
+                gap: 0.3rem;
+
+                .address {
+                  font-weight: 500;
+                  color: $dark-color;
+                  line-height: 1.5;
+                }
+
+                .contact {
+                  font-size: 0.875rem;
+                  color: $dark-color;
+                  line-height: 1.4;
+                }
+              }
+
+              .change-link {
+                color: $primary-color;
+                font-size: 0.875rem;
+                text-decoration: underline;
+                cursor: pointer;
+                align-self: flex-start;
+                white-space: nowrap;
+              }
+            }
+          }
+
+          form {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            max-width: calc(100% - 200px);
+          }
+          .form-group {
+            display: flex;
+            justify-content: space-between;
+            flex-direction: row;
+            gap: 30px;
+          }
+
+          input,
+          select {
+            font-size: 14px;
+            padding: 10px;
+            border: 1px solid $secondary-color;
+            border-radius: 4px;
+            width: -webkit-fill-available;
+          }
+
+          input[type="checkbox"] {
+            width: auto;
+          }
+
+          label {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 14px;
+          }
+
+          .checkbox-group {
+            display: flex;
+            align-items: center;
+            justify-content: start;
+            gap: 8px;
+          }
+
+          .submit-btn {
+            align-self: flex-start;
+            margin-top: 1rem;
+            background-color: $primary-color;
+            color: $light-color;
+            border: none;
+            padding: 0.5rem 1rem;
+            font-size: 14px;
+            border-radius: 4px;
+            cursor: pointer;
+
+            &:hover {
+              opacity: 0.8;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/layouter.scss

@@ -2,6 +2,7 @@
 @use "sass:list";
 @use "./repeater-embla-controls.scss" as *;
 $childItemSelector: '[data-element-type="layouter-item"]';
+$sliderControlDragging: "[flex-slider-control-moving='true']";
 [data-div-type="element"] {
   &[data-element-type="layouter"] {
     // width: var(--_sf-con-nw-wh);
@@ -123,7 +124,10 @@ $childItemSelector: '[data-element-type="layouter-item"]';
     }
 
     &.sld {
-      overflow: clip;
+      &:is(:not(#{$sliderControlDragging} *)) {
+        overflow: clip;
+      }
+      // overflow: clip;
       height: auto;
       min-height: 50px !important;
       --_sf-sl-ct-ic-dt-at-cl: var(
@@ -133,8 +137,11 @@ $childItemSelector: '[data-element-type="layouter-item"]';
       // &:is([data-control-type="1"]) {
       //   @include CMSRepeaterEmblaControlStyles(1);
       // }
-      @for $i from 1 through 2 {
+      @for $i from 1 through 3 {
         &:is([data-control-type="#{$i}"]) {
+          @if ($i == 3) {
+            overflow-y: visible;
+          }
           @include CMSRepeaterEmblaControlStyles($i);
         }
       }

package/dist/light-box-v2.scss

@@ -16,6 +16,10 @@ $activeElementSelector: "[data-has-clicked='true']";
   --_cms-element-active-zIndex: calc(
     var(--_cms-section-add-button-zIndex) + var(--_cms-sl-df-zIndex) + 3
   );
+  --_sf-element-vt-pd: max(
+    0.5px,
+    0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
+  );
 
   &:has(#{$activeElementSelector}) {
     // border: 1px solid var(--_accent-color-2-500);