@sc-360-v2/storefront-cms-library 0.4.37 → 0.4.39

package/dist/bundleDetails.scss

@@ -221,7 +221,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             .embla__slide {
               width: unset;
               height: 100%;
-              aspect-ratio: 1 / 2;
+              // aspect-ratio: 1 / 2;
             }
           }
         }
@@ -795,7 +795,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               border-radius: 2px !important;
               outline: none;
               padding: 8px 12px !important;
-              background-color: #f9fafb;
+              &:disabled {
+                background-color: #f9fafb;
+              }
             }
 
             .add_to_cart_price {
@@ -4269,7 +4271,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 border-radius: 2px !important;
                 outline: none;
                 padding: 8px 12px !important;
-                background-color: #f9fafb;
+                &:disabled {
+                  background-color: #f9fafb;
+                }
               }
 
               small {

package/dist/buy-for-tab.scss

@@ -363,7 +363,7 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
                   );
                 }
 
-                &:not(.active) {
+                &:not(.active):not(:disabled) {
                   &:hover {
                     --_sf-buy-hr-bg-cr: var(
                       --_ctm-mob-buy-dn-ts-hr-se-bd-cr,
@@ -446,6 +446,12 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
                   flex: 1 0 auto;
                 }
 
+                &:disabled {
+                  opacity: 0.5;
+                  color: var(--_thm-cs-be-se-3);
+                  cursor: default;
+                }
+
                 & > span {
                   // display: var(--_d-flex);
                   width: 100%;

package/dist/buyForHeaders.scss

@@ -532,6 +532,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 background-color: var(--_thm-py-bs-hr-se-bd-cr);
                 color: var(--_thm-py-bs-hr-se-tt-cr);
               }
+              &:disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+              }
             }
           }
 
