wickes-css2 2.112.0-develop.1 → 2.112.0-develop.4

package/src/scss/components/kitchen/_chips.scss

@@ -41,7 +41,7 @@
   border: 0;
   border-radius: 4px;
   font-weight: 400;
-  font-size: .875rem;
+  font-size: 0.875rem;
   line-height: 24px;
   cursor: pointer;
   white-space: nowrap;
@@ -54,7 +54,7 @@
 
   &:active,
   &:focus,
-  &:focus-visible, {
+  &:focus-visible {
     .pf-chip__close {
       color: $gray-dark;
     }
@@ -77,7 +77,7 @@
     color: $warm-grey;
     line-height: 1;
     pointer-events: none;
-    font-size: .911rem;
+    font-size: 0.911rem;
   }
 }
 
@@ -109,12 +109,13 @@
     outline-offset: 2px;
   }
 
-  .fa, .fas, .far {
-    font-size: .75rem;
+  .fa,
+  .fas,
+  .far {
+    font-size: 0.75rem;
   }
 }
 
-
 @include media-breakpoint-up(md) {
   .plp-selected {
     &.desktop {

package/src/scss/components/kitchen/_filter-card.scss

@@ -71,7 +71,7 @@
     color: $white;
     font-size: 12px;
     opacity: 0;
-    transition: opacity .15s ease-in-out;
+    transition: opacity 0.15s ease-in-out;
   }
 }
 

package/src/scss/components/kitchen/_sort-by.scss

@@ -15,7 +15,7 @@
     right: 22px;
     color: $warm-grey;
     font-size: 12px;
-    transition: transform .2s;
+    transition: transform 0.2s;
   }
 
   .sort-dd {
@@ -114,7 +114,7 @@
       right: 14px;
       color: $blue;
       font-size: 12px;
-      transition: transform .2s;
+      transition: transform 0.2s;
     }
   }
 }
@@ -168,7 +168,6 @@
   opacity: 1;
 }
 
