@sc-360-v2/storefront-cms-library 0.2.34 → 0.2.36

package/dist/button.scss

@@ -4,19 +4,19 @@
 [data-div-type="element"] {
   &[data-element-type="button"] {
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    width: var(
-      --_sf-el-wh-st-mx,
-      calc(
-        1% *
-          var(
-            --_ctm-mob-ele-nw-wh-vl,
-            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
-          )
-      )
-    );
+    // width: var(
+    //   --_sf-el-wh-st-mx,
+    //   calc(
+    //     1% *
+    //       var(
+    //         --_ctm-mob-ele-nw-wh-vl,
+    //         var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+    //       )
+    //   )
+    // );
     height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
 
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn)));
+    // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn)));
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
 
     & > .wrapper {

package/dist/code-temp.scss

@@ -3,32 +3,35 @@
 
 [data-div-type="element"] {
   &[data-element-type="code"] {
-    // width: var(--_lt-wh);
-    // height: var(--_lt-ht);
-    // margin: var(--_lt-mn);
-    // padding: var(--_lt-pg);
-    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
-    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
-    // height: ;
-    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
     --_aspect-ratio: calc(
       1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
     );
 
     & > .wrapper {
       width: 100%;
-      height: 100%;
+      // height: 100%;
+
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+
+      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+          var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+          var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+          var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
+      );
     }
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
 
     .code-element {
-      background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
-      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
       display: flex;
       flex-direction: column;
       --_sf-gp: 16px;
@@ -36,18 +39,9 @@
       row-gap: var(--_sf-gp);
       width: 100%;
       // height: 100%;
-      border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
-      border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
-      border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
-      border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
-          var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
-      );
 
       // transform: scale(var(--_ctm-dn-zm-ie));
-      scale: var(--_ctm-dn-zm-ie);
+      scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
       &[data-flip-x="true"] {
         transform: scaleX(-1);
       }

package/dist/common-element.scss

@@ -0,0 +1,35 @@
+@use "sass:map";
+@use "sass:list";
+
+$es: '[data-div-type="element"]';
+
+#{$es} {
+  width: var(
+    --_sf-el-wh-st-mx,
+    calc(
+      1% *
+        var(
+          --_ctm-mob-ele-nw-wh-vl,
+          var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+        )
+    )
+  );
+  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+
+  & > .wrapper {
+    // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+    // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+
+    // border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
+    // border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
+    // border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+    // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+    // box-shadow: var(
+    //   --_show-shadow,
+    //   var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
+    //     var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
+    //     var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
+    //     var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
+    // );
+  }
+}

package/dist/container.scss

@@ -27,14 +27,14 @@ $activeElementSelector: "[data-has-clicked='true']";
       --_ctm-mob-con-lt-mn,
       var(--_ctm-tab-con-lt-mn, var(--_ctm-con-lt-mn, var(--_ctm-lt-mn)))
     );
-    background: var(
-      --_ctm-mob-con-dn-bd-cr,
-      var(--_ctm-tab-con-dn-bd-cr, var(--_ctm-con-dn-bd-cr))
-    );
 
     & > div {
       &.wrapper {
         width: 100%;
+        background: var(
+          --_ctm-mob-con-dn-bd-cr,
+          var(--_ctm-tab-con-dn-bd-cr, var(--_ctm-con-dn-bd-cr))
+        );
       }
     }
 

package/dist/custom-fonts.scss

@@ -0,0 +1,59 @@
+@font-face {
+  font-family: "poppins";
+  // font-family: 'Roboto',Arial,Calibiri,sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://sellerscommerce.sirv.com/fonts/poppins-font/Poppins-Regular.woff2")
+    format("woff2");
+}
+
+/* Inter-Medium*/
+@font-face {
+  font-family: "poppins";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://sellerscommerce.sirv.com/fonts/poppins-font/poppins-medium.woff2")
+    format("woff2");
+}
+
+/* Inter-SemiBold*/
+@font-face {
+  font-family: "poppins";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://sellerscommerce.sirv.com/fonts/poppins-font/Poppins-SemiBold.woff2")
+    format("woff2");
+}
+
+/* Inter-Bold*/
+@font-face {
+  font-family: "poppins";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://sellerscommerce.sirv.com/fonts/poppins-font/poppins-bold.woff2") format("woff2");
+}
+
+/* Inter-ExtraBold*/
+// @font-face {
+//   font-family: "poppins";
+//   font-style: normal;
+//   font-weight: 800;
+//   font-display: swap;
+//   src:
+//     url('https://cdn.grabon.in/gograbon/v8/fonts-v2/minified/inter-extrabold-webfont.woff2') format('woff2'), / Super Modern Browsers /
+//     url('https://cdn.grabon.in/gograbon/v8/fonts-v2/minified/inter-extrabold-webfont.woff') format('woff'); / Modern Browsers /
+// }
+
+/* Inter-Black*/
+@font-face {
+  font-family: "poppins";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("https://sellerscommerce.sirv.com/fonts/poppins-font/poppins-black.woff2")
+    format("woff2");
+}

