wickes-css2 2.98.0-develop.8 → 2.98.0-develop.9

package/src/page_wismo-details.html

@@ -38,7 +38,7 @@
                                             <svg class="svg-inline--fa fa-info-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg><!-- <i class="fas fa-info-circle"></i> -->
                                         </span>
                                         <span class="ref-msg">
-                                            The total refund issued for your recent order cancellation or amendments was 
+                                            The total refund issued for your recent order cancellation or amendments was
                                             £20.00
                                         </span>
                                     </div>
@@ -49,7 +49,7 @@
                 </div>
                 <aside class="right-aside">
                     {{> wismo_order-summary }}
-                    {{> wismo-payment }}
+                    {{> wismo-payment payment-billie=true}}
                 </aside>
             </div>
         </div>

package/src/partials/head.hbs

@@ -32,11 +32,7 @@
 {{/if}}
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
-<script
-    async
-    src="https://eu-library.playground.klarnaservices.com/lib.js"
-    data-client-id="63bb2358-8698-5b0d-b6c0-e8dd2b49d915"
-></script>
+<script async="" src="https://js.klarna.com/web-sdk/v1/klarna.js" data-client-id="63bb2358-8698-5b0d-b6c0-e8dd2b49d915" data-environment="playground"></script>
 {{#if pageBasket}}
     <script async src="https://js-sandbox.squarecdn.com/square-marketplace.js"></script>
 {{/if}}

package/src/scss/common/_app.scss

@@ -56,4 +56,3 @@
     }
   }
 }
-

package/src/scss/common/_elements.scss

@@ -38,6 +38,10 @@
     .ddn > select {
       @include field-error;
     }
