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

package/dist/request-for-quotes.scss

@@ -13,18 +13,15 @@ $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);
@@ -65,13 +62,16 @@ $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,9 +80,11 @@ $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;
@@ -92,16 +94,20 @@ $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;
           }
@@ -118,6 +124,7 @@ $defaultValues: (
             flex: 1;
             display: flex;
             flex-direction: column;
+
             .quote-item__header {
               margin-bottom: 16px;
               padding-bottom: 16px;
@@ -137,6 +144,7 @@ $defaultValues: (
                 gap: 8px;
                 // font-size: 14px;
                 font-weight: 400;
+
                 // color: var(--_gray-500);
                 span {
                   &:first-child {
@@ -156,6 +164,7 @@ $defaultValues: (
                 display: flex;
                 flex-direction: column;
                 font-size: 14px;
+
                 &.price_column {
                   padding-right: 24px;
                 }
@@ -176,6 +185,7 @@ $defaultValues: (
                   height: 39px;
                   display: flex;
                   align-items: center;
+
                   span {
                     display: inline-flex;
                     justify-content: flex-start;
@@ -216,6 +226,7 @@ $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);
@@ -235,6 +246,7 @@ $defaultValues: (
                     width: 100%;
                     height: 100%;
                     padding-left: 6px;
+
                     &:focus {
                       box-shadow: none;
                       outline: none;
@@ -243,6 +255,7 @@ $defaultValues: (
                 }
               }
             }
+
             .quote-item__totals {
               display: flex;
               flex-direction: column;
@@ -256,7 +269,7 @@ $defaultValues: (
                 flex-direction: column;
                 gap: 6px;
 
-                > div {
+                >div {
                   display: flex;
                   justify-content: flex-end;
                   align-items: baseline;
@@ -298,6 +311,7 @@ $defaultValues: (
             @media (min-width: 767px) and (max-width: 1023px) {
               .quote-item__row {
                 flex-wrap: wrap;
+
                 .field {
                   &.price_column {
                     width: 100%;
@@ -305,20 +319,25 @@ $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;
@@ -328,6 +347,7 @@ $defaultValues: (
               }
             }
           }
+
           @media (max-width: 767px) {
             .quote-item__details {
               .quote-item__header {
@@ -379,6 +399,7 @@ $defaultValues: (
           &--quoted {
             margin-bottom: 20px;
           }
+
           .label-quote {
             // font-size: 14px;
             font-weight: 400;
@@ -430,7 +451,8 @@ $defaultValues: (
             // background-color: var(--_primary-500);
           }
         }
-        & > h3 {
+
+        &>h3 {
           // font-size: 16px;
           font-weight: 700;
           // color: var(--_gray-900);
@@ -438,6 +460,7 @@ $defaultValues: (
           padding: 12px;
           border-bottom: 1px solid var(--_thm-cs-be-se-3);
         }
+
         .quote-summary-body {
           padding: 0px 16px 16px 16px;
         }
@@ -456,7 +479,7 @@ $defaultValues: (
         top: 10px;
         margin-bottom: 24px;
 
-        & > h3 {
+        &>h3 {
           // font-size: 16px;
           font-weight: 700;
           background-color: #f5f5f5;
@@ -505,6 +528,7 @@ $defaultValues: (
           background: none;
           border: none;
           cursor: pointer;
+
           span {
             display: flex;
           }
@@ -513,6 +537,7 @@ $defaultValues: (
             text-decoration: underline;
           }
         }
+
         // &_divider {
         //   border: none;
         //   border-top: 1px dashed var(--_gray-300);
@@ -583,9 +608,11 @@ $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;
@@ -596,30 +623,36 @@ $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;
           }
@@ -632,6 +665,7 @@ $defaultValues: (
           line-height: 20px;
           padding-bottom: 12x;
         }
+
         &_details {
           display: flex;
           align-items: center;
@@ -639,16 +673,21 @@ $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 */
           }
         }
 
@@ -658,11 +697,13 @@ $defaultValues: (
           gap: 10px;
           cursor: pointer;
         }
+
         &_contact {
           font-size: 14px;
           font-weight: 600;
           color: var(--_gray-900);
         }
+
         &_shipping_details {
           padding-bottom: 16px;
           margin-bottom: 16px;
@@ -679,6 +720,7 @@ $defaultValues: (
             display: flex;
             align-items: center;
             justify-content: center;
+
             span {
               font-size: 16px;
               font-weight: 600;
@@ -748,11 +790,13 @@ $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;
@@ -761,11 +805,13 @@ $defaultValues: (
         &_shipping_confirm {
           padding: 12px;
         }
+
         &_shipping_method {
           display: flex;
           flex-direction: column;
           gap: 8px;
         }
+
         .confirm_button {
           padding: 12px 24px;
           border-radius: 4px;
@@ -773,14 +819,17 @@ $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);
         }
@@ -789,10 +838,11 @@ $defaultValues: (
 
     width: 100%;
 
-    & > .wrapper {
+    &>.wrapper {
       // width: 100%;
       // height: 100%;
     }
+
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
@@ -838,4 +888,4 @@ $defaultValues: (
     //   );
     // }
   }
-}
+}

package/dist/responsive-behaviour.scss

@@ -1,29 +1,31 @@
-@use "sass:map";
-@use "sass:list";
-
-@use "./prefix-list.scss" as *;
-@use "./functions.scss" as *;
-
-$rb_cls: ".flx__rb__fxd";
-$elementSelector: '[data-div-type="element"]';
-$elementDragging: "[data-cms-new-element-dragging-v2='true']";
-$dataResizerTrue: '[data-cms-element-resizer="true"]';
-$fullView: '[data-view-state="full"]';
-$var: "--_sf-width-rb-vl";
-$selector: "[data-element-type='layouter-pro']";
-
-@mixin FlexElementResponsiveBehaviourStyles() {
-  #{$elementSelector} {
-    &#{$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;
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+@use "./prefix-list.scss" as *;
+@use "./functions.scss" as *;
+
+$rb_cls: ".flx__rb__fxd";
+$elementSelector: '[data-div-type="element"]';
+$elementDragging: "[data-cms-new-element-dragging-v2='true']";
+$dataResizerTrue: '[data-cms-element-resizer="true"]';
+$fullView: '[data-view-state="full"]';
+$var: "--_sf-width-rb-vl";
+$selector: "[data-element-type='layouter-pro']";
+
+@mixin FlexElementResponsiveBehaviourStyles() {
+  #{$elementSelector} {
+    &#{$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;
+        }
+      }
+    }
+  }
+}