@sc-360-v2/storefront-cms-library 0.3.51 → 0.3.53

package/dist/container.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "../functions.scss" as *;
+@use "./functions.scss" as *;
 $activeElementSelector: "[data-has-clicked='true']";
 [data-div-type="element"] {
   &[data-element-type="container"] {

package/dist/employee-bulk-order.scss

@@ -76,31 +76,40 @@
     display: flex;
     align-items: center;
     justify-content: right;
-    padding: 0 12px;
+    padding-left: 30px;
     .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;
+      width: 100%;
+      .hr_line {
+        position: relative;
+        text-align: center;
+        display: inline-block;
+        padding: 0 10px;
+        font-size: 24px;
+        z-index: -1;
+        width: 100%;
+        &::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 0;
+          width: 100%;
+          height: 1px;
+          background: var(--_gray-200); /* line color */
+          z-index: -1;
+        }
+        span {
+          padding: 8px 12px;
+          display: inline-block;
+          background: var(--_base-white);
+          font-size: 14px;
+        }
       }
     }
   }
   .employee-content-section {
     display: flex;
-    height: calc(100% - 50px);
-    width: calc(100% - 10px);
+    height: calc(100% - 70px);
+    width: 100%;
     .employees-section-title {
       writing-mode: vertical-rl;
       transform: rotate(180deg);
@@ -135,7 +144,7 @@
       }
     }
     .employee-content {
-      width: calc(100% - 21px);
+      width: calc(100% - 30px);
       display: flex;
       .em_content {
         // display: flex;
@@ -143,9 +152,10 @@
           width: 250px;
           height: 88px;
           position: relative;
-          border: 1px solid #d0d5dd;
+          border: 1px solid var(--_gray-200);
           border-bottom: none;
           border-right: none;
+          border-radius: 6px;
           .svg_icon {
             position: absolute;
             display: flex;
@@ -167,6 +177,7 @@
             right: 0;
             .svg_icon {
               right: -10px;
+              top: -10px;
             }
           }
           .em_add-employee {
@@ -174,6 +185,7 @@
             bottom: 0;
             .svg_icon {
               left: -10px;
+              bottom: -10px;
             }
           }
           .em_add-product-disabled {
@@ -184,29 +196,32 @@
         }
         .employees-section {
           height: calc(100% - 88px);
-          border: 1px solid #d0d5dd;
+          border: 1px solid var(--_gray-200);
           overflow: auto;
           width: 250px;
           .employee_card {
             padding: 12px;
-            display: grid;
+            // display: grid;
             gap: 12px;
-            border-bottom: 1px solid #d0d5dd;
-            height: 112px;
+            border-bottom: 1px solid var(--_gray-200);
+            // height: 112px;
             width: 100%;
             .em_data {
               display: flex;
               // align-items: baseline;
               gap: 10px;
+              margin-bottom: 6px;
               .em_profile {
-                width: 40px;
-                height: 40px;
-                background: #ededed;
+                width: 32px;
+                height: 32px;
+                background: var(--_gray-200);
                 border-radius: 50%;
-                align-items: center;
-                text-align: center;
                 display: flex;
-                background-size: 100% 100%;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+                font-weight: 600;
+                flex-shrink: 0;
                 .em_profile_text {
                   width: 100%;
                 }
@@ -221,10 +236,16 @@
                     width: 158px;
                     color: var(--_gray-900);
                     font-size: 14px;
+                    font-weight: 600;
                   }
                   .svg_icon {
                     display: flex;
                     cursor: pointer;
+                    &:hover {
+                      svg path {
+                        stroke: var(--_error-700);
+                      }
+                    }
                   }
                 }
                 .em_code {
@@ -237,11 +258,37 @@
             .em_entity-status {
               display: flex;
               gap: 10px;
+              margin-left: 14px;
+              margin-top: 12px;
+            }
+            .emp_action_btns {
+              display: flex;
+              gap: 8px;
+              margin-top: 12px;
+              .discard_btn {
+                padding: 8px 16px;
+                border-radius: 4px;
+                width: 100%;
+                &:hover {
+                  background-color: var(--_gray-50);
+                }
+              }
+              .save_btn {
+                padding: 8px 16px;
+                border-radius: 4px;
+                width: 100%;
+                color: var(--_primary-400);
+                border: 1px solid var(--_primary-400);
+                &:hover {
+                  background-color: var(--_primary-50);
+                }
+              }
             }
           }
         }
         .employee_card.selected {
-          background: #e6f0ff;
+          background: var(--_primary-25);
+          border-bottom: 2px solid var(--_primary-400);
         }
         .em_empty_section {
           width: 100%;
@@ -255,60 +302,86 @@
       .products-section {
         width: calc(100% - 250px);
         height: 100%;
-        border: 1px solid #d0d5dd;
+        border: 1px solid var(--_gray-200);
         display: flex;
         overflow-x: auto;
         .em_product {
           min-width: 320px;
           width: 320px;
           height: 100%;
-          border: 1px solid #d0d5dd;
+          border: 1px solid var(--_gray-200);
           border-left: 0;
           border-top: 0;
+          display: flex;
+          flex-direction: column;
+          &:hover {
+            box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
+          }
           .em_product-data {
             width: 100%;
-            border-bottom: 1px solid #d0d5dd;
+            border-bottom: 1px solid var(--_gray-200);
             .em_product-info {
-              height: 88px;
-              border-bottom: 1px solid #d0d5dd;
+              height: 65px;
+              border-bottom: 1px solid var(--_gray-200);
             }
             .selecte_variants_for_cart {
               height: 68px;
               overflow: auto;
-              cursor: pointer;
+              padding: 8px;
+              color: var(--_gray-600);
+              .no_variants {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
+              }
               .variantOptionValues {
                 height: 24px;
                 color: #475467;
                 font-size: 14px;
-                padding: 0 8px;
                 margin-bottom: 1px;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
+                cursor: pointer;
+                &.active_vr {
+                  background-color: var(--_primary-25);
+                  color: var(--_primary-500);
+                  padding: 4px 8px;
+                  border-radius: 4px !important;
+                  line-height: 14px;
+                }
                 &:hover {
-                  background: #e6f0ff;
-                  .variantOptionValues_acttions {
+                  color: var(--_primary-400);
+                  .variantOptionValues_actions {
                     opacity: 1;
                   }
+
+                  .svg_icon {
+                    svg path {
+                      stroke: var(--_error-700);
+                    }
+                  }
                 }
                 .variantOptionValues_text {
                   width: calc(100% - 40px);
                   padding-right: 4px;
                 }
-                .variantOptionValues_acttions {
+                .variantOptionValues_actions {
                   display: flex;
                   gap: 8px;
                   align-items: center;
-                  width: 40px;
+                  // width: 40px;
                   opacity: 0;
                   .svg_icon {
                     display: flex;
+                    svg {
+                      width: 18px;
+                      height: 18px;
+                    }
                   }
                 }
               }
-              .active_vr {
-                background: #e6f0ff;
-              }
             }
             .em_product-variant,
             .em_product-info {
@@ -342,79 +415,114 @@
               color: #243dc6;
             }
           }
+          .qty_exist_info {
+            background-color: var(--_warning-50);
+            color: var(--_warning-500);
+            padding: 0px 8px 4px 8px;
+            text-align: center;
+            border-bottom: 1px solid var(--_warning-200);
+          }
           .product-option-details {
             height: calc(100% - 214px);
             width: 100%;
             overflow: auto;
-            .em_p_variant_options {
-              padding: 12px;
-              .em_p_opt {
-                margin-bottom: 4px;
-                .em_opt_name {
-                  font-size: 12px;
-                  color: #101828;
-                  font-weight: 500;
-                }
-                .em_p_opt_values {
-                  display: inline-block;
-                  padding: 8px 0;
-                  .em_opt_val {
-                    cursor: pointer;
-                    &:hover {
-                      // scale: 1.01;
-                      transition: all 0.2s;
-                    }
-                  }
-                  .em_opt_val.selected {
-                    border: 1px solid #243dc6;
-                    color: #243dc6;
-                    font-weight: 600;
+            padding: 8px;
+            flex-grow: 1;
+            overflow-y: auto;
+            .em_product_options {
+              display: flex;
+              flex-direction: column;
+              gap: 12px;
+              .em_p_variant_options {
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                .em_p_opt {
+                  margin-bottom: 4px;
+                  .em_opt_name {
+                    font-size: 12px;
+                    color: #101828;
+                    font-weight: 500;
+                    display: block;
+                    margin-bottom: 6px;
                   }
-                  .em_opt_val.not-avl {
-                    position: relative;
-                    overflow: hidden;
-                    &:after {
-                      content: "";
-                      width: 100%;
-                      height: 100%;
-                      position: absolute;
-                      left: 0;
-                      top: 0;
-                      background: url(https://sellerscommerce.sirv.com/00000000-0000-0000-0000-000000000000/development/Line%207.png);
-                      background-repeat: no-repeat;
-                      background-size: 100% 100%;
+                  .em_p_opt_values {
+                    display: flex;
+                    gap: 8px;
+                    align-items: center;
+                    // padding: 8px 0;
+                    .em_opt_val {
+                      cursor: pointer;
+                      &:hover {
+                        // scale: 1.01;
+                        transition: all 0.2s;
+                      }
+                    }
+                    .em_opt_val.selected {
+                      border: 1px solid var(--_primary-400);
+                      color: var(--_primary-400);
+                      font-weight: 600;
+                    }
+                    .em_opt_val.not-avl {
+                      position: relative;
                       overflow: hidden;
+                      cursor: not-allowed;
+                      pointer-events: none;
+                      &:after {
+                        content: "";
+                        width: 100%;
+                        height: 100%;
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        background: url(https://sellerscommerce.sirv.com/00000000-0000-0000-0000-000000000000/development/Line%207.png);
+                        background-repeat: no-repeat;
+                        background-size: 100% 100%;
+                        overflow: hidden;
+                      }
+                    }
+                    .em_opt_val_swatch {
+                      min-width: 28px;
+                      min-height: 28px;
+                      float: left;
+                      margin: 0px 4px 4px 0px;
+                      border-radius: 50%;
+                      background-size: 100% 100%;
+                      background-repeat: no-repeat;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      &.selected {
+                        min-width: 45px;
+                        border-radius: 20px;
+                        outline: 1px solid var(--_primary-400);
+                        border: 2px solid var(--_base-white);
+                      }
+                    }
+                    .em_opt_val_single {
+                      min-width: 32px;
+                      min-height: 32px;
+                      max-width: max-content;
+                      padding-inline: 6px;
+                      text-align: center;
+                      border-radius: 6px;
+                      float: left;
+                      border: 1px solid #d0d5dd;
+                      font-size: 16px;
+                      font-weight: 400;
+                      color: var(--_gray-600);
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                    }
+                    .em_opt_val_single.selected {
+                      background: var(--_primary-25);
                     }
-                  }
-                  .em_opt_val_swatch {
-                    width: 25px;
-                    height: 25px;
-                    float: left;
-                    margin: 0px 4px 4px 0px;
-                    border-radius: 50%;
-                    background-size: 100% 100%;
-                    background-repeat: no-repeat;
-                  }
-                  .em_opt_val_single {
-                    min-width: 25px;
-                    max-width: max-content;
-                    padding: 4px;
-                    text-align: center;
-                    border-radius: 6px;
-                    margin: 0px 4px 4px 0px;
-                    float: left;
-                    border: 1px solid #d0d5dd;
-                    font-size: 16px;
-                    font-weight: 400;
-                    color: var(--_gray-600);
-                  }
-                  .em_opt_val_single.selected {
-                    background: #f2f4fc;
-                  }
 
-                  // .em_opt_val_swatch.selected  {
+                    // .em_opt_val_swatch.selected  {
 
-                  // }
+                    // }
+                  }
                 }
               }
             }
@@ -438,11 +546,13 @@
             .add_to_cart_btn_for_employee_bulk {
               height: 100%;
               width: 50%;
-              background: #243dc6;
+              background: var(--_primary-400);
               border-radius: 4px;
-              color: #fff;
-              font-weight: 600;
+              color: var(--_base-white);
               font-size: 16px;
+              &:hover {
+                background-color: var(--_primary-500);
+              }
             }
             // .qty-action {
             //   position: absolute;
@@ -487,6 +597,33 @@
       }
     }
   }
+
+  .employee_product_actions_sec {
+    width: 50%;
+    display: flex;
+    justify-content: right;
+    gap: 12px;
+    .employee_product_action {
+      padding: 12px 16px;
+      color: var(--_gray-600);
+      border-radius: 6px;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--_primary-25);
+      }
+    }
+
+    .employee_product_action_save {
+      color: var(--_primary-400);
+      padding: 12px 16px;
+      border-radius: 6px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--_primary-25);
+      }
+    }
+  }
 }
 
 .right_col {
@@ -496,6 +633,7 @@
   .employee_bulk_order_header {
     display: flex;
     justify-self: end;
+    align-items: center;
     gap: 24px;
     .single_payment_action {
       display: flex;
@@ -516,6 +654,7 @@
       align-items: center;
       gap: 4px;
       position: relative;
+      line-height: 20px;
       &:after {
         content: "";
         width: 1px;
@@ -557,33 +696,46 @@
       }
       .emp_options {
         position: absolute;
-        top: 65px;
-        width: 200px;
+        top: 44px;
+        width: 300px;
         background-color: var(--_base-white);
         border: 1px solid var(--_gray-200);
         border-radius: 4px;
+        z-index: 10;
         .emp_options_header {
-          padding: 12px 16px;
+          padding: 12px;
           font-size: 14px;
           font-weight: 600;
           color: var(--_gray-600);
           border-bottom: 1px solid var(--_gray-200);
         }
         .emp_options_list {
+          padding: 12px;
           .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);
+            gap: 8px;
+            .emp_options_list_item_label {
+              display: flex;
+              gap: 12px;
             }
+
+            // &:hover {
+            //   background-color: var(--_primary-25);
+            //   color: var(--_primary-400);
+            // }
+          }
+          p {
+            font-size: 12px;
+            color: var(--_gray-500);
+            padding-block: 4px 16px;
           }
         }
         .emp_options_footer {
           display: flex;
           border-top: 1px solid var(--_gray-200);
+
           & > div {
             flex-basis: 50%;
             display: flex;
@@ -591,6 +743,9 @@
             align-items: center;
             padding: 16px;
             cursor: pointer;
+            &:first-child {
+              border-right: 1px solid var(--_gray-200);
+            }
             &:hover {
               background-color: var(--_primary-25);
               svg path {
@@ -612,10 +767,13 @@
       }
     }
     .emp_discard_btn {
-      padding: 8px 16px;
+      padding-inline: 16px;
       border-radius: 6px;
       color: var(--_gray-700);
       cursor: pointer;
+      height: 32px;
+      display: flex;
+      align-items: center;
       &.disabled {
         pointer-events: none;
         opacity: 0.8;
@@ -631,8 +789,8 @@
       width: 40px;
     }
     .em_btn_act {
-      padding: 8px 14px;
-      height: 40px;
+      padding-inline: 16px;
+      height: 32px;
       border-radius: 4px;
     }
 
@@ -650,11 +808,12 @@
 
 .product-card {
   display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
   .image-section {
-    width: 48px;
-    height: 64px;
+    width: 32px;
+    height: 32px;
     img {
       width: 100%;
       height: 100%;
@@ -665,7 +824,6 @@
   .info-section {
     margin-left: 12px;
     display: flex;
-    gap: 4px;
     flex-direction: column;
     justify-content: center;
     width: calc(100% - 48px);
@@ -687,6 +845,11 @@
         display: flex;
         align-items: center;
         cursor: pointer;
+        &:hover {
+          svg path {
+            stroke: var(--_error-700);
+          }
+        }
       }
     }
     .em_p_code_s {
@@ -712,8 +875,14 @@
 .icon_with_label_section {
   display: flex;
   gap: 4px;
+  .svg_icon {
+    svg path {
+      stroke: var(--_primary-400);
+    }
+  }
   .label_elm {
     color: var(--_primary-400);
     font-size: 14px;
+    text-decoration: underline;
   }
 }