@sc-360-v2/storefront-cms-library 0.3.28 → 0.3.30

package/dist/bulk-order-pad.scss

@@ -1,5 +1,6 @@
 .bulk-order-overlay {
   height: 100%;
+  width: 100%;
 }
 .bulk-order-container {
   background: #fff;
@@ -10,8 +11,38 @@
   font-family: "Segoe UI", sans-serif;
   overflow: auto;
   .select-product-dropdown {
-    padding: 16px 24px;
-    border-bottom: 1px solid #e0e0e0;
+    padding: 12px;
+    border-bottom: 1px solid var(--_gray-200);
+
+    .dropdown-with-input-section {
+      border: 0.5px solid var(--_gray-300);
+      border-radius: 4px;
+    }
+  }
+
+  .bulk_order_pad_empty_msg_container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 auto;
+
+    .bulk_order_pad_empty_msg {
+      font-family: "Lato";
+      font-weight: 700;
+      font-size: 24px;
+      color: var(--_gray-900);
+      line-height: 32px;
+    }
+
+    .bulk_order_pad_support_msg {
+      font-family: "Lato";
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--_gray-900);
+    }
   }
 
   .bulkOrderPad-grid {
@@ -206,71 +237,270 @@
     justify-content: space-between;
     background: #f9fafb;
     padding: 12px;
+    border-bottom: 1px solid var(--_gray-200);
+
+    @media (max-width: 1024px) {
+      gap: 24px;
+      white-space: nowrap;
+      overflow-x: auto;
+    }
     .product-details {
       display: flex;
-      gap: 10px;
+      gap: 12px;
       .product-image {
         img {
           width: 64px;
+          height: 96px;
         }
       }
 
       .details {
-        display: grid;
-        .p-before-price {
-          text-decoration: line-through;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        font-family: "Lato";
+        word-break: break-all;
+
+        .p-name {
+          display: flex;
+          align-items: center;
+          font-weight: 700;
+          font-size: 18px;
+          line-height: 28px;
+          color: var(--_gray-900);
+        }
+
+        .p-title {
+          display: flex;
+          align-items: center;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 20px;
+          color: var(--_gray-600);
+        }
+
+        .p-price {
+          display: flex;
+          align-items: flex-end;
+          gap: 12px;
+
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 150%;
+          color: #4c4759;
+
+          .p-current-price {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-weight: 700;
+            font-size: 20px;
+            line-height: 150%;
+            color: #1f1930;
+          }
+
+          .p-before-price {
+            text-decoration: line-through;
+          }
         }
       }
     }
     .product-entity-info,
     .actions {
       display: flex;
-      gap: 8px;
+      gap: 12px;
       align-items: center;
+      flex-wrap: nowrap;
+      font-family: "Lato";
+
+      @media (max-width: 1024px) {
+        justify-content: center;
+      }
+
+      .info {
+        display: flex;
+        gap: 4px;
+        align-items: center;
+
+        .info-label {
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 20px;
+          color: var(--_gray-500);
+        }
+
+        .info-val {
+          font-weight: 600;
+          font-size: 18px;
+          line-height: 28px;
+          color: var(--_gray-900);
+        }
+
+        &::after:not(:last-of-type) {
+          content: ".";
+          font-size: 4px;
+          color: var(--_gray-500);
+        }
+      }
+
+      .discard {
+        padding: 10px 18px;
+        border-radius: 4px;
+        color: var(--_gray-600);
+        font-weight: 600;
+        font-size: 16px;
+        border: 1px solid transparent;
+        line-height: 24px;
+
+        &:hover {
+          border: 1px solid var(--_gray-600);
+        }
+      }
+
+      .add-tocart {
+        padding: 10px 18px;
+        border-radius: 4px;
+        border: 1px solid var(--_primary-500);
+        color: #fff;
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background: var(--_primary-500);
+
+        svg {
+          width: 20px;
+          height: 20px;
+          display: flex;
+          stroke-width: 2px;
+        }
+
+        &:hover {
+          background: var(--_primary-400);
+        }
+      }
     }
   }
   .bulkOrderPad-content {
-    padding: 16px;
-    .dropdown-options {
-      display: inline-block;
-      width: 100%;
-      border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+
+    .bulk-order-pad-filter-wrapper {
+      background-color: var(--_gray-50);
+      border-bottom: 1px solid var(--_gray-200);
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      display: flex;
+      justify-content: center;
+      padding: 12px;
+
+      @media (max-width: 500px) {
+        gap: 8px;
+        justify-content: flex-start;
+        overflow-x: auto;
+      }
+
       .dropdown-with-input-section {
-        float: left;
-        margin-right: 14px;
-        margin-bottom: 14px;
+        gap: 6px;
+
+        label {
+          font-size: 14px;
+          line-height: 20px;
+          color: var(--_gray-700);
+          font-family: "Lato";
+        }
+
+        .dropdown-input-section {
+          border: 1px solid var(--_gray-300);
+          border-radius: 4px;
+          max-width: 320px;
+          background: #fff;
+        }
+      }
+
+      .dropdown-options {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+
+        .dropdown-with-input-section {
+          gap: 6px;
+
+          label {
+            font-size: 14px;
+            line-height: 20px;
+            color: var(--_gray-700);
+            font-family: "Lato";
+          }
+
+          .dropdown-input-section {
+            border: 1px solid var(--_gray-300);
+            border-radius: 4px;
+            max-width: 320px;
+            background: #fff;
+          }
+        }
+      }
+
+      span {
+        margin-bottom: -30px;
       }
     }
-    .secont-option-title {
+
+    .bulkOrderPad-content-container {
       display: flex;
-      justify-content: center;
-      overflow: visible;
-      font-weight: bold;
-      font-size: 1.2rem;
-      margin-right: 10px;
-      .title {
-        background: #ffffff;
-        width: max-content;
+      align-items: flex-start;
+      height: auto;
+
+      .first-option-title {
+        writing-mode: vertical-rl;
+        transform: rotate(180deg);
+        font-weight: 500;
+        font-size: 14px;
+        display: flex;
+        justify-content: center;
+        color: var(--_gray-700);
+        align-self: stretch;
+        width: 36px;
+        align-items: center;
+        margin-top: 32px;
+
+        .vertical_vector {
+          height: 100%;
+          width: 1px;
+          margin: 4px 0px;
+          background-color: #f0f0f0;
+        }
       }
     }
+
     .bulkOrderPad-section {
       display: flex;
-      max-height: calc(100vh - 154px);
       overflow: auto;
-      .first-option-title {
-        writing-mode: vertical-rl;
-        transform: rotate(180deg);
-        font-weight: bold;
-        font-size: 1.2rem;
-        margin-right: 10px;
+      flex-direction: column;
+      width: 100%;
+      max-height: none !important;
+
+      .secont-option-title {
+        height: auto;
+        width: 100%;
+        padding: 12px 0px;
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--_gray-700);
         display: flex;
         justify-content: center;
-        overflow: visible;
-        position: sticky;
-        top: 0;
-        .title {
-          background: #ffffff;
-          height: max-content;
+        font-weight: 500;
+        align-items: center;
+
+        .horizontal_vector {
+          margin: 0px 4px;
+          width: 100%;
+          height: 1px;
+          background: #f0f0f0;
         }
       }
 
@@ -278,19 +508,50 @@
         border-collapse: collapse;
         width: 100%;
 
+        tr {
+          &:last-of-type {
+            td {
+              border-bottom: 1px solid #f0f0f0;
+            }
+
+            .option-cell {
+              border-bottom: none;
+            }
+
+            .action-td {
+              border-bottom: none;
+            }
+          }
+
+          &:hover {
+            .action-td {
+              .reset-icon {
+                display: block !important;
+              }
+            }
+          }
+        }
+
         th,
         td {
           text-align: center;
           white-space: nowrap;
           // width: 150px;
           border: none;
+          padding: 0px 16px;
         }
 
         td.action-td {
-          width: 40px;
-          padding: 12px;
+          width: 72px;
+          height: 88px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0px !important;
+          border-left: 1px solid #f0f0f0;
           .reset-icon {
             cursor: pointer;
+            display: none;
           }
         }
         td.option-cell:first-child {
@@ -306,6 +567,13 @@
           position: sticky;
           top: 0;
           background: #fff;
+
+          th {
+            font-weight: 600;
+            color: var(--_gray-900);
+            line-height: 24px;
+            padding: 16px;
+          }
           th {
             border-bottom: 1px solid #f0f0f0;
             &:first-child,
@@ -317,39 +585,42 @@
 
         .option-cell {
           border-right: 1px solid #f0f0f0;
+          padding: 0px 16px;
+
           .option-cell-section {
-            height: 40px;
+            height: 88px;
             display: flex;
-            gap: 8px;
+            gap: 12px;
             align-items: center;
-            padding: 8px;
             width: 100%;
             justify-content: flex-end;
+            font-size: 16px;
+            line-height: 24px;
+            color: var(--_gray-900);
+
             .option-swatch {
-              width: 16px;
-              height: 16px;
+              width: 32px;
+              height: 32px;
               border-radius: 50%;
-              border: 1px solid #f0f0f0;
+              border: 1px solid #f5f5f5;
             }
           }
         }
 
         .availability {
-          font-size: 0.85rem;
-          color: #333;
-          min-height: 40px;
-          padding: 10px;
+          color: var(--_gray-600);
+          min-height: 56px;
           display: flex;
-          font-size: 14px;
+          font-size: 16px;
           align-items: center;
           justify-content: center;
 
           input {
             // background: #f9fafb !important;
             border: 1px solid #ddd !important;
-            width: 120px !important;
-            height: 40px;
-            border-radius: 6px;
+            width: 128px !important;
+            height: 56px;
+            border-radius: 4px;
             padding: 8px !important;
             border: none;
             outline: none;
@@ -360,6 +631,10 @@
               // cursor: pointer;
             }
           }
+
+          .disabled {
+            cursor: not-allowed;
+          }
         }
       }
     }