wickes-css2 2.94.0-develop.13 → 2.94.0-develop.16

package/src/scss/pages/_checkout-widget.scss

@@ -83,10 +83,20 @@
     margin-bottom: 0;
     list-style-type: none;
 
-    & > li:not(:first-of-type) {
+    & > li:last-child {
+      margin: 0;
+    }
+
+    & >li:not(:first-of-type) {
       margin-top: 5px;
     }
 
+    & > .checkout-widget__accordion-wrap {
+      &.checkout-widget__details-discount {
+        margin-top: 8px;
+      }
+    }
+
     .checkout-widget__details-hidden {
       padding-left: 15px;
       list-style: disc;
@@ -426,7 +436,7 @@
       text-align: center;
       width: 100%;
       color: $green;
-      font-size: 4rem;
+      font-size: 1rem;
       margin-bottom: 10px;
     }
   }
@@ -515,10 +525,6 @@
     padding-right: 0;
   }
 
-  &-hide {
-    display: none;
-  }
-
   input {
     text-transform: uppercase;
 
@@ -528,6 +534,92 @@
   }
 }
 
+.voucher {
+  padding-bottom: 10px;
+
+  .checkout-widget.checkout-voucher.checkout-voucher_fixed {
+    padding: 0;
+  }
+
+  .checkout-widget.checkout-voucher {
+    margin-bottom: 0;
+
+    &-hide {
+      display: none;
+    }
+
+    &.voucher-applied {
+      background: $white;
+      height: 40px;
+      padding: 8px 0;
+      margin: 0;
+
+      .voucher-applied__inner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+
+        & .icon {
+          display: inline-block;
+
+          &__check {
+            width: 24px;
+            height: 24px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            i {
+              font-size: 24px;
+              line-height: 24px;
+            }
+          }
+        }
+
+        & .fa-check-circle {
+          font-size: 1rem;
+          margin: 0;
+        }
+
+        & h5 {
+          font-size: .875rem;
+          margin: 0;
+        }
+      }
+    }
+
+    form {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .form-row {
+        max-width: 100%;
+        flex: 1;
+        margin-right: 16px;
+        margin-bottom: 0;
+        padding: 0;
+
+        &__field {
+          margin-left: 30px;
+        }
+
+        &__error {
+          margin-left: 30px;
+          font-weight: 400;
+        }
+      }
+
+      .voucher__btn {
+        margin-top: 0;
+        margin-right: 15px;
+        height: 40px;
+      }
+    }
+  }
+}
+
 .voucher {
   .checkout-widget {
     margin-left: -15px;
@@ -537,17 +629,17 @@
 
 @include media-breakpoint-up(sm) {
   .voucher {
-    .checkout-widget {
-      margin: 0 0 20px;
-
+    .checkout-widget.checkout-voucher {
       form {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
         .form-row {
-          @include make-col(6);
-          margin-bottom: 0;
+          &__field {
+            margin-right: 0;
+            margin-left: 15px;
+          }
+
+          &__error {
+            margin-left: 15px;
+          }
         }
       }
     }
@@ -578,6 +670,12 @@
 
   .checkout-voucher {
     & form {
+      .form-row {
+        &__error {
+          margin-left: 15px;
+        }
+      }
+
       & .voucher__btn {
         max-width: 115px;
         height: 40px;
@@ -595,6 +693,22 @@
   }
 }
 
+@include media-breakpoint-up(md) {
+  .voucher {
+    .checkout-widget.checkout-voucher {
+      form {
+        .form-row {
+          &__field {
+            margin-right: 0;
+            margin-left: 30px;
+          }
+        }
+      }
+    }
+  }
+}
+
+
 @include media-breakpoint-up(xl) {
   .checkout-widget {
     &__detail-value_payment:not(.checkout-widget__details-hidden) {
@@ -626,6 +740,14 @@
   }
 }
 
+@include media-breakpoint-up(lg) {
+  .checkout-voucher {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 @include media-breakpoint-down(md) {
   .checkout-widget {
     &__secure {
@@ -698,7 +820,6 @@
     }
 
     &_order-summary {
-      padding: 20px 30px;
 
       .accordion__header-text {
         margin-left: 4px;
@@ -733,12 +854,6 @@
 
 @include media-breakpoint-down(xs) {
   .checkout-widget {
-    &_order-summary {
-      padding: 20px 45px;
-      margin-left: -15px;
-      margin-right: -15px;
-    }
-
     &__payment-wrapper {
       margin-left: -30px;
       margin-right: -25px;
@@ -773,12 +888,6 @@
       padding-bottom: 20px;
     }
 
-    &__detail-name_accordion + .checkout-widget__details-hidden + span {
-      right: auto;
-      left: 0;
-      top: 20px;
-    }
-
     &__detail-name,
     &__detail-value:not(.checkout-widget__details-hidden) {
       display: block;

package/src/scss/pages/page_checkout_delivery-new.scss

@@ -5,18 +5,87 @@
 @import '../components/marketing-preferences';
 
 .page_checkout-delivery-new {
-  .summary {
-    .checkout-title__title {
-      color: $blue-ocean;
-      font-weight: 400;
-      line-height: 1.75rem;
-    }
+  .right-aside {
+    .summary {
+      .checkout-title__title {
+        color: $blue-ocean;
+        font-weight: 400;
+        line-height: 1.75rem;
+      }
+
+      &__aside {
+        padding: 12px 30px 0;
+
+        .checkout-info-wrap {
+          padding: 0;
+        }
+
+        .checkout-widget.checkout-widget_order-summary {
+          padding: 25px 20px 0;
+        }
+
+        .checkout-widget {
+          &__details {
+            font-size: 1rem;
+
+            .checkout-widget {
+              &__item {
+                display: flex;
+                justify-content: space-between;
+                font-size: 1rem;
+                line-height: 1.125rem;
+                font-weight: 400;
+                margin-bottom: 20px;
+                padding: 0;
+
+                &-bold {
+                  font-weight: 500;
+                  margin-bottom: 20px;
+                }
 
-    &__aside {
-      padding: 12px 30px 0;
+                &-vat {
+                  font-size: .75rem;
+                  margin-top: -15px;
+                }
+              }
+
+
+              &__details-discount {
+                order: 1;
+              }
+            }
+          }
 
-      .checkout-info-wrap {
-        padding: 0;
+          &__total {
+            border: 0;
+            display: flex;
+            justify-content: space-between;
+            margin-left: -25px;
+            margin-right: -25px;
+            margin-bottom: 0;
+            padding: 20px 25px;
+            color: #fff;
+            background-color: #0a3055;
+            font-size: 1.375rem;
+            line-height: 1.5rem;
+            font-weight: 400;
+          }
+        }
+      }
+
+      &__basked-id {
+        padding: 26px 0;
+        background: #f8f8f8;
+        text-align: center;
+        font-size: 1rem;
+
+        .id-number {
+          font-weight: 700;
+        }
+      }
+
+      .accordion__header-icon-small {
+        left: 85px;
       }
     }
   }
@@ -308,6 +377,7 @@
   .continue-btn {
     background: $gray-bg;
     padding: 35px;
+    margin-top: 20px;
 
     .btn-action {
       height: 50px;
@@ -401,6 +471,26 @@
         }
       }
     }
+
+    .right-aside {
+      .summary {
+        &__aside {
+          .checkout-widget.checkout-widget_order-summary {
+            padding: 20px 0 0;
+          }
+        }
+
+        .checkout-widget {
+          &.checkout-widget_order-summary {
+            .checkout-widget__total {
+              font-weight: 400;
+              margin-left: -20px;
+              margin-right: -20px;
+            }
+          }
+        }
+      }
+    }
   }
 }
 
@@ -555,6 +645,24 @@
         }
       }
     }
+
+    .right-aside {
+      .summary {
+        .checkout-widget {
+          &.checkout-widget_order-summary {
+            .checkout-widget__total {
+              font-weight: 400;
+              margin-left: -30px;
+              margin-right: -30px;
+            }
+          }
+        }
+
+        .summary__basked-id {
+          margin-top: 13px;
+        }
+      }
+    }
   }
 }
 
@@ -674,6 +782,7 @@
 
     .continue-btn {
       margin: 0 -15px;
+      margin-top: 20px;
     }
 
     .billing-payment-block {

package/src/scss/pages/page_shopping-cart-v2.scss

@@ -25,10 +25,6 @@
 
   .right-aside {
     margin-top: 0;
-
-    .voucher {
-      display: none;
-    }
   }
 
   .content {
@@ -78,14 +74,26 @@
 
   .voucher {
     .checkout-widget {
-      margin: 0;
+      margin-left: -15px;
+      margin-right: -15px;
+
+      &.checkout-voucher {
+        form {
+          .form-row {
+            padding-right: 0;
+
+            &__field {
+              margin-left: 30px;
+            }
+          }
+        }
+      }
     }
   }
 
   .summary {
     .checkout-widget_order-summary {
-      margin-left: -20px;
-      margin-right: -20px;
+      background-color: $gray-bg;
 
       .checkout-widget__details {
         flex-direction: column;
@@ -98,6 +106,7 @@
           &__item {
             &-bold {
               order: -5;
+              padding: 0;
             }
 
             &-vat {
@@ -137,12 +146,35 @@
 
     .checkout-widget_order-summary,
     .checkout-info-wrap.checkout-widget__details {
-      padding-top: 0;
+      padding: 0;
 
       .checkout-widget {
         &__item {
           font-weight: 400;
           font-size: .875rem;
+          padding: 10px 0;
+          margin: 0;
+
+          &:nth-child(1) {
+            margin: 0;
+            padding: 0;
+          }
+
+          &:nth-child(2) {
+            margin: 0;
+            padding-bottom: 10px;
+          }
+
+          &:nth-child(3) {
+            margin: 0;
+            padding-bottom: 10px;
+          }
+
+          &:last-child {
+            margin: 0;
+            padding: 0;
+          }
+
 
           &:not(.checkout-widget__item-vat) {
             margin-top: 0;
@@ -153,8 +185,8 @@
           }
 
           &-vat {
-            padding-bottom: 10px;
-            margin-bottom: 10px;
+            margin: 0;
+            padding: 0 0 10px;
             color: $warm-grey;
             font-size: .75rem;
             border-bottom: 1px solid #eee;
@@ -180,7 +212,7 @@
 
         &__details {
           &-discount {
-            margin-top: 0;
+            margin-top: 10px;
           }
         }
 
@@ -202,6 +234,53 @@
     background-color: transparent;
     padding: 0;
     border: 0;
+
+    .voucher__btn {
+      max-width: 100%;
+      margin-top: 20px;
+      height: 40px;
+    }
+
+    .form-row__error {
+      font-weight: 400;
+    }
+
+    &.voucher-applied {
+      background: $white;
+      margin-bottom: 8px;
+      height: 40px;
+
+      .voucher-applied__inner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        & .icon {
+          display: inline-block;
+
+          &__check {
+            width: 24px;
+            height: 24px;
+
+            i {
+              font-size: 24px;
+              line-height: 24px;
+            }
+          }
+        }
+
+        & .fa-check-circle {
+          font-size: 1rem;
+          margin-bottom: 0;
+        }
+
+        & h5 {
+          margin: 0;
+          margin-top: 8px;
+          font-size: .875rem;
+        }
+      }
+    }
   }
 }
 
@@ -231,6 +310,20 @@
       }
     }
 
+    .voucher {
+      .checkout-widget {
+        &.checkout-voucher {
+          form {
+            .form-row {
+              &__field {
+                margin-left: 15px;
+              }
+            }
+          }
+        }
+      }
+    }
+
     .checkout-widget {
       &.checkout-voucher {
         form {
@@ -284,6 +377,20 @@
 
 @include media-breakpoint-up(md) {
   .basket {
+    .voucher {
+      .checkout-widget {
+        &.checkout-voucher {
+          form {
+            .form-row {
+              &__field {
+                margin-left: 30px;
+              }
+            }
+          }
+        }
+      }
+    }
+
     .right-aside {
       @include make-col(12);
     }
@@ -293,12 +400,6 @@
       max-width: 100%;
       padding-right: 5px;
     }
-
-    .summary {
-      &__aside {
-        padding: 20px 20px 0;
-      }
-    }
   }
 }
 
@@ -316,17 +417,22 @@
         .checkout-voucher {
           padding: 0;
 
+          .form-row__error {
+            white-space: pre-line;
+          }
+
           form {
             display: flex;
             align-items: flex-start;
-            margin-bottom: 27px;
 
             .form-row {
-              @include make-col(7);
+              max-width: 100%;
+              flex: 1;
               margin-right: 0;
 
               &__field {
                 margin-right: 0;
+                margin-left: 30px;
 
                 input {
                   &::placeholder {
@@ -344,27 +450,14 @@
 
             .voucher__btn {
               margin-top: 0;
-              margin-left: 15px;
+              margin-left: 16px;
+              margin-right: 15px;
             }
 
             &.form_invalid {
               margin-bottom: 0;
             }
           }
-
-          &.voucher-applied {
-            background: $white;
-
-            & .fa-check-circle {
-              font-size: 2rem;
-              margin-bottom: 0;
-            }
-
-            & h3 {
-              font-size: 1.25rem;
-              margin-bottom: 0;
-            }
-          }
         }
       }
 
@@ -424,6 +517,16 @@
           display: flex;
         }
       }
+
+      .checkout-widget__item-bold {
+        margin: 10px 0;
+        padding: 5px 0;
+      }
+
+      .checkout-widget__item-vat {
+        padding-bottom: 10px;
+        margin-bottom: 10px;
+      }
     }
 
     .checkout-title {