@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.76

package/dist/product-options.scss

@@ -10,15 +10,24 @@
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: 50%;
     // 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: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
-    // height: var(--_ctm-lt-ht);
-    // height: ;
-    // height: auto;
-    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    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)));
+
     --_aspect-ratio: calc(
-      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+      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)))
+        )
     );
 
     // &[data-element-sub-child="true"] {
@@ -34,7 +43,10 @@
       display: flex;
       flex-direction: column;
       min-height: 30px;
-      gap: var(--_ctm-lt-on-te-ve-sg);
+      gap: var(
+        --_ctm-mob-lt-on-te-ve-sg,
+        var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
+      );
 
       background-color: var(
         --_ctm-mob-dn-wt-se-bd-cr,
@@ -74,57 +86,20 @@
           var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
       );
 
-      .product__option__element__size {
-        display: flex;
-        align-items: flex-start;
-        gap: 10px;
-        // gap: var(--_ctm-lt-im-sg);
-        .options__list {
-          display: flex;
-          gap: var(--_ctm-lt-on-im-sg);
-
-          width: 100%;
-          overflow: hidden;
-          &[data-wrap-items="true"] {
-            flex-wrap: wrap;
-          }
-
-          &[data-is-selected="true"] {
-            border-color: green;
-          }
-
-          .options__item {
-            flex-shrink: 0;
-            border: 1px solid gray;
-
-            padding: var(--_ctm-lt-on-im-pg);
-
-            border-radius: 8px;
-            &[data-is-selected="true"] {
-              border-color: green;
-            }
-          }
-        }
-        .load__more__btn {
-          width: max-content;
-          flex-shrink: 0;
-          padding-inline: 12px;
-          padding-block: 8px;
-          border: 1px solid gray;
-          border-radius: 8px;
-          cursor: pointer;
-        }
-      }
       .product__option__element__swatch {
         display: flex;
         align-items: flex-start;
         gap: 10px;
-        // gap: var(--_ctm-lt-im-sg);
+        gap: var(
+          --_ctm-mob-lt-on-te-ve-sg,
+          var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
+        );
+
         // margin-top: 20px;
 
         .swatch__list {
           display: flex;
-          gap: var(--_ctm-lt-sh-im-sg);
+          gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));
 
           width: 100%;
           // &[data-wrap-items="true"] {
@@ -231,14 +206,19 @@
       }
 
       .swatch__item {
-        height: var(--_ctm-lt-sh-im-se);
-        width: var(--_ctm-lt-sh-im-se);
-        gap: var(--_ctm-lt-im-gp);
+        height: var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se)));
+        width: var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se)));
+        gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
         text-align: center;
         overflow: hidden;
         flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         // border: 1px solid gray;
-        padding: var(--_ctm-lt-sh-im-pg);
+        padding: var(--_ctm-mob-lt-sh-im-pg, var(--_ctm-tab-lt-sh-im-pg, var(--_ctm-lt-sh-im-pg)));
+
+        cursor: pointer;
 
         border-color: var(
           --_sf-hr-br-cr,
@@ -300,12 +280,24 @@
           height: 100%;
           width: 100%;
         }
+
+        &[data-background-shape="square"][data-display-style="Single Select"] {
+          width: calc(
+            var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) + 10px
+          );
+        }
+
         &[data-background-shape="circle"] {
           border-radius: 50%;
         }
