wickes-css2 2.98.0-develop.2 → 2.98.0-develop.3

package/src/scss/partials/_header.scss

@@ -1,3 +1,5 @@
+@import '../helpers/helpers';
+
 .header-wrapper {
   position: relative;
   z-index: $header;
@@ -368,49 +370,81 @@
     top: 100%;
     right: 0;
     z-index: $popover;
-    padding-top: 6px;
 
-    &::before {
-      content: '';
-      position: absolute;
-      right: 10px;
-      top: 0;
-      border-right: 6px solid transparent;
-      border-left: 6px solid transparent;
-      border-bottom: 6px solid $warm-grey;
+    &-wrap {
+      position: relative;
+      margin-top: 16px;
+      box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, .25);
+
+      &::before {
+        content: '';
+        position: absolute;
+        right: 16px;
+        top: -12px;
+        border-right: 9px solid transparent;
+        border-left: 9px solid transparent;
+        border-bottom: 12px solid $white;
+      }
     }
 
     .header-top-line__item:hover & {
       display: block;
     }
+
+    &-actions {
+      padding: 8px 0;
+      border-top: 1px solid $gray;
+    }
+
+    .rewards-counter {
+      @include line-height(20);
+      @include font-size(12);
+      position: relative;
+      margin-left: 8px;
+      font-weight: 500;
+      min-width: 20px;
+    }
   }
 
   &__popover-content {
-    min-width: 116px;
-    padding: 12px 16px;
-    background: $warm-grey;
-    box-shadow: 0 1px 2px 0 $black-transparent24;
+    min-width: 224px;
+    padding: 8px 16px;
+    background: $white;
+    border-radius: 4px;
 
     &_extended {
       width: 190px;
     }
+
+    .icon-wrap {
+      @include icon-wrap;
+      margin-right: 8px;
+      color: $blue-satin;
+
+      .installer-icon path {
+        fill: $blue-satin;
+      }
+    }
   }
 
   &__action {
     @include normal-text;
-    display: block;
+    display: flex;
+    align-items: center;
     position: relative;
-    color: $white;
+    color: $gray-dark;
     font-weight: 500;
     text-decoration: none;
+    padding-top: 8px;
+    padding-bottom: 8px;
 
-    & + & {
-      margin-top: 8px;
+    &:hover {
+      text-decoration: none;
+      color: $blue;
     }
 
-    &:hover {
-      color: #fff;
-      text-decoration: underline;
+    &--account {
+      margin-bottom: 8px;
     }
   }
 
@@ -424,7 +458,6 @@
 
   &__logout {
     border-top: 1px solid $gray;
-    margin-top: 8px;
     padding-top: 8px;
   }
 
@@ -460,10 +493,6 @@
         font-size: 1rem;
       }
     }
-
-    .icon-logout {
-      color: $gray;
-    }
   }
 }
 
@@ -641,6 +670,10 @@
     background-color: transparent;
     color: #fff;
     border: 0; // TODO: use better solution
+
+    .installer-icon path {
+      fill: $white;
+    }
   }
 
   .header-minicart__btn {

package/src/scss/partials/_main-nav.scss

@@ -1,3 +1,5 @@
+@import '../helpers/helpers';
+
 .main-nav {
   z-index: $nav;
   font-weight: 500;
@@ -218,7 +220,7 @@
     .main-nav[data-ssr='true'] &:not(.slide-in):not(.slide-in-l2r) {
       opacity: 1;
       animation: none;
-    } 
+    }
 
     &_order-line {
       color: $blue;
@@ -360,10 +362,6 @@
       display: block;
     }
 
-    &__top-level-wrap {
-      margin-bottom: 20px;
-    }
-
     &__top-offers {
       display: block;
       margin-bottom: 15px;
@@ -754,35 +752,54 @@
       }
     }
 
