wickes-css2 2.105.0-develop.1 → 2.105.0-develop.10

package/src/scss/main.scss

@@ -3,76 +3,76 @@
 @import 'common/vat-toggle';
 
 // Components
-@import 'components/request-pass';//checkout & my-acc + tradepro
-@import 'components/popup-delivery';//checkout
-@import 'components/user-address';//checkout & my-acc + tradepro & components (recheck for modal-content class)
-@import 'components/order-header';//my-acc + tradepro
-@import 'components/merge-basket-options';//checkout & components
-@import 'components/tables';//my-acc + tradepro
-@import 'components/video';//iframe video(to be checked if is used)
+@import 'components/request-pass'; //checkout & my-acc + tradepro
+@import 'components/popup-delivery'; //checkout
+@import 'components/user-address'; //checkout & my-acc + tradepro & components (recheck for modal-content class)
+@import 'components/order-header'; //my-acc + tradepro
+@import 'components/merge-basket-options'; //checkout & components
+@import 'components/tables'; //my-acc + tradepro
+@import 'components/video'; //iframe video(to be checked if is used)
 
-@import 'components/modal-slider';//deep dependence
-@import 'components/product-card';//deep dependence
-@import 'components/product-card-preview';//deep dependence
-@import 'components/your-details';//deep dependence
-@import 'components/map';//deep dependence
-@import 'components/aside-nav2';//deep dependence
-@import 'components/account-heading';//deep dependence
-@import 'components/card-store-locator';//deep dependence
-@import 'components/offer-banner';//deep dependence
-@import 'components/pagination';//deep dependence
-@import 'components/price-block';//deep dependence
-@import 'components/back-to-top';//deep dependence
-@import 'components/payments';//deep dependence
-@import 'components/notifications';//deep dependence
-@import 'components/popover-mini-basket';//deep dependence
+@import 'components/modal-slider'; //deep dependence
+@import 'components/product-card'; //deep dependence
+@import 'components/product-card-preview'; //deep dependence
+@import 'components/your-details'; //deep dependence
+@import 'components/map'; //deep dependence
+@import 'components/aside-nav2'; //deep dependence
+@import 'components/account-heading'; //deep dependence
+@import 'components/card-store-locator'; //deep dependence
+@import 'components/offer-banner'; //deep dependence
+@import 'components/pagination'; //deep dependence
+@import 'components/price-block'; //deep dependence
+@import 'components/back-to-top'; //deep dependence
+@import 'components/payments'; //deep dependence
+@import 'components/notifications'; //deep dependence
+@import 'components/popover-mini-basket'; //deep dependence
 @import 'components/custom-slider';
-@import 'components/lines-group';//deep dependence
-@import 'components/autocomplete';//deep dependence
-@import 'components/card';//deep dependence
-@import 'components/accordion';//deep dependence
-@import 'components/order-line';//deep dependence
-@import 'components/clamp';//deep
-@import 'components/cookies-policy';//deep dependence
+@import 'components/lines-group'; //deep dependence
+@import 'components/autocomplete'; //deep dependence
+@import 'components/card'; //deep dependence
+@import 'components/accordion'; //deep dependence
+@import 'components/order-line'; //deep dependence
+@import 'components/clamp'; //deep
+@import 'components/cookies-policy'; //deep dependence
 @import 'components/snack-bar';
 //used in many pages
 
