@sc-360-v2/storefront-cms-library 0.4.27 → 0.4.29

package/dist/bulk-order-pad.scss

@@ -436,6 +436,12 @@
         display: flex;
         width: 600px;
         gap: 12px;
+        .option-dropdown {
+          label {
+            display: block;
+            margin-bottom: 6px;
+          }
+        }
 
         .dropdown-with-input-section {
           gap: 6px;

package/dist/buyForHeaders.scss

@@ -521,17 +521,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
             //  button styles for primary
             .primary__btn {
-              color: var(--_thm-py-bs-dt-se-tt-cr);
-              background-color: var(--_thm-py-bs-dt-se-bd-cr);
-              color: var(--_thm-py-bs-dt-se-tt-cr);
-              text-align: center;
-              border-radius: var(--_thm-py-bs-hr-se-br-rs);
+              // color: var(--_thm-py-bs-dt-se-tt-cr);
+              // background-color: var(--_thm-py-bs-dt-se-bd-cr);
+              // color: var(--_thm-py-bs-dt-se-tt-cr);
+              // text-align: center;
+              // border-radius: var(--_thm-py-bs-hr-se-br-rs);
               padding: 10px 16px;
-              height: 40px;
-              &:hover {
-                background-color: var(--_thm-py-bs-hr-se-bd-cr);
-                color: var(--_thm-py-bs-hr-se-tt-cr);
-              }
+              // height: 40px;
+              // &:hover {
+              //   background-color: var(--_thm-py-bs-hr-se-bd-cr);
+              //   color: var(--_thm-py-bs-hr-se-tt-cr);
+              // }
             }
           }
 
