@sc-360-v2/storefront-cms-library 0.2.98 → 0.2.100

package/dist/modal.scss

@@ -1,3 +1,4 @@
+//modalv1
 // Variables
 $modal_background_color: white;
 $backdrop_color: rgba(0, 0, 0, 0.2);
@@ -144,3 +145,322 @@ $active_btn_text_color: #fff;
     }
   }
 }
+
+//modalv2 css
+// Colors
+$white: var(--_white);
+$black: var(--base-black);
+$gray-100: #f9fafb;
+$gray-300: #e5e7eb;
+$gray-400: #ccc;
+$gray-600: #737373;
+$gray-700: #6b7280;
+$gray-800: #444;
+$gray-900: #111827;
+
+$primary: var(--_primary-400);
+$primary-hover: var(--_primary-500);
+$text-dark: #222;
+$text-medium: #374151;
+$text-light: #666;
+
+// Typography
+$font-base: "Segoe UI", sans-serif;
+$font-size-base: 14px;
+$font-size-sm: 12px;
+$font-size-md: 15px;
+$font-size-lg: 18px;
+
+// Spacing & Sizes
+$radius: 6px;
+$radius-lg: 8px;
+$input-height: 32px;
+$input-padding: 10px 12px;
+
+// Z-Index
+$z-index-modal: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
+$z-index-backdrop: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 11);
+$z-index-wrapper: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
+$z-index-minimized: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 12);
+$z-index-min-cart: calc(
+  var(--_higher-zIndex) + var(--_cs-et-zIndex) + 13
+); // Higher z-index for min cart
+
+// Shadows
+$shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
+
+.modalV2-main {
+  .modalV2-wrapper {
+    position: fixed;
+    bottom: 5%;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    transition:
+      all 0.4s ease-in-out,
+      transform 0.4s ease-in-out;
+    background: $white;
+    border-radius: $radius-lg;
+    padding: 20px;
+    width: 850px;
+    font-family: $font-base;
+    box-shadow: $shadow-md;
+    z-index: $z-index-wrapper;
+    max-height: 70vh;
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+
+    &.fullscreen {
+      transition:
+        all 0.5s ease-in-out,
+        transform 0.5s ease-in-out;
+      top: 50%;
+      left: 50%;
+      width: 95vw;
+      height: 95vh;
+      border-radius: $radius-lg;
+      transform: translate(-50%, -50%);
+      padding: 24px 32px;
+      box-shadow: none;
+      z-index: $z-index-modal;
+      display: flex;
+      flex-direction: column;
+      max-height: 100vh;
+
+      .product-list {
+        flex: 1;
+        overflow-y: auto;
+        margin-top: 24px;
+      }
+
+      .footer-bar {
+        border-top: 1px solid $gray-300;
+        padding-top: 16px;
+        margin-top: 24px;
+      }
+    }
+
+    .top-bar {
+      position: sticky;
+      top: 0;
+      background: $white;
+      z-index: 1;
+      padding-bottom: 12px;
+      .title-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .left-col {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+        }
+
+        .title {
+          font-size: $font-size-lg;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .count {
+            font-weight: 700;
+            color: $gray-600;
+            background-color: #f2f4f7;
+            border-radius: 50%;
+            font-size: $font-size-sm;
+            width: 25px;
+            height: 25px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+
+        .actions span {
+          margin-left: 14px;
+          cursor: pointer;
+          font-size: 16px;
+          color: $text-light;
+          transition: color 0.2s;
+
+          &:hover {
+            color: $black;
+          }
+        }
+      }
+
+      .input-group {
+        display: flex;
+        gap: 12px;
+
+        .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 {
+          align-self: center;
+          font-weight: 600;
+          color: $gray-800;
+          font-size: $font-size-base;
+        }
+
+        .add-btn {
+          background-color: $primary;
+          color: $white;
+          padding: 10px 16px;
+          border-radius: $radius;
+          font-weight: 600;
+          font-size: $font-size-base;
+          cursor: pointer;
+          transition: background-color 0.2s;
+
+          &:hover {
+            background-color: $primary-hover;
+          }
+        }
+      }
+    }
+
+    .footer-bar {
+      position: sticky;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      padding-top: 16px;
+      border-top: 1px solid $gray-300;
+      margin-top: 24px;
+      font-size: $font-size-base;
+
+      .summary span {
+        margin-right: 18px;
+        font-weight: 500;
+        color: $text-medium;
+      }
+
+      .footer-actions {
+        display: flex;
+        gap: 10px;
+
+        .cancel-btn {
+          border-radius: $radius;
+          padding: 10px 14px;
+          font-weight: 500;
+          font-size: $font-size-base;
+          color: #333;
+          cursor: pointer;
+          transition: background 0.2s;
+
+          &:hover {
+            background: $gray-300;
+          }
+        }
+
+        .cart-btn {
+          background: $primary;
+          color: $white;
+          border-radius: $radius;
+          padding: 10px 20px;
+          font-weight: 600;
+          font-size: $font-size-base;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          cursor: pointer;
+          transition: background 0.2s;
+
+          &:hover {
+            background: $primary-hover;
+          }
+        }
+      }
+    }
+  }
+
+  .modalV2-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: $z-index-backdrop;
+  }
+
+  .modalV2-min {
+    position: fixed;
+    transition:
+      all 0.4s ease-in-out,
+      transform 0.4s ease-in-out;
+    right: 20px;
+    bottom: 20px;
+    padding: 0; /* Remove padding from the main min container */
+    border-radius: $radius;
+    box-shadow: $shadow-md;
+    z-index: $z-index-minimized;
+    display: none;
+    flex-direction: row; /* Align items in a row */
+    align-items: center;
+    gap: 10px; /* Adjust gap between elements */
+    font-size: $font-size-base;
+    background-color: transparent; /* Make the main container transparent */
+
+    .min-toolbar {
+      background-color: $white;
+      display: flex;
+      align-items: center; /* Align items vertically in the toolbar */
+      padding: 12px 16px; /* Add padding to the toolbar */
+      border-radius: $radius 0 0 $radius; /* Rounded left corners */
+      gap: 16px;
+    }
+
+    &.active {
+      display: flex;
+    }
+
+    .cart-btn {
+      background: $primary;
+      color: $white;
+      border: none; /* Remove border */
+      border-radius: 0 $radius $radius 0; /* Rounded right corners */
+      padding: 12px 16px;
+      font-weight: 600;
+      font-size: $font-size-sm;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      transition: background 0.2s;
+      z-index: $z-index-min-cart;
+
+      &:hover {
+        background: $primary-hover;
+      }
+    }
+
+    .actions {
+      display: flex;
+      gap: 8px;
+
+      span {
+        cursor: pointer;
+        font-size: 16px;
+        color: $text-light;
+        transition: color 0.2s;
+
+        &:hover {
+          color: $black;
+        }
+      }
+    }
+  }
+}