-@import 'components/card-slider';// pdp, home, top-rated
-@import 'components/pagination__shopping-list';//only shopping list
-@import 'components/search-filter';//plp & product-search & search result
-@import 'components/category-tree';//product-search & plp
-@import 'components/steps';//checkout & in-store & tradePro
-@import 'components/steps-three';//checkout progress bar for three steps
-@import 'components/modal-box';//pdp & checkout & kitchen-claims
-@import 'components/legal-info';//plp + product search + search result
-@import 'components/card-store-collect';//pdp + shopping list
-@import 'components/click-and-collect-modal';// pdp + shopping list
-@import 'components/find-a-store';//store locator + components
-@import 'components/page-overlay';//homepage & pdp + checkout
-@import 'components/not-logged-in-message';//pdp + shopping list
-@import 'components/order-line-shop-list';//shopping list
-@import 'components/share-list-modal';//shopping list
-@import 'components/shopping-list';//shopping list
-@import 'components/shopping-list-note';//shopping list
-@import 'components/project-list-total';//shopping list
-@import 'components/counter-list';//shopping list
-@import 'components/shared-shopping-list';//shopping list
-@import 'components/price-badges';//plp + pdp + product search + badges
-@import 'components/loader';//installer + checkout + loader page
-@import 'components/trade-pro-extras';//only tp
-@import 'components/payment-transactions';//wismo-asm + my-acc-asm
-@import 'components/wismo-info-banner';//only wismo
-@import 'components/charity-donations';//shopping cart
-@import 'components/donation-cart';//shopping cart charity
-@import 'components/checkout-loader-modal';//checkout
-@import 'components/range-card';//range cards
-@import 'components/finance';//partially not used(finance class)
-@import 'components/tc-generic';//tiling calculator
-@import 'components/tc-generic-floor';//tiling calculator
-@import 'components/next-steps';//tiling calculator
-@import 'components/card-color-slider';//range cards
-@import 'components/gallery';//range cards
-@import 'components/tabs';//range cards
+@import 'components/card-slider'; // pdp, home, top-rated
+@import 'components/pagination__shopping-list'; //only shopping list
+@import 'components/search-filter'; //plp & product-search & search result
+@import 'components/category-tree'; //product-search & plp
+@import 'components/steps'; //checkout & in-store & tradePro
+@import 'components/steps-three'; //checkout progress bar for three steps
+@import 'components/modal-box'; //pdp & checkout & kitchen-claims
+@import 'components/legal-info'; //plp + product search + search result
+@import 'components/card-store-collect'; //pdp + shopping list
+@import 'components/click-and-collect-modal'; // pdp + shopping list
+@import 'components/find-a-store'; //store locator + components
+@import 'components/page-overlay'; //homepage & pdp + checkout
+@import 'components/not-logged-in-message'; //pdp + shopping list
+@import 'components/order-line-shop-list'; //shopping list
+@import 'components/share-list-modal'; //shopping list
+@import 'components/shopping-list'; //shopping list
+@import 'components/shopping-list-note'; //shopping list
+@import 'components/project-list-total'; //shopping list
+@import 'components/counter-list'; //shopping list
+@import 'components/shared-shopping-list'; //shopping list
+@import 'components/price-badges'; //plp + pdp + product search + badges
+@import 'components/loader'; //installer + checkout + loader page
+@import 'components/trade-pro-extras'; //only tp
+@import 'components/payment-transactions'; //wismo-asm + my-acc-asm
+@import 'components/wismo-info-banner'; //only wismo
+@import 'components/charity-donations'; //shopping cart
+@import 'components/donation-cart'; //shopping cart charity
+@import 'components/checkout-loader-modal'; //checkout
+@import 'components/range-card'; //range cards
+@import 'components/finance'; //partially not used(finance class)
+@import 'components/tc-generic'; //tiling calculator
+@import 'components/tc-generic-floor'; //tiling calculator
+@import 'components/next-steps'; //tiling calculator
+@import 'components/card-color-slider'; //range cards
+@import 'components/gallery'; //range cards
+@import 'components/tabs'; //range cards
 @import 'components/order-summary'; //checkout
 @import 'components/checkout-action'; //checkout
 @import 'components/checkout-header'; //checkout

package/src/scss/pages/my-account-v2.scss

@@ -9,6 +9,7 @@
 @import '../components/my-account/barcode';
 @import '../components/my-account/discount';
 @import '../components/my-account/clipboard-code';
+@import '../components/my-account/cards-swap';
 @import '../components/my-account/payment-status';
 @import '../libs/font-awesome-icons';
 @import '../components/my-account/payment-status';
