@sc-360-v2/storefront-cms-library 0.3.38 → 0.3.40

package/dist/customization-tree.scss

@@ -14,17 +14,17 @@ $link-color: #243dc6;
     line-height: 28px;
     margin-bottom: 12px;
   }
-.treeNode {
-  position: relative;
-   &::after {
-  content: "";
-  position: absolute; 
-  bottom: 0;           
-  left: 0;
-  width: 100%;
-  border-bottom:1px dotted var(--_gray-300);
+  .treeNode {
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      border-bottom: 1px dotted var(--_gray-300);
+    }
   }
-}
   .treeNode,
   .treeItem {
     position: relative;
@@ -105,3 +105,35 @@ $link-color: #243dc6;
     }
   }
 }
+
+// customization tree
+.lightbox-overlay {
+  background: red;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  border-radius: 6px;
+  padding: 10px;
+  min-width: 200px;
+  height: 100px;
+  transition: all 0.3s ease;
+
+  &.top {
+    transform-origin: bottom;
+  }
+
+  &.bottom {
+    transform-origin: top;
+  }
+
+  .custom_attr_lb_img img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .custom_attr_lb_footer {
+    margin-top: 8px;
+    font-size: 12px;
+    text-align: center;
+    color: #555;
+  }
+}

package/dist/dropdownTemplate.scss

@@ -2,10 +2,6 @@
   display: grid;
   gap: 2px;
   width: 100%;
