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

package/dist/buyFor.scss

@@ -0,0 +1,153 @@
+.popup_backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(6px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.popup_container {
+  width: 90%;
+  max-width: 600px;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.popup_header {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+
+  h2 {
+    font-size: 20px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  p {
+    font-size: 14px;
+    color: #666;
+    margin: 4px 0 0;
+  }
+}
+
+.search_input {
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  width: 100%;
+  font-size: 14px;
+
+  &:focus {
+    outline: none;
+    border-color: #007bff;
+  }
+}
+
+.groups_list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  max-height: 50vh;
+}
+
+.group_section {
+  .group_header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+    font-size: 15px;
+    margin-bottom: 8px;
+  }
+
+  .user_card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 12px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    &.selected {
+      background-color: #e6f4ff;
+      border-color: #007bff;
+    }
+
+    .user_info {
+      display: flex;
+      flex-direction: column;
+
+      .user_name {
+        font-weight: 500;
+      }
+
+      .user_id {
+        font-size: 12px;
+        color: #666;
+      }
+    }
+
+    .check_icon {
+      font-size: 16px;
+      color: #007bff;
+    }
+  }
+}
+
+.popup_footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 24px;
+
+  button {
+    padding: 10px 16px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+    transition: background 0.2s ease;
+
+    &:first-child {
+      background: #f3f3f3;
+      color: #333;
+
+      &:hover {
+        background: #e0e0e0;
+      }
+    }
+
+    &.proceed_button {
+      background: #007bff;
+      color: #fff;
+
+      &:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+      }
+
+      &:not(:disabled):hover {
+        background: #0069d9;
+      }
+    }
+  }
+}

package/dist/cart-details.scss