+        &[data-background-shape="square"] {
+          border-radius: 5px;
+        }
         &[data-background-shape="capsule"] {
           border-radius: 80%;
-          width: calc(var(--_ctm-lt-sh-im-se) + 10px);
+          width: calc(
+            var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) + 8px
+          );
         }
         &[data-swatch-shape="circle"] {
           & div {
@@ -324,16 +316,29 @@
           &[data-background-shape-hover="circle"] {
             border-radius: 50%;
           }
+          &[data-background-shape-hover="square"] {
+            border-radius: 5px;
+          }
           &[data-background-shape-hover="capsule"] {
             border-radius: 80%;
-            width: calc(var(--_ctm-lt-sh-im-se) + 10px);
+            width: calc(
+              var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) +
+                8px
+            );
           }
+
           &[data-swatch-shape-hover="circle"] {
             & div {
               border-radius: 50%;
             }
             // border-radius: 50%;
           }
+
+          &[data-swatch-shape-hover="square"] {
+            & div {
+              border-radius: 0%;
+            }
+          }
           &[data-swatch-shape-hover="capsule"] {
             & div {
               border-radius: 50%;
@@ -346,16 +351,29 @@
           &[data-background-shape-selected="circle"] {
             border-radius: 50%;
           }
+          &[data-background-shape-selected="square"] {
+            border-radius: 5px;
+          }
           &[data-background-shape-selected="capsule"] {
             border-radius: 80%;
-            width: calc(var(--_ctm-lt-sh-im-se) + 10px);
+            width: calc(
+              var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) +
+                8px
+            );
           }
+
           &[data-swatch-shape-selected="circle"] {
             & div {
               border-radius: 50%;
             }
             // border-radius: 50%;
           }
+
+          &[data-swatch-shape-selected="square"] {
+            & div {
+              border-radius: 0%;
+            }
+          }
           &[data-swatch-shape-selected="capsule"] {
             & div {
               border-radius: 50%;
@@ -365,35 +383,245 @@
         }
       }
 
-      .product__option__element__single__select {
+      //Dropdown
+      .est__dropdown__main {
+        position: relative;
+        width: 100%;
         display: flex;
-        align-items: flex-start;
-        gap: 10px;
-        // gap: var(--_ctm-lt-im-sg);
-        // margin-top: 20px;
+        flex-direction: column;
+        gap: var(
+          --_ctm-mob-lt-on-te-ve-sg,
+          var(
+            --_ctm-tab-lt-on-te-ve-sg,
+            var(--_ctm-lt-on-te-ve-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
+          )
+        );
+        padding: var(
+          --_ctm-mob-lt-dn-dy-se-dn-os-pg,
+          var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-lt-dn-dy-se-dn-os-pg))
+        );
+        margin-top: 10px;
+
+        label {
+          font-size: var(
+            --_ctm-mob-dn-on-te-ft-se,
+            var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
+          );
+          font-family: var(
+            --_ctm-mob-dn-on-te-ft-fy,
+            var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
+          );
+          color: var(
+            --_ctm-mob-dn-on-te-cr,
+            var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr)))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-on-te-ft-wt,
+            var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-on-te-ue,
+            var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-on-te-lr-sg,
+            var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
+          );
+          text-align: var(
+            --_ctm-mob-dn-on-te-tt-an,
+            var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
+          );
+          line-height: var(
+            --_ctm-mob-dn-on-te-le-ht,
+            var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
+          );
+          display: block;
+        }
 
-        .single__select__list {
-          display: flex;
-          gap: var(--_ctm-lt-se-st-im-sg);
+        .est__dropdown {
+          cursor: pointer;
+          position: relative;
+          color: var(--_gray-700);
 
+          border-radius: 6px;
+          background-color: #fff;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
           width: 100%;
-          overflow: hidden;
-          &[data-wrap-items="true"] {
-            flex-wrap: wrap;
+          .value__selected {
+            width: 100%;
           }
 
-          .single__select__item {
-            flex-shrink: 0;
-            border: 1px solid gray;
-            border-radius: 8px;
-            padding: var(--_ctm-lt-se-st-im-pg);
-            &[data-is-selected="true"] {
-              border-color: green;
+          &.open .list {
+            display: none;
+            margin-top: var(
+              --_ctm-mob-lt-dn-dy-se-on-ad-lt-sg,
+              var(--_ctm-tab-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
+            );
+            gap: var(
+              --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
+              var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
+            );
+            background-color: var(
+              --_ctm-mob-dn-dn-se-bd-cr,
+              var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
+            );
+          }
+
+          .list {
+            display: flex !important;
+            flex-direction: column;
+            gap: var(
+              --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
+              var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
+            );
+            border: var(
+                --_ctm-mob-dn-dn-se-br-wh,
+                var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
+              )
+              var(
+                --_ctm-mob-dn-dn-se-br-se,
+                var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
+              )
+              var(
+                --_gray-200,
+                var(
+                  --_ctm-mob-dn-dn-se-br-cr,
+                  var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
+                )
+              );
+            border-radius: var(
+              --_ctm-mob-dn-dn-se-br-rs,
+              var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
+            );
+            box-shadow: var(
+              --_show-shadow-dn-se,
+              var(
+                  --_ctm-mob-dn-dn-se-sw-ae,
+                  var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae, var(--_tst-dn-sw-ae)))
+                )
+                var(
+                  --_ctm-mob-dn-dn-se-sw-br,
+                  var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br, var(--_tst-dn-sw-br)))
+                )
+                var(
+                  --_ctm-mob-dn-dn-se-sw-sd,
+                  var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd, var(--_tst-dn-sw-sd)))
+                )
+                var(
+                  --_ctm-mob-dn-dn-se-sw-cr,
+                  var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr, var(--_tst-dn-sw-cr)))
+                )
+            );
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            background-color: var(
+              --_ctm-mob-dn-dn-se-bd-cr,
+              var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
+            );
+            border-radius: 4px;
+            z-index: var(--_higher-zIndex);
+            max-height: 200px;
+            overflow-y: auto;
+
+            &.top {
+              bottom: 100%;
+              top: auto;
+            }
+
+            .list__option {
+              padding: var(
+                --_ctm-mob-lt-dn-dy-se-dn-lt-im-pg,
+                var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg))
+              );
+              cursor: pointer;
+
+              &:hover {
+                background-color: var(--_primary-25);
+                color: var(--_primary-400);
+              }
+
+              &.disabled {
+                cursor: not-allowed;
+                opacity: 0.4;
+              }
             }
           }
         }
       }
 
