@sc-360-v2/storefront-cms-library 0.5.59 → 0.5.60

package/dist/section.scss

@@ -15,22 +15,15 @@ $tb: "tb_d_none";
 $mb: "mb_d_none";
 
 $rp: (
-  class: (
-    #{$tb}: (
-        laptop: (
-          display: "none !important",
-        ),
+  class: (#{$tb}: (laptop: (display: "none !important",
       ),
-    #{$dp}: (
-        desktop: (
-          display: "none !important",
-        ),
+    ),
+    #{$dp}: (desktop: (display: "none !important",
       ),
-    #{$mb}: (
-        mobile: (
-          display: "none !important",
-        ),
+    ),
+    #{$mb}: (mobile: (display: "none !important",
       ),
+    ),
   ),
 );
 
@@ -94,19 +87,12 @@ section {
     justify-self: stretch;
     align-self: stretch;
     justify-content: center;
-    --_sf-element-vt-pd: max(
-      0.5px,
-      0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-    );
-    --_sf-element-hr-pd: max(
-      0.5px,
-      0.0117188 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-    );
-    box-shadow: var(
-      --_hide-section-shadow,
-      prepareMediaVariable(--_ctm-sec-dn-sw-ae) prepareMediaVariable(--_ctm-sec-dn-sw-br)
-        prepareMediaVariable(--_ctm-sec-dn-sw-sd) prepareMediaVariable(--_ctm-sec-dn-sw-cr)
-    );
+    --_sf-element-vt-pd: max(0.5px,
+        0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width)));
+    --_sf-element-hr-pd: max(0.5px,
+        0.0117188 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width)));
+    box-shadow: var(--_hide-section-shadow,
+        prepareMediaVariable(--_ctm-sec-dn-sw-ae) prepareMediaVariable(--_ctm-sec-dn-sw-br) prepareMediaVariable(--_ctm-sec-dn-sw-sd) prepareMediaVariable(--_ctm-sec-dn-sw-cr));
     border-radius: prepareMediaVariable(--_ctm-sec-dn-br-rs) !important;
 
     &[data-background-type="color"] {
@@ -116,29 +102,21 @@ section {
     &[data-background-type="gradient"] {
       --_sf-sec-gradient-angle: calc(#{prepareMediaVariable(--_ctm-sec-dn-gt-ae, 90)} * 1deg);
       --_sf-sec-gradient-start-color: #{prepareMediaVariable(--_ctm-sec-dn-gt-st-cr, transparent)};
-      --_sf-sec-gradient-start-position: calc(
-        #{prepareMediaVariable(--_ctm-sec-dn-gt-st-pn, 0)} * 1%
-      );
+      --_sf-sec-gradient-start-position: calc(#{prepareMediaVariable(--_ctm-sec-dn-gt-st-pn, 0)} * 1%);
       --_sf-sec-gradient-end-color: #{prepareMediaVariable(--_ctm-sec-dn-gt-ed-cr, transparent)};
-      --_sf-sec-gradient-end-position: calc(
-        #{prepareMediaVariable(--_ctm-sec-dn-gt-ed-pn, 100)} * 1%
-      );
+      --_sf-sec-gradient-end-position: calc(#{prepareMediaVariable(--_ctm-sec-dn-gt-ed-pn, 100)} * 1%);
       --_sf-sec-gradient-position: #{prepareMediaVariable(--_ctm-sec-dn-gt-pn, center)};
 
       &[data-gradient-type="Linear Gradient"] {
-        background-image: linear-gradient(
-          var(--_sf-sec-gradient-angle),
-          var(--_sf-sec-gradient-start-color) var(--_sf-sec-gradient-start-position),
-          var(--_sf-sec-gradient-end-color) var(--_sf-sec-gradient-end-position)
-        );
+        background-image: linear-gradient(var(--_sf-sec-gradient-angle),
+            var(--_sf-sec-gradient-start-color) var(--_sf-sec-gradient-start-position),
+            var(--_sf-sec-gradient-end-color) var(--_sf-sec-gradient-end-position));
       }
 
       &[data-gradient-type="Radial Gradient"] {
-        background-image: radial-gradient(
-          circle at var(--_sf-sec-gradient-position),
-          var(--_sf-sec-gradient-start-color) var(--_sf-sec-gradient-start-position),
-          var(--_sf-sec-gradient-end-color) var(--_sf-sec-gradient-end-position)
-        );
+        background-image: radial-gradient(circle at var(--_sf-sec-gradient-position),
+            var(--_sf-sec-gradient-start-color) var(--_sf-sec-gradient-start-position),
+            var(--_sf-sec-gradient-end-color) var(--_sf-sec-gradient-end-position));
       }
     }
 
@@ -163,7 +141,7 @@ section {
       display: var(--_d-flex) !important;
     }
 
-    & > div {
+    &>div {
       &[data-type="wrapper-layer"] {
         display: var(--_d-flex) !important;
         pointer-events: none;
@@ -182,10 +160,8 @@ section {
 
       &[data-div-type="cms-section-wrapper"] {
         // max-width: var(--_sf-wp-mx-wt);
-        max-width: var(
-          --_sf-dt-sec-mw,
-          min(100%, prepareMediaVariable(--_ctm-sec-lt-wh))
-        ) !important;
+        max-width: var(--_sf-dt-sec-mw,
+            min(100%, prepareMediaVariable(--_ctm-sec-lt-wh))) !important;
         // min-height: prepareMediaVariable(--_ctm-sec-lt-mn-ht);
         margin-inline: auto;
         position: var(--_p-relative);
@@ -207,7 +183,7 @@ section {
 div[data-div-type="element"] {
   position: var(--_p-relative);
 
-  & > .wrapper {
+  &>.wrapper {
     grid-area: 1/1/2/2 !important;
 
     a {
@@ -235,7 +211,7 @@ div[data-div-type="element"] {
     }
 
     &:is(#{$activeElementSelector}) {
-      & > div {
+      &>div {
         &[data-div-type="wrapper__layer"] {
           --_sf-vt-zz: visible;
           --_sf-op-zz: 1;
@@ -243,7 +219,7 @@ div[data-div-type="element"] {
       }
     }
 
-    & > .wrapper {
+    &>.wrapper {
       height: 100%;
       width: 100%;
     }
@@ -273,4 +249,4 @@ div[data-div-type="element"] {
   //     );
   //   }
   // }
-}
+}

package/dist/shareCartSideBar.scss

@@ -1,254 +1,254 @@
-@use "sass:map";
-@use "sass:list";
-
-// Variables
-$primary-color: #243dc6;
-$text-color: #2d2d2d;
-$background-color: #ffffff;
-$border-radius: 6px;
-$input-border: #e0e0e0;
-$error-color: #e53935;
-$hint-color: #7d7d7d;
-$shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
-
-.sidebar_container_glass_overlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.2);
-  z-index: 9999;
-
-  // Container overlay
-  .sidebar-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(20, 20, 20, 0.4); // Glass effect
-    backdrop-filter: blur(3px);
-    z-index: 1000;
-  }
-
-  // Sidebar slide-in
-  .sidebar-container {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 400px;
-    max-width: 100%;
-    height: 100vh;
-    background: $background-color;
-    box-shadow: $shadow;
-    z-index: 1001;
-    display: flex;
-    flex-direction: column;
-    animation: slide-in 0.3s ease-out;
-    .container {
-      overflow-y: auto;
-      width: 100%;
-      height: calc(100vh - 40px);
-      padding: 0px;
-    }
-
-    @keyframes slide-in {
-      from {
-        transform: translateX(100%);
-      }
-      to {
-        transform: translateX(0);
-      }
-    }
-  }
-
-  // Header
-  .sidebar-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 16px 16px 24px;
-    position: sticky;
-    top: 0px;
-    background: var(--_base-white);
-    border-bottom: 1px solid var(--_gray-200);
-
-    h2 {
-      font-size: 18px;
-      font-weight: 600;
-      color: $text-color;
-    }
-
-    .close-btn {
-      cursor: pointer;
-      width: 32px;
-      height: 32px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      &:hover {
-        background-color: var(--_gray-50);
-        border-radius: 6px;
-        svg path {
-          stroke: var(--_gray-900);
-        }
-      }
-    }
-  }
-
-  .share_cart_body {
-    padding: 16px 24px;
-  }
-
-  // Form fields
-  .form-group {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 16px;
-
-    label {
-      font-weight: 500;
-      margin-bottom: 6px;
-      color: $text-color;
-    }
-
-    input {
-      padding: 10px 12px;
-      font-size: 14px;
-      border-radius: $border-radius;
-      border: 1px solid $input-border;
-      outline: none;
-
-      &:focus {
-        border-color: $primary-color;
-        outline: 2px solid var(--_primary-200);
-      }
-    }
-
-    .hint {
-      font-size: 12px;
-      color: $hint-color;
-      margin-top: 4px;
-    }
-
-    .error {
-      color: $error-color;
-      font-size: 12px;
-      margin-top: 4px;
-    }
-  }
-
-  // Chip Input
-  .input-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    // gap: 6px;
-    // padding: 8px 0px;
-    // border: 1px solid #ccc;
-    // border-radius: 8px;
-    // min-height: 44px;
-    cursor: text;
-  }
-
-  .chips-input-wrapper:focus-within {
-    border-color: $primary-color;
-  }
-
-  .chips-input {
-    flex: 1;
-    border: none;
-    outline: none;
-    min-width: 120px;
-    font-size: 14px;
-  }
-
-  .chip {
-    display: flex;
-    align-items: center;
-    background-color: #f1f1f1;
-    padding: 4px 8px;
-    border-radius: 999px;
-    font-size: 13px;
-
-    button {
-      margin-left: 6px;
-      background: transparent;
-      border: none;
-      font-size: 16px;
-      cursor: pointer;
-      line-height: 1;
-    }
-  }
-
-  // Footer buttons
-  .sidebar-footer {
-    margin-top: auto;
-    display: flex;
-    justify-content: end;
-    align-items: center;
-    gap: 24px;
-    padding: 12px;
-    border-top: 1px solid #eee;
-
-    .discard-btn {
-      background: none;
-      border: none;
-      color: $text-color;
-      cursor: pointer;
-      font-weight: 600;
-
-      padding: 12px 14px;
-      border-radius: 6px;
-      &:hover {
-        background: var(--_gray-100);
-      }
-    }
-
-    .share-btn {
-      background: $primary-color;
-      color: $background-color;
-      border: none;
-      padding: 10px 16px;
-      border-radius: $border-radius;
-      cursor: pointer;
-      font-weight: 600;
-      transition: background 0.2s;
-      //  if it needed import the darken function from sass
-      // &:hover {
-      //   background: darken($primary-color, 5%);
-      // }
-    }
-  }
-
-  // PhoneInput override
-  .react-tel-input {
-    input {
-      width: 100% !important;
-      border-radius: $border-radius !important;
-      border-color: $input-border !important;
-    }
-  }
-
-  .form-group.get_promotons {
-    display: flex;
-    // align-items: center;
-    gap: 8px; // spacing between checkbox and label
-    margin-top: 12px;
-    flex-direction: row;
-
-    input[type="checkbox"] {
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-      accent-color: var(--_primary-400);
-    }
-
-    label {
-      font-size: 14px;
-      color: $text-color;
-      cursor: pointer;
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+// Variables
+$primary-color: #243dc6;
+$text-color: #2d2d2d;
+$background-color: #ffffff;
+$border-radius: 6px;
+$input-border: #e0e0e0;
+$error-color: #e53935;
+$hint-color: #7d7d7d;
+$shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+
+.sidebar_container_glass_overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 9999;
+
+  // Container overlay
+  .sidebar-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(20, 20, 20, 0.4); // Glass effect
+    backdrop-filter: blur(3px);
+    z-index: 1000;
+  }
+
+  // Sidebar slide-in
+  .sidebar-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 400px;
+    max-width: 100%;
+    height: 100vh;
+    background: $background-color;
+    box-shadow: $shadow;
+    z-index: 1001;
+    display: flex;
+    flex-direction: column;
+    animation: slide-in 0.3s ease-out;
+    .container {
+      overflow-y: auto;
+      width: 100%;
+      height: calc(100vh - 40px);
+      padding: 0px;
+    }
+
+    @keyframes slide-in {
+      from {
+        transform: translateX(100%);
+      }
+      to {
+        transform: translateX(0);
+      }
+    }
+  }
+
+  // Header
+  .sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 16px 16px 24px;
+    position: sticky;
+    top: 0px;
+    background: var(--_base-white);
+    border-bottom: 1px solid var(--_gray-200);
+
+    h2 {
+      font-size: 18px;
+      font-weight: 600;
+      color: $text-color;
+    }
+
+    .close-btn {
+      cursor: pointer;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      &:hover {
+        background-color: var(--_gray-50);
+        border-radius: 6px;
+        svg path {
+          stroke: var(--_gray-900);
+        }
+      }
+    }
+  }
+
+  .share_cart_body {
+    padding: 16px 24px;
+  }
+
+  // Form fields
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+
+    label {
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: $text-color;
+    }
+
+    input {
+      padding: 10px 12px;
+      font-size: 14px;
+      border-radius: $border-radius;
+      border: 1px solid $input-border;
+      outline: none;
+
+      &:focus {
+        border-color: $primary-color;
+        outline: 2px solid var(--_primary-200);
+      }
+    }
+
+    .hint {
+      font-size: 12px;
+      color: $hint-color;
+      margin-top: 4px;
+    }
+
+    .error {
+      color: $error-color;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+  }
+
+  // Chip Input
+  .input-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    // gap: 6px;
+    // padding: 8px 0px;
+    // border: 1px solid #ccc;
+    // border-radius: 8px;
+    // min-height: 44px;
+    cursor: text;
+  }
+
+  .chips-input-wrapper:focus-within {
+    border-color: $primary-color;
+  }
+
+  .chips-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    min-width: 120px;
+    font-size: 14px;
+  }
+
+  .chip {
+    display: flex;
+    align-items: center;
+    background-color: #f1f1f1;
+    padding: 4px 8px;
+    border-radius: 999px;
+    font-size: 13px;
+
+    button {
+      margin-left: 6px;
+      background: transparent;
+      border: none;
+      font-size: 16px;
+      cursor: pointer;
+      line-height: 1;
+    }
+  }
+
+  // Footer buttons
+  .sidebar-footer {
+    margin-top: auto;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    gap: 24px;
+    padding: 12px;
+    border-top: 1px solid #eee;
+
+    .discard-btn {
+      background: none;
+      border: none;
+      color: $text-color;
+      cursor: pointer;
+      font-weight: 600;
+
+      padding: 12px 14px;
+      border-radius: 6px;
+      &:hover {
+        background: var(--_gray-100);
+      }
+    }
+
+    .share-btn {
+      background: $primary-color;
+      color: $background-color;
+      border: none;
+      padding: 10px 16px;
+      border-radius: $border-radius;
+      cursor: pointer;
+      font-weight: 600;
+      transition: background 0.2s;
+      //  if it needed import the darken function from sass
+      // &:hover {
+      //   background: darken($primary-color, 5%);
+      // }
+    }
+  }
+
+  // PhoneInput override
+  .react-tel-input {
+    input {
+      width: 100% !important;
+      border-radius: $border-radius !important;
+      border-color: $input-border !important;
+    }
+  }
+
+  .form-group.get_promotons {
+    display: flex;
+    // align-items: center;
+    gap: 8px; // spacing between checkbox and label
+    margin-top: 12px;
+    flex-direction: row;
+
+    input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      accent-color: var(--_primary-400);
+    }
+
+    label {
+      font-size: 14px;
+      color: $text-color;
+      cursor: pointer;
+    }
+  }
+}