@@ -50,7 +51,7 @@
       background: $virid-darker;
       color: $white;
       padding: 4px 5px;
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
   }
 
@@ -79,10 +80,10 @@
       color: $blue;
       display: flex;
       align-items: center;
-      transition: all .3s;
+      transition: all 0.3s;
 
       &:hover {
-        opacity: .7;
+        opacity: 0.7;
         text-decoration: underline;
       }
 
@@ -108,6 +109,10 @@
       color: $white;
       padding: 16px;
       width: 100%;
+
+      &--secondary {
+        background: $gray-wait;
+      }
     }
   }
 
@@ -124,6 +129,10 @@
   .greetings {
     word-break: break-all;
 
+    &--secondary {
+      color: $black;
+    }
+
     .title {
       font-weight: 500;
       font-size: 1.625rem;
@@ -161,7 +170,7 @@
 }
 
 .tooltip {
-  filter: drop-shadow(0 0 8px rgba(0, 0, 0, .12));
+  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.12));
   position: absolute;
 
   .tooltip-inner {
@@ -170,7 +179,7 @@
     padding: 8px 16px !important;
     border-radius: 4px;
     font-weight: 400;
-    font-size: .75rem;
+    font-size: 0.75rem;
     line-height: 1rem;
   }
 
@@ -180,6 +189,10 @@
 }
 
 @include media-breakpoint-up(sm) {
+  .d-sm-grid {
+    display: grid !important;
+  }
+
   .my-account {
     .account-actions {
       padding-top: 32px;
@@ -233,6 +246,12 @@
         .clipboard-code {
           align-items: center;
         }
+
+        &--double {
+          .discount {
+            grid-row: auto;
+          }
+        }
       }
     }
 
@@ -240,6 +259,16 @@
       padding-top: 24px;
     }
   }
