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

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;
     }
   }
 }

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

@@ -0,0 +1,192 @@
+.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;
+    }
+  }
+}

package/src/scss/components/_payments-checkout.scss

@@ -26,7 +26,8 @@
   }
 
   &-klarna {
-    display: block;
+    display: flex;
+    align-items: center;
     height: 30px;
     width: 48px;
   }

package/src/scss/components/_payments-v2.scss

@@ -52,6 +52,14 @@
 }
 
 @include media-breakpoint-up(sm) {
+  .payways {
+    max-width: 100%;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+@include media-breakpoint-up(md) {
   .payways {
     max-width: 100%;
     flex-direction: row;

package/src/scss/components/_tooltip.scss

@@ -0,0 +1,19 @@
+.tooltip {
+  filter: drop-shadow(0 0 8px rgba(0, 0, 0, .12));
+  position: absolute;
+
+  .tooltip-inner {
+    background: $white;
+    color: $gray-dark;
+    padding: 8px 16px !important;
+    border-radius: 4px;
+    font-weight: 400;
+    font-size: .875rem;
+    line-height: 1.375rem;
+    max-width: 340px !important;
+  }
+
+  .arrow:before {
+    border-top-color: $white;
+  }
+}