@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

package/dist/menu.scss

@@ -127,6 +127,18 @@
             --_ctm-mob-dn-mu-im-se-ft-fy,
             var(--_ctm-tab-dn-mu-im-se-ft-fy, var(--_ctm-dn-mu-im-se-ft-fy))
           );
+          text-transform: var(
+            --_ctm-mob-dn-mu-im-se-tt-tm,
+            var(--_ctm-tab-dn-mu-im-se-tt-tm, var(--_ctm-dn-mu-im-se-tt-tm))
+          );
+          word-wrap: var(
+            --_ctm-mob-dn-mu-im-se-wd-wp,
+            var(--_ctm-tab-dn-mu-im-se-wd-wp, var(--_ctm-dn-mu-im-se-wd-wp))
+          );
+          word-break: var(
+            --_ctm-mob-dn-mu-im-se-wd-bk,
+            var(--_ctm-tab-dn-mu-im-se-wd-bk, var(--_ctm-dn-mu-im-se-wd-bk))
+          );
           font-size: var(
             --_ctm-mob-dn-mu-im-se-ft-se,
             var(--_ctm-tab-dn-mu-im-se-ft-se, var(--_ctm-dn-mu-im-se-ft-se))

package/dist/multi-select-dropdown.scss

@@ -20,6 +20,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 .msd {
   position: relative;
   color: $msd-text;
+
   &--disabled {
     opacity: 0.6;
     pointer-events: none;
@@ -62,6 +63,7 @@ $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;
@@ -76,6 +78,7 @@ $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;
@@ -85,23 +88,28 @@ $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;
@@ -140,13 +148,16 @@ $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;
@@ -213,9 +224,11 @@ $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;
@@ -225,15 +238,18 @@ $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;
@@ -245,11 +261,13 @@ $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;
   }
@@ -258,6 +276,7 @@ $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;
   // }
@@ -267,22 +286,27 @@ $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;
   }
@@ -300,17 +324,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,17 +11,14 @@ $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;
     }
@@ -70,31 +67,37 @@ $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 {
@@ -147,6 +150,7 @@ $defaultValues: (
                   width: fit-content;
                   height: fit-content;
                 }
+
                 &::placeholder {
                   color: var(--_thm-ty-p2-tt-cr);
                 }
@@ -202,12 +206,16 @@ $defaultValues: (
                   // color: var(--_gray-900);
                   color: var(--_thm-ty-p1-tt-cr);
                   font-family: var(--_thm-ty-p1-ft-fy);
+                  text-transform: var(--_thm-ty-p1-tt-tm);
+                  word-wrap: var(--_thm-ty-p1-wd-wp);
+                  word-break: var(--_thm-ty-p1-wd-bk);
                   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(--_thm-cs-be-se-3);
@@ -215,6 +223,7 @@ $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);
@@ -222,10 +231,12 @@ $defaultValues: (
             }
           }
         }
+
         .employee-row-wrapper {
           display: flex;
           flex-direction: column;
           gap: 12px;
+
           .employee-row {
             display: flex;
             align-items: center;
@@ -237,6 +248,7 @@ $defaultValues: (
               width: 100%;
               gap: 16px;
               align-items: center;
+
               .dropdown {
                 display: flex;
                 flex-direction: column;
@@ -336,9 +348,11 @@ $defaultValues: (
                 .delete-icon {
                   cursor: pointer;
                   display: flex;
+
                   svg {
                     width: 24px;
                     height: 24px;
+
                     path {
                       stroke: #6b7280; // gray-500
                     }
@@ -354,6 +368,7 @@ $defaultValues: (
             }
           }
         }
+
         .action-buttons {
           display: flex;
           gap: 1rem;
@@ -365,10 +380,12 @@ $defaultValues: (
           gap: 12px;
           margin-top: 24px;
           padding-bottom: 24px;
+
           button {
             padding: 12px 16px;
             border-radius: 6px;
           }
+
           .create-btn {
             display: flex;
             justify-content: center;
@@ -376,10 +393,12 @@ $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;
@@ -395,6 +414,7 @@ $defaultValues: (
               color: var(--_thm-py-bs-hr-se-tt-cr);
             }
           }
+
           .discard-btn {
             &:hover {
               background-color: var(--_gray-50);
@@ -403,16 +423,19 @@ $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);
@@ -422,37 +445,45 @@ $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);
@@ -460,6 +491,7 @@ $defaultValues: (
                   white-space: nowrap;
                 }
               }
+
               .no_data_selected_text {
                 color: var(--_thm-ty-p1-tt-cr);
                 font-size: var(--_thm-ty-p1-ft-se);
@@ -471,4 +503,4 @@ $defaultValues: (
       }
     }
   }
-}
+}

package/dist/myTemplates.scss

@@ -193,6 +193,9 @@ $defaultValues: (
                   // color: var(--_gray-900);
                   color: var(--_thm-ty-p1-tt-cr);
                   font-family: var(--_thm-ty-p1-ft-fy);
+                  text-transform: var(--_thm-ty-p1-tt-tm);
+                  word-wrap: var(--_thm-ty-p1-wd-wp);
+                  word-break: var(--_thm-ty-p1-wd-bk);
                   font-size: var(--_thm-ty-p2-ft-se);
                   font-weight: var(--_thm-ty-p1-bd);
                   margin-left: -15px;