@sc-360-v2/storefront-cms-library 0.4.38 → 0.4.41

package/dist/language-selector.scss

@@ -353,8 +353,11 @@
 
         position: relative;
 
-        padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
+        // padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
         gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+        .language__name {
+          color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
+        }
       }
       .language__flag {
         width: var(--_ctm-mob-lt-fg-se, var(--_ctm-tab-lt-fg-se, var(--_ctm-lt-fg-se)));
@@ -419,15 +422,17 @@
 
           width: 100%;
 
-          &.open .list {
-            display: flex;
-            animation: slideDown 0.8s ease-in-out;
-          }
           .dropdown__button__wrapper {
             width: 100%;
             padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
             .option_select {
-              padding: unset;
+              // padding-block: unset;
+              // display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
             }
           }
 
@@ -440,12 +445,13 @@
 
           .est__dropdown__icon {
             position: absolute;
-            right: 5px;
+            right: 0;
             transition: transform 0.4s ease-in-out;
-            &.open {
+            display: flex;
+            &.rotate__180 {
               transform: rotate(180deg);
             }
-            &.close {
+            &.rotate__0 {
               transform: rotate(0deg);
             }
             width: prepareMediaVariable(--_ctm-dn-te-in-in-se);
@@ -465,8 +471,6 @@
           }
 
           .list {
-            animation: slideDown 0.8s ease-in-out;
-            display: none;
             flex-direction: column;
             border: 1px solid var(--_gray-200);
             border-radius: 6px;
@@ -487,6 +491,9 @@
               var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
             );
             gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
+            // padding: 2px;
+            // border-radius: 4px;
+            // border: 1px solid var(--_gray-300);
 
             &.top {
               bottom: 100%;
@@ -495,6 +502,19 @@
 
             .option {
               cursor: pointer;
+              // padding: 4px;
+              // &:hover {
+              //   background: var(--_gray-100);
+              //   border-radius: 4px;
+              // }
+            }
+            &.show__panel {
+              animation: slideUp 0.4s ease-in-out;
+            }
+
+            &.hide__panel {
+              animation: slideDown 0.4s ease-in-out;
+              pointer-events: none;
             }
           }
         }
@@ -504,23 +524,31 @@
 }
 
 @keyframes slideUp {
-  0% {
-    transform: translateY(0px);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(20px);
+  from {
+    transform: translateY(10px);
     opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
   }
 }
 
 @keyframes slideDown {
-  0% {
-    transform: translateY(20px);
-    opacity: 0;
+  from {
+    transform: translateY(10);
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
   }
-  100% {
+  to {
     transform: translateY(0px);
-    opacity: 1;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
   }
 }

package/dist/multi-select-dropdown.scss

@@ -211,6 +211,15 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
       max-width: 100%;
     }
   }
+  .msd__option__text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    .msd__option__subtitle {
+      font-size: 12px;
+      color: var(--_gray-500);
+    }
+  }
   .is__selected {
     margin-left: auto;
   }

package/dist/my-templates.scss

@@ -66,10 +66,10 @@ $defaultValues: (
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 24px;
-      h2 {
-        font-size: 24px;
-      }
+      margin-bottom: 16px;
+      // h2 {
+      //   font-size: 24px;
+      // }
       .back_to_cart {
         color: var(--_thm-cs-tt-ls-as);
         &:hover {
@@ -86,8 +86,8 @@ $defaultValues: (
       .template_col_left {
         // width: calc(100% - 400px);
         width: var(--_width, 100%);
-        height: 400px;
-        background-color: var(--_base-white);
+        // min-height: 400px;
+        // background-color: var(--_base-white);
         .wishlist-modal {
           display: flex;
           flex-direction: column;
@@ -103,15 +103,15 @@ $defaultValues: (
             .form-group {
               display: flex;
               flex-direction: column;
-              gap: 8px;
+              gap: 6px;
               max-width: 500px;
 
-              label {
-                display: block;
-                font-size: 0.875rem;
-                font-weight: 500;
-                color: #374151;
-              }
+              // label {
+              //   display: block;
+              //   font-size: 0.875rem;
+              //   font-weight: 500;
+              //   color: #374151;
+              // }
 
               .primary_text_label {
                 font-weight: 700;
@@ -120,17 +120,18 @@ $defaultValues: (
               input[type="radio"],
               textarea {
                 width: 100%;
-                padding: 0.5rem 0.75rem;
-                font-size: 0.875rem;
-                border: 1px solid #d1d5db;
-                border-radius: 0.375rem;
+                padding: 12px 14px;
+                // font-size: 0.875rem;
+                font-size: var(--_thm-ty-p1-ft-se);
+                border: 1px solid var(--_thm-cs-be-se-3);
+                border-radius: 6px;
                 outline: none;
                 box-sizing: border-box;
                 transition: all 0.2s;
 
                 &:focus {
-                  border-color: #2563eb;
-                  // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
+                  border: 1px solid var(--_thm-cs-at-py);
+                  outline: 2px solid color-mix(in srgb, color 50%, transparent);
                 }
 
                 &[type="radio"] {
@@ -138,7 +139,7 @@ $defaultValues: (
                   height: fit-content;
                 }
                 &::placeholder {
-                  color: var(--_gray-500);
+                  color: var(--_thm-ty-p2-tt-cr);
                 }
               }
 
@@ -156,10 +157,10 @@ $defaultValues: (
                   width: fit-content;
 
                   span {
-                    color: var(--_gray-500);
+                    color: var(--_thm-ty-p2-tt-cr);
 
                     span {
-                      color: var(--_gray-900);
+                      color: var(--_thm-ty-p1-tt-cr);
                       font-weight: 500;
                     }
                   }
@@ -175,7 +176,7 @@ $defaultValues: (
                 display: flex;
                 flex-direction: column;
                 align-items: flex-start;
-                margin-left: 20px;
+                margin-left: 36px;
                 margin-top: 6px;
                 gap: 6px;
 
@@ -187,18 +188,159 @@ $defaultValues: (
                 }
 
                 span {
-                  font-size: 0.875rem;
-                  font-weight: 600;
-                  color: var(--_gray-900);
+                  // font-size: 0.875rem;
+                  // font-weight: 600;
+                  // color: var(--_gray-900);
+                  color: var(--_thm-ty-p1-tt-cr);
+                  font-family: var(--_thm-ty-p1-ft-fy);
+                  font-size: var(--_thm-ty-p2-ft-se);
+                  font-weight: var(--_thm-ty-p1-bd);
                   margin-left: -15px;
                 }
               }
             }
             input[type="text"] {
               height: 40px;
-              border: 1px solid var(--_gray-300);
+              border: 1px solid var(--_thm-cs-be-se-3);
+              font-size: var(--_thm-ty-p1-ft-se);
               border-radius: 6px;
-              padding-inline: 16px;
+              padding: 12px 14px;
+              &:focus {
+                border: 1px solid var(--_thm-cs-at-py);
+                outline: 2px solid color-mix(in srgb, color 50%, transparent);
+              }
+            }
+          }
+        }
+        .employee-row-wrapper {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          .employee-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+
+            .employee_first_col {
+              display: flex;
+              width: 100%;
+              gap: 16px;
+              align-items: center;
+              .dropdown {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+              }
+
+              // .dropdown {
+              //   flex: 1;
+              //   display: flex;
+              //   flex-direction: column;
+              //   gap: 8px;
+              //   max-width: 400px;
+
+              //   .quick-order-product-dropdown-section {
+              //     &:focus {
+              //       &:focus {
+              //         border-color: #2563eb;
+              //         box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
+              //       }
+              //     }
+
+              //     .dropdown-input-section {
+              //       // padding: 0.5rem;
+
+              //       .input-field {
+              //         border: none;
+              //         box-shadow: none;
+              //         padding: 0px;
+              //       }
+
+              //       .dropdown-menu {
+              //         top: 40px;
+              //       }
+              //     }
+              //   }
+              // }
+
+              .checkbox-wrapper {
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                gap: 0.5rem;
+                white-space: nowrap;
+                align-self: stretch;
+                align-items: flex-start;
+
+                .checkbox-container {
+                  display: flex;
+                  width: 3.5rem;
+                  align-items: center;
+                  flex: 1 1 auto;
+                  justify-content: center;
+
+                  input[type="checkbox"] {
+                    width: 16px;
+                    height: 16px;
+                    border: 1px solid #d0d5dd;
+                    border-radius: 4px;
+                    position: relative;
+                    background-color: #fff;
+                    transition: all 0.2s ease;
+
+                    &::after {
+                      content: "";
+                      position: absolute;
+                      display: none;
+                      left: 5px;
+                      top: 0.5px;
+                      width: 5px;
+                      height: 10px;
+                      border: solid #fff;
+                      border-width: 0 2px 2px 0;
+                      transform: rotate(45deg);
+                    }
+                  }
+                }
+              }
+            }
+
+            .delete-icon-wrapper {
+              display: flex;
+              align-items: center;
+              flex-direction: column;
+              gap: 0.5rem;
+              white-space: nowrap;
+              align-self: stretch;
+              align-items: flex-start;
+              // margin-left: 130px;
+
+              .delete-icon-container {
+                display: flex;
+                width: 100%;
+                align-items: center;
+                flex: 1 1 auto;
+                justify-content: center;
+
+                .delete-icon {
+                  cursor: pointer;
+                  display: flex;
+                  svg {
+                    width: 24px;
+                    height: 24px;
+                    path {
+                      stroke: #6b7280; // gray-500
+                    }
+
+                    &:hover {
+                      path {
+                        stroke: #ef4444;
+                      }
+                    }
+                  }
+                }
+              }
             }
           }
         }
@@ -211,7 +353,7 @@ $defaultValues: (
           // padding: 16px 24px;
           // border-top: 1px solid var(--_gray-200);
           gap: 12px;
-          margin-block: 24px;
+          margin-top: 24px;
           padding-bottom: 24px;
           button {
             padding: 12px 16px;
@@ -255,18 +397,19 @@ $defaultValues: (
         // width: 400px;
         width: var(--_width-400, 100%);
         height: fit-content;
-        background-color: var(--_base-white);
+        // background-color: var(--_base-white);
         overflow: hidden;
         .template_summary_wrapper {
-          border: 1px solid var(--_gray-300);
+          border: 1px solid var(--_thm-cs-be-se-3);
           border-radius: 4px;
           width: 100%;
           .template_summary_header {
             padding: 12px 16px;
-            border-bottom: 1px solid var(--_gray-300);
+            border-bottom: 1px solid var(--_thm-cs-be-se-3);
             font-size: 16px;
             font-weight: 600;
-            background-color: #f5f5f5;
+            background-color: var(--_thm-cs-be-se-2);
+            color: var(--_thm-ty-p1-tt-cr);
           }
           .template_summary_body {
             .template_summary_items {
@@ -283,29 +426,34 @@ $defaultValues: (
                   gap: 16px;
                   .template_summary_item_pro_info {
                     h5 {
-                      font-size: 16px;
-                      font-weight: 600;
-                      color: var(--_gray-900);
+                      font-size: var(--_thm-ty-p1-ft-se);
+                      font-weight: var(--_thm-ty-p1-ft-wt);
+                      color: var(--_thm-ty-p1-tt-cr);
                     }
                     .template_summary_item_pro_qty {
-                      color: var(--_gray-500);
-                      font-size: 12px;
+                      color: var(--_thm-ty-p3-cr);
+                      font-size: var(--_thm-ty-p3-ft-se);
                       span {
                         display: block;
                       }
                       .qty {
-                        color: var(--_gray-900);
+                        color: var(--_thm-ty-p1-tt-cr);
                       }
                     }
                   }
                 }
                 .template_summary_item_detail_price {
-                  font-size: 16px;
-                  font-weight: 600;
-                  color: var(--_gray-900);
+                  font-size: var(--_thm-ty-p1-ft-se);
+                  font-weight: var(--_thm-ty-p1-ft-wt);
+                  color: var(--_thm-ty-p1-tt-cr);
                   white-space: nowrap;
                 }
               }
+              .no_data_selected_text {
+                color: var(--_thm-ty-p1-tt-cr);
+                font-size: var(--_thm-ty-p1-ft-se);
+                font-weight: var(--_thm-ty-p1-ft-wt);
+              }
             }
           }
         }