-
 @include media-breakpoint-up(md) {
   .sort--desktop {
     display: flex;

package/src/scss/components/kitchen/strip-stickers.scss

@@ -5,7 +5,7 @@
 
   .strip-sticker {
     padding: 4px 12px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;

package/src/scss/components/loader.scss

@@ -36,7 +36,7 @@
       display: inline-block;
       box-sizing: content-box;
       opacity: 1;
-      animation: spin .7s infinite linear;
+      animation: spin 0.7s infinite linear;
       border: 8px solid $black-transparent20;
       border-top-color: $white;
       border-radius: 100%;
@@ -133,7 +133,7 @@
   z-index: 2;
   width: 100%;
   height: 100%;
-  background: rgba(255, 255, 255, .5);
+  background: rgba(255, 255, 255, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -161,7 +161,7 @@
   &--full-page {
     z-index: 150;
     position: fixed;
-    background: rgba(255, 255, 255, .8);
+    background: rgba(255, 255, 255, 0.8);
 
     .loader-container {
       width: calc(100% - 40px);
@@ -200,14 +200,13 @@
       text-align: center;
       font-style: normal;
       font-weight: 500;
-      font-size: .75rem;
+      font-size: 0.75rem;
       line-height: 16px;
       margin-bottom: 0;
     }
   }
 }
 
-
 @keyframes rotate {
   to {
     transform: rotate(360deg);
@@ -236,7 +235,7 @@
   flex-direction: column;
   z-index: 101;
   position: fixed;
-  background: rgba(255, 255, 255, .8);
+  background: rgba(255, 255, 255, 0.8);
 
   h2 {
     margin-top: 25px;

package/src/scss/components/my-account/_active-orders.scss

@@ -27,7 +27,7 @@
 
     .link {
       font-weight: 500;
-      font-size: .875rem;
+      font-size: 0.875rem;
       line-height: 1.375rem;
       text-align: center;
       color: $blue;
@@ -67,7 +67,7 @@
   }
 
   &-status {
-    background: rgba(2, 119, 189, .1);
+    background: rgba(2, 119, 189, 0.1);
     padding: 2px 8px;
     border-radius: 50px;
     font-weight: 500;
@@ -82,7 +82,7 @@
     }
 
     &.completed {
-      background: rgba(103, 165, 9, .1);
+      background: rgba(103, 165, 9, 0.1);
 
       .icon {
         color: $green;
@@ -90,7 +90,7 @@
     }
 
     &.cancelled {
-      background: rgba(207, 0, 15, .1);
+      background: rgba(207, 0, 15, 0.1);
 
       .icon {
         color: $red;
@@ -124,7 +124,7 @@
       padding-left: 8px;
       margin-left: 8px;
       font-weight: 400;
-      font-size: .875rem;
+      font-size: 0.875rem;
       line-height: 1.375rem;
       color: $gray-dark;
 
@@ -145,7 +145,7 @@
       display: block;
       margin-top: 4px;
       font-weight: 400;
-      font-size: .875rem;
+      font-size: 0.875rem;
       line-height: 1.375rem;
       color: $gray-dark;
     }

package/src/scss/components/my-account/_consignment-info.scss

@@ -6,7 +6,7 @@
   margin-top: 12px;
   margin-bottom: 0;
   font-weight: 400;
-  font-size: .75rem;
+  font-size: 0.75rem;
   line-height: 1rem;
   color: $gray-dark;
 
@@ -16,7 +16,7 @@
 
   .icon-info-component {
     cursor: pointer;
-    font-size: .675rem;
+    font-size: 0.675rem;
     width: 16px;
     height: 16px;
     display: inline-flex;
@@ -41,6 +41,6 @@
   .consignment-info {
     margin-top: 0;
     margin-left: 16px;
-    font-size: .875rem;
+    font-size: 0.875rem;
   }
 }

package/src/scss/components/my-account/_contacts.scss

@@ -42,7 +42,7 @@
   }
 
   &__description {
-    font-size: .875rem;
+    font-size: 0.875rem;
     font-style: normal;
     font-weight: 400;
     line-height: 1.375rem;
@@ -115,7 +115,7 @@
       }
     }
   }
-};
+}
 
 @include media-breakpoint-up(lg) {
   .contacts__item {

package/src/scss/components/my-account/_menu.scss

@@ -39,7 +39,7 @@
     border-radius: 50px;
     width: 18px;
     height: 18px;
-    font-size: .75rem;
+    font-size: 0.75rem;
     font-weight: 500;
     line-height: 1rem;
     margin-left: 10px;
@@ -180,7 +180,7 @@
     &__description {
       display: block;
       margin-top: 16px;
-      font-size: .875rem;
+      font-size: 0.875rem;
       font-weight: 400;
       line-height: 1.375rem;
       color: $gray-dark;

package/src/scss/components/my-account/_mobile-nav.scss

@@ -30,7 +30,7 @@
 
     .custom-icon {
       width: auto;
-      font-size: .65rem;
+      font-size: 0.65rem;
       height: auto;
 
       path {
@@ -48,7 +48,7 @@
   &__link {
     display: flex;
     font-weight: 500;
-    font-size: .875rem;
+    font-size: 0.875rem;
     line-height: 1.375rem;
     color: $gray-dark;
     text-decoration: none;
@@ -81,7 +81,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: .75rem;
+    font-size: 0.75rem;
     font-weight: 500;
     line-height: 1rem;
   }
@@ -112,7 +112,7 @@
 
     &__holder {
       padding: 0;
-      box-shadow: 0 0 8px rgba(0, 0, 0, .12);
+      box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
       background: $white;
       border-radius: 4px;
       z-index: 5;

package/src/scss/components/my-account/_order-process.scss

@@ -63,12 +63,12 @@
 
     .icon {
       color: $warm-grey;
-      font-size: .675rem;
+      font-size: 0.675rem;
     }
   }
 
   &__title {
-    font-size: .75rem;
+    font-size: 0.75rem;
     font-weight: 500;
     line-height: 1rem;
     position: absolute;
@@ -124,7 +124,7 @@
       height: 32px;
 
       .icon {
-        font-size: .875rem;
+        font-size: 0.875rem;
       }
     }
 

package/src/scss/components/my-account/_order-status.scss

@@ -1,5 +1,5 @@
 .order-status {
-  background: rgba(2, 119, 189, .1);
+  background: rgba(2, 119, 189, 0.1);
   padding: 2px 8px;
   border-radius: 50px;
   font-weight: 500;
@@ -14,7 +14,7 @@
   }
 
   &.completed {
-    background: rgba(103, 165, 9, .1);
+    background: rgba(103, 165, 9, 0.1);
 
     .icon {
       color: $green;
@@ -22,7 +22,7 @@
   }
 
   &.cancelled {
-    background: rgba(207, 0, 15, .1);
+    background: rgba(207, 0, 15, 0.1);
 
     .icon {
       color: $red;

package/src/scss/components/my-account/_orders-nav.scss

@@ -30,7 +30,7 @@
       font-weight: 500;
       line-height: 22px;
       color: $gray-dark;
-      transition: all .3s;
+      transition: all 0.3s;
 
       &:hover {
         color: $blue;

package/src/scss/components/my-account/_payment-status.scss

@@ -24,12 +24,12 @@
   }
 
   &__content {
-    font-size: .75rem;
+    font-size: 0.75rem;
     line-height: 1rem;
   }
 
   &__text {
-    font-size: .75rem;
+    font-size: 0.75rem;
     font-weight: 400;
     line-height: 1rem;
   }

package/src/scss/components/my-account/_saving-totaliser.scss

@@ -4,7 +4,8 @@
   color: $white;
   margin-bottom: 40px;
 
-  .heading-1, .heading-2 {
+  .heading-1,
+  .heading-2 {
     text-align: left;
   }
 
@@ -37,14 +38,14 @@
   }
 
   &__cell {
-    background: rgba($white, .08);
+    background: rgba($white, 0.08);
     padding: 16px;
     flex: 1;
     position: relative;
 
     &-title {
       margin-bottom: 4px;
-      color: rgba($white, .8);
+      color: rgba($white, 0.8);
     }
   }
 
@@ -56,7 +57,8 @@
     margin-bottom: 4px;
   }
 
-  &__wrapper, &__wrapper2 {
+  &__wrapper,
+  &__wrapper2 {
     display: flex;
     flex-direction: column;
     gap: 16px;
@@ -68,7 +70,7 @@
 
   &__divider {
     width: 1px;
-    background: rgba($white, .8);
+    background: rgba($white, 0.8);
   }
 
   &__split-cell {
@@ -89,7 +91,7 @@
 
   &__note {
     @include additional-text;
-    color: rgba($white, .8);
+    color: rgba($white, 0.8);
   }
 }
 
@@ -172,4 +174,3 @@
     }
   }
 }
-

package/src/scss/components/my-account/_shipment.scss

@@ -36,7 +36,7 @@
     &__title,
     &__info,
     &__count {
-      font-size: .75rem;
+      font-size: 0.75rem;
       line-height: 1rem;
       color: $squant;
     }
@@ -50,7 +50,7 @@
     .track-link {
       text-decoration: none;
       font-weight: 500;
-      font-size: .75rem;
+      font-size: 0.75rem;
       line-height: 1rem;
       color: $blue;
       max-width: max-content;

package/src/scss/components/pdf-loader.scss

@@ -20,7 +20,7 @@
     gap: 10px;
 
     &--disable {
-      opacity: .5;
+      opacity: 0.5;
       pointer-events: none;
 
       .pdf-loader__button {
@@ -56,7 +56,6 @@
   }
 }
 
-
 @include media-breakpoint-up(lg) {
   .pdf-loader {
     gap: 0;

package/src/scss/components/price-block-v2-critical.scss

@@ -52,7 +52,6 @@
   }
 
   .pdp-price-sale__value {
-
     .pdp-price__sqm {
       color: $red;
     }

package/src/scss/components/price-block-v2.scss

@@ -73,7 +73,6 @@
   }
 
   .pdp-price-sale__value {
-
     .pdp-price__sqm {
       color: $red;
     }
@@ -90,14 +89,12 @@
   }
 
   .pdp-price__terms {
-
     & a:hover {
       color: $gray-dark;
     }
   }
 
   .pdp-price__control-installation {
-
     & > .btn-secondary {
       &:focus {
         background-color: $white;

package/src/scss/components/store-locator-v2-details.scss

@@ -153,14 +153,14 @@
     }
 
     &__reason {
-      font-size: .875rem;
+      font-size: 0.875rem;
       line-height: 1.375rem;
       font-weight: 700;
       margin-bottom: 0;
     }
 
     &__day {
-      font-size: .75rem;
+      font-size: 0.75rem;
       font-weight: 400;
       line-height: 1rem;
     }

package/src/scss/components/strip-stickers.scss

@@ -5,7 +5,7 @@
 
   .strip-sticker {
     padding: 4px 12px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;

package/src/scss/helpers/_elements.scss

@@ -52,7 +52,6 @@
     color: $warm-grey;
     opacity: 1;
   }
-
 }
 
 @mixin dropdown {

package/src/scss/helpers/_mixins.scss

@@ -61,8 +61,8 @@
 
 @mixin footer-link {
   text-decoration: none;
-  font-size: .875rem;
-  letter-spacing: .13px;
+  font-size: 0.875rem;
+  letter-spacing: 0.13px;
   text-transform: capitalize;
   color: $blue-dark;
 }
@@ -141,11 +141,11 @@
 }
 
 @mixin font-size($font-size-px) {
-  font-size: #{$font-size-px / 16}rem;
+  font-size: #{$font-size-px * 0.0625}rem;
 }
 
 @mixin line-height($line-height-px) {
-  line-height: #{$line-height-px / 16}rem;
+  line-height: #{$line-height-px * 0.0625}rem;
 }
 
 @mixin multiline-ellipsis($line-count: 1) {
@@ -162,5 +162,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: #{$font-size-px / 16}rem;
+  font-size: #{$font-size-px * 0.0625}rem;
 }

package/src/scss/helpers/_store-locator-elements.scss

@@ -52,7 +52,6 @@
     color: $warm-grey;
     opacity: 1;
   }
-
 }
 
 @mixin dropdown {

package/src/scss/helpers/_typography.scss

@@ -63,8 +63,8 @@
 }
 
 @mixin info-text {
-  font-size: .75rem;
-  line-height: .875rem;
+  font-size: 0.75rem;
+  line-height: 0.875rem;
 }
 
 @mixin primary-text {
@@ -78,6 +78,6 @@
 }
 
 @mixin additional-text {
-  font-size: .75rem;
+  font-size: 0.75rem;
   line-height: 1rem;
 }

package/src/scss/helpers/_utilities.scss

@@ -7,7 +7,6 @@
 }
 
 .prewrap-btn {
-
   .btn {
     white-space: pre-wrap;
   }

package/src/scss/helpers/helpers-pdp-critical/_CTAs-critical-pdp.scss

@@ -10,7 +10,7 @@ $red: #cf000f;
 $green: #67a509;
 $gray-dim: #656565;
 $gray-matt: #515151;
-$black-transparent20: rgba(0, 0, 0, .2);
+$black-transparent20: rgba(0, 0, 0, 0.2);
 
 @mixin link-primary {
   color: $gray-dark;

package/src/scss/helpers/helpers-pdp-critical/_elements-critical-pdp.scss

@@ -52,7 +52,6 @@
     color: $warm-grey;
     opacity: 1;
   }
-
 }
 
 @mixin dropdown {

package/src/scss/helpers/helpers-pdp-critical/_helpers-critical-pdp.scss

@@ -84,7 +84,7 @@
 
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
+  @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);
 }
 
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {

package/src/scss/helpers/helpers-pdp-critical/_typography-critical-pdp.scss

@@ -1,4 +1,4 @@
-$font-size-base: .875rem;
+$font-size-base: 0.875rem;
 $line-height-base: 1.57142857;
 
 @mixin heading-1 {
@@ -66,8 +66,8 @@ $line-height-base: 1.57142857;
 }
 
 @mixin info-text {
-  font-size: .75rem;
-  line-height: .875rem;
+  font-size: 0.75rem;
+  line-height: 0.875rem;
 }
 
 @mixin primary-text {
@@ -81,6 +81,6 @@ $line-height-base: 1.57142857;
 }
 
 @mixin additional-text {
-  font-size: .75rem;
+  font-size: 0.75rem;
   line-height: 1rem;
 }