@sc-360-v2/storefront-cms-library 0.2.94 → 0.2.96

package/dist/bulk-order-pad.scss

@@ -121,20 +121,6 @@
           height: 100%;
           padding: 8px 12px;
           text-align: left;
-          display: flex;
-          align-items: center;
-          .item-image {
-            background-image: url("");
-            width: 30px;
-            height: 30px;
-          }
-          .item-image-svg {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #dfdfdf;
-            margin-right: 8px;
-          }
         }
       }
     }

package/dist/button.scss

@@ -1,6 +1,8 @@
 @use "sass:map";
 @use "sass:list";
 
+@use "./functions.scss" as *;
+
 [data-div-type="element"] {
   &[data-element-type="button"] {
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
@@ -144,7 +146,8 @@
         var(--_ctm-mob-dn-dt-se-bd-cr, var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr)))
       );
       // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
-      padding: min(8px, var(--_sf-element-vt-pd)) min(15px, var(--_sf-element-hr-pd));
+      padding: prepareMediaVariable(--_ctm-lt-pg);
+      // (8px, var(--_sf-element-vt-pd)) min(15px, var(--_sf-element-hr-pd));
       display: flex;
       flex-direction: var(--_sf-fd-bn);
       align-items: center;

package/dist/cart-details.scss

@@ -81,9 +81,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             font-weight: 400;
             line-height: 20px;
 
-            &:hover {
-              font-weight: 600;
-            }
+            // &:hover {
+            //   font-weight: 600;
+            // }
           }
         }
       }
@@ -159,7 +159,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     }
   }
 }
-.cart_products_wrapper {
+.cart_products_wrapper,
+.infinite-list-container {
   max-height: 100vh;
   overflow: auto;
   display: flex;
@@ -398,3 +399,174 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     }
   }
 }
+
+.space-y-4 > div {
+  width: 100%;
+}
+
+.cart-form {
+  padding-top: 12px;
+
+  .section {
+    padding: 12px;
+    border-block: 1px solid #d9d9d9;
+  }
+
+  .section-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #111827;
+
+    cursor: pointer;
+
+    &.error {
+      color: #dc2626;
+    }
+  }
+
+  .section-body {
+    padding-top: 1rem;
+  }
+  .attribute {
+    margin-bottom: 1.25rem;
+  }
+
+  .label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #374151;
+    margin-bottom: 0.5rem;
+
+    &.required::after {
+      content: " *";
+      color: #dc2626;
+    }
+  }
+
+  .input,
+  select,
+  textarea {
+    width: 100% !important;
+    padding: 8px 12px !important;
+    border-radius: 0.5rem;
+    border: 1px solid #d1d5db !important;
+    background-color: #f9fafb !important;
+    outline: none;
+    transition: border-color 0.2s ease-in-out;
+
+    &:focus {
+      border-color: #3b82f6;
+      background-color: #fff;
+    }
+
+    &.error {
+      border-color: #dc2626;
+      background-color: #fef2f2;
+    }
+  }
+
+  textarea {
+    min-height: 100px;
+    resize: vertical;
+  }
+
+  .error-text {
+    font-size: 0.75rem;
+    color: #dc2626;
+    margin-top: 0.25rem;
+  }
+
+  .submit-btn {
+    background-color: #3b82f6;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    margin-top: 2rem;
+
+    &:hover {
+      background-color: #2563eb;
+    }
+  }
+}
+
+.infinite-list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 100%;
+  min-width: 100%;
+
+  .list-item {
+    max-width: 100%;
+    min-width: 100%;
+  }
+  //   padding: 1rem;
+  //   border: 1px solid #e0e0e0;
+  //   border-radius: 12px;
+  //   background-color: #fff;
+  //   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+  //   transition: box-shadow 0.2s ease;
+
+  //   &:hover {
+  //     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  //   }
+  // }
+
+  .pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1.5rem;
+    gap: 0.5rem;
+
+    button {
+      padding: 0.5rem 1rem;
+      border: 1px solid #d0d0d0;
+      border-radius: 8px;
+      background-color: #f9f9f9;
+      font-size: 0.9rem;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:hover:not(:disabled) {
+        background-color: #007bff;
+        color: white;
+        border-color: #007bff;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      &.active {
+        background-color: #007bff;
+        color: white;
+        border-color: #007bff;
+      }
+    }
+  }
+
+  .loading {
+    text-align: center;
+    color: #666;
+    font-size: 0.95rem;
+    padding: 1rem 0;
+  }
+
+  .no-data {
+    text-align: center;
+    color: #aaa;
+    font-size: 0.95rem;
+    padding: 2rem 0;
+  }
+
+  .sentinel {
+    height: 1px;
+  }
+}