@@ -4507,6 +4511,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           .summary_container {
             width: 400px;
             height: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
             // order summary styles started
             .sklt_summary {
               display: flex;
@@ -4519,6 +4526,114 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
             }
 
+            // Coupon Styles
+            .coupon_code {
+              border: 1px solid var(--_gray-300);
+              border-radius: 4px;
+              .coupon_code_header {
+                background-color: var(--_gray-100);
+                padding: 12px 12px 14px 12px;
+                border-bottom: 0.5px solid var(--_gray-300);
+                h3 {
+                  font-size: 16px;
+                  color: var(--_gray-900);
+                }
+              }
+              .coupon_code_body {
+                display: flex;
+                flex-direction: column;
+                gap: 16px;
+                padding: 16px;
+
+                .coupon_code_apply_section {
+                  .coupon_code_fields_wrapper {
+                    display: flex;
+                    gap: 12px;
+                    &.divider {
+                      padding-bottom: 16px;
+                      border-bottom: 1px dashed var(--_gray-300);
+                    }
+                    .coupon-search-input {
+                      padding: 10px 16px;
+                      border: 1px solid var(--_gray-300);
+                      border-radius: 4px;
+                      height: 40px;
+                      &:focus {
+                        outline: 2px solid var(--_gray-100);
+                      }
+                    }
+                    .coupon-search-btn {
+                      padding: 10px 16px 12px 16px;
+                      white-space: nowrap;
+                      height: 40px;
+                    }
+                  }
+                  .coupon-list {
+                    .coupon-item {
+                      .coupon-info {
+                        .coupon-title {
+                          font-size: 16px;
+                          font-weight: 700;
+                          color: var(--_gray-900);
+                        }
+                        .coupon-desc {
+                          font-size: 14px;
+                          font-weight: 400;
+                          color: var(--_gray-600);
+                        }
+                        .remove-btn {
+                          padding: 12px;
+                          color: var(--_gray-900);
+                        }
+                      }
+                    }
+                  }
+                }
+                .apply_coupon_code_body {
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  gap: 12px;
+                  &:not(:last-child) {
+                    margin-bottom: 12px;
+                  }
+                  .apply_coupon_code_flex {
+                    display: flex;
+                    gap: 12px;
+                    .cpn__sale__icon {
+                      margin-top: 4px;
+                    }
+                    .apply_coupon_code {
+                      display: flex;
+                      flex-direction: column;
+                      .cpn_sale_text {
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: var(--_gray-900);
+                      }
+                    }
+                  }
+                  .cpn_sale_desc {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: var(--_gray-600);
+                  }
+                  .apply_coupon_code_btn {
+                    padding: 8px 16px;
+                  }
+                  .remove_coupon_code_btn {
+                    padding: 8px 16px;
+                    border: 1px solid var(--_gray-300);
+                    border-radius: 4px;
+                    color: var(--_gray-900);
+                    &:hover {
+                      background-color: var(--_gray-100);
+                    }
+                  }
+                }
+              }
+            }
+
             .cart_summary_wrapper {
               display: flex;
               flex-direction: column;
@@ -4530,6 +4645,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               word-break: keep-all;
               overflow: hidden;
               width: 380px;
+              border: 1px solid var(--_thm-cs-be-se-3);
 
               .cart_summary_heading_wrapper {
                 display: flex;
@@ -4538,7 +4654,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 gap: 12px;
                 align-self: stretch;
                 background: var(--_base-white);
-                border-bottom: 0px solid #d0d5dd;
+                border-bottom: 1px solid var(--_thm-cs-be-se-3);
                 border-radius: 4px 4px 0 0;
                 .icon svg {
                   path {
@@ -4561,12 +4677,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   color: #101828;
                   font-size: 24px;
                   font-weight: 600;
-                  padding: 0px 16px 16px 16px;
+                  padding: 16px;
                 }
               }
 
               .cart_summary_content_wrapper {
-                padding: 0px 16px 16px 16px;
+                padding: 16px;
                 display: flex;
                 flex-direction: column;
                 width: 100%;

package/dist/colorpicker_v2.scss

@@ -0,0 +1,52 @@
+.colorpicker__parent__v2 {
+  width: max-content;
+  max-width: 225px;
+  position: absolute;
+  left: auto;
+  background: #fff;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  padding: 12px;
+  z-index: 99999;
+  opacity: 0;
+  transform: translateY(-10px) scale(0.95, 0.95);
+  transform-origin: center;
+  animation: pickerAnim 0.45s ease-in-out 1 forwards;
+  // animation: name duration timing-function delay iteration-count direction fill-mode;
+
+  @keyframes pickerAnim {
+    to {
+      transform: translateY(0) scale(1, 1);
+      opacity: 1;
+    }
+  }
+
+  & > div {
+    box-shadow: none !important;
+
+    label {
+      color: #475467;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 1.5;
+    }
+  }
+}
+
+.cutom__hex__v2 {
+  padding: 0 12px !important;
+  border-radius: 8px !important;
+  border: 1px solid #d0d5dd !important;
+  background: #fff !important;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+  width: 100%;
+  font-size: 16px !important;
+  line-height: 24px !important;
+  padding-block: 8px !important;
+}
+
+.custom__div__v2 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}

package/dist/countdown.scss

@@ -21,19 +21,19 @@
       )
     );
     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-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)))
-        )
-    );
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // --_aspect-ratio: calc(
+    //   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 {
       width: 100%;
       // overflow: clip;
