@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.74

package/dist/multi-select-dropdown.scss

@@ -20,7 +20,6 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 .msd {
   position: relative;
   color: $msd-text;
-
   &--disabled {
     opacity: 0.6;
     pointer-events: none;
@@ -63,7 +62,6 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   gap: 6px;
   min-height: 28px;
   flex: 1 1 auto;
-
   .msd__chip {
     // ensure chips do not wrap individually
     flex: 0 0 auto;
@@ -78,7 +76,6 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     transition:
       padding 0.2s ease,
       background-color 0.2s ease;
-
     .msd__chipRemove {
       border: 0;
       background: transparent;
@@ -88,28 +85,23 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
       line-height: 1;
       padding: 0;
       margin: 0;
-
       svg {
         width: 10px;
         height: 10px;
       }
-
       &:hover {
         color: $msd-chip-remove-hover;
       }
     }
-
     &:hover {
       // border: 1px solid var(--_gray-300);
       background-color: var(--_base-white);
-
       // padding: 5px 10px;
       svg path {
         stroke: var(--_gray-900);
       }
     }
   }
-
   &--single {
     .msd__chip {
       background-color: transparent;
@@ -148,16 +140,13 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     color: $msd-muted;
   }
 }
-
 .msd__clear {
   margin-right: 15px;
-
   svg {
     width: 16px;
     height: 16px;
   }
 }
-
 .msd__clear,
 .msd__arrow {
   width: 26px;
@@ -224,11 +213,9 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   display: flex;
   justify-content: start;
   align-items: center;
-
   svg path {
     stroke: var(--_gray-50);
   }
-
   &__img {
     border-radius: 4px;
     justify-content: center;
@@ -238,18 +225,15 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     height: 32px;
     border: 1px solid var(--_gray-200);
     overflow: hidden;
-
     img {
       max-height: 100%;
       max-width: 100%;
     }
   }
-
   .msd__option__text {
     display: flex;
     flex-direction: column;
     gap: 4px;
-
     span {
       &:first-of-type {
         display: -webkit-box !important;
@@ -261,13 +245,11 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
         overflow: hidden;
       }
     }
-
     .msd__option__subtitle {
       font-size: 12px;
       color: var(--_gray-700);
     }
   }
-
   .is__selected {
     margin-left: auto;
   }
@@ -276,7 +258,6 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     // @include BgColorLighter(var(--_thm-cs-at-py), 8%);
     background-color: var(--_gray-50);
   }
-
   // &.is-active {
   //   background: #f1f5f9;
   // }
@@ -286,27 +267,22 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     background-color: var(--_gray-100);
     // color: var(--_thm-cs-at-py);
     color: var(--_gray-900);
-
     // background: var(--_thm-cs-at-py);
     svg path {
       // stroke: var(--_thm-cs-at-py);
       stroke: var(--_gray-900);
     }
-
     .msd__option__subtitle {
       color: var(--_gray-900);
     }
   }
-
   &.is-disabled {
     opacity: 0.5;
     pointer-events: none;
   }
-
   &--selectAll {
     font-weight: 600;
   }
-
   &:not(:last-child) {
     margin-bottom: 2px;
   }
@@ -324,17 +300,17 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   &.is-checked {
     border-color: var(--_gray-600);
     background: var(--_gray-600);
-
     &::after {
       content: "";
       position: absolute;
       top: 2px;
       inset: 0;
-      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 13.296L3.7 9.367l1.414-1.414 2.515 2.515L14.886 3.21l1.414 1.415z"/></svg>') center/12px 12px no-repeat;
+      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 13.296L3.7 9.367l1.414-1.414 2.515 2.515L14.886 3.21l1.414 1.415z"/></svg>')
+        center/12px 12px no-repeat;
     }
   }
 
   &.is-disabled {
     opacity: 0.6;
   }
-}
+}

package/dist/my-templates.scss