@@ -0,0 +1,387 @@
+@use "sass:map";
+@use "sass:list";
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+[data-div-type="element"] {
+  &[data-element-type="cartDetails"] {
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_mob-ctm-ele-nw-wh-vl,
+            var(--_tab-ctm-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)));
+    & > div {
+      &.wrapper {
+        width: 100%;
+      }
+    }
+
+    .cart_details_wrapper {
+      display: flex;
+      padding: 16px 0px;
+      align-items: flex-start;
+      align-self: stretch;
+
+      .cart_header_wrapper {
+        display: flex;
+        padding: var(--_ctm-lt-pg);
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: flex-start;
+        gap: 24px;
+        flex: 1 0 0;
+
+        .cart_title_wrapper {
+          display: flex;
+          // padding: 0px 36px 0px 96px;
+          align-items: center;
+          gap: 12px;
+          align-self: stretch;
+
+          .cart_title {
+            color: var(--_ctm-dn-ct-hg-ss-cr);
+            font-size: var(--_ctm-dn-ct-hg-ss-ft-se);
+            font-weight: var(--_ctm-dn-ct-hg-ss-ft-wt);
+            line-height: var(--_ctm-dn-ct-hg-ss-le-ht);
+            font-style: var(--_ctm-dn-ct-hg-ss-ft-se-ic);
+            text-decoration: var(--_ctm-dn-ct-hg-ss-ue);
+            letter-spacing: var(--_ctm-dn-ct-hg-ss-lr-sg);
+            font-family: var(--_ctm-dn-ct-hg-ss-ft-fy);
+          }
+
+          .number_of_items {
+            color: #101828;
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 20px;
+          }
+        }
+
+        .cart_actions_wrapper {
+          display: flex;
+          // padding-left: 96px;
+          align-items: center;
+          gap: 16px;
+          align-self: stretch;
+
+          .cart_action_button {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            color: #243dc6;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+
+            &:hover {
+              font-weight: 600;
+            }
+          }
+        }
+
+        .cart_products_wrapper {
+          max-height: 100vh;
+          overflow: auto;
+          display: flex;
+          // padding: 0px 60px 0px 96px;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 24px;
+          align-self: stretch;
+          padding: 8px;
+          .cart_item_wrapper {
+            border-radius: 4px;
+            box-shadow: var(--_ctm-dn-ct-im-ss-sw-ae) var(--_ctm-dn-ct-im-ss-sw-br)
+              var(--_ctm-dn-ct-im-ss-sw-sd) var(--_ctm-dn-ct-im-ss-sw-cr);
+            margin: var(--_ctm-dn-ct-im-ss-mn);
+            padding: var(--_ctm-dn-ct-im-ss-pg);
+            background: var(--_ctm-dn-ct-im-ss-bd-cr);
+            max-width: 100%;
+            min-width: 100%;
+            border-style: var(--_ctm-dn-ct-im-ss-br-se);
+            border-color: var(--_ctm-dn-ct-im-ss-br-cr);
+            border-width: var(--_ctm-dn-ct-im-ss-br-wh);
+
+            .cart_product_wrapper {
+              display: flex;
+              justify-content: space-between;
+              align-items: flex-start;
+              align-self: stretch;
+
+              .cart_product_left_wrapper {
+                display: flex;
+                align-items: flex-start;
+                gap: 16px;
+
+                .checkbox_wrapper {
+                  width: fit-content;
+                }
+
+                .product_info_wrapper {
+                  display: flex;
+                  width: 320px;
+                  flex-direction: column;
+                  justify-content: space-between;
+                  align-items: flex-start;
+                  align-self: stretch;
+
+                  .product_info_container {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-start;
+                    gap: 2px;
+                    align-self: stretch;
+
+                    .product_title {
+                      color: var(--_ctm-dn-pt-ne-ss-cr);
+                      font-size: 18px;
+                      font-weight: 700;
+                      align-self: stretch;
+                      line-height: 28px;
+                    }
+
+                    .product_code {
+                      display: flex;
+                      align-items: center;
+                      gap: 6px;
+                      align-self: stretch;
+
+                      p {
+                        color: #475467;
+                        font-size: 14px;
+                        font-weight: 400;
+                        line-height: 20px;
+                      }
+                    }
+
+                    .product_options {
+                      display: flex;
+                      align-items: center;
+                      gap: 4px;
+                      align-self: stretch;
+
+                      p {
+                        color: #475467;
+                        font-size: 14px;
+                        font-weight: 400;
+                        line-height: 20px; /* 142.857% */
+                      }
+                    }
+                  }
+
+                  .product_customization_container {
+                    display: flex;
+                    align-items: center;
+                    gap: 18px;
+
+                    .customization_button {
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      gap: 8px;
+                      color: #243dc6;
+                      font-size: 14px;
+                      font-weight: 400;
+                      line-height: 20px;
+
+                      &:hover {
+                        font-weight: 600;
+                      }
+                    }
+                  }
+                }
+              }
+
+              .cart_product_right_wrapper {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                align-items: flex-end;
+                align-self: stretch;
+
+                .product_qty_price_wrapper {
+                  display: flex;
+                  justify-content: flex-end;
+                  align-items: center;
+                  gap: 31px;
+                  align-self: stretch;
+
+                  .product_qty_wrapper {
+                    display: flex;
+                    width: 124px;
+                    flex-direction: column;
+                    align-items: flex-start;
+                    gap: 6px;
+
+                    .product_qty_container {
+                      display: flex;
+                      align-items: flex-start;
+                      align-self: stretch;
+                      border-radius: 4px;
+                      border: 0.5px solid #d0d5dd;
+                      background: #fff;
+                      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+
+                      .product_qty_label {
+                        display: flex;
+                        padding: 8px 12px;
+                        align-items: center;
+                        border-radius: 8px 0px 0px 8px;
+                        p {
+                          color: #475467;
+                          font-size: 16px;
+                          font-weight: 400;
+                          line-height: 24px;
+                        }
+                      }
+
+                      .product_qty_number {
+                        display: flex;
+                        padding: 8px 12px;
+                        align-items: center;
+                        gap: 8px;
+                        flex: 1 0 0;
+                        align-self: stretch;
+                        border-radius: 0px 4px 4px 0px;
+                        background: #fff;
+                        border-left: 1px solid #d0d5dd;
+                      }
+                    }
+                  }
+
+                  .product_price {
+                    color: #101828;
+                    text-align: right;
+                    font-size: 20px;
+                    font-weight: 700;
+                    line-height: 30px;
+                    white-space: nowrap;
+                  }
+                }
+
+                .product_actions_wrapper {
+                  display: flex;
+                  align-items: center;
+                  gap: 16px;
+
+                  .product_action_button {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 8px;
+                    color: #243dc6;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 20px;
+                    white-space: nowrap;
+
+                    &:hover {
+                      font-weight: 600;
+                    }
+                  }
+
+                  .remove_button {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: #667085;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 20px;
+
+                    &:hover {
+                      font-weight: 600;
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          .brand_group_wrapper {
+            .brand_title {
+              margin-bottom: 8px;
+              padding: 4px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.wishlist-modal {
+  .form-group {
+    margin-bottom: 1rem;
+
+    label {
+      display: block;
+      margin-bottom: 0.25rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #374151; // gray-700
+    }
+
+    input,
+    textarea {
+      width: 100%;
+      padding: 0.5rem 0.75rem;
+      font-size: 0.875rem;
+      border: 1px solid #d1d5db; // gray-300
+      border-radius: 0.375rem;
+      outline: none;
+      box-sizing: border-box;
+      transition: all 0.2s;
+
+      &:focus {
+        border-color: #2563eb; // blue-600
+        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
+      }
+    }
+
+    textarea {
+      min-height: 100px;
+      resize: vertical;
+    }
+  }
+
+  .action-buttons {
+    margin-top: 1.5rem;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+
+    .create-btn {
+      background-color: #2563eb;
+      color: #fff;
+      padding: 0.5rem 1rem;
+      border-radius: 0.375rem;
+      border: none;
+      cursor: pointer;
+      font-weight: 500;
+
+      &:hover {
+        background-color: #1d4ed8;
+      }
+    }
+
+    .discard-btn {
+      background: none;
+      border: none;
+      color: #374151;
+      font-size: 0.875rem;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

package/dist/cart-summary.scss

@@ -0,0 +1,175 @@
+@use "sass:map";
+@use "sass:list";
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+[data-div-type="element"] {
+  &[data-element-type="cartSummary"] {
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_mob-ctm-ele-nw-wh-vl,
+            var(--_tab-ctm-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)));
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+      }
+    }
+
+    .cart_summary_wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      align-self: stretch;
+      border-radius: 4px;
+      border: 0.5px solid #d0d5dd;
+      background: #fff;
+
+      .cart_summary_heading_wrapper {
+        display: flex;
+        padding: 12px;
+        align-items: center;
+        gap: 12px;
+        align-self: stretch;
+        border-radius: 4px 4px 0px 0px;
+        border: 0.5px solid #d0d5dd;
+        background: #f5f5f5;
+
+        .cart_summary_heading {
+          color: #101828;
+          font-size: 16px;
+          font-weight: 700;
+          line-height: 24px;
+        }
+      }
+
+      .cart_summary_content_wrapper {
+        display: flex;
+        padding: 16px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+        align-self: stretch;
+        border-radius: 0px 0px 4px 4px;
+
+        .cart_summary_details_wrapper {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 8px;
+          align-self: stretch;
+
+          .num_of_items_wrapper {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            align-self: stretch;
+
+            .number_of_items_label {
+              flex: 1 0 0;
+              color: #667085;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 20px;
+            }
+
+            .num_of_items {
+              color: #101828;
+              font-size: 14px;
+              font-weight: 500;
+              line-height: 20px;
+            }
+          }
+
+          .coupon_code_wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            width: 100%;
+
+            .coupon_code_btn_wrapper {
+              display: flex;
+              justify-content: space-between;
+              width: 100%;
+
+              .coupon_code_btn {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                gap: 8px;
+                color: #243dc6;
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 20px;
+              }
+            }
+
+            .coupon_code_input {
+              width: 100%;
+              padding: 8px 12px;
+              border-radius: 8px;
+              border: 1px solid #d0d5dd;
+              background-color: #ffffff;
+              box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+              font-size: 16px;
+              line-height: 24px;
+              height: 40px;
+            }
+          }
+        }
+
+        .subtotal_wrapper {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+          align-self: stretch;
+
+          .subtotal_label {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex: 1 0 0;
+            align-self: stretch;
+            color: #1f1930;
+            font-size: 16px;
+            font-weight: 600;
+            line-height: 24px;
+          }
+
+          .subtotal {
+            color: #1f1930;
+            font-size: 20px;
+            font-weight: 700;
+            line-height: 30px;
+          }
+        }
+
+        .checkout_btn {
+          display: flex;
+          height: 48px;
+          padding: 12px 24px;
+          justify-content: center;
+          align-items: center;
+          gap: 8px;
+          align-self: stretch;
+          border-radius: 4px;
+          border: 1px solid #243dc6;
+          background: #243dc6;
+          box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+          color: #fff;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 24px;
+        }
+      }
+    }
+  }
+}