+
+  .my-account {
+    .cards-swap {
+      .account-summary {
+        &__wrapper {
+          grid-template-rows: auto;
+        }
+      }
+    }
+  }
 }
 
 @include media-breakpoint-up(md) {
@@ -270,6 +299,10 @@
       &__wrapper {
         grid-template-columns: minmax(auto, 502px) repeat(2, minmax(auto, 223px));
 
+        &--double {
+          grid-template-columns: repeat(2, 1fr);
+        }
+
         .clipboard-code,
         .discount {
           padding-top: 20px;
@@ -325,6 +358,10 @@
       &__wrapper {
         grid-template-columns: minmax(auto, 502px) 1fr 1fr;
 
+        &--double {
+          grid-template-columns: repeat(2, 1fr);
+        }
+
         .icon-wrap {
           width: 48px;
           height: 48px;

package/src/scss/pages/page_discount.scss

@@ -47,6 +47,10 @@
         margin-bottom: 8px;
       }
     }
+
+    &--secondary {
+      background: $gray-wait;
+    }
   }
 
   .app-info {
@@ -106,10 +110,6 @@
 
 @include media-breakpoint-up(md) {
   .discount-offer {
-    &__wrap {
-      padding-bottom: 72px;
-    }
-
     &__header {
       padding-top: 40px;
 
@@ -183,6 +183,10 @@
     &__body {
       grid-template-columns: repeat(3, 1fr);
 
+      &--double {
+        grid-template-columns: 1fr 2fr;
+      }
+
       .clipboard-code.discount-code {
         grid-column: auto;
       }

package/src/scss/pages/page_product-details-v2.scss

@@ -41,7 +41,6 @@
   }
 
   &__gallery {
-
     @include media-breakpoint-up(md) {
       grid-column-start: 1;
       grid-row-start: 2;
@@ -170,11 +169,9 @@
 }
 
 .recently-viewed {
-
   @include media-breakpoint-down(md) {
     display: none;
   }
-
 }
 
 .review-star {
@@ -229,7 +226,7 @@
 }
 
 .review-star-average-v2 {
-  font-size: .875rem;
+  font-size: 0.875rem;
   vertical-align: 15%;
 }
 

package/src/scss/pages/page_product_search.scss

@@ -304,7 +304,7 @@
     overflow-x: hidden;
 
     &__badges {
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
 
     .card {
@@ -344,9 +344,17 @@
   .sort-products-list {
     &__section {
       @include make-col(6);
+      color: black;
+      border: none;
+
+      > .form-row {
+        margin-bottom: 0;
+      }
     }
 
     &__pagination {
+      margin-top: 20px;
+
       .pagination {
         &:not(.pagination_tablet) {
           display: none;

package/src/scss/pages/page_products-list-combined.scss

@@ -66,8 +66,8 @@ $color-bar-radius: 3px;
 }
 
 .sort-products-list {
-  @include make-row;
-  justify-content: space-between;
+  display: flex;
+  justify-content: flex-end;
   align-items: center;
 
   .open-filters-btn {
@@ -95,7 +95,8 @@ $color-bar-radius: 3px;
 
   &__total {
     font-weight: 700;
-    padding-left: 15px;
+    font-size: 0.875rem;
+    line-height: 22px;
   }
 }
 
@@ -251,7 +252,6 @@ $color-bar-radius: 3px;
 }
 
 .products-list-v2 {
-
   @include media-breakpoint-down(sm) {
     margin-right: -5px;
     margin-left: -5px;
@@ -266,7 +266,7 @@ $color-bar-radius: 3px;
     font-size: 1rem;
 
     @include media-breakpoint-down(sm) {
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
   }
 
@@ -357,7 +357,6 @@ $color-bar-radius: 3px;
         @include media-breakpoint-down(sm) {
           padding-left: 0;
           padding-right: 0;
-
         }
       }
 
@@ -403,7 +402,7 @@ $color-bar-radius: 3px;
       & .product-card__title.product-card__title-v2 {
         @include clamp-text(3);
         margin-top: 5px;
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 700;
         line-height: 18px;
 
@@ -439,7 +438,6 @@ $color-bar-radius: 3px;
     &__price-value.product-card__price-value.product-card__price-value {
       font-size: 1.5rem;
 
-
       @media screen and (max-width: 321px) {
         font-size: 1.125rem;
       }
@@ -453,7 +451,7 @@ $color-bar-radius: 3px;
     }
 
     .product-rating.product-rating-v2 {
-      font-size: .875rem;
+      font-size: 0.875rem;
 
       .fa-star {
         margin-right: 0;
@@ -483,7 +481,6 @@ $color-bar-radius: 3px;
           &-sqm {
             color: $red;
           }
-
         }
       }
 
@@ -503,7 +500,7 @@ $color-bar-radius: 3px;
         text-align: left;
         width: 100%;
         margin-right: 0;
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 500;
         line-height: 14px;
         color: $blue-dark;
@@ -589,9 +586,17 @@ $color-bar-radius: 3px;
   .sort-products-list {
     &__section {
       @include make-col(6);
+      color: black;
+      border: none;
+
+      > .form-row {
+        margin-bottom: 0;
+      }
     }
 
     &__pagination {
+      margin-top: 20px;
+
       .pagination {
         &:not(.pagination_tablet) {
           display: none;
@@ -696,7 +701,7 @@ $color-bar-radius: 3px;
 
         &-active {
           transform: rotateX(180deg) scale(1.25);
-          transition: .4s;
+          transition: 0.4s;
           transform-style: preserve-3d;
           box-shadow: -1px 0 5px -1px $black;
         }
@@ -773,12 +778,11 @@ $color-bar-radius: 3px;
 
   .srp-injected {
     &__content {
-      padding: 1.25em .75em;
+      padding: 1.25em 0.75em;
     }
   }
 }
 
-
 //minified notification component styles start
 .notification {
   padding: 8px 40px;
@@ -797,7 +801,7 @@ $color-bar-radius: 3px;
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
 
@@ -810,7 +814,7 @@ $color-bar-radius: 3px;
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     color: $warm-grey;
     cursor: pointer;
   }
@@ -889,6 +893,7 @@ $color-bar-radius: 3px;
     }
   }
 }
+
 //minified notification component styles end
 
 //minified autocomplete component styles start
@@ -973,6 +978,7 @@ $color-bar-radius: 3px;
     }
   }
 }
+
 //minified autocomplete component styles end
 
 //minified card component styles start
@@ -1043,7 +1049,6 @@ $color-bar-radius: 3px;
     }
 
     .card__img {
-
       @include media-breakpoint-down(sm) {
         padding-top: 15px;
         padding-bottom: 10px;
@@ -1086,7 +1091,7 @@ $color-bar-radius: 3px;
 
     &_ends {
       background-color: $gray-dark-transparent75;
-      font-size: .75rem;
+      font-size: 0.75rem;
       font-weight: 500;
       line-height: 14px;
     }
@@ -1133,6 +1138,7 @@ $color-bar-radius: 3px;
   max-width: 100%;
   width: 100%;
 }
+
 //minified card component styles end
 
 //minified product-card component styles start
@@ -1187,7 +1193,7 @@ $color-bar-radius: 3px;
 .product-card__reviews,
 .filter__reviews {
   color: $warm-grey;
-  font-size: .75rem;
+  font-size: 0.75rem;
   line-height: 16px;
   margin-top: 10px;
 
@@ -1226,11 +1232,10 @@ $color-bar-radius: 3px;
       }
     }
   }
-
 }
 
 .filter__reviews {
-  font-size: .875rem;
+  font-size: 0.875rem;
   margin: 0;
   transform: translateY(3px);
 
@@ -1255,9 +1260,7 @@ $color-bar-radius: 3px;
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .product-card__reviews {
-
     .product-rating {
-
       .rating-bg {
         display: block;
       }
@@ -1296,7 +1299,7 @@ $color-bar-radius: 3px;
   line-height: 36px;
 
   .product-card__price-from {
-    font-size: .7em;
+    font-size: 0.7em;
     margin-right: 4px;
   }
 
@@ -1325,6 +1328,7 @@ $color-bar-radius: 3px;
     text-decoration-color: $line-through;
   }
 }
+
 //minified product-card component styles end
 
 @include media-breakpoint-down(sm) {

package/src/scss/pages/page_products-list.scss

@@ -235,9 +235,17 @@
   .sort-products-list {
     &__section {
       @include make-col(6);
+      color: black;
+      border: none;
+
+      > .form-row {
+        margin-bottom: 0;
+      }
     }
 
     &__pagination {
+      margin-top: 20px;
+
       .pagination {
         &:not(.pagination_tablet) {
           display: none;

package/src/scss/pages/tradePro-rewards.scss

@@ -7,7 +7,7 @@ $voucher-cell-height-lg: 246px;
 $voucher-cell-height-xl: 296px;
 
 .text-start {
-  text-align: left;
+  text-align: left !important;
 }
 
 .page_tradePro-rewards {
@@ -131,7 +131,7 @@ $voucher-cell-height-xl: 296px;
       color: $white;
       display: block;
       padding: 4px;
-      font-size: .75rem;
+      font-size: 0.75rem;
       font-weight: 500;
     }
 
@@ -168,7 +168,7 @@ $voucher-cell-height-xl: 296px;
 
       &-text {
         font-weight: 400;
-        font-size: .875rem;
+        font-size: 0.875rem;
       }
 
       &-button {
@@ -191,7 +191,6 @@ $voucher-cell-height-xl: 296px;
   }
 }
 
-
 @include media-breakpoint-up(md) {
   .page_tradePro-rewards {
     .voucher {

package/src/scss/plp-main.scss

@@ -27,6 +27,7 @@
 @import 'components/clamp-content';
 @import 'components/card-product-banner';
 @import 'components/shop-colour';
+@import 'components/quick-filter';
 
 // Pages
 @import 'pages/page_products-list-combined';