+
+    .rbn ins {
+      @include field-error;
+    }
   }
 
   .icon-info {

package/src/scss/components/_billie-modal.scss

@@ -0,0 +1,181 @@
+.modal.billie-modal {
+  .modal-header,
+  .modal-footer {
+    position: sticky;
+    background-color: $white;
+    z-index: 10;
+    box-shadow: none;
+    border-bottom: 0;
+    transition: box-shadow .3s ease;
+    padding: 0;
+  }
+
+  .modal-dialog {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+  }
+
+  .modal-content {
+    width: 100%;
+  }
+
+  .modal-box__content {
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
+  }
+
+  .modal-box__header::after {
+    border: 0;
+  }
+
+  .modal-header {
+    top: 0;
+    border-bottom: 1px solid $gray-200;
+    margin-right: -15px;
+  }
+
+  .billie-modal__heading {
+    margin-bottom: 8px;
+  }
+
+  .modal-box__footer-row {
+    width: 100%;
+  }
+
+  ul.billie-modal__list,
+  ol.billie-modal__list {
+    padding-left: 20px;
+  }
+
+  .modal-footer {
+    justify-content: center;
+    bottom: 0;
+    border-top: 0;
+
+    .modal-box__inner-columns {
+      margin: 0;
+    }
+  }
+
+  .modal-box__container {
+    padding: 0;
+  }
+
+  .modal-box__inner-columns {
+    padding: 16px;
+    margin: 0 16px;
+  }
+
+  .modal-box__header .close  {
+    right: 23px;
+    top: 8px;
+  }
+
+  .modal-box__inner-columns .btn {
+    width: 100%;
+  }
+
+  .modal-body {
+    flex-grow: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .modal-box__inner-columns {
+      padding: 16px 16px 24px;
+    }
+  }
+
+  .modal-content {
+    &[data-scroll-state="middle"],
+    &[data-scroll-state="bottom"] {
+      .modal-header {
+        box-shadow: 0 0 15px rgba(0, 0, 0, .2);
+        border-bottom: 0;
+      }
+    }
+
+    &[data-scroll-state="middle"],
+    &[data-scroll-state="top"] {
+      .modal-footer {
+        box-shadow: 0 -2px 4px rgba(0, 0, 0, .05);
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .modal.billie-modal {
+    .modal-content {
+      width: 476px;
+      height: 628px;
+    }
+
+    .modal-dialog {
+      margin: 0 auto;
+      justify-content: center;
+      max-width: 100%;
+      height: auto;
+    }
+
+    .modal-box__header .close  {
+      right: 8px;
+      top: 8px;
+    }
+
+    .modal-body {
+      margin-right: 0;
+
+      .modal-box__inner-columns {
+        margin: 0;
+      }
+    }
+
+    .modal-header {
+      margin-right: 0;
+
+      .modal-box__inner-columns {
+        margin: 0;
+      }
+    }
+
+    .modal-footer {
+      margin-right: 0;
+    }
+
+    .modal-box__container {
+      margin: 0 auto;
+    }
+  }
+
+  .modal.billie-modal.modal-box_full {
+    background: transparent;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .modal.billie-modal {
+    .modal-content {
+      height: auto;
+    }
+
+    .modal-dialog {
+      justify-content: center;
+    }
+
+    .modal-box__inner-row {
+      margin: 0;
+    }
+
+    .modal-box__columns,
+    .modal-box__inner-columns {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+
+    .modal-box__inner-columns .btn {
+      width: auto;
+    }
+  }
+}

package/src/scss/components/_billie-online-messaging.scss

@@ -0,0 +1,46 @@
+.billie {
+  display: flex;
+  align-items: center;
+  border: 1px solid $gray;
+  background-color: $white;
+  padding: 8px;
+  gap: 8px;
+
+  &__logo {
+    height: 25px;
+  }
+
+  &.billie-basket {
+    margin: -20px -20px 0;
+  }
+
+  .billie__logo {
+    height: 25px;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__title {
+    font-size: .75rem;
+    font-weight: 500;
+    line-height: 1rem;
+    color: $gray-dark;
+  }
+
+  &__link {
+    color: inherit;
+    text-decoration: underline;
+    font-weight: 400;
+    white-space: nowrap;
+  }
+
+  &__subtitle {
+    font-size: .75rem;
+    font-weight: 400;
+    line-height: 1rem;
+    color: $squant;
+  }
+}

package/src/scss/components/_charity-donations.scss

@@ -113,238 +113,166 @@
       max-width: 100%;
     }
   }
+}
 
-  &.charity-multiple {
-    .checkout-info-wrap {
-      padding: 15px;
-    }
-
-    .title {
-      margin-bottom: 15px;
-    }
-
-    .definition {
-      font-size: .75rem;
-      font-weight: 400;
-      line-height: 14px;
-      margin-bottom: 25px;
-    }
-
-    .descr {
-      margin-top: -10px;
-    }
-
-    .checkout-order {
-      &__img {
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-          object-position: top;
-        }
-      }
-    }
+.charity-donation-new {
+  background-color: $gray-bg;
+  padding: 16px;
 
-    .donation-cart {
-      &__definition {
-        display: none;
-      }
-    }
-
-    &.charity-added {
-      .checkout-order {
-        &__charity {
-          border-bottom: 1px solid $gray;
-          padding-bottom: 15px;
-        }
-      }
-    }
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
   }
-}
 
-@include media-breakpoint-up(sm) {
-  .charity-new {
-    .checkout-order {
-      &__img {
-        img {
-          max-width: 155px;
-          max-height: 42px;
-          width: 155px;
-          height: 42px;
-        }
+  &__top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
 
-        .image {
-          width: 155px;
-        }
-      }
+  &__header {
+    display: flex;
+    gap: 12px;
+  }
 
-      &__info-wrap {
-        padding-top: 0;
-      }
+  &__right {
+    flex-shrink: 0;
+  }
 
-      .price-wrap {
-        align-items: center;
+  &__image {
+    width: 64px;
+  }
 
-        label {
-          margin-top: 0;
-        }
-      }
+  &__title {
+    width: 100%;
+    font-size: .875rem;
+    font-weight: 500;
+    line-height: 1.375rem;
+    margin-bottom: 12px;
+  }
 
-      .title-wrap {
-        max-width: 100%;
-        display: flex;
-        flex-direction: column;
+  &__description {
+    width: 100%;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1rem;
+    margin-bottom: 16px;
+  }
 
-        .title {
-          order: 1;
-        }
+  &__message {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
 
-        .descr {
-          order: 2;
-        }
+  &__body {
+    width: 100%;
+  }
+}
 
-        .definition {
-          order: 3;
-        }
-      }
+@include media-breakpoint-up(sm) {
+  .charity-donation-new {
+    &__title {
+      width: 100%;
+      font-weight: 500;
+      font-size: 1rem;
+      line-height: 1.5rem;
     }
 
-    &.charity-multiple {
-      .checkout-order {
-        &__img {
-          max-width: 184px;
-
-          img {
-            max-height: initial;
-            max-width: 100%;
-          }
-        }
-
-        &__info-wrap {
-          align-items: flex-start;
-        }
-      }
+    &__description {
+      width: 100%;
+      margin: 0;
+    }
 
-      .price-wrap {
-        margin-top: 6px;
+    &__message {
+      display: block;
+    }
 
-        .order-item {
-          &__remove {
-            margin-top: 0;
-          }
-        }
-      }
+    &__image {
+      width: 100px;
+    }
 
-      .title-wrap {
-        .descr {
-          margin-bottom: 20px;
-        }
-      }
+    &__body {
+      margin-top: 16px;
     }
   }
 }
 
 @include media-breakpoint-up(md) {
-  .charity-new {
-    .checkout-order {
-      &__info-wrap {
-        padding-left: 15px;
-      }
-
-      .title-wrap {
-        max-width: 50%;
-      }
+  .charity-donation-new {
+    &__title {
+      width: 100%;
     }
 
-    &.charity-multiple {
-      .checkout-info-wrap {
-        padding-bottom: 20px;
-      }
-
-      .donation-cart {
-        &__definition {
-          display: block;
-        }
-      }
-
-      .definition.definition,
-      & p:last-of-type {
-        margin-bottom: 0;
-      }
+    &__body {
+      margin-top: 16px;
+      width: 668px;
     }
 
-    &.charity-multiple.charity-added {
-      .checkout-order {
-        .title-wrap {
-          max-width: none;
-        }
-
-        &__charity {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
+    &__description {
+      width: 488px;
+      margin-top: -25px;
+    }
 
-          .definition {
-            display: none;
-          }
-        }
-      }
+    &__message {
+      display: block;
+    }
 
-      .title-wrap {
-        .descr {
-          margin-bottom: 0;
-        }
-      }
+    &__image {
+      width: 124px;
     }
   }
 }
 
 @include media-breakpoint-up(lg) {
-  .charity-new {
-    .checkout-order {
-      .title-wrap {
-        max-width: 50%;
-      }
+  .charity-donation-new {
+    &__cost {
+      height: 24px;
+    }
+
+    &__title {
+      width: 100%;
+      margin-bottom: 8px;
+    }
+
+    &__body {
+      margin-top: 16px;
+      width: 588px;
     }
-  }
 
-  .charity {
-    &__msg {
-      margin-bottom: 0;
-      max-width: 50%;
+    &__message {
+      margin: 0;
+      display: block;
     }
   }
 }
 
 @include media-breakpoint-up(xl) {
-  .charity-new {
-    &.charity-multiple {
-      .checkout-order {
-        .title-wrap {
-          @include make-col(7);
-        }
+  .charity-donation-new {
+    padding: 24px;
 
-        &__info-wrap {
-          @include make-col(5);
-        }
-      }
+    &__title {
+      width: 100%;
+      margin-bottom: 8px;
     }
 
-    &.charity-multiple.charity-added {
-      .checkout-order {
-        &__info-wrap {
-          max-width: none;
-        }
+    &__body {
+      margin-top: 15px;
+      width: 747px;
+    }
 
-        &__charity {
-          grid-template-columns: 7fr 5fr;
-        }
-      }
+    &__description {
+      width: 100%;
+      margin-top: -30px;
     }
-  }
 
-  .charity {
-    &__msg {
-      max-width: 100%;
+    &__message {
+      margin-left: 3px;
+      display: inline;
+    }
+
+    &__image {
+      width: 124px;
     }
   }
 }