@sc-360-v2/storefront-cms-library 0.4.82 → 0.4.87

package/dist/container.scss

@@ -1,114 +1,115 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-$activeElementSelector: "[data-has-clicked='true']";
-[data-div-type="element"] {
-  &[data-element-type="container"] {
-    // width: var(--_sf-con-nw-wh);
-    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    // width: calc(
-    //   1% *
-    //     var(
-    //       --_ctm-mob-con-ele-nw-wh-vl,
-    //       var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl)),
-    //       auto
-    //     )
-    // );
-    // width: 100%;
-    // height: var(--_ctm-con-lt-ht);
-
-    width: calc(
-      1% *
-        var(
-          --_ctm-mob-con-ele-nw-wh-vl,
-          var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl, auto))
-        )
-    );
-    margin: var(
-      --_ctm-mob-con-lt-mn,
-      var(--_ctm-tab-con-lt-mn, var(--_ctm-con-lt-mn, var(--_ctm-lt-mn)))
-    );
-
-    &[data-show-border="true"] {
-      border-color: var(
-        --_ctm-mob-con-dn-br-cr,
-        var(--_ctm-tab-con-dn-br-cr, var(--_ctm-con-dn-br-cr))
-      );
-      border-style: var(
-        --_ctm-mob-con-dn-br-se,
-        var(--_ctm-tab-con-dn-br-se, var(--_ctm-con-dn-br-se))
-      );
-      border-width: var(
-        --_ctm-mob-con-dn-br-wh,
-        var(--_ctm-tab-con-dn-br-wh, var(--_ctm-con-dn-br-wh))
-      );
-    }
-    &[data-show-shadow="true"] {
-      // box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-con-dn-sw-ae, var(--_ctm-dn-sw-ae)))
-      //   var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-con-dn-sw-br, var(--_ctm-dn-sw-br)))
-      //   var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-con-dn-sw-sd, var(--_ctm-dn-sw-sd)))
-      //   var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-con-dn-sw-cr, var(--_ctm-dn-sw-cr)));
-      box-shadow: prepareMediaVariable(--_ctm-con-dn-sw-ae, 0 0)
-        prepareMediaVariable(--_ctm-con-dn-sw-br, 0) prepareMediaVariable(--_ctm-con-dn-sw-sd, 0)
-        prepareMediaVariable(--_ctm-con-dn-sw-cr, transparent);
-    }
-
-    &[data-view-state="full"] {
-      & > .wrapper {
-        grid-template-rows: auto !important;
-      }
-    }
-    & > div {
-      &.wrapper {
-        width: 100%;
-        min-height: prepareMediaVariable(--_ctm-con-lt-mn-ht);
-        padding: var(--_ctm-mob-con-lt-pg, var(--_ctm-tab-con-lt-pg, var(--_ctm-con-lt-pg)));
-
-        background-color: var(
-          --_ctm-mob-con-dn-bd-cr,
-          var(--_ctm-tab-con-dn-bd-cr, var(--_ctm-con-dn-bd-cr))
-        );
-        background-image: var(
-          --_ctm-mob-con-dn-bd-ie,
-          var(--_ctm-tab-con-dn-bd-ie, var(--_ctm-con-dn-bd-ie))
-        );
-        background-attachment: var(
-          --_ctm-mob-con-dn-bd-at,
-          var(--_ctm-tab-con-dn-bd-at, var(--_ctm-con-dn-bd-at))
-        );
-        background-position: var(
-          --_ctm-mob-con-dn-bd-pn,
-          var(--_ctm-tab-con-dn-bd-pn, var(--_ctm-con-dn-bd-pn))
-        );
-        background-repeat: var(
-          --_ctm-mob-con-dn-bd-rt,
-          var(--_ctm-tab-con-dn-bd-rt, var(--_ctm-con-dn-bd-rt))
-        );
-        background-size: var(
-          --_ctm-mob-con-dn-bd-se,
-          var(--_ctm-tab-con-dn-bd-se, var(--_ctm-con-dn-bd-se))
-        );
-        border-radius: var(
-          --_ctm-mob-con-dn-br-rs,
-          var(--_ctm-tab-con-dn-br-rs, var(--_ctm-con-dn-br-rs))
-        );
-      }
-    }
-
-    // &[data-view-state="full"] {
-    //   width: auto;
-    //   margin: 0;
-    //   justify-self: stretch !important;
-    //   align-self: stretch !important;
-    //   cursor: auto;
-    //   &:is(#{$activeElementSelector}) {
-    //     & > div {
-    //       &[data-div-type="wrapper__layer"] {
-    //         --_sf-vt-zz: visible;
-    //         --_sf-op-zz: 1;
-    //       }
-    //     }
-    //   }
-    // }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+$activeElementSelector: "[data-has-clicked='true']";
+[data-div-type="element"] {
+  &[data-element-type="container"] {
+    // width: var(--_sf-con-nw-wh);
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // width: calc(
+    //   1% *
+    //     var(
+    //       --_ctm-mob-con-ele-nw-wh-vl,
+    //       var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl)),
+    //       auto
+    //     )
+    // );
+    // width: 100%;
+    // height: var(--_ctm-con-lt-ht);
+
+    width: calc(
+      1% *
+        var(
+          --_ctm-mob-con-ele-nw-wh-vl,
+          var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl, auto))
+        )
+    );
+    margin: var(
+      --_ctm-mob-con-lt-mn,
+      var(--_ctm-tab-con-lt-mn, var(--_ctm-con-lt-mn, var(--_ctm-lt-mn)))
+    );
+
+    &[data-show-border="true"] {
+      border-color: var(
+        --_ctm-mob-con-dn-br-cr,
+        var(--_ctm-tab-con-dn-br-cr, var(--_ctm-con-dn-br-cr))
+      );
+      border-style: var(
+        --_ctm-mob-con-dn-br-se,
+        var(--_ctm-tab-con-dn-br-se, var(--_ctm-con-dn-br-se))
+      );
+      border-width: var(
+        --_ctm-mob-con-dn-br-wh,
+        var(--_ctm-tab-con-dn-br-wh, var(--_ctm-con-dn-br-wh))
+      );
+    }
+    &[data-show-shadow="true"] {
+      // box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-con-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+      //   var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-con-dn-sw-br, var(--_ctm-dn-sw-br)))
+      //   var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-con-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+      //   var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-con-dn-sw-cr, var(--_ctm-dn-sw-cr)));
+      box-shadow: prepareMediaVariable(--_ctm-con-dn-sw-ae, 0 0)
+        prepareMediaVariable(--_ctm-con-dn-sw-br, 0) prepareMediaVariable(--_ctm-con-dn-sw-sd, 0)
+        prepareMediaVariable(--_ctm-con-dn-sw-cr, transparent);
+    }
+
+    &[data-view-state="full"] {
+      & > .wrapper {
+        grid-template-rows: auto !important;
+      }
+    }
+    & > div {
+      &.wrapper {
+        width: 100%;
+        grid-template-columns: 100% !important;
+        min-height: prepareMediaVariable(--_ctm-con-lt-mn-ht);
+        padding: var(--_ctm-mob-con-lt-pg, var(--_ctm-tab-con-lt-pg, var(--_ctm-con-lt-pg)));
+
+        background-color: var(
+          --_ctm-mob-con-dn-bd-cr,
+          var(--_ctm-tab-con-dn-bd-cr, var(--_ctm-con-dn-bd-cr))
+        );
+        background-image: var(
+          --_ctm-mob-con-dn-bd-ie,
+          var(--_ctm-tab-con-dn-bd-ie, var(--_ctm-con-dn-bd-ie))
+        );
+        background-attachment: var(
+          --_ctm-mob-con-dn-bd-at,
+          var(--_ctm-tab-con-dn-bd-at, var(--_ctm-con-dn-bd-at))
+        );
+        background-position: var(
+          --_ctm-mob-con-dn-bd-pn,
+          var(--_ctm-tab-con-dn-bd-pn, var(--_ctm-con-dn-bd-pn))
+        );
+        background-repeat: var(
+          --_ctm-mob-con-dn-bd-rt,
+          var(--_ctm-tab-con-dn-bd-rt, var(--_ctm-con-dn-bd-rt))
+        );
+        background-size: var(
+          --_ctm-mob-con-dn-bd-se,
+          var(--_ctm-tab-con-dn-bd-se, var(--_ctm-con-dn-bd-se))
+        );
+        border-radius: var(
+          --_ctm-mob-con-dn-br-rs,
+          var(--_ctm-tab-con-dn-br-rs, var(--_ctm-con-dn-br-rs))
+        );
+      }
+    }
+
+    // &[data-view-state="full"] {
+    //   width: auto;
+    //   margin: 0;
+    //   justify-self: stretch !important;
+    //   align-self: stretch !important;
+    //   cursor: auto;
+    //   &:is(#{$activeElementSelector}) {
+    //     & > div {
+    //       &[data-div-type="wrapper__layer"] {
+    //         --_sf-vt-zz: visible;
+    //         --_sf-op-zz: 1;
+    //       }
+    //     }
+    //   }
+    // }
+  }
+}

