wickes-css2 2.103.0-develop.1 → 2.103.0-develop.4

package/src/scss/components/_custom-slider.scss

@@ -80,6 +80,18 @@
     }
   }
 
+  &__notifications {
+    &:has(.notification) {
+      margin-top: 16px;
+    }
+
+    .notification:only-child {
+      @include font-size(14);
+      @include line-height(24);
+      margin-bottom: 0;
+    }
+  }
+
   &__message {
     margin-top: 8px;
     display: flex;
@@ -159,6 +171,32 @@
     &__details {
       flex: 1;
 
+      &-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        grid-gap: 8px;
+
+        .btn--remove {
+          min-width: 24px;
+          padding: 4px;
+          background: 0 0;
+          border: none;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .remove-icon {
+            color: $blue;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      &-body {
+        margin-top: 4px;
+      }
+
       .item,
       .price {
         margin-bottom: 0;
@@ -190,8 +228,8 @@
       }
 
       .price {
-        @include font-size(18);
-        @include line-height(24);
+        @include font-size(16);
+        @include line-height(20);
         margin-top: 8px;
         font-weight: 700;
         color: $blue-dark;
@@ -206,6 +244,54 @@
       &.product-card__content {
         margin-top: 0;
         padding: 0;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    &__quantity-control {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+
+      .quantity {
+        margin-bottom: 0;
+        min-width: 40px;
+        text-align: center;
+        padding: 0 5px;
+
+        .product-card__quantity-value {
+          margin: 0;
+          font-weight: 400;
+        }
+      }
+
+      .btn--quantity {
+        background: none;
+        padding: 0;
+        width: 24px;
+        min-height: 24px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        .quantity-cta-icon {
+          font-size: 1.35rem;
+          color: $blue;
+        }
+
+        &[disabled] {
+          border: none;
+          opacity: 0.6;
+        }
+      }
+    }
+
+    .btn--remove,
+    .btn--quantity {
+      &:hover {
+        opacity: 0.7;
       }
     }
 
@@ -218,6 +304,17 @@
         }
       }
     }
+
+    &__offers {
+      margin-top: 4px;
+
+      .products__promo {
+        @include font-size(12);
+        @include line-height(16);
+        color: $red;
+        font-weight: 400;
+      }
+    }
   }
 
   &__footer {
@@ -324,7 +421,7 @@
           font-weight: 500;
         }
 
-        .value {
+        &-value {
           @include font-size(18);
           @include line-height(24);
           font-weight: 700;
@@ -454,6 +551,30 @@
   }
 }
 
+@include media-breakpoint-up(sm) {
+  .custom-slider {
+    .products__details {
+      .price {
+        @include font-size(18);
+        @include line-height(24);
+
+        .inc {
+          @include font-size(12);
+          @include line-height(16);
+          font-weight: 500;
+        }
+      }
+
+      &-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: auto;
+      }
+    }
+  }
+}
+
 @include media-breakpoint-up(sm) {
   .custom-slider {
     &__wrap {

package/src/scss/components/_popover-mini-basket.scss

@@ -173,10 +173,6 @@
         .card__img {
           border: 0;
         }
-
-        .product-card__content {
-          height: auto;
-        }
       }
     }
   }

package/src/js/components/general/mini-basket-slider.js

@@ -1,8 +0,0 @@
-createPopupSlider({
-  type: 'miniBasket',
-  sliderSelector: '.custom-slider.mini-basket',
-  onAppendEvent: 'showMiniBasket',
-  onAppend: function (event, { showSlider }) {
-    showSlider();
-  },
-});