package/dist/cartDropdownOverlay.scss

@@ -27,9 +27,9 @@ $button-padding: 6px 12px;
   }
 
   .overlay-panel {
-    position: absolute;
-    top: 100%;
-    left: -160px;
+    position: fixed;
+    // top: 100%;
+    // left: -160px;
     background: $background-color;
     box-shadow: $shadow;
     border-radius: $border-radius;
@@ -114,8 +114,10 @@ $button-padding: 6px 12px;
     }
   }
   .position-bottom {
-    top: 100%; /* shows below the button */
+    top: 80%;
     margin-top: 8px;
+    left: 0;
+    width: max-content;
   }
 
   .position-top {
@@ -123,3 +125,16 @@ $button-padding: 6px 12px;
     margin-bottom: 8px;
   }
 }
+
+// .overlay-panel {
+//   background: white;
+//   border: 1px solid #ccc;
+//   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+//   border-radius: 6px;
+//   padding: 10px;
+//   max-height: 300px;
+//   overflow-y: auto;
+//   transition:
+//     opacity 0.2s ease,
+//     transform 0.2s ease;
+// }

package/dist/functions.scss

@@ -62,6 +62,19 @@ $breakPoints: (
   }
 }
 
+@mixin restrictToLine($count, $type: "optional") {
+  display: -webkit-box !important;
+  -webkit-line-clamp: $count;
+  overflow: clip;
+  text-overflow: ellipsis;
+  white-space: normal;
+  @if ($type == "optional") {
+    -webkit-box-orient: vertical;
+  } @else {
+    -webkit-box-orient: $type;
+  }
+}
+
 @function getListOfResponsive($desktop, $mobile, $latop: "optional") {
   $list: (
     desktop: $desktop,
@@ -146,3 +159,13 @@ $breakPoints: (
     }
   }
 }