package/dist/filters.scss

@@ -71,7 +71,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     .filter_container {
       width: 100%;
       //Filter Features  Starts
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       background-color: var(
         --_ctm-mob-dn-fs-wt-bd-cr,
         var(--_ctm-tab-dn-fs-wt-bd-cr, var(--_ctm-dn-fs-wt-bd-cr))
@@ -87,6 +87,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         --_ctm-mob-dn-fs-wt-br-rs,
         var(--_ctm-tab-dn-fs-wt-br-rs, var(--_ctm-dn-fs-wt-br-rs))
       );
+      overflow: clip;
+      // max-height: prepareMediaVariable(--_ctm-lt-ht, auto);
+      // overflow-y: auto;
       @mixin flex($justifyItems: flex-start, $alignItems: center) {
         display: var(--_d-flex);
         justify-content: $justifyItems;
@@ -98,6 +101,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         width: 100%;
         // height: calc(100vh - 20px);
         // padding: 10px;
+        padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+        max-height: prepareMediaVariable(--_ctm-lt-ht, auto);
         overflow-y: auto;
 
         .option__group {
@@ -2383,6 +2388,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         display: flex;
         align-items: center;
         width: 100%;
+
+        &.cst_price {
+          width: 100%;
+          padding: 8px;
+          // border: 1px solid var(--_thm-cs-be-se-3);
+          border-radius: 4px;
+          font-size: 14px;
+          color: #333;
+          background-color: #fff;
+
+          input {
+            width: 100%;
+            padding: 0px;
+            border: none;
+            text-align: start;
+          }
+        }
       }
 
       .price-range-min span,
@@ -2401,14 +2423,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
       .price-range-min-input,
       .price-range-max-input {
-        width: 100%;
-        padding: 8px;
-        border: 1px solid var(--_thm-cs-be-se-3);
-        border-radius: 4px;
-        text-align: center;
-        font-size: 14px;
-        color: #333;
-        background-color: #fff;
+        &:not(.cst_price *) {
+          width: 100%;
+          padding: 8px;
+          border: 1px solid var(--_thm-cs-be-se-3);
+          border-radius: 4px;
+          text-align: center;
+          font-size: 14px;
+          color: #333;
+          background-color: #fff;
+        }
       }
 
       .price-range-min-input:focus,

package/dist/form-preview.scss

@@ -53,6 +53,10 @@
   }
 }
 
