wickes-css2 2.105.0-develop.7 → 2.105.0-develop.8

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

package/src/scss/pages/page_product_search.scss

@@ -304,7 +304,7 @@
     overflow-x: hidden;
 
     &__badges {
-      font-size: 0.875rem;
+      font-size: .875rem;
     }
 
     .card {
@@ -344,17 +344,9 @@
   .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 {
-  display: flex;
-  justify-content: flex-end;
+  @include make-row;
+  justify-content: space-between;
   align-items: center;
 
   .open-filters-btn {
@@ -95,8 +95,7 @@ $color-bar-radius: 3px;
 
   &__total {
     font-weight: 700;
-    font-size: 0.875rem;
-    line-height: 22px;
+    padding-left: 15px;
   }
 }
 
@@ -252,6 +251,7 @@ $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: 0.875rem;
+      font-size: .875rem;
     }
   }
 
@@ -357,6 +357,7 @@ $color-bar-radius: 3px;
         @include media-breakpoint-down(sm) {
           padding-left: 0;
           padding-right: 0;
+
         }
       }
 
@@ -402,7 +403,7 @@ $color-bar-radius: 3px;
       & .product-card__title.product-card__title-v2 {
         @include clamp-text(3);
         margin-top: 5px;
-        font-size: 0.875rem;
+        font-size: .875rem;
         font-weight: 700;
         line-height: 18px;
 
@@ -438,6 +439,7 @@ $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;
       }
@@ -451,7 +453,7 @@ $color-bar-radius: 3px;
     }
 
     .product-rating.product-rating-v2 {
-      font-size: 0.875rem;
+      font-size: .875rem;
 
       .fa-star {
         margin-right: 0;
@@ -481,6 +483,7 @@ $color-bar-radius: 3px;
           &-sqm {
             color: $red;
           }
+
         }
       }
 
@@ -500,7 +503,7 @@ $color-bar-radius: 3px;
         text-align: left;
         width: 100%;
         margin-right: 0;
-        font-size: 0.875rem;
+        font-size: .875rem;
         font-weight: 500;
         line-height: 14px;
         color: $blue-dark;
@@ -586,17 +589,9 @@ $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;
@@ -701,7 +696,7 @@ $color-bar-radius: 3px;
 
         &-active {
           transform: rotateX(180deg) scale(1.25);
-          transition: 0.4s;
+          transition: .4s;
           transform-style: preserve-3d;
           box-shadow: -1px 0 5px -1px $black;
         }
@@ -778,11 +773,12 @@ $color-bar-radius: 3px;
 
   .srp-injected {
     &__content {
-      padding: 1.25em 0.75em;
+      padding: 1.25em .75em;
     }
   }
 }
 
+
 //minified notification component styles start
 .notification {
   padding: 8px 40px;
@@ -801,7 +797,7 @@ $color-bar-radius: 3px;
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: 0.875rem;
+    font-size: .875rem;
     color: $warm-grey;
     cursor: pointer;
 
@@ -814,7 +810,7 @@ $color-bar-radius: 3px;
     position: absolute;
     right: 8px;
     top: 8px;
-    font-size: 0.875rem;
+    font-size: .875rem;
     color: $warm-grey;
     cursor: pointer;
   }
@@ -893,7 +889,6 @@ $color-bar-radius: 3px;
     }
   }
 }
-
 //minified notification component styles end
 
 //minified autocomplete component styles start
@@ -978,7 +973,6 @@ $color-bar-radius: 3px;
     }
   }
 }
-
 //minified autocomplete component styles end
 
 //minified card component styles start
@@ -1049,6 +1043,7 @@ $color-bar-radius: 3px;
     }
 
     .card__img {
+
       @include media-breakpoint-down(sm) {
         padding-top: 15px;
         padding-bottom: 10px;
@@ -1091,7 +1086,7 @@ $color-bar-radius: 3px;
 
     &_ends {
       background-color: $gray-dark-transparent75;
-      font-size: 0.75rem;
+      font-size: .75rem;
       font-weight: 500;
       line-height: 14px;
     }
@@ -1138,7 +1133,6 @@ $color-bar-radius: 3px;
   max-width: 100%;
   width: 100%;
 }
-
 //minified card component styles end
 
 //minified product-card component styles start
@@ -1193,7 +1187,7 @@ $color-bar-radius: 3px;
 .product-card__reviews,
 .filter__reviews {
   color: $warm-grey;
-  font-size: 0.75rem;
+  font-size: .75rem;
   line-height: 16px;
   margin-top: 10px;
 
@@ -1232,10 +1226,11 @@ $color-bar-radius: 3px;
       }
     }
   }
+
 }
 
 .filter__reviews {
-  font-size: 0.875rem;
+  font-size: .875rem;
   margin: 0;
   transform: translateY(3px);
 
@@ -1260,7 +1255,9 @@ $color-bar-radius: 3px;
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .product-card__reviews {
+
     .product-rating {
+
       .rating-bg {
         display: block;
       }
@@ -1299,7 +1296,7 @@ $color-bar-radius: 3px;
   line-height: 36px;
 
   .product-card__price-from {
-    font-size: 0.7em;
+    font-size: .7em;
     margin-right: 4px;
   }
 
@@ -1328,7 +1325,6 @@ $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,17 +235,9 @@
   .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 !important;
+  text-align: left;
 }
 
 .page_tradePro-rewards {
@@ -131,7 +131,7 @@ $voucher-cell-height-xl: 296px;
       color: $white;
       display: block;
       padding: 4px;
-      font-size: 0.75rem;
+      font-size: .75rem;
       font-weight: 500;
     }
 
@@ -168,7 +168,7 @@ $voucher-cell-height-xl: 296px;
 
       &-text {
         font-weight: 400;
-        font-size: 0.875rem;
+        font-size: .875rem;
       }
 
       &-button {
@@ -191,6 +191,7 @@ $voucher-cell-height-xl: 296px;
   }
 }
 
+
 @include media-breakpoint-up(md) {
   .page_tradePro-rewards {
     .voucher {

package/src/sitemap.html

@@ -528,6 +528,8 @@
                         <li><span class="page-id">5.15</span><a href="page_my-account.html" target="_blank">My Account DIY</a></li>
                         <li><a href="page_my-account-installer.html" target="_blank">My Account Installer</a></li>
                         <li><a href="page_my-account-trade-pro.html" target="_blank">My Account TradePro</a></li>
+                        <li><a href="page_my-account-trade-pro-carousel.html" target="_blank">My Account TradePro Carousel</a></li>
+                        <li><a href="page_my-account-trade-pro-carousel-double.html" target="_blank">My Account TradePro Carousel Double</a></li>
                         <li><a href="page_my-account-trade-pro-components.html" target="_blank">My Account TradePro Components</a></li>
                         <li><a href="page_personal-details.html" target="_blank">My Account Personal Details</a></li>
                         <li><a href="page_personal-details-installer.html" target="_blank">My Account Personal Details Installer</a></li>
@@ -543,6 +545,7 @@
                         <li><a href="page_my-account_address-book_tradePro.html" target="_blank">Address Book Trade Pro</a></li>
                         <li><a href="page_my-account_address-book-form.html" target="_blank">Address Book Form</a></li>
                         <li><a href="page_tradepro-discount.html" target="_blank">Trade Pro Discount</a></li>
+                        <li><a href="page_tradepro-discount-double.html" target="_blank">Trade Pro Discount (Double)</a></li>
                         <li><a href="page_tradepro-discount-app.html" target="_blank">Trade Pro Discount App</a></li>
                     </ul>
                     <h3>Project list</h3>