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

package/dist/menu-item.scss

@@ -1,19 +1,19 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-$activeElementSelector: "[data-has-clicked='true']";
-
-[data-div-type="element"] {
-  &[data-element-type="menu-item"] {
-    width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
-    //   var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
-    margin: prepareMediaVariable(--_ctm-lt-mn);
-
-    & > div {
-      &.wrapper {
-        width: 100%;
-        padding: prepareMediaVariablevar(--_ctm-lt-pg);
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+$activeElementSelector: "[data-has-clicked='true']";
+
+[data-div-type="element"] {
+  &[data-element-type="menu-item"] {
+    width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
+    //   var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
+    margin: prepareMediaVariable(--_ctm-lt-mn);
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        padding: prepareMediaVariablevar(--_ctm-lt-pg);
+      }
+    }
+  }
+}

package/dist/myTemplates.scss

@@ -193,6 +193,9 @@ $defaultValues: (
                   // color: var(--_gray-900);
                   color: var(--_thm-ty-p1-tt-cr);
                   font-family: var(--_thm-ty-p1-ft-fy);
+                  text-transform: var(--_thm-ty-p1-tt-tm);
+                  word-wrap: var(--_thm-ty-p1-wd-wp);
+                  word-break: var(--_thm-ty-p1-wd-bk);
                   font-size: var(--_thm-ty-p2-ft-se);
                   font-weight: var(--_thm-ty-p1-bd);
                   margin-left: -15px;

package/dist/order-processing.scss

@@ -1,61 +1,61 @@
-// processing payment screen
-.pmnt_process_wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  width: 100%;
-  background-color: var(--_gray-100);
-  .process_loader_content {
-    display: flex;
-    flex-direction: column;
-    /* gap: 8px; */
-    justify-content: center;
-    align-items: center;
-    .processing_loader {
-      position: relative;
-      width: 64px;
-      height: 64px;
-      margin-bottom: 24px;
-
-      &::before,
-      &::after {
-        content: "";
-        position: absolute;
-        border-radius: 50%;
-      }
-
-      // Background stroke
-      &::before {
-        width: 100%;
-        height: 100%;
-        border: 6px solid #e0e0e0;
-      }
-
-      // Animated stroke
-      &::after {
-        width: 100%;
-        height: 100%;
-        border: 6px solid transparent;
-        border-top-color: #243dc6;
-        animation: processing_loader_spin 1s linear infinite;
-      }
-      p {
-        margin-top: 8px;
-      }
-    }
-
-    h3 {
-      margin-block: 10px;
-    }
-
-    @keyframes processing_loader_spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-  }
-}
+// processing payment screen
+.pmnt_process_wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+  background-color: var(--_gray-100);
+  .process_loader_content {
+    display: flex;
+    flex-direction: column;
+    /* gap: 8px; */
+    justify-content: center;
+    align-items: center;
+    .processing_loader {
+      position: relative;
+      width: 64px;
+      height: 64px;
+      margin-bottom: 24px;
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        border-radius: 50%;
+      }
+
+      // Background stroke
+      &::before {
+        width: 100%;
+        height: 100%;
+        border: 6px solid #e0e0e0;
+      }
+
+      // Animated stroke
+      &::after {
+        width: 100%;
+        height: 100%;
+        border: 6px solid transparent;
+        border-top-color: #243dc6;
+        animation: processing_loader_spin 1s linear infinite;
+      }
+      p {
+        margin-top: 8px;
+      }
+    }
+
+    h3 {
+      margin-block: 10px;
+    }
+
+    @keyframes processing_loader_spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}

package/dist/overflow-module.scss

@@ -1,63 +1,63 @@
-@use "sass:map";
-@use "./functions.scss" as *;
-@use "./prefix-list.scss" as *;
-$var: "--_ctm-sf-or-mx-ht";
-$overflow: (
-  class: (
-    scrollable: "flx-oflow",
-  ),
-  attributes: (
-    vertical: "data-scroll-vertical",
-    horizontal: "data-scroll-horizontal",
-    maxHeight: "data-max-height",
-    displayScrollbar: "data-scrollbar",
-  ),
-);
-
-$overflowValues: (
-  scroll: auto,
-  hidden: hidden,
-  visible: visible,
-  // auto: auto,
-   // clip: clip,
-);
-
-@mixin FlexOverflowModuleStyles() {
-  $cls: map.get($overflow, class);
-  $attrs: map.get($overflow, attributes);
-
-  :is(.#{map.get($cls, scrollable)}) {
-    // Loop through both directions
-    @each $dir in (vertical, horizontal) {
-      $prop: if($dir == vertical, overflow-y, overflow-x);
-      $attr: map.get($attrs, $dir);
-
-      // For each possible overflow value (scroll, auto, hidden, etc.)
-      @each $dataVal, $cssVal in $overflowValues {
-        &[#{$attr}="#{$dataVal}"] {
-          #{$prop}: #{$cssVal};
-        }
-      }
-    }
-
-    // Apply max-height if vertical is scroll and max-height is set
-    &[#{map.get($attrs, vertical)}="scroll"] {
-      &[#{map.get($attrs, maxHeight)}] {
-        @include FlexUpdatedPrefixCSSVariable($var, false, maxHeight);
-        max-height: var(#{$var}, 100%) !important;
-      }
-    }
-
-    // Scrollbar styles only if enabled
-    &[#{map.get($attrs, displayScrollbar)}="true"] {
-      &::-webkit-scrollbar {
-        width: var(--cms-scrollbar-width, 8px);
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: var(--cms-scrollbar-thumb-color, rgba(0, 0, 0, 0.3));
-        border-radius: var(--cms-scrollbar-radius, 4px);
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "./functions.scss" as *;
+@use "./prefix-list.scss" as *;
+$var: "--_ctm-sf-or-mx-ht";
+$overflow: (
+  class: (
+    scrollable: "flx-oflow",
+  ),
+  attributes: (
+    vertical: "data-scroll-vertical",
+    horizontal: "data-scroll-horizontal",
+    maxHeight: "data-max-height",
+    displayScrollbar: "data-scrollbar",
+  ),
+);
+
+$overflowValues: (
+  scroll: auto,
+  hidden: hidden,
+  visible: visible,
+  // auto: auto,
+   // clip: clip,
+);
+
+@mixin FlexOverflowModuleStyles() {
+  $cls: map.get($overflow, class);
+  $attrs: map.get($overflow, attributes);
+
+  :is(.#{map.get($cls, scrollable)}) {
+    // Loop through both directions
+    @each $dir in (vertical, horizontal) {
+      $prop: if($dir == vertical, overflow-y, overflow-x);
+      $attr: map.get($attrs, $dir);
+
+      // For each possible overflow value (scroll, auto, hidden, etc.)
+      @each $dataVal, $cssVal in $overflowValues {
+        &[#{$attr}="#{$dataVal}"] {
+          #{$prop}: #{$cssVal};
+        }
+      }
+    }
+
+    // Apply max-height if vertical is scroll and max-height is set
+    &[#{map.get($attrs, vertical)}="scroll"] {
+      &[#{map.get($attrs, maxHeight)}] {
+        @include FlexUpdatedPrefixCSSVariable($var, false, maxHeight);
+        max-height: var(#{$var}, 100%) !important;
+      }
+    }
+
+    // Scrollbar styles only if enabled
+    &[#{map.get($attrs, displayScrollbar)}="true"] {
+      &::-webkit-scrollbar {
+        width: var(--cms-scrollbar-width, 8px);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--cms-scrollbar-thumb-color, rgba(0, 0, 0, 0.3));
+        border-radius: var(--cms-scrollbar-radius, 4px);
+      }
+    }
+  }
+}

package/dist/pickup-locations.scss

@@ -23,14 +23,17 @@
       .store__container {
         .stack {
           .vertical {
+            // The divider is a pseudo-element and takes no space of its own, so a thick
+            // one grew back over the item above it — see dividerGapReserve in functions.scss.
+            .item:not(:last-child) {
+              @include dividerGapReserve(--_ctm-dn-im-se-dr-wt);
+            }
             .item:not(:last-child)::after {
               content: "";
               position: absolute;
               left: 0;
               right: 0;
-              bottom: calc(
-                -1 * (var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2)
-              );
+              bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-im-se-dr-wt);
               height: var(
                 --_ctm-mob-dn-im-se-dr-wt,
                 var(--_ctm-tab-dn-im-se-dr-wt, var(--_ctm-dn-im-se-dr-wt))

package/dist/position-module.scss

@@ -1,95 +1,95 @@
-@use "sass:map";
-@use "sass:list";
-
-@use "./functions.scss" as *;
-@use "./prefix-list.scss" as *;
-
-$elementDragging: "[data-cms-new-element-dragging-v2='true']";
-$dataResizerTrue: '[data-cms-element-resizer="true"]';
-$activeElementSelector: "[data-has-clicked='true']";
-$editor: '[data-page-id="cms__template__editor"]';
-$var: "--_sf-width-rsp-psn";
-
-@function convertListToCommaSeparateString($list) {
-  $items: ();
-  @each $key, $value in $list {
-    $sl: ".#{$value}";
-    $items: list.append($items, $sl, comma);
-  }
-
-  @return $items;
-}
-
-$position: (
-  class: (
-    absolute: "flx-abs",
-    fixed: "flx-fxd",
-    sticky: "flx-stk",
-    relative: "flx-rel",
-  ),
-  zIndex: "--_ctm-flex-z-index",
-  attributes: (
-    horizontal: "data-position-horizonal",
-    vertical: "data-position-vertical",
-  ),
-  data: (
-    horizontal: (
-      right: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
-      left: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
-    ),
-    vertical: (
-      top: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
-      bottom: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
-    ),
-  ),
-);
-
-@mixin FlexPositionModuleStyles() {
-  $cls: map.get($position, class);
-  $zIndex: map.get($position, zIndex);
-  $attributes: map.get($position, attributes);
-  $data: map.get($position, data);
-  $pa: map.get($cls, absolute);
-  $pr: map.get($cls, relative);
-
-  :is(#{convertListToCommaSeparateString($cls)}) {
-    @each $key, $value in $data {
-      @each $key1, $value1 in $value {
-        &[#{map.get($attributes, $key)}="#{$key1}"] {
-          #{$key1}: #{$value1};
-        }
-      }
-    }
-    // @if(){
-
-    // }
-    // z-index: var(#{$zIndex});
-    &:is(.#{$pr}, .#{pa}) {
-      &:is(#{$editor} *) {
-        &#{$activeElementSelector} {
-          z-index: var(#{$zIndex});
-        }
-      }
-      &:not(#{$editor} *) {
-        z-index: var(#{$zIndex});
-      }
-    }
-    &:not(.#{$pr}, .#{pa}) {
-      z-index: var(#{$zIndex});
-    }
-    @each $key, $value in $cls {
-      &.#{$value} {
-        &:is(:not(#{$elementDragging}, #{$dataResizerTrue})) {
-          position: var(--_p-#{$key}) !important;
-          @if ($key == fixed) {
-            @include FlexUpdatedPrefixCSSVariable($var);
-            width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
-          }
-          @if not list.index((sticky, relative), $key) {
-            margin: 0px !important;
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+@use "./functions.scss" as *;
+@use "./prefix-list.scss" as *;
+
+$elementDragging: "[data-cms-new-element-dragging-v2='true']";
+$dataResizerTrue: '[data-cms-element-resizer="true"]';
+$activeElementSelector: "[data-has-clicked='true']";
+$editor: '[data-page-id="cms__template__editor"]';
+$var: "--_sf-width-rsp-psn";
+
+@function convertListToCommaSeparateString($list) {
+  $items: ();
+  @each $key, $value in $list {
+    $sl: ".#{$value}";
+    $items: list.append($items, $sl, comma);
+  }
+
+  @return $items;
+}
+
+$position: (
+  class: (
+    absolute: "flx-abs",
+    fixed: "flx-fxd",
+    sticky: "flx-stk",
+    relative: "flx-rel",
+  ),
+  zIndex: "--_ctm-flex-z-index",
+  attributes: (
+    horizontal: "data-position-horizonal",
+    vertical: "data-position-vertical",
+  ),
+  data: (
+    horizontal: (
+      right: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
+      left: prepareMediaVariable(--_ctm-flex-psn-hoft, 0px),
+    ),
+    vertical: (
+      top: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
+      bottom: prepareMediaVariable(--_ctm-flex-psn-voft, 0px),
+    ),
+  ),
+);
+
+@mixin FlexPositionModuleStyles() {
+  $cls: map.get($position, class);
+  $zIndex: map.get($position, zIndex);
+  $attributes: map.get($position, attributes);
+  $data: map.get($position, data);
+  $pa: map.get($cls, absolute);
+  $pr: map.get($cls, relative);
+
+  :is(#{convertListToCommaSeparateString($cls)}) {
+    @each $key, $value in $data {
+      @each $key1, $value1 in $value {
+        &[#{map.get($attributes, $key)}="#{$key1}"] {
+          #{$key1}: #{$value1};
+        }
+      }
+    }
+    // @if(){
+
+    // }
+    // z-index: var(#{$zIndex});
+    &:is(.#{$pr}, .#{pa}) {
+      &:is(#{$editor} *) {
+        &#{$activeElementSelector} {
+          z-index: var(#{$zIndex});
+        }
+      }
+      &:not(#{$editor} *) {
+        z-index: var(#{$zIndex});
+      }
+    }
+    &:not(.#{$pr}, .#{pa}) {
+      z-index: var(#{$zIndex});
+    }
+    @each $key, $value in $cls {
+      &.#{$value} {
+        &:is(:not(#{$elementDragging}, #{$dataResizerTrue})) {
+          position: var(--_p-#{$key}) !important;
+          @if ($key == fixed) {
+            @include FlexUpdatedPrefixCSSVariable($var);
+            width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
+          }
+          @if not list.index((sticky, relative), $key) {
+            margin: 0px !important;
+          }
+        }
+      }
+    }
+  }
+}