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

package/src/page_tradepro-discount-double.html

@@ -0,0 +1,109 @@
+{{#extend
+  "my-account-v2"
+  dataBreadcrumbs=discount.tradePro.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account discount double"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  mainClass="discount-offer"
+}}
+{{#content "head" mode="append"}}
+  <link type="text/css" rel="stylesheet" href="./css/pages/page_discount.css">
+{{/content}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav
+          menu=discount.menu
+          active-index=7
+          page-name=discount.menu.[7].title
+      }}
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap pb-0">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Event: 15% off</h1>
+      </div>
+      <div class="discount-offer__body discount-offer__body--secondary  discount-offer__body--double">
+        {{> my-account/discount
+            secondary=true
+            mod="discount-offer--background-secondary"
+            discountText=my_account.tradepro2.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="trade-pro-id discount-offer--background-secondary"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Discount</h1>
+      </div>
+      <div class="discount-offer__body">
+        {{> my-account/discount
+            discountText=my_account.tradepro.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            mod="trade-pro-id"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+            mod="discount-code"
+            icon="fas fa-badge-percent"
+            title="Online discount code"
+            code=my_account.tradepro.discountCode
+            description=discount.tradePro.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="app-info">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 app-info__wrap">
+        <div class="app-info__header">
+          <h2 class="title">Download the APP</h2>
+          <p class="description">Download the Wickes TradePro App now and sign in to access your trade benefits.</p>
+          <div class="app-info__stores">
+            {{#each discount.downloadAppImages}}
+            <a href="#">
+              {{{this}}}
+            </a>
+            {{/each}}
+          </div>
+        </div>
+        <div class="download-app-img"></div>
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_tradepro-discount.html

@@ -2,7 +2,7 @@
   "my-account-v2"
   dataBreadcrumbs=discount.tradePro.breadcrumbs
   pageClass="page_my-account_new"
-  title="My Account DIY"
+  title="My Account discount"
   pageMyAcc=true
   myAccV2=true
   isLoggedIn=true
@@ -24,6 +24,40 @@
   </div>
 </div>
 
+<div class="container">
+  <div class="row">
+    <div class="col-12 discount-offer__wrap pb-0">
+      <div class="discount-offer__header">
+        <h1 class="title">TradePro Event: 15% off</h1>
+      </div>
+      <div class="discount-offer__body discount-offer__body--secondary">
+        {{> my-account/discount
+            secondary=true
+            discountText=my_account.tradepro2.discountText
+            title="In-store discount"
+            code=my_account.discount
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="trade-pro-id"
+            icon=my_account.tradepro.icons.tradeproID
+            title="TradePro ID"
+            code=my_account.tradeProId
+            description=discount.tradePro.discountIdText
+        }}
+        {{> my-account/clipboard-code-card
+            secondary=true
+            mod="discount-code"
+            icon="fas fa-badge-percent"
+            title="Online discount code"
+            code=my_account.tradepro.discountCode
+            description=my_account.tradepro2.onlineDiscountText
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="container">
   <div class="row">
     <div class="col-12 discount-offer__wrap">
@@ -32,7 +66,7 @@
       </div>
       <div class="discount-offer__body">
         {{> my-account/discount
-            discountSrc=my_account.tradepro.discount
+            discountText=my_account.tradepro.discountText
             title="In-store discount"
             code=my_account.discount
         }}

package/src/partials/head.hbs

@@ -11,6 +11,7 @@
 {{else if pagePlp}}
     <link type="text/css" rel="stylesheet" href="./css/plp-main.css">
 {{else if pageKitchenPLP}}
+    <link type="text/css" rel="stylesheet" href="./css/main.css">
     <link type="text/css" rel="stylesheet" href="./css/kitchen-plp-main.css">
 {{else if pageCat}}
     <link type="text/css" rel="stylesheet" href="./css/category-main.css">

package/src/scss/common/_common.scss

@@ -180,7 +180,7 @@ main {
   &__text {
     display: inline-block;
     vertical-align: top;
-    font-size: .875rem;
+    font-size: 0.875rem;
   }
 }
 
@@ -207,7 +207,7 @@ main {
   display: inline-block;
   padding: 2px 10px;
   background-color: $gray-bg;
-  font-size: .875rem;
+  font-size: 0.875rem;
   line-height: 1.375rem;
   border-left: 2px solid $gray;
 
@@ -318,7 +318,7 @@ main {
   border-top: 3px solid $blue-dark;
   width: 60px;
   height: 60px;
-  animation: spin .75s linear infinite;
+  animation: spin 0.75s linear infinite;
   position: absolute;
   left: calc(50% - 30px);
   top: calc(50% - 30px);
@@ -410,7 +410,8 @@ main {
 }
 
 @include media-breakpoint-down(xs) {
-  a, p {
+  a,
+  p {
     word-wrap: break-word;
   }
 
@@ -595,4 +596,9 @@ div .design-appointment {
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &--large {
+    width: 48px;
+    height: 48px;
+  }
 }

package/src/scss/components/_accordion.scss

@@ -46,7 +46,6 @@
         border-radius: 3px;
         word-wrap: break-word;
 
-
         &-icon {
           position: static;
           color: $warm-grey;
@@ -72,7 +71,6 @@
             content: '+';
             font-size: 1.77rem;
           }
-
         }
 
         &:hover {
@@ -89,7 +87,7 @@
         border-radius: 3px;
 
         &-inner {
-          font-size: .875rem;
+          font-size: 0.875rem;
           font-weight: 500;
           line-height: 18px;
         }

package/src/scss/components/_custom-slider.scss

@@ -6,8 +6,9 @@
   border-radius: 0;
   position: fixed;
   background-color: $white;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
-  transition: transform .4s ease, opacity .4s ease;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  /* prettier-ignore */
+  transition: transform 0.4s ease, opacity 0.4s ease;
   opacity: 0;
   display: flex;
   flex-direction: column;
@@ -118,7 +119,7 @@
     .messages {
       display: flex;
       flex-direction: column;
-      border: none;
+      border: 0;
       background: none;
 
       &__text {
@@ -130,7 +131,7 @@
 
       &__notice {
         margin-top: 4px;
-        font-size: .75rem;
+        font-size: 0.75rem;
         font-weight: 400;
         line-height: 1rem;
         color: $squant;
@@ -151,7 +152,7 @@
       justify-content: space-between;
       grid-gap: 8px;
       padding: 8px 0;
-      border: none;
+      border: 0;
 
       & + .products__item {
         border-top: 1px solid $gray-light;
@@ -184,7 +185,7 @@
           min-width: 24px;
           padding: 4px;
           background: 0 0;
-          border: none;
+          border: 0;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -206,7 +207,7 @@
       }
 
       .title {
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 500;
         line-height: 1.375rem;
         text-decoration: none;
@@ -214,7 +215,7 @@
       }
 
       .item {
-        font-size: .75rem;
+        font-size: 0.75rem;
         font-weight: 400;
         line-height: 1rem;
         color: $squant;
@@ -332,10 +333,10 @@
     grid-gap: 16px;
     padding: 16px;
     background: $white;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
 
     &.footer-fixed {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
       position: fixed;
       width: 100%;
       left: 0;
@@ -406,7 +407,7 @@
     }
 
     .custom-slider__footer {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.08);
       flex-direction: column;
     }
   }
@@ -436,7 +437,7 @@
           font-weight: 700;
         }
 
-        &[aria-expanded="true"] {
+        &[aria-expanded='true'] {
           .icon-wrap .arrow-icon {
             transform: rotate(180deg);
           }
@@ -519,7 +520,7 @@
 
           .checkout-widget__details-hidden {
             padding-left: 15px;
-            font-size: .75rem;
+            font-size: 0.75rem;
             line-height: 1rem;
             list-style-type: disc;
             font-weight: 400;
@@ -530,11 +531,11 @@
             .icon {
               color: $blue;
               font-size: 1rem;
-              transition: all .3s ease;
+              transition: all 0.3s ease;
               transform: rotate(180deg);
             }
 
-            &[aria-expanded="true"] {
+            &[aria-expanded='true'] {
               .icon {
                 transform: rotate(0);
               }
@@ -599,7 +600,7 @@
       margin-top: 12px;
 
       &__details .title {
-        @include multiline-ellipsis();
+        @include multiline-ellipsis(1);
       }
 
       &__item {

package/src/scss/components/_date-selection-add-new-styles.scss

@@ -17,7 +17,7 @@
   }
 
   &__annotation {
-    font-size: .75rem;
+    font-size: 0.75rem;
   }
 
   .delivery-date::after {
@@ -70,14 +70,14 @@
       &_names {
         background: $white;
         color: $blue-ocean-dark;
-        font-size: .875rem;
+        font-size: 0.875rem;
         font-weight: 500;
         margin: 0;
       }
 
       &_days {
-        font-size: .8125rem;
-        line-height: .8125rem;
+        font-size: 0.8125rem;
+        line-height: 0.8125rem;
         font-weight: 500;
       }
 
@@ -88,7 +88,7 @@
 
     &__cell {
       &_cnt {
-        font-size: .875rem;
+        font-size: 0.875rem;
         border-radius: 50%;
         height: 34px;
         line-height: 34px;
@@ -111,7 +111,6 @@
         }
       }
 
-
       &_selected,
       &:active {
         position: relative;
@@ -142,6 +141,48 @@
       font-weight: 500;
       font-size: 1rem;
     }
+
+    &_rapid {
+      display: inline;
+      align-items: center;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: relative;
+        display: block;
+        background: $ma-white;
+        border-radius: 50%;
+        width: 34px;
+        height: 34px;
+        top: -34px;
+        left: calc(50% - 34px / 2);
+        z-index: $circle-z-index;
+      }
+
+      .label-rapid {
+        @include font-size(10);
+        @include line-height(10);
+        border-radius: 30px;
+        border: 1px solid $white;
+        background: $pacific-depths;
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        font-weight: 700;
+        transform: translate(-50%, 0);
+        padding: 2px 4px;
+        color: $white;
+        z-index: $label-z-index;
+        pointer-events: none;
+      }
+
+      &.calendar__cell_selected {
+        &::after {
+          background: $blue;
+        }
+      }
+    }
   }
 
   &.date-selection_selected {
@@ -183,7 +224,7 @@
 
     .subtitle {
       margin-top: 2px;
-      font-size: .875rem;
+      font-size: 0.875rem;
       font-weight: 400;
       line-height: 22px;
       text-wrap: auto;

package/src/scss/components/_date-selection.scss

@@ -29,6 +29,36 @@
       display: none;
     }
   }
+
+  &__rapid-hint {
+    border-top: 1px dashed $blue-dark;
+    display: flex;
+    padding: 24px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+
+    .description {
+      @include font-size(14);
+      @include line-height(22);
+      text-align: center;
+      font-weight: 400;
+      max-width: 226px;
+      margin-bottom: 0;
+    }
+
+    .icon {
+      font-size: 2rem;
+      height: auto;
+      color: $blue-satin;
+    }
+
+    .date-selection_selected & {
+      display: none;
+    }
+  }
 }
 
 .calendar {
@@ -81,6 +111,49 @@
       background: $blue;
       color: $white;
     }
+
+    &_rapid {
+      display: inline;
+      align-items: center;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: relative;
+        display: block;
+        background: $ma-white;
+        border-radius: 50%;
+        width: 34px;
+        height: 34px;
+        top: -34px;
+        left: calc(50% - 34px / 2);
+        z-index: $circle-z-index;
+      }
+
+      .label-rapid {
+        @include font-size(10);
+        @include line-height(10);
+        border-radius: 30px;
+        border: 1px solid $white;
+        background: $pacific-depths;
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        font-style: normal;
+        font-weight: 700;
+        transform: translate(-50%, 0);
+        padding: 2px 4px;
+        color: $white;
+        z-index: $label-z-index;
+        pointer-events: none;
+      }
+
+      &.calendar__cell_selected {
+        &:after {
+          background: $blue;
+        }
+      }
+    }
   }
 }
 
@@ -249,6 +322,12 @@
 
   .delivery-time {
     width: 100%;
+
+    &__rapid-hint {
+      border-top: 0;
+      background: $white;
+      height: 100%;
+    }
   }
 
   .date-selection {
@@ -325,7 +404,7 @@
       right: 20px;
       font-size: 1.125rem;
       color: $blue;
-      transition: all .5s ease;
+      transition: all 0.5s ease;
       transform: rotate(180deg);
     }
   }

package/src/scss/components/{kitchen/_filter-modal.scss → _filter-modal.scss}

@@ -1,4 +1,6 @@
 .filter-modal {
+  border-radius: 0;
+
   &__title {
     font-size: 1.125rem;
     font-style: normal;
@@ -14,18 +16,27 @@
     z-index: 10;
     box-shadow: none;
     border-bottom: 0;
-    transition: box-shadow .3s ease;
+    transition: box-shadow 0.3s ease;
     padding: 0;
   }
 
+  .modal-box__row,
+  .modal-box__columns,
+  .modal-dialog,
+  .modal-box__content {
+    height: 100%;
+  }
+
   .modal-dialog {
     width: 100%;
     max-width: 100%;
+    height: 100%;
     margin: 0;
   }
 
   .modal-content {
     width: 100%;
+    border-radius: 0;
   }
 
   .modal-box__content {
@@ -57,7 +68,6 @@
     width: 100%;
   }
 
-
   .modal-footer {
     justify-content: center;
     bottom: 0;
@@ -89,6 +99,17 @@
     right: 16px;
     top: 20px;
     opacity: 1;
+    font-weight: 700;
+    line-height: 1;
+    font-size: 1rem;
+    color: $warm-grey;
+    background-color: transparent;
+    border: 0;
+    -webkit-appearance: none;
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
   }
 
   .modal-footer {
@@ -136,7 +157,7 @@
     &[data-scroll-state='middle'],
     &[data-scroll-state='bottom'] {
       .modal-header {
-        box-shadow: 0 0 15px rgba(0, 0, 0, .2);
+        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
         border-bottom: 0;
       }
     }
@@ -144,7 +165,37 @@
     &[data-scroll-state='middle'],
     &[data-scroll-state='top'] {
       .modal-footer {
-        box-shadow: 0 -2px 4px rgba(0, 0, 0, .05);
+        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+}
+
+.products-list-page {
+  .filter-modal {
+    .modal-header {
+      .modal-box__inner-row {
+        .modal-box__inner-columns {
+          padding: 20px 16px 14px;
+        }
+      }
+    }
+  }
+
+  .filter-modal {
+    .modal-box__inner-columns {
+      margin: 0;
+
+      .accordion {
+        position: relative;
+        padding-top: 20px;
+        padding-bottom: 20px;
+
+        &:first-of-type {
+          &:before {
+            border-top: 0;
+          }
+        }
       }
     }
   }