-  &:focus-within {
-    border: 1px solid var(--_primary-300);
-    outline: 2px solid var(--_primary-50);
-  }
 
   .dropdown-disabled {
     opacity: 0.6;
@@ -22,11 +18,17 @@
     position: relative;
     display: flex;
     justify-content: space-between;
-    padding: 8px 12px;
+    padding: 0px 12px;
     border: 1px solid var(--_gray-300);
+    background-color: var(--_base-white);
     border-radius: 6px;
     width: 100%;
     align-items: center;
+    height: 40px;
+    &:focus-within {
+      border: 1px solid var(--_primary-300);
+      outline: 2px solid var(--_primary-50);
+    }
     .dropdown-chips {
       display: flex;
       //   flex-wrap: wrap;
@@ -73,7 +75,7 @@
     .dropdown__clear__icon,
     .dropdown__icon {
       .icon {
-         display: flex;
+        display: flex;
       }
       cursor: pointer;
       .icon svg {
@@ -95,7 +97,7 @@
       right: 24px;
       background: white;
       border: 1px solid #ddd;
-      border-radius: 4px;
+      border-radius: 6px;
       max-height: 200px;
       overflow-y: auto;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -104,6 +106,13 @@
       max-height: 300px;
       padding: 4px;
 
+      .dropdown_menu_ul {
+        max-height: 200px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
       .dropdown-opt {
         font-size: 14px;
         cursor: pointer;
@@ -124,7 +133,8 @@
           max-height: 52px;
           border-radius: 4px;
           &:hover {
-            background-color: #f4f4f4;
+            background-color: var(--_primary-25);
+            color: var(--_primary-400);
           }
 
           .item-image {
@@ -149,7 +159,7 @@
         }
         .selected {
           background-color: var(--_primary-25);
-          font-weight: bold;
+          font-weight: normal;
           color: var(--_primary-500);
         }
       }
@@ -221,18 +231,18 @@
     padding: 0;
   }
 }
-.dropdown-with-input-section.full-width {
-  width: auto;
-  .dropdown-input-section {
-    width: 100%;
-    border-radius: 6px;
-   
-    &:focus-within {
-      border: 1px solid var(--_primary-300);
-      outline: 2px solid var(--_primary-50);
-    }
-  }
-}
+// .dropdown-with-input-section.full-width {
+//   width: auto;
+//   .dropdown-input-section {
+//     width: 100%;
+//     border-radius: 6px;
+
+//     &:focus-within {
+//       border: 1px solid var(--_primary-300);
+//       outline: 2px solid var(--_primary-50);
+//     }
+//   }
+// }
 
 .icon_with_label_section {
   display: flex;
@@ -251,8 +261,8 @@
   white-space: nowrap;
 }
 .no_data_found {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  padding: 24px;
+  text-align: center;
+  font-weight: 600;
+  font-size: 16px;
 }

package/dist/employee-bulk-order.scss

@@ -72,9 +72,30 @@
     font-weight: 600;
     font-size: 14px;
     text-align: center;
-    height: 36px;
-    display: grid;
-    align-items: anchor-center;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    padding: 0 12px;
+    .products_header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .employee_product_actions_sec {
+      width: 50%;
+      display: flex;
+      justify-content: right;
+      gap: 12px;
+      .employee_product_action {
+        padding: 8px;
+        color: #667085;
+      }
+
+      .employee_product_action_save {
+        color: #243dc6;
+      }
+    }
   }
   .employee-content-section {
     display: flex;
@@ -246,12 +267,49 @@
           border-top: 0;
           .em_product-data {
             width: 100%;
-            // height: 177px;
             border-bottom: 1px solid #d0d5dd;
             .em_product-info {
               height: 88px;
               border-bottom: 1px solid #d0d5dd;
             }
+            .selecte_variants_for_cart {
+              height: 68px;
+              overflow: auto;
+              cursor: pointer;
+              .variantOptionValues {
+                height: 24px;
+                color: #475467;
+                font-size: 14px;
+                padding: 0 8px;
+                margin-bottom: 1px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                &:hover {
+                  background: #e6f0ff;
+                  .variantOptionValues_acttions {
+                    opacity: 1;
+                  }
+                }
+                .variantOptionValues_text {
+                  width: calc(100% - 40px);
+                  padding-right: 4px;
+                }
+                .variantOptionValues_acttions {
+                  display: flex;
+                  gap: 8px;
+                  align-items: center;
+                  width: 40px;
+                  opacity: 0;
+                  .svg_icon {
+                    display: flex;
+                  }
+                }
+              }
+              .active_vr {
+                background: #e6f0ff;
+              }
+            }
             .em_product-variant,
             .em_product-info {
               // height: 50%;
@@ -285,7 +343,7 @@
             }
           }
           .product-option-details {
-            height: calc(100% - 204px);
+            height: calc(100% - 214px);
             width: 100%;
             overflow: auto;
             .em_p_variant_options {
@@ -309,6 +367,8 @@
                   }
                   .em_opt_val.selected {
                     border: 1px solid #243dc6;
+                    color: #243dc6;
+                    font-weight: 600;
                   }
                   .em_opt_val.not-avl {
                     position: relative;
@@ -360,50 +420,62 @@
             }
           }
           .product-qty-section {
-            height: 46px;
-            position: relative;
+            height: 56.74px;
+            display: flex;
+            gap: 8px;
+            padding: 8px;
+            border-top: 1px solid #dde0e6;
             input {
               height: 100%;
-              width: 100%;
+              width: 50%;
               border: 1px solid #d0d5dd;
-              /* border-radius: 4px; */
-              border-left: 0;
-              border-right: 0;
-              padding: 0 64px;
+              border-radius: 4px;
               text-align: center;
+              font-weight: 600;
+              font-size: 16px;
+              color: #101828;
             }
-            .qty-action {
-              position: absolute;
-              top: 0;
+            .add_to_cart_btn_for_employee_bulk {
               height: 100%;
-              width: 64px;
-              display: grid;
-              //   align-items: anchor-center;
-              //   text-align: center;
-              background: #e6f0ff;
-              cursor: pointer;
-              &:hover {
-                background: #c3dbff;
-              }
-
-              .svg_icon {
-                display: flex;
-                align-items: center;
-                justify-self: center;
-                cursor: pointer;
-              }
-            }
-            .qty-action.decrease {
-              left: 0;
-            }
-            .qty-action.increase {
-              right: 1px;
-            }
-            .qty_action_disabled {
-              pointer-events: none;
-              opacity: 0.8;
-              cursor: default;
+              width: 50%;
+              background: #243dc6;
+              border-radius: 4px;
+              color: #fff;
+              font-weight: 600;
+              font-size: 16px;
             }
+            // .qty-action {
+            //   position: absolute;
+            //   top: 0;
+            //   height: 100%;
+            //   width: 64px;
+            //   display: grid;
+            //   //   align-items: anchor-center;
+            //   //   text-align: center;
+            //   background: #e6f0ff;
+            //   cursor: pointer;
+            //   &:hover {
+            //     background: #c3dbff;
+            //   }
+
+            //   .svg_icon {
+            //     display: flex;
+            //     align-items: center;
+            //     justify-self: center;
+            //     cursor: pointer;
+            //   }
+            // }
+            // .qty-action.decrease {
+            //   left: 0;
+            // }
+            // .qty-action.increase {
+            //   right: 1px;
+            // }
+            // .qty_action_disabled {
+            //   pointer-events: none;
+            //   opacity: 0.8;
+            //   cursor: default;
+            // }
           }
           .invalid_qty {
             border: #f51605 1px solid !important;
@@ -417,13 +489,14 @@
   }
 }
 
-.heade-body {
-  position: absolute;
-  right: 84px;
+.right_col {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   .employee_bulk_order_header {
     display: flex;
     justify-self: end;
-    gap: 16px;
+    gap: 24px;
     .single_payment_action {
       display: flex;
       align-items: center;
@@ -449,7 +522,106 @@
         height: 24px;
         background: #d0d5dd;
         position: absolute;
-        right: -8px;
+        right: -12px;
+      }
+
+      .single_checkout_sec_opt {
+        display: flex;
+        gap: 8px;
+      }
+
+      .disabled {
+        opacity: 0.4;
+      }
+    }
+    .emp_options_wrapper {
+      display: flex;
+      align-items: center;
+      .user_icon {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        cursor: pointer;
+        &.active {
+          background-color: var(--_gray-200);
+        }
+        & > span {
+          display: flex;
+        }
+        &:hover {
+          background-color: var(--_gray-200);
+        }
+      }
+      .emp_options {
+        position: absolute;
+        top: 65px;
+        width: 200px;
+        background-color: var(--_base-white);
+        border: 1px solid var(--_gray-200);
+        border-radius: 4px;
+        .emp_options_header {
+          padding: 12px 16px;
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--_gray-600);
+          border-bottom: 1px solid var(--_gray-200);
+        }
+        .emp_options_list {
+          .emp_options_list_item {
+            padding: 12px 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            &:hover {
+              background-color: var(--_primary-25);
+              color: var(--_primary-400);
+            }
+          }
+        }
+        .emp_options_footer {
+          display: flex;
+          border-top: 1px solid var(--_gray-200);
+          & > div {
+            flex-basis: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 16px;
+            cursor: pointer;
+            &:hover {
+              background-color: var(--_primary-25);
+              svg path {
+                stroke: var(--_primary-400);
+              }
+            }
+          }
+        }
+      }
+    }
+    .emp_review_cart_btn {
+      padding: 8px 16px;
+      border: 1px solid var(--_gray-300);
+      border-radius: 6px;
+      color: var(--_gray-700);
+      cursor: pointer;
+      &:hover {
+        background-color: var(--_gray-50);
+      }
+    }
+    .emp_discard_btn {
+      padding: 8px 16px;
+      border-radius: 6px;
+      color: var(--_gray-700);
+      cursor: pointer;
+      &.disabled {
+        pointer-events: none;
+        opacity: 0.8;
+      }
+      &:hover {
+        background-color: var(--_gray-50);
       }
     }
     .action_item {

package/dist/empty-states.scss

@@ -1,84 +1,84 @@
 .empty_template {
-display: flex;
-flex-direction: column;
-justify-content: center;
-align-items: center;
-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
 
-h3 {
+  h3 {
     font-size: 16px;
     color: var(--_gray-900);
     font-weight: 600;
     margin-bottom: 10px;
-}
-p {
+  }
+  p {
     font-size: 12px;
     color: var(--_gray-600);
-}
+  }
 }
 
 .empty_cart_wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    gap: 6px;
-    margin-top: 24px;
-    img {
-        max-width: 100px;
-        max-height: 100px;
-    }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 6px;
+  margin-top: 24px;
+  img {
+    max-width: 100px;
+    max-height: 100px;
+  }
 
-    .empty_msg_title {
-      font-family: "Lato";
-      font-weight: 700;
-      font-size: 24px;
-      color: var(--_gray-900);
-      line-height: 32px;
-      margin-top: 24px;
-    }
+  .empty_msg_title {
+    font-family: "Lato";
+    font-weight: 700;
+    font-size: 24px;
+    color: var(--_gray-900);
+    line-height: 32px;
+    margin-top: 24px;
+  }
 
-    .empty_msg_desc {
-      font-family: "Lato";
-      font-size: 14px;
-      line-height: 20px;
-      color: var(--_gray-900);
-    }
-    .emtpy_cart_btn {
+  .empty_msg_desc {
+    font-family: "Lato";
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--_gray-900);
+  }
+  .emtpy_cart_btn {
+    display: flex;
+    gap: 12px;
+    margin-top: 24px;
+    .empty_crt_btn {
+      padding: 12px 24px;
+      border-radius: 6px;
+      background-color: var(--_primary-400);
+      font-weight: 600px;
       display: flex;
-      gap: 12px;
-      margin-top: 24px;
-      .empty_crt_btn {
-        padding: 12px 24px;
-        border-radius: 6px;
-        background-color: var(--_primary-400);
-        font-weight: 600px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        &:hover {
-          background-color: var(--_primary-500);
-        }
-        .label {
-          color: var(--_base-white);
-          font-size: 16px;
-        }
-        svg path {
-          stroke: var(--_base-white);
-        }
+      align-items: center;
+      gap: 8px;
+      &:hover {
+        background-color: var(--_primary-500);
       }
-      .empty_wl_btn {
-padding: 12px 24px;
-        border-radius: 6px;
-        background-color: var(--_base-white);
-        color: var(--_primary-400);
-        font-weight: 500;
+      .label {
+        color: var(--_base-white);
         font-size: 16px;
-        &:hover {
-          background-color: var(--_gray-50);
-        }
       }
-      
+      svg path {
+        stroke: var(--_base-white);
+      }
+    }
+    .empty_wl_btn {
+      padding: 12px 24px;
+      border-radius: 6px;
+      background-color: var(--_base-white);
+      color: var(--_primary-400);
+      font-weight: 500;
+      font-size: 16px;
+      &:hover {
+        background-color: var(--_gray-50);
+      }
     }
-  }
+  }
+}