@sc-360-v2/storefront-cms-library 0.4.55 → 0.4.57

package/dist/quick-order-pad.scss

@@ -1,237 +1,237 @@
-// Colors
-$gray-400: #ccc;
-$gray-800: #444;
-
-$primary: var(--_primary-400);
-$primary-hover: var(--_primary-500);
-$white: var(--_white);
-$text-color: #667085;
-
-// Typography
-$font-size-base: 14px;
-
-// Spacing & Sizes
-$radius: 6px;
-$input-padding: 10px 12px;
-
-// .quick-order-main Styles
-.quick-order-main {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  width: 100%;
-  height: 100%;
-
-  .input-group {
-    // display: flex;
-    display: grid;
-    grid-template-columns: 44vw 44vw 100px;
-    gap: 12px;
-    height: fit-content;
-    align-items: center;
-    padding: 12px;
-    border-bottom: 0.5px solid var(--Gray-200, #eaecf0);
-    flex-shrink: 0;
-    margin: 0 auto;
-
-    // .quick-order-product-dropdown-section {
-    //   width: 320px;
-    //   height: 40px;
-    //   // border: 0.5px solid #d0d5dd;
-    //   border-radius: 4px;
-    //   .dropdown-input-section {
-    //     border-radius: 4px;
-    //     border: 0.5px solid var(--Gray-300, #d0d5dd);
-    //     display: flex;
-    //     width: 320px;
-    //     padding: 8px 12px;
-    //     justify-content: space-between;
-    //     align-items: center;
-    //     input {
-    //       color: $text-color;
-    //       font-size: 16px;
-    //       font-weight: 400;
-    //       line-height: 24px; /* 150% */
-    //     }
-    //   }
-    //   .dropdown-input-section {
-    //     padding: 0px 12px;
-
-    //     .dropdown-menu {
-    //       top: 40px;
-
-    //       .dropdown_menu_ul {
-
-    //         .dropdown-opt {
-    //           height: auto;
-    //           .dropdown-item {
-    //             max-height: none;
-
-    //             .item-image {
-    //               width: 42px;
-    //               height: 42px;
-    //             }
-
-    //             .item-name {
-    //               font-size: 16px;
-    //               line-height: 24px;
-    //               color: #344054;
-    //             }
-    //           }
-    //         }
-    //       }
-    //     }
-    //   }
-    // }
-
-    .qty-input {
-      padding: $input-padding;
-      border: 1px solid $gray-400;
-      border-radius: $radius;
-      font-size: $font-size-base;
-      transition: border 0.2s;
-      width: 120px;
-
-      &:focus {
-        border-color: $primary;
-        outline: none;
-      }
-    }
-
-    .or-text {
-      color: var(--Gray-600, #475467);
-      font-family: Lato;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px;
-    }
-    .msd {
-      width: 100%;
-    }
-
-    .input-group-right-col {
-      display: flex;
-      gap: 16px;
-      width: 100%;
-    }
-    .add-btn {
-      // background-color: $primary;
-      // color: $white;
-      padding: 10px 16px;
-      height: 40px;
-      gap: 6px;
-      // border-radius: 4px;
-      // font-weight: 600;
-      // font-size: 14px;
-      // cursor: pointer;
-      // transition: background-color 0.2s;
-      // display: flex;
-      // gap: 4px;
-      // line-height: 20px;
-      // justify-content: center;
-      svg path {
-        stroke: var(--_base-white);
-      }
-      &.disabled {
-        opacity: 0.4;
-        pointer-events: none;
-      }
-      .spinner {
-        // margin-top: -3px;
-        display: inline-block;
-      }
-
-      // .add-icon {
-      //   width: 20px;
-      //   height: 20px;
-      //   display: flex;
-      //   align-items: center;
-      //   justify-content: center;
-
-      //   svg {
-      //     width: 16px;
-      //     height: 16px;
-      //     path {
-      //       stroke: #fff;
-      //     }
-      //   }
-      // }
-      // &:hover {
-      //   background-color: $primary-hover;
-      // }
-    }
-  }
-  .cart_products_wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding-inline: 24px;
-    .cart_item_wrapper {
-      padding-bottom: 24px;
-      &:not(:last-child) {
-        border-bottom: 0.5px solid var(--_gray-300);
-      }
-      &:not(:first-child) {
-        margin-top: 12px !important;
-      }
-      .product_price {
-        margin-top: 10px;
-      }
-      .product_info_container {
-        .product_title {
-          font-weight: 600;
-        }
-        .product_code,
-        .product_options {
-          color: var(--_thm-cs-at-sy);
-        }
-      }
-
-      .currency_span {
-        font-weight: 600;
-      }
-    }
-    .product_qty_price_wrapper {
-      // gap: 12px !important;
-      gap: 16px;
-      .product_qty_wrapper {
-        width: 120px;
-      }
-      .dropdown-input-section {
-        height: 42px;
-        .product_title {
-          color: var(--_gray-900);
-          font-weight: 600;
-        }
-        .text_ellipsis {
-          color: var(--_gray-600);
-        }
-      }
-    }
-
-    .emptyData {
-      color: $text-color;
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 24px;
-    }
-    .remove-btn {
-      color: var(--_error-500);
-      padding: 8px 16px;
-      border-radius: 4px;
-      &:hover {
-        background: var(--_error-50);
-      }
-    }
-  }
-}
-
-@keyframes rotate360 {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+// Colors
+$gray-400: #ccc;
+$gray-800: #444;
+
+$primary: var(--_primary-400);
+$primary-hover: var(--_primary-500);
+$white: var(--_white);
+$text-color: #667085;
+
+// Typography
+$font-size-base: 14px;
+
+// Spacing & Sizes
+$radius: 6px;
+$input-padding: 10px 12px;
+
+// .quick-order-main Styles
+.quick-order-main {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  height: 100%;
+
+  .input-group {
+    // display: flex;
+    display: grid;
+    grid-template-columns: 44vw 44vw 100px;
+    gap: 12px;
+    height: fit-content;
+    align-items: center;
+    padding: 12px;
+    border-bottom: 0.5px solid var(--Gray-200, #eaecf0);
+    flex-shrink: 0;
+    margin: 0 auto;
+
+    // .quick-order-product-dropdown-section {
+    //   width: 320px;
+    //   height: 40px;
+    //   // border: 0.5px solid #d0d5dd;
+    //   border-radius: 4px;
+    //   .dropdown-input-section {
+    //     border-radius: 4px;
+    //     border: 0.5px solid var(--Gray-300, #d0d5dd);
+    //     display: flex;
+    //     width: 320px;
+    //     padding: 8px 12px;
+    //     justify-content: space-between;
+    //     align-items: center;
+    //     input {
+    //       color: $text-color;
+    //       font-size: 16px;
+    //       font-weight: 400;
+    //       line-height: 24px; /* 150% */
+    //     }
+    //   }
+    //   .dropdown-input-section {
+    //     padding: 0px 12px;
+
+    //     .dropdown-menu {
+    //       top: 40px;
+
+    //       .dropdown_menu_ul {
+
+    //         .dropdown-opt {
+    //           height: auto;
+    //           .dropdown-item {
+    //             max-height: none;
+
+    //             .item-image {
+    //               width: 42px;
+    //               height: 42px;
+    //             }
+
+    //             .item-name {
+    //               font-size: 16px;
+    //               line-height: 24px;
+    //               color: #344054;
+    //             }
+    //           }
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
+
+    .qty-input {
+      padding: $input-padding;
+      border: 1px solid $gray-400;
+      border-radius: $radius;
+      font-size: $font-size-base;
+      transition: border 0.2s;
+      width: 120px;
+
+      &:focus {
+        border-color: $primary;
+        outline: none;
+      }
+    }
+
+    .or-text {
+      color: var(--Gray-600, #475467);
+      font-family: Lato;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+    }
+    .msd {
+      width: 100%;
+    }
+
+    .input-group-right-col {
+      display: flex;
+      gap: 16px;
+      width: 100%;
+    }
+    .add-btn {
+      // background-color: $primary;
+      // color: $white;
+      padding: 10px 16px;
+      height: 40px;
+      gap: 6px;
+      // border-radius: 4px;
+      // font-weight: 600;
+      // font-size: 14px;
+      // cursor: pointer;
+      // transition: background-color 0.2s;
+      // display: flex;
+      // gap: 4px;
+      // line-height: 20px;
+      // justify-content: center;
+      svg path {
+        stroke: var(--_base-white);
+      }
+      &.disabled {
+        opacity: 0.4;
+        pointer-events: none;
+      }
+      .spinner {
+        // margin-top: -3px;
+        display: inline-block;
+      }
+
+      // .add-icon {
+      //   width: 20px;
+      //   height: 20px;
+      //   display: flex;
+      //   align-items: center;
+      //   justify-content: center;
+
+      //   svg {
+      //     width: 16px;
+      //     height: 16px;
+      //     path {
+      //       stroke: #fff;
+      //     }
+      //   }
+      // }
+      // &:hover {
+      //   background-color: $primary-hover;
+      // }
+    }
+  }
+  .cart_products_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-inline: 24px;
+    .cart_item_wrapper {
+      padding-bottom: 24px;
+      &:not(:last-child) {
+        border-bottom: 0.5px solid var(--_gray-300);
+      }
+      &:not(:first-child) {
+        margin-top: 12px !important;
+      }
+      .product_price {
+        margin-top: 10px;
+      }
+      .product_info_container {
+        .product_title {
+          font-weight: 600;
+        }
+        .product_code,
+        .product_options {
+          color: var(--_thm-cs-at-sy);
+        }
+      }
+
+      .currency_span {
+        font-weight: 600;
+      }
+    }
+    .product_qty_price_wrapper {
+      // gap: 12px !important;
+      gap: 16px;
+      .product_qty_wrapper {
+        width: 120px;
+      }
+      .dropdown-input-section {
+        height: 42px;
+        .product_title {
+          color: var(--_gray-900);
+          font-weight: 600;
+        }
+        .text_ellipsis {
+          color: var(--_gray-600);
+        }
+      }
+    }
+
+    .emptyData {
+      color: $text-color;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+    }
+    .remove-btn {
+      color: var(--_error-500);
+      padding: 8px 16px;
+      border-radius: 4px;
+      &:hover {
+        background: var(--_error-50);
+      }
+    }
+  }
+}
+
+@keyframes rotate360 {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}