-      height: 100%;
+      // height: 100%;
       &[data-widget-shadow="true"] {
         box-shadow: var(
             --_ctm-mob-dn-cn-wt-sw-ae,
@@ -228,7 +228,7 @@
 
     .countdown__container {
       display: flex;
-      height: 100%;
+      // height: 100%;
       gap: var(
         --_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
         var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
@@ -243,9 +243,117 @@
         var(--_ctm-tab-dn-cn-wt-br-rs, var(--_ctm-dn-cn-wt-br-rs))
       );
 
+      &[data-show-divider="true"] {
+        &[data-text-position="left"] {
+          & > div:not(:first-child)::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            bottom: 0; /* For full height divider */
+            left: calc(
+              -1 *
+                (
+                  var(
+                      --_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
+                      var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
+                    ) /
+                    2
+                )
+            ); /* Half of your gap, assuming divider is centered in the gap */
+            width: var(
+              --_ctm-mob-dn-cn-wt-dr-wt,
+              var(--_ctm-tab-dn-cn-wt-dr-wt, var(--_ctm-dn-cn-wt-dr-wt))
+            ); /* Divider thickness */
+            background-color: var(
+              --_ctm-mob-dn-cn-wt-dr-cr,
+              var(--_ctm-tab-dn-cn-wt-dr-cr, var(--_ctm-dn-cn-wt-dr-cr))
+            ); /* Divider color */
+          }
+        }
+        &[data-text-position="right"] {
+          & > div:not(:first-child)::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            bottom: 0; /* For full height divider */
+            right: calc(
+              -1 *
+                (
+                  var(
+                      --_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
+                      var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
+                    ) /
+                    2
+                )
+            ); /* Half of your gap, assuming divider is centered in the gap */
+            width: var(
+              --_ctm-mob-dn-cn-wt-dr-wt,
+              var(--_ctm-tab-dn-cn-wt-dr-wt, var(--_ctm-dn-cn-wt-dr-wt))
+            ); /* Divider thickness */
+            background-color: var(
+              --_ctm-mob-dn-cn-wt-dr-cr,
+              var(--_ctm-tab-dn-cn-wt-dr-cr, var(--_ctm-dn-cn-wt-dr-cr))
+            ); /* Divider color */
+          }
+        }
+        &[data-text-position="top"] {
+          & > div:not(:last-child)::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: calc(
+              -1 *
+                (
+                  var(
+                      --_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
+                      var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
+                    ) /
+                    2
+                )
+            );
+            height: var(
+              --_ctm-mob-dn-cn-wt-dr-wt,
+              var(--_ctm-tab-dn-cn-wt-dr-wt, var(--_ctm-dn-cn-wt-dr-wt))
+            );
+            background-color: var(
+              --_ctm-mob-dn-cn-wt-dr-cr,
+              var(--_ctm-tab-dn-cn-wt-dr-cr, var(--_ctm-dn-cn-wt-dr-cr))
+            );
+          }
+        }
+        &[data-text-position="bottom"] {
+          & > div:not(:first-child)::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: calc(
+              -1 *
+                (
+                  var(
+                      --_ctm-mob-dn-cn-lt-wt-tt-ad-im-sg,
+                      var(--_ctm-tab-dn-cn-lt-wt-tt-ad-im-sg, var(--_ctm-dn-cn-lt-wt-tt-ad-im-sg))
+                    ) /
+                    2
+                )
+            );
+            height: var(
+              --_ctm-mob-dn-cn-wt-dr-wt,
+              var(--_ctm-tab-dn-cn-wt-dr-wt, var(--_ctm-dn-cn-wt-dr-wt))
+            );
+            background-color: var(
+              --_ctm-mob-dn-cn-wt-dr-cr,
+              var(--_ctm-tab-dn-cn-wt-dr-cr, var(--_ctm-dn-cn-wt-dr-cr))
+            );
+          }
+        }
+      }
+
       .content__container {
         display: flex;
         flex-direction: column;
+        position: relative;
 
         background-color: var(
           --_ctm-mob-dn-cn-wt-tt-cr-dn-bd-cr,
@@ -270,6 +378,9 @@
           --_ctm-mob-dn-cn-wt-tt-cr-lt-te-ad-dn-sg,
           var(--_ctm-tab-dn-cn-wt-tt-cr-lt-te-ad-dn-sg, var(--_ctm-dn-cn-wt-tt-cr-lt-te-ad-dn-sg))
         );
+        h1 {
+          white-space: nowrap;
+        }
       }
 
       .content__container {
@@ -375,6 +486,7 @@
       }
 
       .countdown {
+        position: relative;
         width: 100%;
         display: grid;
         grid-auto-flow: column;