@sc-360-v2/storefront-cms-library 0.3.25 → 0.3.27

package/dist/cart-details.scss

@@ -3,9 +3,9 @@
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
-$defaultValues: (
-  --_dm-flt: getListOfResponsive(flex-end, flex-start),
-);
+// $defaultValues: (
+//   --_dm-flt: getListOfResponsive(flex-end, flex-start),
+// );
 [data-div-type="element"] {
   &[data-element-type="cartDetails"] {
     width: var(
@@ -80,6 +80,7 @@ $defaultValues: (
             align-items: center;
             gap: 12px;
             align-self: stretch;
+            padding-bottom: 24px;
 
             .cart_title {
               color: var(--_ctm-dn-ct-hg-ss-cr);
@@ -177,15 +178,27 @@ $defaultValues: (
 }
 
 .wishlist-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 10px 16px;
+  width: 100%;
+  overflow-y: auto;
+
   .form-group {
-    margin-bottom: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 
     label {
       display: block;
-      margin-bottom: 0.25rem;
       font-size: 0.875rem;
       font-weight: 500;
-      color: #374151; // gray-700
+      color: #374151;
+    }
+
+    .primary_text_label {
+      font-weight: 700;
     }
 
     input,
@@ -193,16 +206,33 @@ $defaultValues: (
       width: 100%;
       padding: 0.5rem 0.75rem;
       font-size: 0.875rem;
-      border: 1px solid #d1d5db; // gray-300
+      border: 1px solid #d1d5db;
       border-radius: 0.375rem;
       outline: none;
       box-sizing: border-box;
       transition: all 0.2s;
 
       &:focus {
-        border-color: #2563eb; // blue-600
+        border-color: #2563eb;
         box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
       }
+
+      &[type="radio"] {
+        width: fit-content;
+        height: fit-content;
+      }
+    }
+
+    .radio-group {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+
+      .radio-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
     }
 
     textarea {
@@ -211,19 +241,136 @@ $defaultValues: (
     }
   }
 
+  .employee-row-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    .employee-row {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+
+      .dropdown {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        max-width: 400px;
+
+        .quick-order-product-dropdown-section {
+          padding: 0rem;
+          border: 1px solid #d1d5db;
+          border-radius: 0.375px;
+
+          .dropdown-input-section {
+            padding: 0.5rem;
+
+            .input-field {
+              border: none;
+              box-shadow: none;
+              padding: 0px;
+            }
+
+            .dropdown-menu {
+              top: 40px;
+            }
+          }
+        }
+      }
+
+      .checkbox-wrapper {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 0.5rem;
+        white-space: nowrap;
+        align-self: stretch;
+        align-items: flex-start;
+
+        .checkbox-container {
+          display: flex;
+          width: 3.5rem;
+          align-items: center;
+          flex: 1 1 auto;
+          justify-content: center;
+
+          input[type="checkbox"] {
+            width: 20px;
+            height: 20px;
+            border: 1px solid #d0d5dd;
+            border-radius: 4px;
+            position: relative;
+            background-color: #fff;
+            transition: all 0.2s ease;
+
+            &::after {
+              content: "";
+              position: absolute;
+              display: none;
+              left: 5px;
+              top: 0.5px;
+              width: 5px;
+              height: 10px;
+              border: solid #fff;
+              border-width: 0 2px 2px 0;
+              transform: rotate(45deg);
+            }
+          }
+        }
+      }
+
+      .delete-icon-wrapper {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 0.5rem;
+        white-space: nowrap;
+        align-self: stretch;
+        align-items: flex-start;
+
+        .delete-icon-container {
+          display: flex;
+          width: 100%;
+          align-items: center;
+          flex: 1 1 auto;
+          justify-content: center;
+
+          .delete-icon {
+            cursor: pointer;
+            svg {
+              width: 20px;
+              height: 20px;
+              path {
+                stroke: #6b7280; // gray-500
+              }
+
+              &:hover {
+                path {
+                  stroke: #ef4444;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
   .action-buttons {
-    margin-top: 1.5rem;
     display: flex;
     gap: 1rem;
-    align-items: center;
+    align-items: flex-end;
+    justify-content: flex-end;
+    flex: 1 1 auto;
 
     .create-btn {
       background-color: #243dc6;
       color: #fff;
-      padding: 0.5rem 1rem;
+      padding: 12px 24px;
       border-radius: 0.375rem;
       border: none;
       cursor: pointer;
+      line-height: 24px;
       font-weight: 500;
 
       &:hover {
@@ -234,9 +381,11 @@ $defaultValues: (
     .discard-btn {
       background: none;
       border: none;
+      padding: 12px 24px;
       color: #374151;
       font-size: 0.875rem;
       cursor: pointer;
+      line-height: 24px;
 
       &:hover {
         text-decoration: underline;
@@ -244,6 +393,7 @@ $defaultValues: (
     }
   }
 }
+
 .cart_products_wrapper,
 .infinite-list-container {
   max-height: calc(100vh - 148px);
@@ -269,7 +419,7 @@ $defaultValues: (
     border-color: var(--_ctm-dn-ct-im-ss-br-cr);
     border-width: var(--_ctm-dn-ct-im-ss-br-wh);
 
-    @include prepareMediaQueries($defaultValues);
+    // @include prepareMediaQueries($defaultValues);
 
     .cart_product_wrapper {
       display: flex;
@@ -318,7 +468,7 @@ $defaultValues: (
 
         .product_info_wrapper {
           display: flex;
-          width: 400px;
+          width: 380px;
           flex-direction: column;
           justify-content: space-between;
           align-items: flex-start;
@@ -610,7 +760,7 @@ $defaultValues: (
           display: flex;
           justify-content: var(--_dm-flt);
           align-items: center;
-          gap: 8px;
+          gap: 32px;
           align-self: stretch;
 
           .product_qty_wrapper {
@@ -652,7 +802,7 @@ $defaultValues: (
                 border-radius: 0px 4px 4px 0px;
                 background: #fff;
                 border-left: 1px solid #d0d5dd;
-                max-width: 82px;
+                max-width: 80px;
               }
             }
           }
@@ -703,6 +853,7 @@ $defaultValues: (
               --_ctm-mob-dn-pt-pe-ss-ue,
               var(--_ctm-tab-dn-pt-pe-ss-ue, var(--_ctm-dn-pt-pe-ss-ue))
             );
+            min-width: 80px;
           }
         }
 
@@ -798,165 +949,12 @@ $defaultValues: (
   // }
 }
 
-.attributes-section-body {
-  padding-top: 1rem;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  padding: 8px;
-  .attribute {
-    // margin-bottom: 1.25rem;
-    width: 240px;
-    div * {
-      // width: 100%;
-    }
-    .label {
-      display: block;
-      // font-size: 0.875rem;
-      // font-weight: 500;
-      // color: #374151;
-      white-space: nowrap;
-      color: var(
-        --_ctm-mob-dn-pt-as-is-cr,
-        var(--_ctm-tab-dn-pt-as-is-cr, var(--_ctm-dn-pt-as-is-cr))
-      );
-      font-family: var(
-        --_sf-hr-ff,
-        var(
-          --_ctm-mob-dn-pt-as-is-ft-fy,
-          var(--_ctm-tab-dn-pt-as-is-ft-fy, var(--_ctm-dn-pt-as-is-ft-fy))
-        )
-      );
-      font-size: var(
-        --_ctm-mob---_ctm-dn-pt-as-is-ft-se,
-        var(--_ctm-tab---_ctm-dn-pt-as-is-ft-se, var(--_ctm---_ctm-dn-pt-as-is-ft-se))
-      );
-      font-weight: var(
-        --_ctm-mob-dn-pt-as-is-ft-wt,
-        var(--_ctm-tab-dn-pt-as-is-ft-wt, var(--_ctm-dn-pt-as-is-ft-wt))
-      );
-      font-style: var(
-        --_ctm-mob-dn-pt-as-ss-ft-se-ic,
-        var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic))
-      );
-      text-align: var(
-        --_ctm-mob-dn-pt-as-is-tt-an,
-        var(--_ctm-tab-dn-pt-as-is-tt-an, var(--_ctm-dn-pt-as-is-tt-an))
-      );
-      letter-spacing: var(
-        --_ctm-mob-dn-pt-as-is-lr-sg,
-        var(--_ctm-tab-dn-pt-as-is-lr-sg, var(--_ctm-dn-pt-as-is-lr-sg))
-      );
-      line-height: var(
-        --_ctm-mob-dn-pt-as-is-le-ht,
-        var(--_ctm-tab-dn-pt-as-is-le-ht, var(--_ctm-dn-pt-as-is-le-ht))
-      );
-      text-decoration: var(
-        --_ctm-mob-dn-pt-as-is-ue,
-        var(--_ctm-tab-dn-pt-as-is-ue, var(--_ctm-dn-pt-as-is-ue))
-      );
-      margin-bottom: 0.5rem;
-
-      &.required::after {
-        content: " *";
-        color: #dc2626;
-      }
-    }
-    .image_file_a,
-    .file_a {
-      padding: 8px 0px !important;
-      border-radius: 4px;
-      // border: 1px solid #ccc;
-      /* background-color: #f9fafb !important; */
-      outline: none;
-      transition: border-color 0.2s ease-in-out;
-      font-size: 14px;
-      height: 40px;
-    }
-    .image_file_a button,
-    .file_a button {
-      font-family: var(
-        --_sf-hr-ff,
-        var(
-          --_ctm-mob-dn-pt-as-is-ft-fy,
-          var(--_ctm-tab-dn-pt-as-is-ft-fy, var(--_ctm-dn-pt-as-is-ft-fy))
-        )
-      );
-    }
-    .attribute_form_field {
-      width: 100% !important;
-      padding: 8px 12px !important;
-      // border-radius: 4px;
-      // border: 1px solid #ccc;
-      /* background-color: #f9fafb !important; */
-      border-style: var(
-        --_ctm-mob-dn-pt-as-is-br-se,
-        var(--_ctm-tab-dn-pt-as-is-br-se, var(--_ctm-dn-pt-as-is-br-se))
-      );
-      border-width: var(
-        --_ctm-mob-dn-pt-as-is-br-wh,
-        var(--_ctm-tab-dn-pt-as-is-br-wh, var(--_ctm-dn-pt-as-is-br-wh))
-      );
-      // border: ;
-      border-radius: var(
-        --_ctm-mob-dn-pt-as-is-br-rs,
-        var(--_ctm-tab-dn-pt-as-is-br-rs, var(--_ctm-dn-pt-as-is-br-rs))
-      );
-      border-color: var(
-        --_ctm-mob-dn-pt-as-is-br-cr,
-        var(--_ctm-tab-dn-pt-as-is-br-cr, var(--_ctm-dn-pt-as-is-br-cr))
-      );
-      outline: none;
-      transition: border-color 0.2s ease-in-out;
-      font-size: 14px;
-      height: 40px;
-
-      font-family: var(
-        --_sf-hr-ff,
-        var(
-          --_ctm-mob-dn-pt-as-is-ft-fy,
-          var(--_ctm-tab-dn-pt-as-is-ft-fy, var(--_ctm-dn-pt-as-is-ft-fy))
-        )
-      );
 
-      &:focus {
-        border-color: #3b82f6;
-        background-color: #fff;
-      }
-
-      &.error {
-        border-color: #dc2626;
-        background-color: #fef2f2;
-      }
-    }
-
-    textarea {
-      min-height: 100px;
-      resize: vertical;
-      font-family: var(
-        --_sf-hr-ff,
-        var(
-          --_ctm-mob-dn-pt-as-is-ft-fy,
-          var(--_ctm-tab-dn-pt-as-is-ft-fy, var(--_ctm-dn-pt-as-is-ft-fy))
-        )
-      );
-    }
-  }
-  .text_area_attribute {
-    width: 100%;
-  }
-  .cart_item_attr_disabled {
-    pointer-events: none;
-    opacity: 0.5;
-    cursor: auto;
-  }
-}
 
 .infinite-list-container {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 48px;
   max-width: 100%;
   min-width: 100%;
 
@@ -1019,34 +1017,34 @@ $defaultValues: (
   }
 }
 
-@media (max-width: 750px) {
-  .product_qty_price_wrapper {
-    // justify-content: flex-start !important;
-  }
-  .cart_product_right_wrapper {
-    flex-direction: inherit;
-    align-items: center;
-    margin-top: 24px !important;
-    width: 100%;
-  }
-}
-@media (max-width: 448px) {
-  .wrapper {
-    background-color: red;
-  }
-  .cart_product_right_wrapper {
-    display: block;
-  }
-  .product_qty_price_wrapper {
-    margin-bottom: 12px;
-  }
-  .cart_product_left_wrapper {
-    display: block;
-  }
-  .cart_product_left_wrapper .product_image {
-    margin-bottom: 12px;
-  }
-  .product_info_wrapper {
-    width: 100%;
-  }
-}
+// @media (max-width: 750px) {
+//   .product_qty_price_wrapper {
+//     // justify-content: flex-start !important;
+//   }
+//   .cart_product_right_wrapper {
+//     flex-direction: inherit;
+//     align-items: center;
+//     margin-top: 24px !important;
+//     width: 100%;
+//   }
+// }
+// @media (max-width: 448px) {
+//   // .wrapper {
+//   //   background-color: red;
+//   // }
+//   .cart_product_right_wrapper {
+//     display: block;
+//   }
+//   .product_qty_price_wrapper {
+//     margin-bottom: 12px;
+//   }
+//   .cart_product_left_wrapper {
+//     display: block;
+//   }
+//   .cart_product_left_wrapper .product_image {
+//     margin-bottom: 12px;
+//   }
+//   .product_info_wrapper {
+//     width: 100%;
+//   }
+// }