+      // variant dropdown selection
+      .var__drop__selection {
+        display: flex;
+        width: 100%;
+        gap: var(
+          --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
+          var(
+            --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
+            var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))
+          )
+        );
+
+        flex-direction: row;
+        &[data-dropdown-style="Vertical List"] {
+          flex-direction: column;
+          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+        }
+        .dropdown_wrapper {
+          position: relative;
+          &[data-show-divider="true"] {
+            &:not(:last-child)::after {
+              content: "";
+              position: relative;
+              background-color: #000;
+              height: 1px;
+              width: 100%;
+              display: flex;
+              top: calc(
+                calc(
+                    var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 8px
+                  ) /
+                  2
+              );
+            }
+          }
+
+          &[data-show-item-divider="true"] {
+            .est__dropdown__main {
+              .est__dropdown {
+                .list {
+                  :not(:last-child).list__option {
+                    &::after {
+                      content: "";
+                      position: relative;
+                      background-color: #000;
+                      height: 1px;
+                      width: 100%;
+                      display: flex;
+                      top: calc(
+                        var(
+                            --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
+                            var(
+                              --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
+                              var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
+                            )
+                          ) /
+                          2
+                      );
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        & > div {
+          width: 100%;
+        }
+      }
       .embla {
         width: 100%;
         height: 100%;
@@ -423,16 +651,40 @@
             //   calc(100% / var(--_ctm-lt-is-pr-se))
             // );
             // grid-auto-flow: column;
-            gap: var(--_ctm-lt-sh-im-sg);
+            gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));
 
             &[data-control-type="Bottom"][data-slider-control="Arrows"] {
-              height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 10px));
+              height: calc(
+                100% - calc(
+                    var(
+                        --_ctm-mob-dn-pn-as-aw-se,
+                        var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                      ) +
+                      8px
+                  )
+              );
             }
             &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
-              height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
+              height: calc(
+                100% - calc(
+                    var(
+                        --_ctm-mob-dn-pn-le-le-ht,
+                        var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
+                      ) +
+                      20px
+                  )
+              );
             }
             &[data-control-type="Bottom"][data-slider-control="Dots"] {
-              height: calc(100% - calc(var(--_ctm-dn-pn-ds-dt-se) + 20px));
+              height: calc(
+                100% - calc(
+                    var(
+                        --_ctm-mob-dn-pn-ds-dt-se,
+                        var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
+                      ) +
+                      20px
+                  )
+              );
             }
 
             .embla__slide {
@@ -484,8 +736,15 @@
             padding: 10px;
             border-radius: 50%;
             border: none;
-            width: var(--_ctm-dn-pn-as-aw-se);
-            height: var(--_ctm-dn-pn-as-aw-se);
+            width: var(
+              --_ctm-mob-dn-pn-as-aw-se,
+              var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+            );
+            height: var(
+              --_ctm-mob-dn-pn-as-aw-se,
+              var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+            );
+
             display: flex;
             align-items: center;
             justify-content: center;
@@ -503,8 +762,15 @@
           .right-button {
             border-radius: 50%;
             border: none;
-            width: var(--_ctm-dn-pn-as-aw-se);
-            height: var(--_ctm-dn-pn-as-aw-se);
+            width: var(
+              --_ctm-mob-dn-pn-as-aw-se,
+              var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+            );
+            height: var(
+              --_ctm-mob-dn-pn-as-aw-se,
+              var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+            );
+
             display: flex;
             align-items: center;
             justify-content: center;
@@ -524,10 +790,25 @@
           .icon {
             display: flex;
             svg {
-              width: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
-              height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
+              width: calc(
+                var(
+                    --_ctm-mob-dn-pn-as-aw-se,
+                    var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                  ) *
+                  0.5
+              );
+              height: calc(
+                var(
+                    --_ctm-mob-dn-pn-as-aw-se,
+                    var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                  ) *
+                  0.5
+              );
               path {
-                stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-dn-pn-as-aw-cr));
+                stroke: var(
+                  --_ctm-mob-dn-pn-as-aw-cr,
+                  var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
+                );
               }
             }
           }
@@ -543,7 +824,8 @@
           flex-direction: row-reverse;
 
           .embla__thumbs {
-            width: var(--_ctm-lt-tl-se);
+            width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
             height: 100%;
 
             & .embla__thumbs__container {
@@ -555,7 +837,8 @@
         &[data-thumbnail-placement="right"] {
           flex-direction: row;
           .embla__thumbs {
-            width: var(--_ctm-lt-tl-se);
+            width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
             height: 100%;
 
             & .embla__thumbs__container {
@@ -644,7 +927,8 @@
 
         .embla__thumbs {
           width: 100%;
-          height: var(--_ctm-lt-tl-se);
+          height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+
           position: relative;
           display: grid;
           grid-template-columns: 1fr;
@@ -671,9 +955,9 @@
             // height: 200px;
 
             .embla__thumbs__slide {
-              min-width: var(--_ctm-lt-tl-se);
-              max-width: var(--_ctm-lt-tl-se);
-              height: var(--_ctm-lt-tl-se);
+              min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+              max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
+              height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
               & img {
                 width: 100%;
                 height: 100%;