@@ -1826,7 +1826,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         .review_cart-main {
           border: 1px solid var(--_gray-200);
           border-radius: 6px;
-          margin: 24px;
+          // margin: 24px;
           padding: 24px 24px 8px 24px;
           max-height: 550px;
           overflow-y: auto;
@@ -1848,6 +1848,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             ul {
               display: flex;
               align-items: center;
+              list-style: none;
               li {
                 line-height: 20px;
                 font-size: 14px;
@@ -1875,12 +1876,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           }
           .shipping_address {
             display: flex;
+            grid-template-columns: auto auto auto;
             padding: 24px 0;
             border-bottom: 1px solid var(--_gray-200);
             .shipping {
-              min-width: 45%;
+              min-width: 40%;
               margin-right: 16px;
               border-right: 1px solid var(--_gray-200);
+              padding-right: 12px;
               &:last-of-type {
                 border-right: 0;
               }
@@ -1899,7 +1902,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
             }
             .cart_main {
-              width: 10%;
+              width: 150px;
               display: flex;
               gap: 16px;
               align-items: center;
@@ -1911,7 +1914,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   background: #ffd700;
                   border-radius: 4px;
                   left: 15px;
-                  padding: 2px;
+                  padding: 2px 6px;
                   line-height: normal;
                   color: #1f1930;
                   font-weight: 400;
@@ -1932,7 +1935,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
 
         .cart-items {
-          h6 {
+          h6,
+          .cart-items-title {
             font-size: 14px;
             font-weight: 600;
             color: var(--_gray-900);
@@ -1956,6 +1960,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               border-radius: 4px;
             }
             .product_item-details {
+              list-style: none;
               .product_item-name {
                 font-size: 14px;
                 font-weight: 700;
@@ -1969,6 +1974,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               }
               .product_item-specs {
                 display: flex;
+                list-style: none;
                 li {
                   color: var(--_gray-600);
                   font-size: 14px;

package/dist/buyForPopup.scss

@@ -48,6 +48,7 @@
       }
 
       h2 {
+        color: var(--_thm-ty-p1-tt-cr);
         font-size: 18px;
         font-weight: normal;
         margin: 0;
@@ -91,55 +92,56 @@
 
       button {
         padding: 10px 16px;
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        border: none;
-        transition: background 0.2s ease;
-        display: flex;
-        align-items: center;
-        &[aria-label="Discard"] {
-          &:hover {
-            background-color: var(--_gray-100);
-            color: var(--_gray-900);
-          }
-        }
-
-        &:first-child {
-          // background: #f3f3f3;
-          color: #333;
-
-          &:hover {
-            // background: #e0e0e0;
-          }
-        }
+        // border-radius: 6px;
+        // font-size: 14px;
+        // font-weight: 500;
+        // cursor: pointer;
+        // border: none;
+        // transition: background 0.2s ease;
+        // display: flex;
+        // align-items: center;
+        // &[aria-label="Discard"] {
+        //   &:hover {
+        //     background-color: var(--_gray-100);
+        //     color: var(--_gray-900);
+        //   }
+        // }
+
+        // &:first-child {
+        //   // background: #f3f3f3;
+        //   color: #333;
+
+        //   &:hover {
+        //     // background: #e0e0e0;
+        //   }
+        // }
 
         &.proceed_button {
-          background: var(--_primary-400);
-          color: #fff;
-          display: flex;
-          gap: 10px;
-
-          span {
-            svg {
-              width: 18px;
-              height: 18px;
-
-              path {
-                stroke: #ffffff;
-              }
-            }
-          }
+          // background: var(--_primary-400);
+          // color: #fff;
+          // display: flex;
+          // gap: 10px;
+
+          // span {
+          //   svg {
+          //     width: 18px;
+          //     height: 18px;
+
+          //     path {
+          //       stroke: #ffffff;
+          //     }
+          //   }
+          // }
 
           &:disabled {
-            background: var(--_primary-100);
+            background: var(--_sf-hr-bd-cr, var(--_thm-py-bs-dt-se-bd-cr));
             cursor: not-allowed;
+            opacity: 0.7;
           }
 
-          &:not(:disabled):hover {
-            background: #0069d9;
-          }
+          // &:not(:disabled):hover {
+          //   background: #0069d9;
+          // }
         }
       }
     }
@@ -205,6 +207,13 @@
     justify-content: center;
     align-items: center;
     height: 210px;
+    p {
+      color: var(--_thm-ty-p1-tt-cr);
+      font-size: 18px;
+      font-weight: normal;
+      margin: 0;
+      line-height: 28px;
+    }
   }
 }
 
@@ -260,12 +269,16 @@
       flex-direction: column;
 
       .user_name {
+        color: var(--_thm-ty-p1-tt-cr);
         font-weight: 500;
+        font-size: 18px;
+        margin: 0;
+        line-height: 28px;
       }
 
       .user_id {
         font-size: 12px;
-        color: #666;
+        color: var(--_thm-ty-p3-tt-cr);
         display: flex;
         gap: 4px;
         margin-top: 6px;

package/dist/cart-summary.scss

@@ -1585,7 +1585,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
 
         &:hover {
-          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-bd-cr)};
+          // --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-bd-cr)};
+          @include BgColorLighter(var(--_sf-hr-cr), 5%);
           --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-cr)};
           --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-se)};
           --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-wh)};

package/dist/coupon.scss

@@ -295,6 +295,91 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             white-space: nowrap;
           }
         }
