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

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

@@ -5,6 +5,9 @@
 @import '../components/my-account/contacts';
 @import '../components/my-account/mobile-nav';
 @import '../components/my-account/active-orders';
+@import '../components/my-account/barcode';
+@import '../components/my-account/discount';
+@import '../components/my-account/clipboard-code';
 @import '../libs/font-awesome-icons';
 
 .my-account {
@@ -105,92 +108,14 @@
     }
   }
 
-  .discount,
-  .clipboard-code {
-    background: rgba(255, 255, 255, .08);
-    border-radius: 4px;
-    padding: 16px;
-
-    .title {
-      margin-bottom: 0;
-      font-weight: 700;
-      font-size: 1rem;
-      line-height: 1.25rem;
-    }
-
-    .subtitle {
-      display: inline-block;
-      font-weight: 400;
-      font-size: .875rem;
-      line-height: 1.375rem;
-    }
-  }
-
   .discount {
     margin-top: 16px;
     padding-bottom: 26px;
-
-    &__content {
-      display: flex;
-
-      .subtitle {
-        margin: 4px 0 0;
-      }
-
-      .icon {
-        font-size: 1.44rem;
-        height: 18px;
-        margin: 6px 4px;
-        color: $blue-satin;
-      }
-    }
-
-    &__code {
-      margin-left: 8px;
-    }
   }
 
   .clipboard-code {
     display: flex;
     margin-top: 16px;
-
-    .icon {
-      width: 24px;
-      height: 25px;
-      margin: 4px;
-      color: $blue-satin;
-    }
-
-    &__content {
-      margin-left: 8px;
-    }
-
-    &__cta {
-      margin-top: 4px;
-      display: flex;
-      align-items: center;
-
-      .btn--icon {
-        padding: 4px;
-        margin-left: 4px;
-        border: 0;
-        border-radius: 0;
-        background: transparent;
-        display: inline-flex;
-
-        .icon-copy {
-          width: 14px;
-          height: auto;
-          color: $white;
-        }
-      }
-    }
-
-    &.trade-pro-id {
-      .icon path {
-        fill: $blue-satin;
-      }
-    }
   }
 
   .greetings {
@@ -209,67 +134,6 @@
       margin-bottom: 0;
     }
   }
-
-  .barcode {
-    margin-top: 16px;
-    padding: 12px;
-    background: $white;
-    border-radius: 4px;
-    color: $gray-dark;
-    position: relative;
-    font-size: .75rem;
-    line-height: 1rem;
-
-    &__discount {
-      position: absolute;
-      top: -8px;
-      right: -8px;
-
-      img {
-        border-radius: 40px;
-        width: 100%;
-        max-width: 58px;
-      }
-    }
-
-    &__content {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-bottom: 8px;
-
-      p {
-        margin-bottom: 0;
-        margin-left: 8px;
-        font-weight: 500;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .custom-icon {
-        width: 13px;
-        height: auto;
-      }
-    }
-
-    &__image {
-      display: flex;
-
-      svg {
-        width: 100%;
-        height: auto;
-      }
-    }
-
-    &__code {
-      text-align: center;
-      margin-top: 8px;
-      margin-bottom: 0;
-    }
-  }
 }
 
 .tooltip {
@@ -336,6 +200,10 @@
         .discount {
           grid-row: span 2;
           padding-bottom: 16px;
+
+          &__content {
+            align-items: center;
+          }
         }
 
         .clipboard-code {
@@ -364,17 +232,6 @@
   }
 }
 
-@include media-breakpoint-only(md) {
-  .my-account {
-    .clipboard-code {
-      .icon {
-        font-size: 2rem;
-        height: auto;
-      }
-    }
-  }
-}
-
 @include media-breakpoint-up(lg) {
   .my-account {
     .account-summary {
@@ -402,25 +259,25 @@
             font-size: 1rem;
           }
         }
-      }
-    }
 
-    .barcode {
-      max-width: 155px;
-      height: auto;
-      margin-left: 24px;
-      padding: 12px;
-      margin-top: -4px;
-      margin-bottom: -4px;
-
-      &__content,
-      &__code {
-        display: none;
-      }
+        .barcode {
+          max-width: 155px;
+          height: auto;
+          margin-left: 24px;
+          padding: 12px;
+          margin-top: -4px;
+          margin-bottom: -4px;
+
+          &__content,
+          &__code {
+            display: none;
+          }
 
-      &__discount {
-        top: -12px;
-        right: -12px;
+          &__discount {
+            top: -12px;
+            right: -12px;
+          }
+        }
       }
     }
 