+    .nav-button-wrap {
+      background-color: $gray-bg;
+      margin-top: 16px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      display: flex;
+      flex-direction: column;
+      grid-gap: 8px;
+
+      .main-nav__button {
+        margin-top: 0;
+      }
+
+      .nav-button {
+        padding: 4px 8px;
+
+        .rewards-counter {
+          position: static;
+        }
+      }
+    }
+
     &__button {
+      margin-top: 8px;
+
       [data-active-lvl='2'] &,
       [data-active-lvl='3'] &,
       [data-active-lvl='4'] & {
         display: none;
       }
-    }
-
-    .nav-button-wrap {
-      background-color: $gray-bg;
-
-      .nav-button {
-        padding: 5px 10px;
 
-        &__text {
-          line-height: 24px;
+      &:first-child {
+        .nav-button {
+          padding-top: 0;
+          padding-bottom: 0;
         }
+      }
 
-        .rewards-counter {
-          position: static;
-        }
+      &--not-logged-in {
+        margin-top: 16px;
       }
     }
 
     .nav-button {
       display: flex;
       align-items: center;
-      padding: 10px;
-      margin: 10px 0;
+      padding: 8px;
+      margin: 0;
       color: $blue-dark;
       background-color: $gray-bg;
       text-decoration: none;
@@ -793,22 +810,19 @@
       }
 
       &__icon {
-        margin-right: 10px;
-
-        svg {
-          width: auto;
-          height: 16px;
+        @include icon-wrap;
+        margin-right: 8px;
+        color: $blue-dark;
 
-          path {
-            fill: $blue-dark;
-          }
+        .installer-icon path {
+          fill: $blue-dark;
         }
       }
 
       &__text {
-        font-size: 14px;
+        @include font-size(14);
+        @include line-height(22);
         font-weight: 500;
-        line-height: 14px;
       }
     }
   }

package/src/scss/plp-main.scss

@@ -24,6 +24,7 @@
 @import 'components/seo-widgets';
 @import 'components/similar-products-v2';
 @import 'components/clamp';
+@import 'components/clamp-content';
 @import 'components/card-product-banner';
 @import 'components/shop-colour';
 

package/src/sitemap.html

@@ -547,6 +547,8 @@
                         <li><a href="page_my-account_address-book.html" target="_blank">Address Book</a></li>
                         <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-app.html" target="_blank">Trade Pro Discount App</a></li>
                     </ul>
                     <h3>Project list</h3>
                     <ul>
@@ -947,6 +949,8 @@
                             Basket</a></li>
                         <li><span class="page-id">8.6</span><a href="page_checkout_merge-basket.html" target="_blank">Merged
                             basket</a></li>
+                        <li><span class="page-id">8.7</span><a href="page_shopping-cart-charity.html" target="_blank">Basket Charity Donation</a>
+                        </li>
                         <li><span class="page-id">8.8</span><a href="page_shopping-cart-v2.html" target="_blank">Basket NEW</a>
                         </li>
                         <li><span class="page-id">8.9</span><a href="page_shopping-cart-registered-v2.html" target="_blank">Basket Registered NEW</a>

package/src/components/basket-charity-donations-new.hbs

@@ -1,40 +0,0 @@
-{{#if title}}
-  {{> checkout-section-title}}
-{{/if}}
-<div class="charity-new charity-donation-new">
-  {{#with checkoutOrder.charity}}
-
-    <div class="charity-donation-new__wrapper">
-      <div class="charity-donation-new__top">
-        <div class="charity-donation-new__header">
-          <div class="charity-donation-new__title">{{title}}</div>
-          <div class="charity-donation-new__right">
-            <img
-                class="charity-donation-new__image"
-                src="{{img}}"
-                alt="{{title}}"
-                title="{{title}}"
-            />
-          </div>
-        </div>
-
-        <div class="charity-donation-new__description">
-          {{descr}}
-          <span class="charity-donation-new__message">
-              {{message}}
-            <a
-                class="charity-donation-new__subtitle-link"
-                href="{{subLink}}"
-            >
-              click here</a>.
-            </span>
-        </div>
-      </div>
-
-      <div class="charity-donation-new__body">
-        {{> donation-cart-new}}
-      </div>
-    </div>
-
-  {{/with}}
-</div>

package/src/components/donation-cart-new.hbs

@@ -1,38 +0,0 @@
-<div class="donation-cart-new">
-  <div class="donation-cart-new__details">
-    <div class="donation-cart-new__options">
-      <p class="donation-cart-new__description">
-        Select the amount you would like to donate:
-      </p>
-      <div class="donation-cart-new__holder">
-        {{#each options}}
-          <button
-              class="btn
-                   {{#if active}}btn-selected {{else}} btn-secondary{{/if}}
-                   donation-cart-new__btn"
-              data-value="{{value}}"
-          >
-            <span class="btn__text">{{title}}</span>
-          </button>
-        {{/each}}
-      </div>
-      <div class="donation-cart-new__cost donation-cart-new__cost-hide">
-        <div class="donation-cart-new__price">
-          <span class="donation-cart-new__currency">£</span>
-          <span class="donation-cart-new__value"></span>
-          donation has been added to your basket.
-        </div>
-        <button class="btn order-item__remove" data-action="remove">
-          <span class="btn__text">
-            <i class="fas fa-trash"></i>
-          </span>
-        </button>
-      </div>
-
-      <hr class="donation-cart-new__divider" />
-      <p class="donation-cart-new__charity-info">
-        Charity Reg No: 1110621 & Scot SC044347
-      </p>
-    </div>
-  </div>
-</div>

package/src/scss/components/_donation-cart-new.scss

@@ -1,192 +0,0 @@
-.donation-cart-new {
-  &__cost {
-    font-weight: 500;
-    font-size: .875rem;
-    line-height: 1rem;
-    display: flex;
-    align-items: center;
-    margin-top: 12px;
-    height: 24px;
-
-    &-hide {
-      display: none;
-    }
-  }
-
-  .order-item__remove {
-    position: static;
-    margin-left: auto;
-    display: block;
-
-    .btn__text {
-      display: inline-block;
-      width: 1em;
-      text-align: center;
-    }
-
-    i.fas {
-      display: inline-block;
-      width: 1em;
-    }
-  }
-
-  &__price-value,
-  &__price {
-    display: inline-block;
-    line-height: 1rem;
-    font-weight: 400;
-    font-size: .750rem;
-  }
-
-  &__description {
-    font-weight: 500;
-    font-size: .875rem;
-    margin-bottom: 12px;
-  }
-
-  &__value {
-    min-width: 14px;
-    margin-left: -3px;
-  }
-
-  &__currency,
-  &__value {
-    font-size: .750rem;
-  }
-
-  &__divider {
-    border: none;
-    border-top: 1px solid $gray;
-    margin: 16px 0;
-  }
-
-  &__charity-info {
-    color: $squant;
-    font-weight: 400;
-    font-size: .75rem;
-    line-height: 1rem;
-    margin: 0;
-  }
-
-  &__holder {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  &__btn {
-    width: 58px;
-    height: 36px;
-    margin-bottom: 0;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:nth-of-type(odd),
-    &:nth-of-type(even) {
-      margin-left: 0;
-    }
-
-    &:last-of-type {
-      margin-right: 0;
-    }
-
-    &.btn-secondary {
-      color: $black;
-      border-color: $gray;
-
-      &:hover {
-        color: $white;
-        border-color: $blue;
-      }
-    }
-
-    &.btn-selected {
-      color: $white;
-      border-color: $blue;
-      background: $blue;
-      pointer-events: none;
-    }
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .donation-cart-new {
-    &__btn {
-      width: 52px;
-      height: 36px;
-      margin-bottom: 0;
-    }
-
-    &__description {
-      font-weight: 700;
-      font-size: .875rem;
-      margin-bottom: 12px;
-    }
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .donation-cart-new {
-    justify-content: space-between;
-
-    &:not(.donation-cart__hide) {
-      display: flex;
-    }
-
-    &__definition {
-      max-width: 50%;
-    }
-
-    &__details {
-      width: 100%;
-    }
-
-    &__definition {
-      padding-right: 15px;
-    }
-
-    &__btn {
-      width: 56px;
-      height: 36px;
-      margin-bottom: 0;
-    }
-
-    .order-item__remove {
-      position: static;
-      margin-left: auto;
-      display: block;
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .donation-cart-new {
-    &__holder {
-      width: 588px;
-    }
-
-    &__btn {
-      width: 56px;
-      height: 36px;
-      margin-bottom: 0;
-    }
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  .donation-cart-new {
-    &__holder {
-      width: 100%;
-    }
-  }
-}
-
-@media (min-width: 350px) and (max-width: 575px) {
-  .donation-cart-new {
-    &__btn {
-      width: 72px;
-    }
-  }
-}