wickes-css2 2.113.0-develop.2 → 2.113.0-develop.20

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

@@ -6,29 +6,37 @@
 
 .page_checkout-delivery-new {
   .right-aside {
+    margin-top: 24px;
+
     .summary {
       .checkout-title__title {
         color: $blue-ocean;
-        font-weight: 400;
-        line-height: 1.75rem;
+        margin-bottom: 16px;
       }
 
       &__aside {
-        padding: 12px 30px 0;
+        padding: 0;
 
         .checkout-info-wrap {
           padding: 0;
         }
 
         .checkout-widget.checkout-widget_order-summary {
-          padding: 25px 20px 0;
+          padding: 0;
+          margin: 0;
         }
 
         .checkout-widget {
+          background-color: $white;
+
           &__details {
+            padding: 16px;
             font-size: 1rem;
             display: flex;
             flex-direction: column;
+            background-color: $white;
+            border: 1px solid $gray;
+            border-bottom: 0;
 
             .checkout-widget {
               &__item {
@@ -45,11 +53,6 @@
                   margin-bottom: 20px;
                 }
 
-                &-vat {
-                  font-size: 0.75rem;
-                  margin-top: -15px;
-                }
-
                 &-delivery:has(+ .checkout-widget__item-delivery-cost-message) {
                   margin-bottom: 0;
                 }
@@ -68,6 +71,21 @@
                 }
               }
 
+              &__voucher-accordion,
+              &__item {
+                margin-top: 12px;
+                margin-bottom: 0;
+              }
+
+              &__item:first-child {
+                margin-top: 0;
+              }
+
+              &__item-vat {
+                font-size: 0.75rem;
+                margin-top: 4px;
+              }
+
               &__details-discount {
                 order: 1;
               }
@@ -91,24 +109,23 @@
             border: 0;
             display: flex;
             justify-content: space-between;
-            margin-left: -25px;
-            margin-right: -25px;
-            margin-bottom: 0;
-            padding: 20px 25px;
+            padding: 16px;
             color: #fff;
             background-color: #0a3055;
             font-size: 1.375rem;
             line-height: 1.5rem;
             font-weight: 400;
+            margin: 0;
           }
         }
       }
 
       &__basked-id {
-        padding: 26px 0;
-        background: #f8f8f8;
+        padding: 16px 0;
         text-align: center;
         font-size: 1rem;
+        border: 1px solid $gray;
+        border-top: 0;
 
         .id-number {
           font-weight: 700;
@@ -126,19 +143,77 @@
   .billing-payment-block {
     &__heading {
       color: $blue-ocean;
-      font-weight: 400;
-      margin-bottom: 24px;
-      font-size: 1.5rem;
-      line-height: 1.75rem;
+      margin-bottom: 16px;
     }
 
     &__wrapper {
-      background: $gray-bg;
-      padding: 30px 15px;
+      .checkout-order {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+
+        .order-block {
+          &__time-head {
+            padding: 17px 13px;
+          };
+
+          &__address {
+            padding: 20px 15px;
+          };
+
+          &__address,
+          &__product-line {
+            border: 1px solid $gray;
+            border-top: 0;
+            margin: 0;
+          };
+
+          &__product-line {
+            .show-products,
+            .hide-products {
+              padding: 16px;
+            }
+          };
+
+          &__order-line {
+            padding: 24px;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            border-bottom: 1px solid $gray;
+
+            .order-line {
+              &__wrap,
+              &__price,
+              &__price-item {
+                border-top: 0;
+                padding: 0;
+                margin: 0;
+              };
+            }
+          }
+
+          &:last-child,
+          &:has(+ .delivery-block__heavy-banners-wrapper.d-none:last-child) {
+            .order-block__product-line {
+              .show-products {
+                padding-bottom: 16px;
+              }
+            }
+          }
+        }
+      }
     }
   }
 
   .delivery-block {
+    margin-bottom: 24px;
+
+    .banner-news {
+      margin-bottom: 24px;
+    }
+
     &__wrapper.customer-journey-block {
       background: inherit;
       padding: 0;
@@ -176,17 +251,19 @@
   }
 
   .click-collect-block {
-    margin-top: 40px;
+    &__wrapper {
+      margin-bottom: 24px;
+    };
 
     &__head-info {
       font-size: 1rem;
       line-height: 1.125rem;
       font-weight: 400;
+      margin-bottom: 16px;
 
       .head-info__wrapper {
         display: flex;
         flex-direction: column;
-        margin: 0 0 50px;
 
         &-exclamation {
           border: 1px solid $gray;
@@ -194,7 +271,7 @@
           display: flex;
           align-items: center;
           flex: 0;
-          margin-bottom: 20px;
+          margin-bottom: 16px;
 
           .fa-exclamation-circle {
             color: $blue;
@@ -207,57 +284,74 @@
         &-text {
           display: flex;
           flex-direction: column;
-          justify-content: flex-end;
+          justify-content: flex-start;
 
-          p {
+          p:last-child {
             margin: 0;
-
-            &:first-of-type {
-              margin-bottom: 26px;
-            }
           }
         }
       }
     }
   }
 
-  .billing-payment-block {
-    margin: 40px 0;
-  }
-
   .loader-wrapper.page-loader {
     position: fixed;
   }
 
   .oos-block {
     @include make-col(12);
+    margin-bottom: 24px;
 
     &__wrapper {
-      background: $gray-bg;
-      margin: 25px 0;
+      border: 1px solid $gray;
+      padding: 16px;
 
       &-products {
         .checkout-info-wrap {
-          padding: 25px;
+          padding: 0;
+          background-color: $white;
         }
       }
 
       .remove-btn {
         display: flex;
         justify-content: flex-end;
-        margin: 0 25px;
-        padding-bottom: 25px;
       }
-    }
 
-    &__info-block {
-      padding: 25px 25px 0;
+      .order-block {
+        &__order-line {
+          padding: 24px;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          border-bottom: 1px solid $gray;
+
+          &:last-child {
+            margin-bottom: 16px;
+          }
+        }
+
+        .order-line {
+          &__wrap,
+          &__price,
+          &__price-item {
+            border-top: 0;
+            padding: 0;
+            margin: 0;
+          };
+        }
+      }
     }
   }
 
   .checkout-order {
     display: block;
     margin: 0;
+
+    .delivery-block__heavy-banners-wrapper {
+      margin-top: 0;
+    }
   }
 
   .content,
@@ -265,12 +359,6 @@
     @include make-col(12);
   }
 
-  .right-aside {
-    .checkout-title__title {
-      margin-bottom: 24px;
-    }
-  }
-
   .content {
     display: flex;
     flex-direction: column;
@@ -301,8 +389,7 @@
   }
 
   .add-contact-details {
-    border-top: 1px solid $gray;
-    margin-top: 20px;
+    margin-top: 16px;
     font-size: 1rem;
     line-height: 1.125rem;
     font-weight: 400;
@@ -310,24 +397,27 @@
     &__heading {
       color: $blue-ocean;
       font-weight: 400;
-      margin-top: 40px;
+      margin-bottom: 16px;
+    }
+
+    & > p {
+      margin-bottom: 24px;
     }
 
     &__form {
       @include make-row;
       align-items: flex-start;
-      margin-top: 40px;
+      row-gap: 24px;
 
       .form-row {
         @include make-col-ready;
         @include make-col(12);
         padding-right: 0;
+        margin-bottom: 0;
 
         &--locked {
           @include make-col(12);
           max-width: 100%;
-          margin-bottom: 24px;
-          margin-top: 4px;
 
           .form-row__field {
             .tbx {
@@ -350,31 +440,35 @@
           max-width: 100%;
           margin-bottom: 0;
         }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
       }
     }
   }
 
   .simplify-collection {
-    background: $gray-bg;
-    padding: 0 15px;
-    margin: 0 0 10px;
+    padding-bottom: 24px;
+    margin-bottom: 24px;
+    border-bottom: 1px solid $gray;
 
     &__heading {
       color: $blue-ocean;
-      font-weight: 400;
-      margin-top: 40px;
+      margin: 0 0 16px;
     }
 
     &__wrapper {
       @include make-row;
-      margin: 20px 0;
+      margin: 16px 0;
 
       .your-contact-details__checkbox {
         @include make-col-ready;
         @include make-col(12);
+        padding: 0;
 
         label:first-of-type {
-          margin-bottom: 10px;
+          margin-bottom: 16px;
         }
 
         span:first-of-type {
@@ -399,20 +493,12 @@
 
     &__info {
       font-size: 1rem;
-      line-height: 1.125rem;
+      line-height: 1.25rem;
       font-weight: 400;
     }
-
-    &__btn {
-      margin: 10px 0 40px;
-    }
   }
 
   .continue-btn {
-    background: $gray-bg;
-    padding: 35px;
-    margin-top: 20px;
-
     .btn-action {
       height: 50px;
       width: 100%;
@@ -424,20 +510,20 @@
       font-size: 0.875rem;
       line-height: 1.125rem;
       font-weight: 400;
-      margin-bottom: 23px;
+      margin-bottom: 16px;
     }
 
     &__header {
       color: $blue-ocean;
       font-weight: 400;
-      margin-bottom: 13px;
+      margin-bottom: 16px;
     }
   }
 
   .notification {
     &:only-child,
     &:last-child {
-      margin-bottom: 30px;
+      margin-bottom: 16px;
     }
   }
 }
@@ -534,18 +620,25 @@
 
     .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;
+            }
+          }
+        }
+      }
+    }
+
+    .delivery-block,
+    .click-collect-block,
+    .billing-payment-block {
+      &__wrapper {
+        .checkout-order {
+          .order-block {
+            &__order-line {
+              border-top: 1px solid $gray;
+              border-bottom: 0;
             }
           }
         }
@@ -559,14 +652,29 @@
     .delivery-block,
     .click-collect-block,
     .billing-payment-block {
+      &__heading {
+        margin-bottom: 24px;
+      }
+
       &__wrapper {
-        padding: 55px 50px 50px;
+        .checkout-order {
+          gap: 24px;
+        }
       }
     }
 
+    .date-selection__wrapper {
+      margin-bottom: 24px;
+    }
+
     .right-aside {
       @include make-col(12);
-      margin-top: 20px;
+
+      .summary {
+        .checkout-title__title {
+          margin-bottom: 24px;
+        };
+      };
     }
 
     .content {
@@ -575,6 +683,31 @@
       padding-right: 5px;
     }
 
+    .oos-block {
+      &__wrapper {
+        padding: 24px;
+      }
+
+      .order-block {
+        &__order-line:last-child {
+          margin-bottom: 24px;
+        }
+      }
+    }
+
+    .notification {
+      &:only-child,
+      &:last-child {
+        margin-bottom: 24px;
+      }
+    }
+
+    .add-contact-details {
+      &__heading {
+        margin-bottom: 24px;
+      }
+    }
+
     .basket__voucher {
       & form {
         display: flex;
@@ -601,27 +734,36 @@
 
     .click-collect-block {
       &__head-info {
+        margin-bottom: 24px;
+
         .head-info__wrapper {
           flex-direction: row;
 
           &-exclamation {
             flex: 0 0 277px;
-            margin-right: 34px;
+            margin-right: 32px;
             margin-bottom: 0;
           }
 
           &-text {
             max-width: 400px;
+
+            p {
+              margin-bottom: 24px;
+            }
           }
         }
       }
     }
 
     .simplify-collection {
-      padding: 0 50px;
+      &__heading,
+      &__info {
+        margin-bottom: 24px;
+      }
 
       &__wrapper {
-        margin-top: 40px;
+        margin: 24px 0;
 
         .your-contact-details__checkbox {
           @include make-col(6);
@@ -682,8 +824,6 @@
           &.form-row--locked {
             @include make-col(12);
             max-width: 100%;
-            margin-bottom: 24px;
-            margin-top: 4px;
 
             .form-row__field {
               .tbx {
@@ -695,7 +835,13 @@
 
           &:first-child {
             .form-row__field {
-              padding-right: 5px;
+              padding-right: 12px;
+            }
+          }
+
+          &:nth-child(2) {
+            .form-row__field {
+              padding-left: 12px;
             }
           }
 
@@ -706,20 +852,37 @@
       }
     }
 
+    .click-collect-block {
+      &__wrapper {
+        margin-bottom: 40px;
+      }
+    }
+
+    .oos-block,
+    .simplify-collection,
+    .delivery-block {
+      margin-bottom: 40px;
+    }
+
     .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;
+        &__payment {
+          margin: 0;
+
+          .footer-checkout-holder {
+            background-color: $white;
+            border: 1px solid $gray;
+            border-top: 0;
+            padding: 16px 0;
+          }
         }
       }
     }
@@ -731,19 +894,9 @@
     .delivery-block,
     .click-collect-block,
     .billing-payment-block {
-      &__heading {
-        margin-bottom: 18px;
-      }
-
-      &__wrapper {
-        padding: 25px 15px;
-        margin: 0 -15px;
-      }
-
       .order-block {
         &__time-head {
           font-size: 1.125rem;
-          padding: 17px 13px;
 
           &-info {
             font-size: 0.875rem;
@@ -751,20 +904,10 @@
           }
         }
 
-        &__address {
-          padding: 20px 15px;
-          margin: 0;
-        }
-
         &__product-line {
           display: flex;
           flex-direction: column-reverse;
           align-items: flex-start;
-
-          .show-products,
-          .hide-products {
-            padding: 15px 15px 25px;
-          }
         }
 
         .order-line__product {
@@ -812,22 +955,12 @@
         }
       }
 
-      .oos-block__wrapper {
-        margin: 10px -15px;
-      }
-
       &__wrapper {
         overflow-x: hidden;
       }
     }
 
     .add-contact-details {
-      &__heading {
-        margin-top: 27px;
-        font-size: 1.5rem;
-        line-height: 1.75rem;
-      }
-
       .marketing-preferences {
         &__content {
           .marketing-preferences,
@@ -840,49 +973,12 @@
       }
     }
 
-    .continue-btn {
-      margin: 0 -15px;
-      margin-top: 20px;
-    }
-
-    .billing-payment-block {
-      margin-bottom: 0;
-    }
-
-    .simplify-collection {
-      margin: 0 -15px;
-
-      &__heading {
-        margin-top: 27px;
-        font-size: 1.5rem;
-        line-height: 1.75rem;
-      }
-    }
-
     .right-aside {
       overflow-x: hidden;
 
       .summary {
-        .checkout-title__title {
-          margin-bottom: 16px;
-          font-size: 1.5rem;
-          line-height: 1.75rem;
-        }
-
         &__aside {
-          margin: 0 -15px 10px;
-          padding: 0;
-
           .checkout-widget {
-            &_order-summary {
-              padding: 25px 20px 0;
-              margin: 0;
-            }
-
-            &__details {
-              padding: 0;
-            }
-
             &__item-bold {
               .checkout-widget__item-value {
                 font-size: 1.125rem;
@@ -890,10 +986,6 @@
             }
           }
         }
-
-        &__basked-id {
-          margin: 0 -15px;
-        }
       }
     }
   }