+.react-datepicker__input-container:has(.datepicker-input) {
+  border: 0px;
+}
+
 .fb_field {
   width: 100%;
   .cnf_checkbox {
@@ -115,24 +119,70 @@
     .react-datepicker-wrapper {
       display: block;
 
-      .react-datepicker__input-container {
-        input {
-          padding-left: 32px !important;
-        }
-      }
+      // &:has(.react-datepicker__input-container) {
+      //   input {
+      //     border: 0;
+      //     padding-inline: 24px 16px;
+      //   }
+      // }
+
+      // .react-datepicker__input-container {
+      //   input {
+      //     padding-left: 32px !important;
+      //   }
+      // }
     }
   }
 
   .react-datepicker-wrapper {
     display: block;
+    .react-datepicker__input-container {
+      .datepicker-input {
+        padding-inline: 32px 12px;
+      }
+    }
   }
-  input:not([type="checkbox"][type="radio"]),
-  select {
-    border: 1px solid var(--_primary-300);
+
+  .react-datepicker__header {
+    select {
+      appearance: none; /* remove default arrow */
+      -webkit-appearance: none;
+      -moz-appearance: none;
+
+      padding: 8px 35px 8px 10px !important; /* extra right space */
+
+      background: url("data:image/svg+xml;utf8,<svg fill='black' height='10' viewBox='0 0 20 20' width='10' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>")
+        no-repeat right 10px center;
+
+      background-color: var(--_base-white);
+      border: 1px solid var(--_gray-300);
+      outline: none;
+    }
+    /* Scrollbar width */
+    select::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    /* Scroll thumb (the draggable part) */
+    select::-webkit-scrollbar-thumb {
+      background-color: #888;
+      border-radius: 4px;
+    }
+
+    /* Scroll track */
+    select::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
+
+  input:not([type="checkbox"][type="radio"]) {
+    border: 1px solid var(--_gray-300);
     border-radius: 6px;
     padding-inline: 12px;
     width: 100%;
     height: 38px;
+    outline: none;
+
     &:focus {
       box-shadow: 0px 0px 0px 2px var(--_gray-100);
     }
@@ -151,6 +201,10 @@
     background-color: var(--_base-white);
     border: 1px solid var(--_gray-300);
     padding: 12px;
+    &:focus {
+      box-shadow: 0px 0px 0px 2px var(--_gray-100);
+      outline: none;
+    }
   }
   .error_styles {
     min-height: 20px;
@@ -267,13 +321,16 @@
   label {
     display: block;
     margin-bottom: 6px;
+    &:hover {
+      background-color: var(--_gray-25);
+    }
   }
 }
 .fb_btn {
   height: 38px;
   text-align: center;
   border-radius: 6px;
-  background-color: var(--_primary-400);
+  background-color: var(--_thm-py-bs-dt-se-bd-cr);
   color: var(--_base-white);
   width: 100%;
   padding-inline: 16px;
@@ -282,11 +339,123 @@
 
   &:disabled,
   &[disabled] {
-    background-color: var(--_primary-400);
+    background-color: var(--_thm-py-bs-dt-se-bd-cr);
     color: var(--_base-white);
     cursor: not-allowed;
     opacity: 0.6;
   }
+  &:hover {
+    background-color: var(--_thm-py-bs-hr-se-bd-cr);
+  }
+}
+
+// react datepicker styles in preview mode
+.react-datepicker-popper {
+  z-index: 9999 !important;
+  border: 1px solid var(--_gray-300);
+  border-radius: 6px;
+}
+
+.react-grid-item:has(.react-datepicker-popper) {
+  z-index: 2 !important;
+}
+
+.react-grid-item:has(.sc-phone-dropdown) {
+  z-index: 2 !important;
+}
+
+// .react-datepicker__day--selected {
+//   background-color: var(--_gray-500);
+// }
+
+// .react-datepicker__day--selected:not([aria-disabled="true"]):hover {
+//   background-color: var(--_gray-600) !important;
+// }
+
+// .react-datepicker__month {
+//   background-color: var(--_base-white);
+//   margin: 0px;
+//   // border: 1px solid var(--_gray-200);
+//   border-top: 0;
+//   margin: 0px !important;
+// }
+
+// .react-datepicker__day-names {
+//   padding-top: 5px;
+// }
+
+// .react-datepicker-wrapper {
+//   .react-datepicker__input-container {
+//     background-color: var(--_base-white);
+//     border: 1px solid var(--_gray-300);
+//     border-radius: 6px;
+//     padding-inline: 12px;
+//     &:focus-within {
+//       border: 1px solid var(--_primary-300);
+//       box-shadow:
+//         var(--_shadow-xs),
+//         0px 0px 0px 2px var(--_primary-50);
+//     }
+//   }
+// }
+
+.react-datepicker__tab-loop {
+  .fb_field select::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .react-datepicker__day--keyboard-selected {
+    background-color: var(--_thm-cs-at-py);
+    color: var(--_base-white);
+    &:hover {
+      background-color: var(--_thm-cs-at-py) !important;
+    }
+  }
+  .react-datepicker__day-names {
+    font-size: 14px;
+  }
+  .react-datepicker__week {
+    font-size: 12px;
+  }
+  .react-datepicker {
+    border: 1px solid var(--_gray-300);
+  }
+  &:has(.react-datepicker__time-list) {
+    .react-datepicker__month-container .react-datepicker__month {
+      border: 1px solid var(--_gray-300);
+    }
+  }
+  .react-datepicker__month-container .react-datepicker__month {
+    border: 0;
+    border-radius: 6px;
+  }
+  .react-datepicker__time-container {
+    border-left: 1px solid var(--_gray-300);
+  }
+  .react-datepicker__header {
+    background-color: var(--_gray-50);
+    border-bottom: 1px solid var(--_gray-300);
+  }
+  .react-datepicker__time-list {
+    padding-right: 2px;
+  }
+
+  .react-datepicker__tab-loop .react-datepicker__triangle path {
+    stroke: var(--_gray-100);
+  }
+  .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
+    fill: var(--_gray-50) !important;
+    color: var(--_gray-50) !important;
+  }
+  // .react-datepicker-popper[data-placement^="bottom"],
+  // .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
+  //   fill: var(--_gray-50) !important;
+  //   color: var(--_gray-50) !important;
+  //   stroke: var(--_gray-300) !important;
+  // }
+  .react-datepicker-popper .react-datepicker__triangle {
+    stroke: var(--_gray-300);
+  }
 }
 
 // react datepicker styles in preview mode
@@ -303,7 +472,7 @@
 }
 
 .react-datepicker__day--selected {
-  background-color: var(--_gray-500);
+  background-color: var(--_thm-py-bs-dt-se-bd-cr) !important;
 }
 
 .react-datepicker__day--selected:not([aria-disabled="true"]):hover {

package/dist/login.scss

@@ -588,7 +588,7 @@
           .placeholder_icon_start {
             position: absolute;
             z-index: 10;
-            top: 10px;
+            top: 11px;
             left: 10px;
             svg {
               width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-fm-is-fd-in-in-se));
@@ -750,6 +750,14 @@
       .invalid {
         border-color: var(--_error-300) !important;
         outline: 2px solid var(--_error-50);
+        &:focus {
+          outline: 0 none;
+          outline-offset: 0;
+          box-shadow:
+            0px 0px 1px rgba(16, 24, 40, 0.05),
+            0px 0px 0px 1px var(--_error-100) !important;
+          border: 1px solid var(--_error-300);
+        }
       }
 
       // Error Text Styles
@@ -1372,9 +1380,18 @@
             margin-bottom: 16px;
           }
           ul {
+            list-style: none;
             li {
               color: var(--_gray-700);
               font-size: 14px;
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              &.valid_input {
+                svg path {
+                  stroke: var(--_success-700);
+                }
+              }
               & > span {
                 display: inline-flex;
               }

package/dist/order-status.scss

@@ -1404,7 +1404,12 @@ $defaultValues: (
           );
           display: flex;
           align-items: flex-start;
+          flex-wrap: wrap;
 
+          .cart_item_accordians {
+            width: 100%;
+            margin-top: 8px;
+          }
           // img {
           //   width: 69px;
           //   height: 80px;