+        .coupon_code_apply_section {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          .coupon_code_fields_wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            input {
+              border: 1px solid #d0d5dd;
+              padding: 12px;
+              width: 100%;
+              border-radius: 4px;
+            }
+            .coupon-search-btn {
+              width: 93px;
+              height: 48px;
+              white-space: nowrap;
+            }
+          }
+          .couponCode_divider {
+            border: 1px dashed #d0d5dd;
+          }
+          .coupon-list {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            .coupon-item {
+              display: flex;
+              flex-direction: row;
+              gap: 12px;
+              input {
+                width: 18px;
+                display: flex;
+                flex-direction: column;
+                position: relative;
+                top: -9px;
+              }
+              input[type="checkbox"] {
+                accent-color: rgb(36 61 198);
+              }
+              .coupon-info {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+                .coupon-title {
+                  font-size: 16px;
+                  font-weight: 700;
+                  line-height: 24px;
+                  color: #101828;
+                }
+                .coupon-desc {
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 20px;
+                  color: #667085;
+                }
+              }
+            }
+          }
+          .coupon-footer-section {
+            display: flex;
+            justify-content: space-between;
+            .coupon-savings {
+              .title {
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 20px;
+                color: #344054;
+              }
+              .price {
+                font-size: 16px;
+                font-weight: 700;
+                line-height: 24px;
+                color: #101828;
+              }
+            }
+            .apply-coupon-primary-btn {
+              width: 158px;
+              height: 48px;
+              white-space: nowrap;
+            }
+          }
+        }
       }
     }
   }

package/dist/default-dropdown.scss

@@ -0,0 +1,226 @@
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+.default__dropdown {
+  position: relative;
+  width: 100%;
+
+  .bo-dropdown__container {
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid var(--_gray-300);
+    border-radius: 4px;
+    background-color: var(--_base-white);
+    min-height: 40px;
+    cursor: pointer;
+    transition: 0.2s ease;
+    padding-inline: 12px !important;
+    // .bod-trigger-left {
+    //   padding-left: 12px;
+    // }
+    .bo-dropdown__actions {
+      //   padding-right: 12px;
+      .bo-dropdown__clear-btn {
+        span {
+          display: flex;
+        }
+      }
+    }
+    .bod-trigger-left {
+      width: -webkit-fill-available;
+    }
+  }
+
+  .bo-dropdown__container--search {
+    padding: 0;
+    cursor: text;
+  }
+
+  .bo-dropdown__container--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .bo-dropdown__value-wrapper {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .bo-dropdown__placeholder {
+    color: #9ca3af;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bo-dropdown__selected {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .bo-dropdown__selected-info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .bo-dropdown__selected-name {
+    font-weight: normal;
+    color: #111827;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bo-dropdown__selected-code {
+    font-size: 12px;
+    color: #6b7280;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bo-dropdown__actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  .bo-dropdown__clear-btn,
+  .bo-dropdown__toggle-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: 4px;
+  }
+
+  .bo-dropdown__chevron {
+    transition: transform 0.2s ease;
+  }
+
+  .bo-dropdown__chevron--open {
+    transform: rotate(180deg);
+  }
+
+  .bo-dropdown__panel {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    margin-top: 4px;
+    background-color: #ffffff;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    box-shadow:
+      0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    max-height: 320px;
+    overflow: hidden;
+  }
+
+  .bo-dropdown__list {
+    max-height: 240px;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .bo-dropdown__option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+  }
+
+  .bo-dropdown__option:last-child {
+    border-bottom: none;
+  }
+
+  .bo-dropdown__option--highlighted {
+    @include BgColorLighter(var(--_thm-cs-at-py), 10%);
+    color: var(--_thm-cs-at-py);
+    border-radius: 4px;
+  }
+
+  .bo-dropdown__option--selected {
+    background-color: var(--_base-white);
+    border-radius: 4px;
+  }
+
+  .bo-dropdown__check {
+    svg path {
+      stroke: var(--_thm-cs-at-py);
+    }
+  }
+
+  .bo-dropdown__option-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .bo-dropdown__option-name {
+    font-weight: 500;
+    color: #111827;
+    font-size: 13px;
+    line-height: 1.2;
+    margin-bottom: 1px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bo-dropdown__option-code {
+    font-size: 11px;
+    color: #6b7280;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bo-dropdown__empty,
+  .bo-dropdown__loading {
+    padding: 24px 12px;
+    text-align: center;
+    color: #6b7280;
+  }
+
+  .bo-dropdown__empty-title {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 4px;
+  }
+
+  .bo-dropdown__empty-sub {
+    font-size: 12px;
+    color: #9ca3af;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 0.4;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+}