package/dist/faq.scss

@@ -235,7 +235,7 @@
           );
           line-height: var(
             --_ctm-mob-dn-cd-an-im-le-ht,
-            var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht))
+            var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
           );
           text-decoration: var(
             --_ctm-mob-dn-cd-an-im-ue,

package/dist/filters.scss

@@ -13,5 +13,450 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         width: 100%;
       }
     }
+    .filter_container {
+      //Filter Features  Starts
+      @mixin flex($justifyItems: flex-start, $alignItems: flex-start) {
+        display: var(--_d-flex);
+        justify-content: $justifyItems;
+        align-items: $alignItems;
+      }
+
+      .product__filter {
+        width: 250px;
+        // height: calc(100vh - 20px);
+        padding: 10px;
+        overflow-y: auto;
+
+        .option__group {
+          display: flex;
+          flex-direction: column;
+          padding-block: 12px;
+          padding-right: 10px;
+          &.divider_filter {
+            border-bottom: 1px solid var(--_gray-300);
+          }
+          .filter__Header {
+            display: flex;
+            justify-content: space-between;
+            gap: 12px;
+            h2 {
+              font-size: var(--_fs-14);
+              font-weight: var(--_fw-600);
+              text-transform: uppercase;
+            }
+            .reset__btn {
+              font-size: 12px;
+              text-transform: uppercase;
+              font-weight: var(--_fw-500);
+              color: var(--_primary-400);
+              &:hover {
+                color: var(--_primary-700);
+              }
+            }
+          }
+
+          .option__group__header {
+            @include flex($justifyItems: space-between);
+            h2 {
+              font-size: var(--_fs-14);
+              font-weight: var(--_fw-600);
+            }
+            .reset__btn {
+              font-size: 12px;
+              text-transform: uppercase;
+              font-weight: var(--_fw-500);
+              color: var(--_primary-400);
+            }
+
+            .option__btn__group {
+              display: flex;
+              align-items: center;
+              gap: 12px;
+              .search__btn {
+                svg {
+                  width: 14px;
+                  height: 14px;
+                }
+              }
+            }
+            .filter__search {
+              display: flex;
+              align-items: center;
+              padding-inline: 10px;
+              border: 1px solid var(--_gray-200);
+              border-radius: 6px;
+
+              button {
+                display: flex;
+                svg {
+                  width: 15px;
+                  height: 15px;
+                }
+              }
+              input[type="text"] {
+                padding-inline: 10px;
+              }
+            }
+          }
+
+          ul {
+            margin-top: 15px;
+            &:not(:last-child) {
+              border-bottom: 1px solid var(--_gray-300);
+            }
+            li {
+              display: flex;
+              align-items: center;
+              padding-block: 6px;
+              a {
+                // padding-block: 6px;
+                padding-left: 10px;
+                display: block;
+                text-decoration: none;
+                color: var(--_gray-700);
+                font-size: var(--_fs-14);
+                font-weight: var(--_fw-600);
+                border-radius: var(--_br-6);
+                width: 100%;
+                &:hover {
+                  background-color: var(--_primary-25);
+                  color: var(--_primary-700);
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .filter__inline {
+        // margin: 30px;
+        display: flex;
+        flex-direction: column;
+        // justify-content: space-between;
+        // align-items: center;
+        flex-wrap: wrap;
+        gap: 20px;
+        .filter__Header {
+          display: flex;
+          justify-content: flex-start;
+          gap: 12px;
+          h2 {
+            font-size: var(--_fs-14);
+            font-weight: var(--_fw-600);
+            text-transform: uppercase;
+          }
+          .reset__btn {
+            font-size: 12px;
+            text-transform: uppercase;
+            font-weight: var(--_fw-500);
+            color: var(--_primary-400);
+            &:hover {
+              color: var(--_primary-700);
+            }
+          }
+        }
+        .flt__dropdowns {
+          display: flex;
+          // flex-direction: column;
+          // justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 20px;
+          .filter__option__dropdown {
+            display: flex;
+            gap: 20px;
+            cursor: pointer;
+            border: 1px solid var(--_base-white);
+            padding: 6px 12px;
+            border-radius: 6px;
+            width: fit-content;
+            &:hover {
+              border: 1px solid var(--_gray-200);
+              background-color: var(--_gray-50);
+            }
+          }
+        }
+
+        .flt__options {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 20px;
+        }
+        .selected__items {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 10px;
+          align-items: center;
+          .selected__category {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            flex-wrap: wrap;
+            .selected_item {
+              display: flex;
+              gap: 8px;
+              border: 1px solid var(--_gray-200);
+              border-radius: 30px;
+              padding: 6px 12px;
+              align-items: center;
+              &:hover {
+                border: 1px solid var(--_gray-300);
+                background-color: var(--_gray-50);
+                cursor: pointer;
+              }
+            }
+          }
+        }
+      }
+
+      .clear__btn {
+        svg {
+          width: 18px;
+          height: 18px;
+          &:hover {
+            path {
+              stroke: var(--_gray-900);
+            }
+          }
+        }
+      }
+      //Filter Features  Ends
+
+      // Input Radio Starts
+      .checkbox__radio {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        position: relative;
+        // margin-bottom: 12px;
+        cursor: pointer;
+        font-size: 14px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        .color {
+          width: 15px;
+          height: 15px;
+          border: 1px solid var(--_gray-200);
+          border-radius: 50%;
+        }
+      }
+
+      .checkbox__radio input {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+      }
+
+      .checkmark {
+        height: 18px;
+        width: 18px;
+        border: 1px solid var(--_gray-300);
+        background-color: var(--_base-white);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        button {
+          display: none;
+        }
+      }
+
+      .checkbox__radio input:checked ~ .checkmark {
+        background-color: var(--_primary-400);
+        border: 1px solid var(--_primary-400);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+
+        button {
+          display: flex;
+          svg {
+            width: 13px;
+            height: 13px;
+            path {
+              stroke: var(--_base-white);
+            }
+          }
+        }
+      }
+
+      .checkmark:after {
+        content: "";
+        position: absolute;
+        display: none;
+      }
+
+      .checkbox__radio input:checked ~ .checkmark:after {
+        display: block;
+      }
+
+      .checkbox__radio .checkmark:after {
+        left: 7px;
+        top: 2px;
+      }
+
+      // Input Radio Ends
+
+      // Multi Range Slider Starts
+      .double-slider-box {
+        background-color: #fff;
+        border-radius: 10px;
+        //   padding: 20px;
+        width: 100%;
+        max-width: 300px;
+        margin: auto;
+      }
+
+      .range-slider {
+        position: relative;
+        width: 100%;
+        height: 5px;
+        margin: 30px 0;
+        background-color: #8a8a8a;
+        border-radius: 5px;
+      }
+
+      .slider-track {
+        height: 100%;
+        position: absolute;
+        background-color: var(--_primary-400);
+        left: 0;
+        right: 100%;
+        border-radius: 5px;
+      }
+
+      .range-slider input[type="range"] {
+        position: absolute;
+        width: 100%;
+        top: 1px;
+        transform: translateY(-50%);
+        background: none;
+        pointer-events: none;
+        appearance: none;
+        height: 5px;
+      }
+
+      input[type="range"]::-webkit-slider-thumb {
+        height: 20px;
+        width: 20px;
+        border-radius: 50%;
+        border: 3px solid #fff;
+        background: var(--_primary-400);
+        pointer-events: auto;
+        appearance: none;
+        cursor: pointer;
+        box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.25);
+        position: relative;
+        z-index: 2; /* Ensure thumbs appear above the track */
+      }
+
+      input[type="range"]::-moz-range-thumb {
+        height: 25px;
+        width: 25px;
+        border-radius: 50%;
+        border: 3px solid #fff;
+        background: var(--_primary-400);
+        pointer-events: auto;
+        cursor: pointer;
+        box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.25);
+        position: relative;
+        z-index: 2;
+      }
+
+      .input-box {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+      }
+
+      .min-box,
+      .max-box {
+        width: 50%;
+      }
+
+      .min-box {
+        margin-right: 10px;
+      }
+      .max-box input {
+        float: right;
+      }
+      input[type="number"] {
+        width: 40px;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        text-align: center;
+      }
+
+      .min-tooltip,
+      .max-tooltip {
+        position: absolute;
+        top: -35px;
+        font-size: 12px;
+        color: #555;
+        background-color: #fff;
+        padding: 5px;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        white-space: nowrap;
+        z-index: 1;
+        padding-inline: 15px;
+      }
+
+      .min-tooltip {
+        left: 20px;
+        top: 20px;
+        transform: translateX(-50%);
+      }
+
+      .max-tooltip {
+        right: 20px;
+        top: 20px;
+        transform: translateX(50%);
+      }
+      /* Chrome, Safari, Edge, and Opera */
+      input[type="number"]::-webkit-inner-spin-button,
+      input[type="number"]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      /* Firefox */
+      input[type="number"] {
+        -moz-appearance: textfield;
+      }
+
+      // Multi Range Slider Ends
+      // Button Group Starts
+      .button_main {
+        border: 1px solid var(--_gray-600);
+        cursor: pointer;
+        .btn__group {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 8px;
+          color: #fff;
+          font-weight: 600;
+          font-size: 16px;
+          background-color: #000080;
+          padding: 10px 20px;
+          button {
+            svg {
+              path {
+                stroke: #fff;
+              }
+            }
+          }
+        }
+      }
+      // Button Group Ends
+    }
   }
 }