+
+@function prepareMediaVariable($full-var) {
+  $prefix: "--_ctm-";
+  $core-name: str-slice($full-var, str-length($prefix) + 1); // removes --_ctm-
+
+  $default-var: var(#{$full-var});
+  $tab-var: var(#{$prefix}tab-#{$core-name}, #{$default-var});
+  $mob-var: var(#{$prefix}mob-#{$core-name}, #{$tab-var});
+  @return $mob-var;
+}

package/dist/grid.scss

@@ -1,5 +1,7 @@
 $activeElementSelector: "[data-has-clicked='true']";
 $elementSelector: "[data-div-type='element']";
+
+@use "./functions.scss" as *;
 [data-div-type="grid"] {
   position: var(--_p-relative);
   display: var(--_d-grid);
@@ -7,39 +9,19 @@ $elementSelector: "[data-div-type='element']";
   // height: 100% !important;
   box-shadow: var(
     --_hide-grid-shadow,
-    var(--_ctm-mob-gri-dn-sw-ae, var(--_ctm-tab-gri-dn-sw-ae, var(--_ctm-gri-dn-sw-ae)))
-      var(--_ctm-mob-gri-dn-sw-br, var(--_ctm-tab-gri-dn-sw-br, var(--_ctm-gri-dn-sw-br)))
-      var(--_ctm-mob-gri-dn-sw-sd, var(--_ctm-tab-gri-dn-sw-sd, var(--_ctm-gri-dn-sw-sd)))
-      var(--_ctm-mob-gri-dn-sw-cr, var(--_ctm-tab-gri-dn-sw-cr, var(--_ctm-gri-dn-sw-cr)))
+    prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br)
+      prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr)
   );
   // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
 
   // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
   // background: var(--_ctm-mob-gri-dn-bd-cr, var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr)));
-  background-color: var(
-    --_ctm-mob-gri-dn-bd-cr,
-    var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr))
-  );
-  background-image: var(
-    --_ctm-mob-gri-dn-bd-ie,
-    var(--_ctm-tab-gri-dn-bd-ie, var(--_ctm-gri-dn-bd-ie))
-  );
-  background-attachment: var(
-    --_ctm-mob-gri-dn-bd-at,
-    var(--_ctm-tab-gri-dn-bd-at, var(--_ctm-gri-dn-bd-at))
-  );
-  background-position: var(
-    --_ctm-mob-gri-dn-bd-pn,
-    var(--_ctm-tab-gri-dn-bd-pn, var(--_ctm-gri-dn-bd-pn))
-  );
-  background-repeat: var(
-    --_ctm-mob-gri-dn-bd-rt,
-    var(--_ctm-tab-gri-dn-bd-rt, var(--_ctm-gri-dn-bd-rt))
-  );
-  background-size: var(
-    --_ctm-mob-gri-dn-bd-se,
-    var(--_ctm-tab-gri-dn-bd-se, var(--_ctm-gri-dn-bd-se))
-  );
+  // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
+  // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
+  // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
+  // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
+  // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
+  // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
 
   &[data-show-shadow="false"] {
     --_hide-grid-shadow: none;
@@ -73,32 +55,22 @@ $elementSelector: "[data-div-type='element']";
     }
     &[data-div-type="cms-grid-wrapper"] {
       // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
-      padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
-      background: var(
-        --_ctm-mob-gri-dn-bd-cr,
-        var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr))
-      );
+      padding: #{prepareMediaVariable(--_ctm-gri-lt-pg)};
+      background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
+      background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
+      background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
+      background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
+      background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
+      background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
       width: 100%;
       grid-area: 1/1/2/2 !important;
       height: 100%;
       // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
       display: var(--_d-grid);
-      border-color: var(
-        --_hide-grid-border,
-        var(--_ctm-mob-gri-dn-br-cr, var(--_ctm-tab-gri-dn-br-cr, var(--_ctm-gri-dn-br-cr)))
-      );
-      border-style: var(
-        --_hide-grid-border,
-        var(--_ctm-mob-gri-dn-br-se, var(--_ctm-tab-gri-dn-br-se, var(--_ctm-gri-dn-br-se)))
-      );
-      border-width: var(
-        --_hide-grid-border,
-        var(--_ctm-mob-gri-dn-br-wh, var(--_ctm-tab-gri-dn-br-wh, var(--_ctm-gri-dn-br-wh)))
-      );
-      border-radius: var(
-        --_ctm-mob-gri-dn-br-rs,
-        var(--_ctm-tab-gri-dn-br-rs, var(--_ctm-gri-dn-br-rs))
-      );
+      border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-cr));
+      border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-se));
+      border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-wh));
+      border-radius: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-rs));
     }
   }
 }

package/dist/icon-list.scss