@@ -11,14 +11,17 @@ $defaultValues: (
   &[data-element-type="myTemplates"] {
     // Was `width: 100% !important`, which ignored the percentage the right resize
     // handle writes and left the handle with nothing to drive.
-    width: var(--_sf-el-wh-st-mx,
-        calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
-
-    &>.wrapper {
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+      )
+    );
+
+    & > .wrapper {
       // Layout > Padding. The element declares it but nothing read it back.
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
     }
-
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
@@ -67,37 +70,31 @@ $defaultValues: (
 
   .template_wrapper {
     width: 100%;
-
     .template_section {
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 16px;
-
       // h2 {
       //   font-size: 24px;
       // }
       .back_to_cart {
         color: var(--_thm-cs-tt-ls-as);
-
         &:hover {
           text-decoration: underline;
         }
       }
     }
-
     .template_body {
       @include prepareMediaQueries($defaultValues);
       display: var(--_flex-box, flex);
       // display: flex;
       gap: 60px;
       justify-content: space-between;
-
       .template_col_left {
         // width: calc(100% - 400px);
         width: var(--_width, 100%);
-
         // min-height: 400px;
         // background-color: var(--_base-white);
         .wishlist-modal {
@@ -150,7 +147,6 @@ $defaultValues: (
                   width: fit-content;
                   height: fit-content;
                 }
-
                 &::placeholder {
                   color: var(--_thm-ty-p2-tt-cr);
                 }
@@ -215,7 +211,6 @@ $defaultValues: (
                 }
               }
             }
-
             input[type="text"] {
               height: 40px;
               border: 1px solid var(--_thm-cs-be-se-3);
@@ -223,7 +218,6 @@ $defaultValues: (
               border-radius: 6px;
               padding: 12px 14px;
               transition: all 0.2s ease;
-
               &:focus {
                 border: 1px solid var(--_primary-300);
                 // outline: 1px solid color-mix(in srgb, var(--_primary-300) 50%, transparent);
@@ -231,12 +225,10 @@ $defaultValues: (
             }
           }
         }
-
         .employee-row-wrapper {
           display: flex;
           flex-direction: column;
           gap: 12px;
-
           .employee-row {
             display: flex;
             align-items: center;
@@ -248,7 +240,6 @@ $defaultValues: (
               width: 100%;
               gap: 16px;
               align-items: center;
-
               .dropdown {
                 display: flex;
                 flex-direction: column;
@@ -348,11 +339,9 @@ $defaultValues: (
                 .delete-icon {
                   cursor: pointer;
                   display: flex;
-
                   svg {
                     width: 24px;
                     height: 24px;
-
                     path {
                       stroke: #6b7280; // gray-500
                     }
@@ -368,7 +357,6 @@ $defaultValues: (
             }
           }
         }
-
         .action-buttons {
           display: flex;
           gap: 1rem;
@@ -380,12 +368,10 @@ $defaultValues: (
           gap: 12px;
           margin-top: 24px;
           padding-bottom: 24px;
-
           button {
             padding: 12px 16px;
             border-radius: 6px;
           }
-
           .create-btn {
             display: flex;
             justify-content: center;
@@ -393,12 +379,10 @@ $defaultValues: (
             gap: 8px;
             background-color: var(--_thm-py-bs-dt-se-bd-cr);
             color: var(--_thm-py-bs-dt-se-tt-cr);
-
             &.disabled {
               opacity: 0.5;
               pointer-events: none;
             }
-
             .loader {
               animation: rotate-icon 1s linear infinite;
               display: inline-block;
@@ -414,7 +398,6 @@ $defaultValues: (
               color: var(--_thm-py-bs-hr-se-tt-cr);
             }
           }
-
           .discard-btn {
             &:hover {
               background-color: var(--_gray-50);
@@ -423,19 +406,16 @@ $defaultValues: (
           }
         }
       }
-
       .template_col_right {
         // width: 400px;
         width: var(--_width-400, 100%);
         height: fit-content;
         // background-color: var(--_base-white);
         overflow: hidden;
-
         .template_summary_wrapper {
           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(--_thm-cs-be-se-3);
@@ -445,45 +425,37 @@ $defaultValues: (
             border-radius: 4px 4px 0 0;
             color: var(--_thm-ty-p1-tt-cr);
           }
-
           .template_summary_body {
             .template_summary_items {
               padding: 16px;
               display: flex;
               flex-direction: column;
               gap: 8px;
-
               .template_summary_item {
                 display: flex;
                 justify-content: space-between;
                 gap: 16px;
-
                 .template_summary_item_details {
                   display: flex;
                   gap: 16px;
-
                   .template_summary_item_pro_info {
                     h5 {
                       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(--_thm-ty-p3-cr);
                       font-size: var(--_thm-ty-p3-ft-se);
-
                       span {
                         display: block;
                       }
-
                       .qty {
                         color: var(--_thm-ty-p1-tt-cr);
                       }
                     }
                   }
                 }
-
                 .template_summary_item_detail_price {
                   font-size: var(--_thm-ty-p1-ft-se);
                   font-weight: var(--_thm-ty-p1-ft-wt);
@@ -491,7 +463,6 @@ $defaultValues: (
                   white-space: nowrap;
                 }
               }
-
               .no_data_selected_text {
                 color: var(--_thm-ty-p1-tt-cr);
                 font-size: var(--_thm-ty-p1-ft-se);
@@ -503,4 +474,4 @@ $defaultValues: (
       }
     }
   }
-}
+}