@sc-360-v2/storefront-cms-library 0.4.99 → 0.5.1

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/order-status.scss

@@ -823,8 +823,8 @@ $defaultValues: (
                 font-weight: 500;
                 line-height: 18px;
                 // background-color: #eff8ff;
-                @include BgColorLighter(var(--_thm-cs-at-py), 5%);
-                color: var(--_thm-cs-at-py);
+                // @include BgColorLighter(var(--_thm-cs-at-py), 5%);
+                // color: var(--_thm-cs-at-py);
 
                 display: inline-flex;
                 align-items: center;
@@ -837,18 +837,20 @@ $defaultValues: (
                   border-radius: 50%;
                   background-color: currentColor;
                 }
-                // &.success {
-                //   background-color: var(--_success-200);
-                //   &::before {
-                //     background-color: var(--_success-700);
-                //   }
-                // }
-                // &.failed {
-                //   background-color: var(--_error-100);
-                //   &::before {
-                //     background-color: var(--_error-700);
-                //   }
-                // }
+                &.success {
+                  background-color: var(--_success-50);
+                  color: var(--_success-600);
+                  &::before {
+                    background-color: var(--_success-700);
+                  }
+                }
+                &.failed {
+                  background-color: var(--_error-50);
+                  color: var(--_error-700);
+                  &::before {
+                    background-color: var(--_error-700);
+                  }
+                }
               }
 
               .link-button {
@@ -924,7 +926,20 @@ $defaultValues: (
                   var(--_ctm-tab-dn-or-io-or-de-tt-an, var(--_ctm-dn-or-io-or-de-tt-an))
                 );
               }
-              .currency_span {
+              .expected_delivery {
+                line-height: prepareMediaVariable(--_ctm-dn-or-io-sg-md-le-ht);
+                font-family: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-fy);
+                font-size: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se);
+                // font-size: 16px;
+                color: prepareMediaVariable(--_ctm-dn-or-io-sg-md-cr);
+                font-weight: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-wt);
+                text-decoration: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ue);
+                letter-spacing: prepareMediaVariable(--_ctm-dn-or-io-sg-md-lr-sg);
+
+                font-style: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se-ic);
+                text-align: prepareMediaVariable(--_ctm-dn-or-io-sg-md-tt-an);
+              }
+              .total_amount {
                 line-height: 24px;
                 font-family: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-fy);
                 font-size: prepareMediaVariable(--_ctm-dn-or-io-sg-md-ft-se);
@@ -1512,7 +1527,9 @@ $defaultValues: (
               );
             }
 
-            .item-specs {
+            .item-specs,
+            .item-sku-code,
+            .item-options {
               padding: var(
                 --_ctm-mob-dn-pt-wt-pt-ce-pg,
                 var(--_ctm-tab-dn-pt-wt-pt-ce-im-pg, var(--_ctm-dn-pt-wt-pt-ce-pg))
@@ -1889,6 +1906,19 @@ $defaultValues: (
         text-align: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-an);
         padding: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-pg);
       }
+      .break_up_amount {
+        line-height: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-le-ht-dc);
+        font-family: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-fy-dc);
+        font-size: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se-dc);
+        color: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-cr-dc);
+        font-weight: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-wt-dc);
+        text-decoration: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ue-dc);
+        letter-spacing: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-lr-sg-dc);
+
+        font-style: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-ft-se-ic-dc);
+        text-align: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-tt-an-dc);
+        padding: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-pg-dc);
+      }
     }
   }
 

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);
+      }
+    }
+  }
+}