@@ -0,0 +1,111 @@
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+$item: "flex__icon_list_item";
+$icon: "flex__ili_span_icn";
+$text: "flex__ili_span_txt";
+[data-div-type="element"] {
+  &[data-element-type="icon-list"] {
+    & > .wrapper {
+      width: 100%;
+      display: var(--_d-flex) !important;
+      flex-direction: column;
+      gap: prepareMediaVariable(--_ctm-dn-lt-lt-gp);
+      padding: prepareMediaVariable(--_ctm-lt-pg);
+
+      &[data-show-border="true"] {
+        border-color: prepareMediaVariable(--_ctm-dn-lt-br-cr);
+        border-style: prepareMediaVariable(--_ctm-dn-lt-br-se);
+        border-width: prepareMediaVariable(--_ctm-dn-lt-br-wh);
+      }
+      border-radius: prepareMediaVariable(--_ctm-dn-lt-br-rs);
+      background-color: prepareMediaVariable(--_ctm-dn-lt-bd-cr);
+
+      &[data-show-boxshadow="true"] {
+        box-shadow: prepareMediaVariable(--_ctm-dn-lt-sw-ae)
+          prepareMediaVariable(--_ctm-dn-lt-sw-br) prepareMediaVariable(--_ctm-dn-lt-sw-sd)
+          prepareMediaVariable(--_ctm-dn-lt-sw-cr);
+      }
+
+      &[data-show-divider="true"] {
+        & > .#{$item} {
+          &:not(:last-of-type) {
+            position: var(--_p-relative);
+            padding-block-end: calc(
+              #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} + #{prepareMediaVariable(
+                  --_ctm-dn-lt-dr-wt
+                )}
+            );
+            &::after {
+              content: "";
+              position: var(--_p-absolute);
+              bottom: 0;
+              left: 0;
+              width: prepareMediaVariable(--_ctm-dn-lt-dr-wh);
+              height: prepareMediaVariable(--_ctm-dn-lt-dr-wt);
+              background: prepareMediaVariable(--_ctm-dn-lt-dr-cr);
+            }
+          }
+        }
+      }
+
+      & > div {
+        &.#{$item} {
+          display: var(--_d-flex);
+          gap: var(--_in_hr-gp, var(--_ctm-dn-in-dt-se-in-gp));
+
+          &:hover {
+            --_in_hr-gp: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-gp)};
+            --_in-hr-sz: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-se)};
+            --_in-hr-as: #{prepareMediaVariable(--_ctm-dn-in-hr-se-vl-at)};
+            --_in-hr-cr: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-c1)};
+
+            --_txt-ht-ff: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-fy)};
+            --_txt-ht-fs: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se)};
+            --_txt-ht-cr: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-cr)};
+            --_txt-ht-fw: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-wt)};
+            --_txt-ht-td: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ue)};
+            --_txt-ht-fst: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se-ic)};
+            --_txt-ht-tl: #{prepareMediaQueries(--_ctm-dn-tt-hr-se-tt-an)};
+            --_txt-ht-ls: #{prepareMediaQueries(--_ctm-dn-tt-hr-se-lr-sg)};
+            --_txt-ht-lt: #{prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht)};
+          }
+
+          & > span {
+            &.#{$icon} {
+              display: var(--_d-flex);
+              align-self: var(--_in-hr-as, prepareMediaVariable(--_ctm-dn-in-dt-se-vl-at));
+
+              & > svg {
+                width: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
+                height: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
+
+                path {
+                  stroke: var(--_in-hr-cr, prepareMediaVariable(--_ctm-dn-in-dt-se-in-c1));
+                }
+              }
+            }
+          }
+
+          & > .#{$text} {
+            font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy));
+            font-size: var(--_txt-ht-fs, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se));
+            color: var(--_txt-ht-cr, prepareMediaVariable(--_ctm-dn-tt-dt-se-cr));
+            font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
+            text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
+            font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
+            text-align: var(--_txt-ht-tl, prepareMediaQueries(--_ctm-dn-tt-dt-se-tt-an));
+            letter-spacing: var(--_txt-ht-ls, prepareMediaQueries(--_ctm-dn-tt-dt-se-lr-sg));
+            line-height: var(--_txt-ht-lt, prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht));
+
+            a {
+              color: inherit;
+              text-decoration: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}