@@ -436,6 +293,11 @@
       &__wrapper {
         grid-template-columns: minmax(auto, 502px) 1fr 1fr;
 
+        .icon-wrap {
+          width: 48px;
+          height: 48px;
+        }
+
         .discount {
           .icon {
             font-size: 1.75rem;
@@ -444,10 +306,15 @@
           }
         }
 
-        .clipboard-code .icon {
-          margin: auto 6px;
-          width: auto;
-          height: 32px;
+        .clipboard-code {
+          .icon {
+            font-size: 2rem;
+          }
+
+          .custom-icon {
+            width: 36px;
+            height: auto;
+          }
         }
       }
     }

package/src/scss/pages/page_change-password.scss

@@ -7,7 +7,7 @@
 
   .globalMessages {
     .notification:first-child {
-      margin-top: 16px
+      margin-top: 16px;
     }
 
     .notification {

package/src/scss/pages/page_default-store.scss

@@ -7,10 +7,6 @@
   display: block;
   padding: 0 0 40px;
 
-  .container .col-12 {
-    min-height: auto;
-  }
-
   .globalMessages {
     padding-top: 16px;
 
@@ -401,6 +397,7 @@
         &__time {
           width: 50%;
           text-align: right;
+          margin-top: auto;
         }
       }
 
@@ -472,6 +469,10 @@
     padding-bottom: 70px;
     padding-top: 24px;
 
+    .container .col-12 {
+      min-height: auto;
+    }
+
     .globalMessages {
       padding-top: 0;
     }

package/src/scss/pages/page_discount.scss

@@ -0,0 +1,212 @@
+@import '../helpers/helpers';
+@import '../components/my-account/barcode';
+@import '../components/my-account/discount';
+
+.discount-offer {
+  padding-top: 0;
+  padding-bottom: 0;
+
+  &__wrap {
+    padding-bottom: 40px;
+  }
+
+  &__header {
+    padding-top: 16px;
+
+    .title {
+      @include font-size(26);
+      @include line-height(36);
+      font-weight: 500;
+      margin-bottom: 0;
+    }
+  }
+
+  &__body {
+    grid-gap: 16px;
+    display: flex;
+    flex-direction: column;
+    background: $blue-dark;
+    border-radius: 4px;
+    padding: 16px;
+    margin-top: 24px;
+    color: $white;
+
+    .clipboard-code,
+    .discount {
+      &__content {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0;
+      }
+
+      &__code {
+        margin-left: 0;
+      }
+
+      .icon-wrap {
+        margin-bottom: 8px;
+      }
+    }
+  }
+
+  .app-info {
+    background: $pacific-depths;
+    padding: 24px 16px 0;
+    text-align: center;
+
+    .title,
+    .description {
+      color: $white;
+      margin-bottom: 0;
+    }
+
+    .title {
+      @include font-size(20);
+      @include line-height(32);
+      font-weight: 500;
+    }
+
+    .description {
+      @include font-size(14);
+      @include line-height(22);
+      font-weight: 400;
+      margin-top: 8px;
+    }
+
+    &__stores {
+      margin-top: 16px;
+      display: flex;
+      justify-content: center;
+      grid-gap: 16px;
+    }
+
+    .download-app-img {
+      margin-top: 16px;
+      min-height: 162px;
+      background: url('../../img/apps/app-md.png') no-repeat bottom / contain;
+    }
+
+    &--hide {
+      display: none;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .discount-offer {
+    .app-info {
+      padding-top: 40px;
+
+      .download-app-img {
+        min-height: 230px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .discount-offer {
+    &__wrap {
+      padding-bottom: 72px;
+    }
+
+    &__header {
+      padding-top: 40px;
+
+      .title {
+        @include font-size(34);
+        @include line-height(46);
+        text-align: left;
+      }
+    }
+
+    &__body {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      padding: 24px;
+
+      .clipboard-code.discount-code {
+        grid-column: span 2;
+      }
+
+      .icon-wrap {
+        width: 48px;
+        height: 48px;
+
+        .icon {
+          font-size: 2rem;
+          height: auto;
+        }
+      }
+    }
+
+    .app-info {
+      &__wrap {
+        display: flex;
+        grid-gap: 40px;
+      }
+
+      .title,
+      &__header {
+        text-align: left;
+      }
+
+      .title {
+        @include font-size(24);
+        @include line-height(32);
+      }
+
+      &__header {
+        flex: 0;
+        padding-bottom: 40px;
+      }
+
+      &__stores {
+        justify-content: flex-start;
+
+        a {
+          display: flex;
+        }
+      }
+
+      .download-app-img {
+        margin-top: -15px;
+        flex: 1 1 100%;
+        min-height: 180px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .discount-offer {
+    &__body {
+      grid-template-columns: repeat(3, 1fr);
+
+      .clipboard-code.discount-code {
+        grid-column: auto;
+      }
+    }
+
+    .app-info {
+      .download-app-img {
+        background-image: url('../../img/apps/app-lg.png');
+        background-position-x: right;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .discount-offer {
+    .app-info {
+      &__wrap {
+        align-items: center;
+      }
+
+      .download-app-img {
+        min-height: 307px;
+      }
+    }
+  }
+}

package/src/scss/pages/page_personal-details.scss

@@ -1,5 +1,6 @@
 @import '../helpers/helpers';
 @import '../components/notifications';
+@import '../components/leave-modal';
 
 .personal-details {
   padding-top: 0;
@@ -141,62 +142,6 @@
   }
 }
 
-.details-modal {
-  .modal-dialog {
-    margin-top: 40px;
-  }
-
-  .modal-header {
-    padding: 16px;
-
-    .modal-box__inner-columns {
-      display: flex;
-      align-items: center;
-
-      .info-icon {
-        font-size: 1.7rem;
-        color: $orange;
-      }
-    }
-
-    .close {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      margin: 0;
-      padding: 0;
-
-      .icon svg {
-        font-size: 1rem;
-      }
-    }
-
-    .modal-title {
-      margin-left: 15px;
-      font-size: 1.125rem;
-      font-weight: 500;
-      line-height: 2rem;
-    }
-  }
-
-  .modal-body {
-    padding: 16px;
-
-    .description {
-      margin-bottom: 0;
-      font-size: 1rem;
-      font-weight: 400;
-      line-height: 2rem;
-    }
-
-    .actions {
-      display: flex;
-      grid-gap: 16px;
-      margin-top: 32px;
-    }
-  }
-}
-
 @include media-breakpoint-up(sm) {
   .personal-details {
     &__header {
@@ -224,24 +169,6 @@
       }
     }
   }
-
-  .details-modal {
-    .modal-header {
-      padding: 16px 24px;
-    }
-
-    .modal-body {
-      padding: 24px 24px 16px;
-
-      .actions {
-        margin-top: 40px;
-
-        .btn_full {
-          width: auto;
-        }
-      }
-    }
-  }
 }
 
 @include media-breakpoint-up(md) {

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

@@ -22,6 +22,9 @@ $color-bar-radius: 3px;
   }
 
   .srp-injected {
+    margin-bottom: 20px;
+    margin-top: 10px;
+
     &__image {
       margin-bottom: 20px;
 
@@ -35,9 +38,8 @@ $color-bar-radius: 3px;
       font-size: 16px;
       font-weight: 500;
       line-height: 1.5;
-      padding: 1em 1.25em;
-      margin-bottom: 20px;
-      text-align: center;
+      padding: 0;
+      text-align: left;
 
       p {
         margin: 0;
@@ -611,6 +613,14 @@ $color-bar-radius: 3px;
     .card {
       @include make-col-ready;
     }
+
+    &-page {
+      .srp-injected {
+        &__content {
+          text-align: center;
+        }
+      }
+    }
   }
 
   .load-more-wrap {

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

@@ -32,7 +32,7 @@
       line-height: 1.5;
       padding: 1em 1.25em;
       margin-bottom: 20px;
-      text-align: center;
+      text-align: left;
 
       p {
         margin: 0;
@@ -268,6 +268,14 @@
     .card {
       @include make-col-ready;
     }
+
+    &-page {
+      .srp-injected {
+        &__content {
+          text-align: center;
+        }
+      }
+    }
   }
 }
 

package/src/scss/pages/page_track-my-order.scss

@@ -103,6 +103,27 @@
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
+
+    .icon-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:after {
+        content: '+';
+        color: $blue;
+        font-size: 1.575rem;
+      }
+    }
+
+    &[aria-expanded='true'] {
+      .icon-wrap {
+        &:after {
+          content: '-';
+          font-size: 2.95rem;
+        }
+      }
+    }
   }
 
   &__list {

package/src/scss/partials/_header-critical.scss

@@ -350,15 +350,11 @@
 
   &__action {
     @include normal-text;
-    display: block;
+    display: flex;
     position: relative;
     color: $white;
     font-weight: 500;
     text-decoration: none;
-
-    & + & {
-      margin-top: 8px;
-    }
   }
 
   &__name {
@@ -679,3 +675,4 @@
     transform: translate3d(0, 0, 0); /* safari rendering fix */
   }
 }
+