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

package/dist/request-for-quotes.scss

@@ -13,15 +13,18 @@ $defaultValues: (
     margin: 0;
     // Reads the percentage the right resize handle writes, same as My Templates and
     // My Wishlist. Without it the handle drags a value nothing consumes.
-    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 — the rule
       // below was commented out and named a variable (`--_lt-pg`) that never existed.
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
     }
-
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);
@@ -62,16 +65,13 @@ $defaultValues: (
 
         justify-content: space-between;
         align-items: center;
-
         .back_to_cart {
           color: var(--_thm-cs-tt-ls-as);
-
           &:hover {
             text-decoration: underline;
           }
         }
       }
-
       .quotes_body {
         @include prepareMediaQueries($defaultValues);
         display: flex;
@@ -80,11 +80,9 @@ $defaultValues: (
         flex-direction: var(--_flex-direction);
         gap: var(--_gap);
         justify-content: space-between;
-
         .empty_template {
           height: auto;
         }
-
         @media (max-width: 1024px) {
           .empty_template {
             margin-block: 24px;
@@ -94,20 +92,16 @@ $defaultValues: (
 
       .quote-items {
         flex: 2;
-
         .quote-item {
           // padding: 32px 0;
           display: flex;
           gap: 24px;
-
           &:not(:last-child) {
             border-bottom: 1px dotted var(--_thm-cs-be-se-3);
           }
-
           &:not(:last-child) {
             padding-bottom: 16px;
           }
-
           &:not(:first-child) {
             padding-top: 16px;
           }
@@ -124,7 +118,6 @@ $defaultValues: (
             flex: 1;
             display: flex;
             flex-direction: column;
-
             .quote-item__header {
               margin-bottom: 16px;
               padding-bottom: 16px;
@@ -144,7 +137,6 @@ $defaultValues: (
                 gap: 8px;
                 // font-size: 14px;
                 font-weight: 400;
-
                 // color: var(--_gray-500);
                 span {
                   &:first-child {
@@ -164,7 +156,6 @@ $defaultValues: (
                 display: flex;
                 flex-direction: column;
                 font-size: 14px;
-
                 &.price_column {
                   padding-right: 24px;
                 }
@@ -185,7 +176,6 @@ $defaultValues: (
                   height: 39px;
                   display: flex;
                   align-items: center;
-
                   span {
                     display: inline-flex;
                     justify-content: flex-start;
@@ -226,7 +216,6 @@ $defaultValues: (
                     color 0.2s,
                     border-color 0.2s,
                     box-shadow 0.2s;
-
                   &:focus-within {
                     outline: 2px solid var(--_gray-100);
                     border: 1px solid var(--_gray-300);
@@ -246,7 +235,6 @@ $defaultValues: (
                     width: 100%;
                     height: 100%;
                     padding-left: 6px;
-
                     &:focus {
                       box-shadow: none;
                       outline: none;
@@ -255,7 +243,6 @@ $defaultValues: (
                 }
               }
             }
-
             .quote-item__totals {
               display: flex;
               flex-direction: column;
@@ -269,7 +256,7 @@ $defaultValues: (
                 flex-direction: column;
                 gap: 6px;
 
-                >div {
+                > div {
                   display: flex;
                   justify-content: flex-end;
                   align-items: baseline;
@@ -311,7 +298,6 @@ $defaultValues: (
             @media (min-width: 767px) and (max-width: 1023px) {
               .quote-item__row {
                 flex-wrap: wrap;
-
                 .field {
                   &.price_column {
                     width: 100%;
@@ -319,25 +305,20 @@ $defaultValues: (
                 }
               }
             }
-
             @media (max-width: 767px) {
               .quote-item__row {
                 flex-wrap: wrap;
               }
-
               .quote-item__totals {
                 margin-left: 0;
-
                 .quote-total {
-                  >div {
+                  > div {
                     display: inline-flex;
                     justify-content: flex-start;
                   }
-
                   small {
                     display: inline-flex;
                     justify-content: flex-start;
-
                     span {
                       display: inline-flex;
                       justify-content: flex-start;
@@ -347,7 +328,6 @@ $defaultValues: (
               }
             }
           }
-
           @media (max-width: 767px) {
             .quote-item__details {
               .quote-item__header {
@@ -399,7 +379,6 @@ $defaultValues: (
           &--quoted {
             margin-bottom: 20px;
           }
-
           .label-quote {
             // font-size: 14px;
             font-weight: 400;
@@ -451,8 +430,7 @@ $defaultValues: (
             // background-color: var(--_primary-500);
           }
         }
-
-        &>h3 {
+        & > h3 {
           // font-size: 16px;
           font-weight: 700;
           // color: var(--_gray-900);
@@ -460,7 +438,6 @@ $defaultValues: (
           padding: 12px;
           border-bottom: 1px solid var(--_thm-cs-be-se-3);
         }
-
         .quote-summary-body {
           padding: 0px 16px 16px 16px;
         }
@@ -479,7 +456,7 @@ $defaultValues: (
         top: 10px;
         margin-bottom: 24px;
 
-        &>h3 {
+        & > h3 {
           // font-size: 16px;
           font-weight: 700;
           background-color: #f5f5f5;
@@ -528,7 +505,6 @@ $defaultValues: (
           background: none;
           border: none;
           cursor: pointer;
-
           span {
             display: flex;
           }
@@ -537,7 +513,6 @@ $defaultValues: (
             text-decoration: underline;
           }
         }
-
         // &_divider {
         //   border: none;
         //   border-top: 1px dashed var(--_gray-300);
@@ -608,11 +583,9 @@ $defaultValues: (
           // align-items: flex-start;
           gap: 6px;
           padding-bottom: 16px;
-
           &:first-child {
             padding-top: 0px;
           }
-
           &:not(:last-child) {
             border-bottom: 1px dashed var(--_thm-cs-be-se-3);
             margin-bottom: 16px;
@@ -623,36 +596,30 @@ $defaultValues: (
             margin-bottom: 0px;
           }
         }
-
         .contact_details {
           gap: 6px;
           display: flex;
           flex-direction: column;
           padding-bottom: 24px;
           margin-top: 12px;
-
           .contact_title {
             display: flex;
             gap: 12px;
             font-weight: 600;
             font-size: 14px;
             cursor: pointer;
-
             .toggle_dropdown {
               display: inline-block;
               transition: transform 0.3s ease;
-
               svg {
                 width: 18px;
                 height: 18px;
               }
-
               &.open {
                 transform: rotate(180deg);
               }
             }
           }
-
           .secondary_val {
             font-weight: 500;
           }
@@ -665,7 +632,6 @@ $defaultValues: (
           line-height: 20px;
           padding-bottom: 12x;
         }
-
         &_details {
           display: flex;
           align-items: center;
@@ -673,21 +639,16 @@ $defaultValues: (
           // color: var(--_gray-900);
           font-size: 14px;
           cursor: pointer;
-
           .toggle_arrow {
             display: flex;
             transition: transform 0.3s ease;
-
             &.open {
               transform: rotate(180deg);
             }
           }
-
           &.no_caret {
-            caret-color: transparent;
-            /* hides the blinking cursor */
-            pointer-events: none;
-            /* prevents clicking/focus */
+            caret-color: transparent; /* hides the blinking cursor */
+            pointer-events: none; /* prevents clicking/focus */
           }
         }
 
@@ -697,13 +658,11 @@ $defaultValues: (
           gap: 10px;
           cursor: pointer;
         }
-
         &_contact {
           font-size: 14px;
           font-weight: 600;
           color: var(--_gray-900);
         }
-
         &_shipping_details {
           padding-bottom: 16px;
           margin-bottom: 16px;
@@ -720,7 +679,6 @@ $defaultValues: (
             display: flex;
             align-items: center;
             justify-content: center;
-
             span {
               font-size: 16px;
               font-weight: 600;
@@ -790,13 +748,11 @@ $defaultValues: (
           // color: var(--_gray-900);
           font-size: 14px;
         }
-
         &_shipping_selected_method {
           display: flex;
           justify-content: space-between;
           gap: 48px;
         }
-
         &_shipping_title {
           font-size: 14px;
           font-weight: 600;
@@ -805,13 +761,11 @@ $defaultValues: (
         &_shipping_confirm {
           padding: 12px;
         }
-
         &_shipping_method {
           display: flex;
           flex-direction: column;
           gap: 8px;
         }
-
         .confirm_button {
           padding: 12px 24px;
           border-radius: 4px;
@@ -819,17 +773,14 @@ $defaultValues: (
           background-color: var(--_thm-py-bs-dt-se-bd-cr);
           color: var(--_thm-py-bs-dt-se-tt-cr);
           margin-block: 4px 4px;
-
           &:hover {
             background-color: var(--_thm-py-bs-hr-se-bd-cr);
             color: var(--_thm-py-bs-hr-se-tt-cr);
           }
         }
       }
-
       .cpn__checkmark__icon {
         display: flex;
-
         svg path {
           // stroke: var(--_thm-cs-tt-ls-as);
         }
@@ -838,11 +789,10 @@ $defaultValues: (
 
     width: 100%;
 
-    &>.wrapper {
+    & > .wrapper {
       // width: 100%;
       // height: 100%;
     }
-
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
@@ -888,4 +838,4 @@ $defaultValues: (
     //   );
     // }
   }
-}
+}

package/dist/responsive-behaviour.scss

@@ -17,15 +17,13 @@ $selector: "[data-element-type='layouter-pro']";
     &#{$rb_cls} {
       &:not(#{$fullView, $elementDragging, $dataResizerTrue}) {
         @include FlexUpdatedPrefixCSSVariable(#{$var});
-
         &:is(#{$selector}) {
           width: min(var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}), 100%) !important;
         }
-
         &:is(:not(#{$selector})) {
           width: var(#{$var}, #{prepareMediaVariable(--_ctm-lt-wh)}) !important;
         }
       }
     }
   }
-}
+}