@sc-360-v2/storefront-cms-library 0.4.49 → 0.4.51

package/dist/cartDropdownOverlay.scss

@@ -21,9 +21,6 @@ $button-padding: 6px 12px;
     margin-left: auto;
   }
 
-  .overlay-panel {
-    margin-top: 10px;
-  }
   .trigger {
     // background: none;
     // border: none;
@@ -73,277 +70,556 @@ $button-padding: 6px 12px;
     );
   }
 
-  .overlay-panel {
-    position: fixed;
-    // right: 0px;
-    // top: 100%;
-    // left: -160px;
-    background: $background-color;
-    box-shadow: $shadow;
-    border-radius: $border-radius;
-    // padding: $spacing-sm;
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    width: 260px;
-    &.show__panel {
-      animation: slideUp 0.4s ease-in-out;
-    }
+  // .overlay-panel {
+  //   position: fixed;
+  //   // right: 0px;
+  //   // top: 100%;
+  //   // left: -160px;
+  //   background: $background-color;
+  //   box-shadow: $shadow;
+  //   border-radius: $border-radius;
+  //   // padding: $spacing-sm;
+  //   z-index: 1000;
+  //   display: flex;
+  //   flex-direction: column;
+  //   width: 260px;
+
+  //   // width: 220px;
+  //   .header-template {
+  //     display: flex;
+  //     align-items: center;
+  //     justify-content: space-between;
+  //     padding: 14px;
+  //     border-bottom: 1px solid #eee;
+
+  //     span {
+  //       font-size: $header-text-font-size;
+  //       font-weight: 600;
+  //       color: $text-color;
+  //     }
+
+  //     button {
+  //       color: $primary-color;
+  //       font-size: $header-btn-font-size;
+  //       background: none;
+  //       border: 1px solid transparent;
+  //       cursor: pointer;
+  //       transition: color 0.2s ease-in-out;
+
+  //       &:hover {
+  //         // color: darken($primary-color, 5%);
+  //         color: color-mix(in srgb, #{$primary-color} 95%, var(--_base-black));
+  //       }
+
+  //       &:focus {
+  //         outline: none;
+  //       }
+  //     }
+  //   }
+
+  //   .options-container,
+  //   .menu-container {
+  //     min-height: 200px;
+  //     max-height: 200px;
+  //     padding: 4px;
+  //     overflow-y: auto;
+  //     display: flex;
+  //     flex-direction: column;
+  //     gap: 2px;
+  //     .empty_message {
+  //       height: 200px;
+  //       display: flex;
+  //       justify-content: center;
+  //       align-items: center;
+  //       // padding: 24px;
+  //       font-size: 16px;
+  //       font-weight: 500;
+  //       text-align: center;
+  //       .dots {
+  //         display: inline-flex;
+  //         width: 20px; /* fixed space so text doesn’t shift */
+  //         justify-content: space-between;
+  //         align-items: flex-end;
+  //         margin-left: 6px;
+  //         margin-bottom: -9px;
+  //       }
+
+  //       .dots span {
+  //         animation: blink 1.5s infinite;
+  //         opacity: 0;
+  //         width: 2px;
+  //         height: 2px;
+  //         border-radius: 50%;
+  //         background-color: var(--_gray-700);
+  //       }
+
+  //       .dots span:nth-child(1) {
+  //         animation-delay: 0s;
+  //       }
+  //       .dots span:nth-child(2) {
+  //         animation-delay: 0.3s;
+  //       }
+  //       .dots span:nth-child(3) {
+  //         animation-delay: 0.6s;
+  //       }
+
+  //       @keyframes blink {
+  //         0% {
+  //           opacity: 0;
+  //         }
+  //         50% {
+  //           opacity: 1;
+  //         }
+  //         100% {
+  //           opacity: 0;
+  //         }
+  //       }
+  //     }
+
+  //     .option {
+  //       display: flex;
+  //       align-items: start;
+  //       gap: 6px;
+  //       padding: 12px;
+  //       cursor: pointer;
+  //       font-size: $font-size;
+  //       // min-height: 48px;
+  //       border-radius: 4px;
+
+  //       // .checkbox_container {
+  //       //   top: 4px;
+  //       // }
+
+  //       &.disabled {
+  //         .label-content {
+  //           width: 100%;
+  //           align-items: center;
+  //           cursor: auto;
+  //         }
+  //       }
+
+  //       .label-content {
+  //         display: flex;
+  //         flex-direction: column;
+  //         font-weight: 400;
+  //         // margin-top: -3px;
+  //         &.selected {
+  //           color: var(--_thm-cs-tt-ls-as);
+  //         }
+
+  //         .option-description {
+  //           & > div {
+  //             max-width: 204px;
+  //             white-space: nowrap;
+  //             overflow: hidden;
+  //             text-overflow: ellipsis;
+  //             display: flex;
+  //             gap: 4px;
+  //             flex-wrap: wrap;
+  //             margin-top: 4px;
+  //           }
+  //         }
+  //       }
+
+  //       &:hover {
+  //         background-color: var(--_gray-100);
+  //       }
+
+  //       input {
+  //         margin-right: 8px;
+  //         width: auto;
+  //         cursor: pointer;
+  //         accent-color: var(--_primary-400);
+  //         margin-top: 5px;
+  //       }
+
+  //       input[type="radio"] {
+  //         margin-right: 8px;
+  //         accent-color: $primary-color; // 🔴 Red color when selected
+  //       }
+
+  //       &:has(input[type="radio"]:checked) {
+  //         background-color: var(--_gray-200);
+  //       }
+  //     }
+
+  //     .menu_dropdown_option {
+  //       a {
+  //         display: block;
+  //         text-decoration: none;
+  //         width: 100%;
+  //         &:hover {
+  //           color: var(--_primary-400);
+  //         }
+  //       }
+  //       button {
+  //         display: block;
+  //         padding: 12px;
+  //         text-align: left;
+  //         width: 100%;
+  //         &:hover {
+  //           background-color: var(--_gray-100);
+  //           color: var(--_primary-400);
+  //         }
+  //       }
+  //     }
+  //   }
+  //   .menu-container {
+  //     min-height: fit-content;
+  //   }
+
+  //   .footer {
+  //     display: flex;
+  //     justify-content: space-between;
+  //     padding: 0px $spacing-md;
+  //     gap: $spacing-md;
+  //     border-top: 1px solid var(--_gray-200);
+
+  //     .dropdown_overlay_secondary_button {
+  //       background: transparent;
+  //       border: 1px solid transparent;
+  //       color: var(--_gray-600);
+  //       cursor: pointer;
+  //       display: flex;
+  //       align-items: center;
+  //       justify-content: center;
+  //       flex: 1 0 0;
+  //       margin: $spacing-md 0px;
+  //       border-radius: 4px;
+
+  //       &:hover {
+  //         color: var(--_gray-900);
+  //         background-color: var(--_gray-100);
+  //       }
+  //     }
+
+  //     .dropdown_overlay_primary_button {
+  //       background-color: $primary-color;
+  //       color: $background-color;
+  //       border: none;
+  //       padding: $button-padding;
+  //       border-radius: 4px;
+  //       cursor: pointer;
+  //       font-weight: 500;
+  //       display: flex;
+  //       align-items: center;
+  //       justify-content: center;
+  //       flex: 1 0 0;
+  //       margin: $spacing-md 0px;
+  //       &.disabled {
+  //         opacity: 0.5;
+  //         pointer-events: none !important;
+  //       }
+
+  //       &:hover {
+  //         // background-color: lighten($primary-color, $amount: 5%);
+  //         background-color: color-mix(in srgb, #{$primary-color} 95%, var(--_base-white));
+  //       }
+  //     }
+
+  //     button {
+  //       width: 116px;
+  //       height: 36px;
+  //     }
+  //   }
+  // }
+
+  .position-bottom {
+    top: 80%;
+    margin-top: 8px;
+    left: 0;
+    width: max-content;
+  }
+
+  .position-top {
+    top: -192px;
+    /* shows above the button */
+    margin-bottom: 8px;
+  }
 
-    &.hide__panel {
-      animation: slideDown 0.4s ease-in-out;
-      pointer-events: none;
+  @keyframes slideUp {
+    from {
+      transform: translateY(10px);
+      opacity: 1;
+      visibility: visible;
     }
-    // width: 220px;
-    .header-template {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 14px;
-      border-bottom: 1px solid #eee;
-
-      span {
-        font-size: $header-text-font-size;
-        font-weight: 600;
-        color: $text-color;
-      }
+    to {
+      transform: translateY(0px);
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+  @keyframes slideDown {
+    from {
+      transform: translateY(10px);
+      opacity: 1;
+      visibility: visible;
+    }
+    to {
+      transform: translateY(0px);
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+}
 
-      button {
-        color: $primary-color;
-        font-size: $header-btn-font-size;
-        background: none;
-        border: 1px solid transparent;
-        cursor: pointer;
-        transition: color 0.2s ease-in-out;
+.overlay-panel.v2 {
+  position: fixed;
+  // right: 0px;
+  // top: 100%;
+  // left: -160px;
+  background: $background-color;
+  box-shadow: $shadow;
+  border-radius: $border-radius;
+  // padding: $spacing-sm;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  width: 260px;
+
+  // width: 220px;
+  .header-template {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px;
+    border-bottom: 1px solid #eee;
+
+    span {
+      font-size: $header-text-font-size;
+      font-weight: 600;
+      color: $text-color;
+    }
 
-        &:hover {
-          // color: darken($primary-color, 5%);
-          color: color-mix(in srgb, #{$primary-color} 95%, var(--_base-black));
-        }
+    button {
+      color: $primary-color;
+      font-size: $header-btn-font-size;
+      background: none;
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: color 0.2s ease-in-out;
+
+      &:hover {
+        // color: darken($primary-color, 5%);
+        color: color-mix(in srgb, #{$primary-color} 95%, var(--_base-black));
+      }
 
-        &:focus {
-          outline: none;
-        }
+      &:focus {
+        outline: none;
       }
     }
+  }
 
-    .options-container,
-    .menu-container {
-      min-height: 200px;
-      max-height: 200px;
-      padding: 4px;
-      overflow-y: auto;
+  .options-container,
+  .menu-container {
+    padding: 4px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    .empty_message {
+      height: 160px;
       display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .loading_data {
+      height: 160px;
+      display: flex;
+      justify-content: center;
       flex-direction: column;
-      gap: 2px;
-      .empty_message {
-        height: 200px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        // padding: 24px;
-        font-size: 16px;
-        font-weight: 500;
-        text-align: center;
-        .dots {
-          display: inline-flex;
-          width: 20px; /* fixed space so text doesn’t shift */
-          justify-content: space-between;
-          align-items: flex-end;
-          margin-left: 6px;
-          margin-bottom: -9px;
-        }
-
-        .dots span {
-          animation: blink 1.5s infinite;
-          opacity: 0;
-          width: 2px;
-          height: 2px;
-          border-radius: 50%;
-          background-color: var(--_gray-700);
-        }
-
-        .dots span:nth-child(1) {
-          animation-delay: 0s;
-        }
-        .dots span:nth-child(2) {
-          animation-delay: 0.3s;
-        }
-        .dots span:nth-child(3) {
-          animation-delay: 0.6s;
-        }
+      gap: 4px;
+      // align-items: center;
+      // padding: 24px;
+      // font-size: 16px;
+      // font-weight: 500;
+      // text-align: center;
+      // .dots {
+      //   display: inline-flex;
+      //   width: 20px; /* fixed space so text doesn’t shift */
+      //   justify-content: space-between;
+      //   align-items: flex-end;
+      //   margin-left: 6px;
+      //   margin-bottom: -9px;
+      // }
+
+      // .dots span {
+      //   animation: blink 1.5s infinite;
+      //   opacity: 0;
+      //   width: 2px;
+      //   height: 2px;
+      //   border-radius: 50%;
+      //   background-color: var(--_gray-700);
+      // }
+
+      // .dots span:nth-child(1) {
+      //   animation-delay: 0s;
+      // }
+      // .dots span:nth-child(2) {
+      //   animation-delay: 0.3s;
+      // }
+      // .dots span:nth-child(3) {
+      //   animation-delay: 0.6s;
+      // }
+
+      // @keyframes blink {
+      //   0% {
+      //     opacity: 0;
+      //   }
+      //   50% {
+      //     opacity: 1;
+      //   }
+      //   100% {
+      //     opacity: 0;
+      //   }
+      // }
+    }
 
-        @keyframes blink {
-          0% {
-            opacity: 0;
-          }
-          50% {
-            opacity: 1;
-          }
-          100% {
-            opacity: 0;
-          }
+    .option {
+      display: flex;
+      align-items: start;
+      gap: 6px;
+      padding: 12px;
+      cursor: pointer;
+      font-size: $font-size;
+      // min-height: 48px;
+      border-radius: 4px;
+
+      // .checkbox_container {
+      //   top: 4px;
+      // }
+
+      &.disabled {
+        .label-content {
+          width: 100%;
+          align-items: center;
+          cursor: auto;
         }
       }
 
-      .option {
+      .label-content {
         display: flex;
-        align-items: start;
-        gap: 6px;
-        padding: 12px;
-        cursor: pointer;
-        font-size: $font-size;
-        // min-height: 48px;
-        border-radius: 4px;
-
-        // .checkbox_container {
-        //   top: 4px;
-        // }
-
-        &.disabled {
-          .label-content {
-            width: 100%;
-            align-items: center;
-            cursor: auto;
-          }
+        flex-direction: column;
+        font-weight: 400;
+        // margin-top: -3px;
+        &.selected {
+          color: var(--_thm-cs-tt-ls-as);
         }
 
-        .label-content {
-          display: flex;
-          flex-direction: column;
-          font-weight: 400;
-          // margin-top: -3px;
-          &.selected {
-            color: var(--_thm-cs-tt-ls-as);
-          }
-
-          .option-description {
-            & > div {
-              max-width: 204px;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              display: flex;
-              gap: 4px;
-              flex-wrap: wrap;
-              margin-top: 4px;
-            }
+        .option-description {
+          & > div {
+            max-width: 204px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: flex;
+            gap: 4px;
+            flex-wrap: wrap;
+            margin-top: 4px;
           }
         }
+      }
 
-        &:hover {
-          background-color: var(--_gray-100);
-        }
-
-        input {
-          margin-right: 8px;
-          width: auto;
-          cursor: pointer;
-          accent-color: var(--_primary-400);
-          margin-top: 5px;
-        }
+      &:hover {
+        background-color: var(--_gray-100);
+      }
 
-        input[type="radio"] {
-          margin-right: 8px;
-          accent-color: $primary-color; // 🔴 Red color when selected
-        }
+      input {
+        margin-right: 8px;
+        width: auto;
+        cursor: pointer;
+        accent-color: var(--_primary-400);
+        margin-top: 5px;
+      }
 
-        &:has(input[type="radio"]:checked) {
-          background-color: var(--_gray-200);
-        }
+      input[type="radio"] {
+        margin-right: 8px;
+        accent-color: $primary-color; // 🔴 Red color when selected
       }
 
-      .menu_dropdown_option {
-        a {
-          display: block;
-          text-decoration: none;
-          width: 100%;
-          &:hover {
-            color: var(--_primary-400);
-          }
-        }
-        button {
-          display: block;
-          padding: 12px;
-          text-align: left;
-          width: 100%;
-          &:hover {
-            background-color: var(--_gray-100);
-            color: var(--_primary-400);
-          }
-        }
+      &:has(input[type="radio"]:checked) {
+        background-color: var(--_gray-200);
       }
     }
-    .menu-container {
-      min-height: fit-content;
-    }
-
-    .footer {
-      display: flex;
-      justify-content: space-between;
-      padding: 0px $spacing-md;
-      gap: $spacing-md;
-      border-top: 1px solid var(--_gray-200);
-
-      .dropdown_overlay_secondary_button {
-        background: transparent;
-        border: 1px solid transparent;
-        color: var(--_gray-600);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 1 0 0;
-        margin: $spacing-md 0px;
-        border-radius: 4px;
 
+    .menu_dropdown_option {
+      a {
+        display: block;
+        text-decoration: none;
+        width: 100%;
         &:hover {
-          color: var(--_gray-900);
-          background-color: var(--_gray-100);
+          color: var(--_primary-400);
         }
       }
-
-      .dropdown_overlay_primary_button {
-        background-color: $primary-color;
-        color: $background-color;
-        border: none;
-        padding: $button-padding;
-        border-radius: 4px;
-        cursor: pointer;
-        font-weight: 500;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 1 0 0;
-        margin: $spacing-md 0px;
-        &.disabled {
-          opacity: 0.5;
-          pointer-events: none !important;
-        }
-
+      button {
+        display: block;
+        padding: 12px;
+        text-align: left;
+        width: 100%;
         &:hover {
-          // background-color: lighten($primary-color, $amount: 5%);
-          background-color: color-mix(in srgb, #{$primary-color} 95%, var(--_base-white));
+          background-color: var(--_gray-100);
+          color: var(--_primary-400);
         }
       }
+    }
+  }
+  .menu-container {
+    min-height: fit-content;
+  }
 
-      button {
-        width: 116px;
-        height: 36px;
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    padding: 0px $spacing-md;
+    gap: $spacing-md;
+    border-top: 1px solid var(--_gray-200);
+
+    .dropdown_overlay_secondary_button {
+      background: transparent;
+      border: 1px solid transparent;
+      color: var(--_gray-600);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1 0 0;
+      margin: $spacing-md 0px;
+      border-radius: 4px;
+
+      &:hover {
+        color: var(--_gray-900);
+        background-color: var(--_gray-100);
       }
     }
-  }
 
-  .position-bottom {
-    top: 80%;
-    margin-top: 8px;
-    left: 0;
-    width: max-content;
-  }
+    .dropdown_overlay_primary_button {
+      background-color: $primary-color;
+      color: $background-color;
+      border: none;
+      padding: $button-padding;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1 0 0;
+      margin: $spacing-md 0px;
+      &.disabled {
+        opacity: 0.5;
+        pointer-events: none !important;
+      }
 
-  .position-top {
-    top: -192px;
-    /* shows above the button */
-    margin-bottom: 8px;
+      &:hover {
+        // background-color: lighten($primary-color, $amount: 5%);
+        background-color: color-mix(in srgb, #{$primary-color} 95%, var(--_base-white));
+      }
+    }
+
+    button {
+      width: 116px;
+      height: 36px;
+    }
   }
 }