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

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/_checkout-confirmation-new.scss

@@ -23,6 +23,7 @@
     }
 
     &__title {
+      margin-bottom: 16px;
       font-size: 1.625rem;
       line-height: 1.875rem;
       font-weight: 400;
@@ -70,7 +71,7 @@
 
     &__info {
       text-align: center;
-      font-size: .875rem;
+      font-size: 0.875rem;
       max-width: 500px;
       margin: 0 auto;
       padding: 44px 0 50px;
@@ -103,7 +104,7 @@
       }
 
       &__subscribe-message {
-        font-size: .875rem;
+        font-size: 0.875rem;
       }
     }
   }
@@ -163,7 +164,7 @@
           @include make-col(12);
 
           .form-row__label {
-            font-size: .875rem;
+            font-size: 0.875rem;
             line-height: 1rem;
           }
 
@@ -208,7 +209,7 @@
           }
 
           &-vat {
-            font-size: .75rem;
+            font-size: 0.75rem;
             margin-top: -15px;
           }
         }
@@ -284,19 +285,49 @@
 
   [data-is-logged-in='true'] {
     body {
-      background: #ff0000 !important;
+      background: #f00 !important;
     }
   }
 
   [data-is-logged-in='false'] {
     body {
-      background: #0000ff !important;
+      background: #00f !important;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .page_checkout-confirmation-new {
+    .header {
+      &__title {
+        margin-bottom: 8px;
+      }
+    }
+
+    .confirmation-result {
+      &__action {
+        &-full-width {
+          display: flex;
+          flex-direction: row;
+
+          .btn {
+            width: 231px;
+            margin: 0 10px;
+          }
+        }
+      }
     }
   }
 }
 
 @include media-breakpoint-up(md) {
   .page_checkout-confirmation-new {
+    .header {
+      &__title {
+        margin-bottom: 0;
+      }
+    }
+
     .content .checkout-widget {
       &.checkout-payment {
         .checkout-widget {
@@ -368,6 +399,18 @@
         }
       }
     }
+
+    .confirmation-result {
+      &__action {
+        &-full-width {
+          padding: 48px 0;
+
+          .btn {
+            width: 220px;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -466,21 +509,6 @@
       }
     }
 
-    .confirmation-result {
-      &__action {
-        &-full-width {
-          display: flex;
-          flex-direction: row;
-          padding: 50px 0;
-
-          .btn {
-            width: 218px;
-            margin: 0 10px;
-          }
-        }
-      }
-    }
-
     .content-center {
       @include make-col(12);
     }

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;