wickes-css2 2.94.0 → 2.95.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/Readme.md +3 -2
  2. package/build/css/main.css +1 -1
  3. package/build/css/my-account-main-v2.css +1 -1
  4. package/build/css/pages/checkout-new.css +1 -1
  5. package/build/css/pages/checkout.css +1 -1
  6. package/build/css/pages/my-account-v2.css +1 -1
  7. package/build/css/pages/page_checkout_delivery-new.css +1 -1
  8. package/build/css/pages/page_my-orders.css +1 -0
  9. package/build/css/pages/page_products-list-combined.css +1 -1
  10. package/build/css/pages/page_products-list.css +1 -1
  11. package/build/css/pages/page_shopping-cart-v2.css +1 -1
  12. package/build/css/pages/tradePro-signup.css +1 -1
  13. package/build/css/pdp-main-non-critical.css +1 -1
  14. package/build/css/plp-main.css +1 -1
  15. package/build/js/basket.min.js +2 -2
  16. package/build/js/bundle.min.js +1 -1
  17. package/build/js/checkout.min.js +2 -2
  18. package/build/js/emulation.min.js +54 -2
  19. package/build/js/general.bundle.min.js +1 -1
  20. package/build/js/merged-checkout.min.js +2 -2
  21. package/build/js/my-orders.min.js +1 -0
  22. package/build/js/page/basket/summary-mobile.js +22 -0
  23. package/build/js/page/basket-v2.js +13 -0
  24. package/build/js/page/components/order-summary.js +8 -1
  25. package/build/js/page/components/sticky-order-observer.js +49 -0
  26. package/build/js/page/components/voucher.js +1 -1
  27. package/build/js/page/my-orders.js +165 -0
  28. package/build/js/page/quiz.js +20 -11
  29. package/build/js/pdp.bundle.min.js +1 -1
  30. package/build/js/plp.bundle.min.js +1 -1
  31. package/build/js/project-list.min.js +1 -1
  32. package/build/js/quiz.min.js +1 -1
  33. package/package.json +1 -1
  34. package/src/components/checkout-action.hbs +14 -11
  35. package/src/components/checkout-voucher-accordion.hbs +15 -0
  36. package/src/components/checkout_order-summary-new.hbs +5 -3
  37. package/src/components/checkout_voucher_large.hbs +20 -16
  38. package/src/components/date-selection.hbs +1 -1
  39. package/src/components/flatpickr-calendar.hbs +26 -0
  40. package/src/components/my-account/active-orders/header.hbs +6 -2
  41. package/src/components/my-account/active-orders/list-orders.hbs +14 -2
  42. package/src/components/my-account/active-orders/order-header.hbs +1 -1
  43. package/src/components/my-account/active-orders/order.hbs +10 -6
  44. package/src/components/my-account/clipboard-code-card.hbs +1 -1
  45. package/src/components/my-account/empty-orders.hbs +9 -0
  46. package/src/components/my-account/mobile-nav.hbs +23 -19
  47. package/src/components/my-account/orders-nav.hbs +15 -0
  48. package/src/components/my-account/sort-by.hbs +3 -0
  49. package/src/components/my-account/user-account-actions.hbs +1 -1
  50. package/src/components/order-item.hbs +3 -3
  51. package/src/components/order-summary.hbs +91 -56
  52. package/src/components/partner-signup-form.hbs +4 -0
  53. package/src/components/signup-form.hbs +1 -2
  54. package/src/components/summary-mobile-bar.hbs +17 -0
  55. package/src/data/data_delivery-address-v2.json +1 -1
  56. package/src/data/data_shopping-cart-v2.json +24 -0
  57. package/src/data/my-account/data_my-orders.json +246 -0
  58. package/src/elements/dropdown.hbs +1 -1
  59. package/src/js/components/flatpickr.js +167 -0
  60. package/src/js/components/general/handleAccordion.js +35 -0
  61. package/src/js/components/general/is-trade-pro.js +15 -1
  62. package/src/js/emulation/basket-data.js +2 -2
  63. package/src/js/emulation/mock.js +10 -0
  64. package/src/js/emulation/my-orders-local.js +41 -0
  65. package/src/js/page/basket/summary-mobile.js +22 -0
  66. package/src/js/page/basket-v2.js +13 -0
  67. package/src/js/page/components/order-summary.js +8 -1
  68. package/src/js/page/components/sticky-order-observer.js +49 -0
  69. package/src/js/page/components/voucher.js +1 -1
  70. package/src/js/page/my-orders.js +165 -0
  71. package/src/js/page/quiz.js +20 -11
  72. package/src/layouts/basket-new.hbs +1 -1
  73. package/src/layouts/checkout-new.hbs +1 -0
  74. package/src/page_checkout_confirmation-new-marketing-consent-error.html +0 -2
  75. package/src/page_checkout_delivery-address-customer-journey.html +0 -5
  76. package/src/page_checkout_delivery-address-v2.html +0 -4
  77. package/src/page_checkout_delivery-details-v2-asm.html +1 -5
  78. package/src/page_checkout_delivery-details-v2-calendar-message.html +0 -3
  79. package/src/page_checkout_delivery-details-v2-oos.html +0 -3
  80. package/src/page_checkout_delivery-details-v2-wisdom-not-available.html +0 -5
  81. package/src/page_checkout_delivery-details-v2-wisdom.html +0 -5
  82. package/src/page_checkout_delivery-details-with-loader-v2.html +0 -3
  83. package/src/page_checkout_delivery-details_guest-new.html +0 -5
  84. package/src/page_checkout_delivery_address-asm-new.html +0 -4
  85. package/src/page_checkout_next-day-delivery-details.html +0 -6
  86. package/src/page_checkout_payment-details-v2.html +1 -1
  87. package/src/page_checkout_payment-details_guest-with-checkout-journey.html +0 -2
  88. package/src/page_checkout_payment-details_login-with-checkout-journey.html +0 -2
  89. package/src/page_checkout_rapid-delivery-details.html +0 -6
  90. package/src/page_klarna_payment-details_with-klarna.html +3 -6
  91. package/src/page_my-orders-empty.html +49 -0
  92. package/src/page_my-orders.html +64 -0
  93. package/src/page_payment-details-with-clearpay.html +1 -1
  94. package/src/page_payment-details_with_apple-pay.html +1 -1
  95. package/src/page_payment-details_with_google-pay.html +1 -1
  96. package/src/page_shopping-cart-v2.html +6 -16
  97. package/src/page_tradePro-signup.html +1 -1
  98. package/src/scss/components/_checkout-action.scss +132 -6
  99. package/src/scss/components/_marketing-preferences.scss +1 -1
  100. package/src/scss/components/_order-summary.scss +329 -178
  101. package/src/scss/components/_sticky-element-appearance.scss +25 -0
  102. package/src/scss/components/my-account/_active-orders.scss +263 -0
  103. package/src/scss/components/my-account/_orders-nav.scss +61 -0
  104. package/src/scss/helpers/_variables.scss +3 -0
  105. package/src/scss/libs/flatpickr.scss +235 -0
  106. package/src/scss/main.scss +1 -0
  107. package/src/scss/pages/_checkout-widget.scss +137 -28
  108. package/src/scss/pages/my-account-v2.scss +1 -136
  109. package/src/scss/pages/page_checkout_delivery-new.scss +119 -10
  110. package/src/scss/pages/page_my-orders.scss +232 -0
  111. package/src/scss/pages/page_products-list-combined.scss +0 -1
  112. package/src/scss/pages/page_products-list.scss +0 -1
  113. package/src/scss/pages/page_shopping-cart-v2.scss +137 -36
  114. package/src/scss/pages/tradePro-signup.scss +27 -0
  115. package/src/sitemap.html +2 -0
  116. package/src/scss/components/my-account/_order.scss +0 -112
@@ -119,8 +119,6 @@
119
119
  </button>
120
120
  </div>
121
121
 
122
- {{> checkout_voucher_large title="Voucher Code"}}
123
-
124
122
  <div class="continue-btn">
125
123
  <button class="btn btn-action">Continue to Payment Details</button>
126
124
  </div>
@@ -130,7 +128,6 @@
130
128
  {{#content "foot" mode="append"}}
131
129
  <script defer src="./js/page/checkout-confirmation-new.js"></script>
132
130
  <script defer src="./js/page/select-address.js"></script>
133
- <script src="./js/checkout.min.js"></script>
134
131
 
135
132
  {{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}
136
133
  {{#content "body"}}
@@ -117,8 +117,6 @@
117
117
  </button>
118
118
  </div>
119
119
 
120
- {{> checkout_voucher_large title="Voucher Code"}}
121
-
122
120
  <div class="continue-btn">
123
121
  <button class="btn btn-action">Continue to Payment Details</button>
124
122
  </div>
@@ -127,7 +125,6 @@
127
125
 
128
126
  {{#content "foot" mode="append"}}
129
127
  <script defer src="./js/page/checkout-confirmation-new.js"></script>
130
- <script src="./js/checkout.min.js"></script>
131
128
 
132
129
  {{#extend "modal" classMod="edit-delivery-address" id="modalDeliveryEdit" title="Edit delivery address" fullWidth=true}}
133
130
  {{#content "body"}}
@@ -147,5 +144,3 @@
147
144
 
148
145
  {{/content}}
149
146
  {{/extend}}
150
-
151
-
@@ -24,8 +24,6 @@
24
24
  </div>
25
25
  </div>
26
26
 
27
- {{> checkout_voucher_large title="Voucher Code"}}
28
-
29
27
  <div class="continue-btn">
30
28
  <button class="btn btn-action">Continue to Delivery Details</button>
31
29
  </div>
@@ -35,7 +33,6 @@
35
33
  {{#content "foot" mode="append"}}
36
34
  <script defer src="./js/page/checkout-confirmation-new.js"></script>
37
35
  <script defer src="./js/page/select-address.js"></script>
38
- <script src="./js/checkout.min.js"></script>
39
36
 
40
37
  {{#extend "modal" classMod="edit-delivery-address" id="modalDeliveryEdit" title="Edit delivery address" fullWidth=true}}
41
38
  {{#content "body"}}
@@ -51,4 +48,3 @@
51
48
 
52
49
  {{/content}}
53
50
  {{/extend}}
54
-
@@ -126,9 +126,6 @@
126
126
  </button>
127
127
  </div>
128
128
 
129
-
130
- {{> checkout_voucher_large title="Voucher Code"}}
131
-
132
129
  <div class="continue-btn">
133
130
  <button class="btn btn-action">Continue to Payment Details</button>
134
131
  </div>
@@ -138,7 +135,6 @@
138
135
  {{#content "foot" mode="append"}}
139
136
  <script defer src="./js/page/checkout-confirmation-new.js"></script>
140
137
  <script defer src="./js/page/select-address.js"></script>
141
- <script src="./js/checkout.min.js"></script>
142
138
 
143
139
  {{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}
144
140
  {{#content "body"}}
@@ -157,5 +153,3 @@
157
153
 
158
154
  {{/content}}
159
155
  {{/extend}}
160
-
161
-
@@ -1,4 +1,4 @@
1
- {{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details" isAsideSticky="true" clearPayIcon=true}}
1
+ {{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details" isAsideSticky="true" clearPayIcon=true}}
2
2
  {{#content "steps"}}
3
3
  {{> steps-three-steps active-step-index="2"}}
4
4
  {{/content}}
@@ -61,8 +61,6 @@
61
61
  </div>
62
62
  </div>
63
63
 
64
- {{> checkout_voucher_large title="Voucher Code"}}
65
-
66
64
  <div class="continue-btn">
67
65
  <button class="btn btn-action">Continue to Payment Details</button>
68
66
  </div>
@@ -61,8 +61,6 @@
61
61
  </div>
62
62
  </div>
63
63
 
64
- {{> checkout_voucher_large title="Voucher Code"}}
65
-
66
64
  <div class="continue-btn">
67
65
  <button class="btn btn-action">Continue to Payment Details</button>
68
66
  </div>
@@ -128,9 +128,6 @@
128
128
  </button>
129
129
  </div>
130
130
 
131
-
132
- {{> checkout_voucher_large title="Voucher Code"}}
133
-
134
131
  <div class="continue-btn">
135
132
  <button class="btn btn-action">Continue to Payment Details</button>
136
133
  </div>
@@ -140,7 +137,6 @@
140
137
  {{#content "foot" mode="append"}}
141
138
  <script defer src="./js/page/checkout-confirmation-new.js"></script>
142
139
  <script defer src="./js/page/select-address.js"></script>
143
- <script src="./js/checkout.min.js"></script>
144
140
 
145
141
  {{#extend "modal" classMod="edit-delivery-address" id="modalEditAddress" title="Edit delivery address" fullWidth=true}}
146
142
  {{#content "body"}}
@@ -159,5 +155,3 @@
159
155
 
160
156
  {{/content}}
161
157
  {{/extend}}
162
-
163
-
@@ -1,4 +1,4 @@
1
- {{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Klarna" isAsideSticky="true"}}
1
+ {{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details with Klarna" isAsideSticky="true"}}
2
2
  {{#content "steps"}}
3
3
  {{> steps-three-steps active-step-index="2"}}
4
4
  {{/content}}
@@ -18,15 +18,12 @@
18
18
 
19
19
 
20
20
  {{#content "main"}}
21
-
22
-
23
-
24
21
  <div class="delivery-block">
25
22
  <h3 class="delivery-block__heading">Delivery Information</h3>
26
23
  <apple-pay-button buttonstyle="black" type="buy" locale="en-GB"></apple-pay-button>
27
24
  <div class="delivery-block__wrapper">
28
25
  {{#with checkoutOrder.deliveryPayments.[0]}}
29
- <div class="checkout-order">
26
+ <div class="checkout-order">
30
27
  {{> checkout-order-block}}
31
28
  </div>
32
29
  {{/with}}
@@ -37,7 +34,7 @@
37
34
  <h3 class="click-collect-block__heading">Click & Collect</h3>
38
35
  <div class="click-collect-block__wrapper">
39
36
  {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
40
- <div class="checkout-order">
37
+ <div class="checkout-order">
41
38
  {{> checkout-order-block}}
42
39
  </div>
43
40
  {{/with}}
@@ -0,0 +1,49 @@
1
+ {{#extend
2
+ "my-account-v2"
3
+ dataBreadcrumbs=my_orders.breadcrumbs
4
+ pageClass="page_my-account_new"
5
+ title="My Orders"
6
+ pageMyAcc=true
7
+ myAccV2=true
8
+ isLoggedIn=true
9
+ mainClass="my-orders"
10
+ }}
11
+ {{#content "head" mode="append"}}
12
+ <link type="text/css" rel="stylesheet" href="./css/pages/page_my-orders.css">
13
+ {{/content}}
14
+ {{#content "notification"}}
15
+ <div class="globalMessages">
16
+ </div>
17
+ {{/content}}
18
+ {{#content "main"}}
19
+ <div class="container">
20
+ <div class="row">
21
+ <div class="col-12">
22
+ {{> my-account/mobile-nav
23
+ menu=default-store.menu
24
+ active-index=1
25
+ page-name=my_orders.menu.[1].title
26
+ }}
27
+ </div>
28
+ </div>
29
+ </div>
30
+
31
+ <div class="container my-orders__wrap">
32
+ <div class="row">
33
+ <div class="col-12">
34
+ <div class="my-orders__header">
35
+ <h1 class="my-orders__title">My Orders</h1>
36
+ </div>
37
+ {{> my-account/empty-orders
38
+ title=my_orders.emptyOrders.title
39
+ image=my_orders.emptyOrdersImage
40
+ btnText=my_orders.emptyOrders.btnTitle
41
+ }}
42
+ </div>
43
+ </div>
44
+ </div>
45
+
46
+ {{/content}}
47
+ {{#content "foot" mode="append"}}
48
+ {{/content}}
49
+ {{/extend}}
@@ -0,0 +1,64 @@
1
+ {{#extend
2
+ "my-account-v2"
3
+ dataBreadcrumbs=my_orders.breadcrumbs
4
+ pageClass="page_my-account_new"
5
+ title="My Orders"
6
+ pageMyAcc=true
7
+ myAccV2=true
8
+ isLoggedIn=true
9
+ mainClass="my-orders"
10
+ }}
11
+ {{#content "head" mode="append"}}
12
+ <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
13
+ <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css" rel="stylesheet">
14
+ <link type="text/css" rel="stylesheet" href="./css/pages/page_my-orders.css">
15
+ {{/content}}
16
+ {{#content "notification"}}
17
+ <div class="globalMessages">
18
+ </div>
19
+ {{/content}}
20
+ {{#content "main"}}
21
+ <div class="container">
22
+ <div class="row">
23
+ <div class="col-12">
24
+ {{> my-account/mobile-nav
25
+ menu=default-store.menu
26
+ active-index=1
27
+ page-name=my_orders.menu.[1].title
28
+ }}
29
+ </div>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="container my-orders__wrap">
34
+ <div class="row">
35
+ <div class="col-12">
36
+ <div class="my-orders__header">
37
+ <h1 class="my-orders__title">My Orders</h1>
38
+ <div class="my-orders__sorts">
39
+ {{> flatpickr-calendar
40
+ textTooltip="Filter by year and month the order was placed"
41
+ }}
42
+ {{> my-account/sort-by }}
43
+ </div>
44
+ {{> my-account/orders-nav
45
+ nav=my_orders.nav
46
+ category=my_orders.nav.[0].title
47
+ }}
48
+ </div>
49
+ {{> my-account/active-orders/list-orders
50
+ title=false
51
+ orders=my_orders.orderList
52
+ isLoadMore=true
53
+ }}
54
+ </div>
55
+ </div>
56
+ </div>
57
+
58
+ {{/content}}
59
+ {{#content "foot" mode="append"}}
60
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr" defer></script>
61
+ <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js" defer></script>
62
+ <script src="./js/my-orders.min.js" defer></script>
63
+ {{/content}}
64
+ {{/extend}}
@@ -1,4 +1,4 @@
1
- {{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Clear Pay" isAsideSticky="true" clearPayIcon=true}}
1
+ {{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details with Clear Pay" isAsideSticky="true" clearPayIcon=true}}
2
2
 
3
3
  {{#content "head" mode="append"}}
4
4
  <link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
@@ -1,4 +1,4 @@
1
- {{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new payment-details" title="Checkout - Payment details with Apple Pay" isAsideSticky="true"}}
1
+ {{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new payment-details page_checkout" title="Checkout - Payment details with Apple Pay" isAsideSticky="true"}}
2
2
  {{#content "steps"}}
3
3
  {{> steps-three-steps active-step-index="2"}}
4
4
  {{/content}}
@@ -1,4 +1,4 @@
1
- {{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details with Google Pay" isAsideSticky="true"}}
1
+ {{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new page_checkout" title="Checkout - Payment details with Google Pay" isAsideSticky="true"}}
2
2
  {{#content "steps"}}
3
3
  {{> steps-three-steps active-step-index="2"}}
4
4
  {{/content}}
@@ -19,15 +19,14 @@
19
19
  {{/content}}
20
20
  {{#content "aside"}}
21
21
  {{> order-summary
22
- shopping-cart-v2.checkout
23
- id=1
24
- title="Order Summary"
25
- basket=true
22
+ shopping-cart-v2.checkout
23
+ id=1
24
+ title="Order Summary"
25
+ basket=true
26
26
  }}
27
27
  {{> checkout-action mod="mounted"}}
28
+ {{> checkout-action mod="mounted" view="mobile"}}
28
29
  {{> summary-payment paymentsCheckoutV2=true}}
29
- {{> checkout_voucher_large title="Voucher Code" id="1"}}
30
- {{> checkout-action mod="large checkout-action-payways"}}
31
30
  {{/content}}
32
31
  {{#content "main"}}
33
32
  <input type="hidden" id="SUPPLIER_DELIVERED_7_DAYS" value="<b> Wickes Supplier </b> - Delivery within 7 days">
@@ -41,16 +40,7 @@
41
40
  {{/each}}
42
41
  </section>
43
42
  {{/each}}
44
- {{> charity-donations-multiple shopping-cart-v2.charityDonationMultiple}}
45
- {{> checkout_voucher_large title="Voucher Code" id="2"}}
46
- {{> order-summary
47
- shopping-cart-v2.checkout
48
- title="Order Summary"
49
- id=2
50
- mod="large"
51
- basket=true
52
- }}
53
- {{> checkout-action mod="checkout-action-payways"}}
43
+ {{> charity-donations-multiple shopping-cart-v2.charityDonationMultiple}}
54
44
  {{/content}}
55
45
  {{#content "foot" mode="append"}}
56
46
  <script defer src="./js/basket.min.js"></script>
@@ -25,7 +25,7 @@ text="Sorry, your TradePro application has already been submitted with this info
25
25
  {{> aside-nav2 trade-pages page-name="Wickes TradePro"}}
26
26
  {{/content}}
27
27
  {{#content "main"}}
28
- {{> partner-signup-form }}
28
+ {{> partner-signup-form fill-remaining=true}}
29
29
  <div class="component container divider-desk pl-0 pr-0">
30
30
  <div class="row">
31
31
  <div class="col-12">
@@ -1,16 +1,45 @@
1
1
  @import '../helpers/helpers';
2
2
 
3
3
  .checkout-action {
4
- margin-top: 5px;
5
- padding-bottom: 20px;
6
- border-bottom: 1px solid $gray;
4
+ padding: 15px 15px 24px;
5
+
6
+ .btn-checkout {
7
+ .checkout-text--mixed {
8
+ display: none;
9
+ }
10
+
11
+ .checkout-text--collect {
12
+ display: inline;
13
+ }
14
+ }
15
+
16
+ &:not(:has(.checkout-widget__basket-block)) {
17
+ .btn-checkout {
18
+ .checkout-text--mixed {
19
+ display: inline;
20
+ }
21
+
22
+ .checkout-text--collect {
23
+ display: none;
24
+ }
25
+ }
26
+ }
27
+
28
+ &:not(:has(.checkout-widget__basket-block)) {
29
+ .btn-checkout {
30
+ margin-bottom: 0;
31
+ }
32
+ }
7
33
 
8
34
  & .btn-checkout {
9
35
  display: flex;
10
36
  justify-content: center;
11
37
  align-items: center;
12
- height: 40px;
13
- margin-bottom: 20px;
38
+ height: 42px;
39
+ margin-bottom: 10px;
40
+ font-weight: 500;
41
+ font-size: 16px;
42
+ line-height: 1.5rem;
14
43
 
15
44
  .icon {
16
45
  padding-left: 5px;
@@ -27,18 +56,21 @@
27
56
 
28
57
  & .paypal-button {
29
58
  padding-top: 0;
59
+ height: 42px;
30
60
  }
31
61
 
32
62
  & .paypal-button-text {
33
63
  padding-left: 3px;
34
- font-size: .875rem;
64
+ font-size: 1rem;
35
65
  font-weight: 500;
66
+ line-height: 1rem;
36
67
  }
37
68
  }
38
69
  }
39
70
 
40
71
  &__wrapper {
41
72
  order: -2;
73
+ background-color: $white;
42
74
 
43
75
  &.large {
44
76
  order: inherit;
@@ -51,6 +83,30 @@
51
83
  &.mounted {
52
84
  display: none;
53
85
  }
86
+
87
+ &.mobile {
88
+ display: block;
89
+ position: static;
90
+ order: 1;
91
+
92
+ .checkout-action {
93
+ margin-top: 20px;
94
+ padding: 0;
95
+ padding-bottom: 20px;
96
+
97
+ .btn-checkout {
98
+ margin-bottom: 20px;
99
+ }
100
+
101
+ &:not(:has(.checkout-widget__basket-block)) {
102
+ padding-bottom: 0;
103
+
104
+ .btn-checkout {
105
+ margin-bottom: 0;
106
+ }
107
+ }
108
+ }
109
+ }
54
110
  }
55
111
 
56
112
  &__large {
@@ -93,6 +149,66 @@
93
149
  }
94
150
  }
95
151
 
152
+ @include media-breakpoint-up(sm) {
153
+
154
+ .checkout-action {
155
+ margin-top: 0;
156
+ padding: 0;
157
+ border-bottom: 0;
158
+
159
+ &__wrapper {
160
+ padding: 20px 0 24px;
161
+ background-color: $white;
162
+ order: -2;
163
+
164
+ &.large {
165
+ order: inherit;
166
+
167
+ .checkout-action {
168
+ margin-top: 20px;
169
+ }
170
+ }
171
+
172
+ &.mounted {
173
+ display: none;
174
+ }
175
+
176
+ &.mobile {
177
+ display: block;
178
+ position: static;
179
+ order: 1;
180
+ padding: 0;
181
+
182
+ .checkout-action {
183
+ margin-top: 20px;
184
+ padding: 0;
185
+ padding-bottom: 20px;
186
+
187
+ .btn-checkout {
188
+ margin-bottom: 20px;
189
+ }
190
+
191
+ &:not(:has(.checkout-widget__basket-block)) {
192
+ padding-bottom: 0;
193
+
194
+ .btn-checkout {
195
+ margin-bottom: 0;
196
+ }
197
+ }
198
+ }
199
+ }
200
+ }
201
+ }
202
+
203
+ .checkout-action .btn-checkout {
204
+ margin-bottom: 10px;
205
+ }
206
+
207
+ .checkout-action--single .btn-checkout {
208
+ margin-bottom: 0;
209
+ }
210
+ }
211
+
96
212
  @include media-breakpoint-up(md) {
97
213
  .checkout-action {
98
214
  .pay-pal_wrap {
@@ -105,8 +221,13 @@
105
221
 
106
222
  @include media-breakpoint-up(lg) {
107
223
  .checkout-action {
224
+ margin-top: 5px;
225
+ padding-bottom: 20px;
226
+ border-bottom: 1px solid $gray;
227
+
108
228
  &__wrapper {
109
229
  order: inherit;
230
+ position: static;
110
231
 
111
232
  &.large {
112
233
  order: -2;
@@ -115,6 +236,7 @@
115
236
 
116
237
  &.mounted {
117
238
  display: block;
239
+ padding: 0;
118
240
  padding-top: 15px;
119
241
  background: $white;
120
242
 
@@ -122,6 +244,10 @@
122
244
  border-bottom: 0;
123
245
  }
124
246
  }
247
+
248
+ &.mobile {
249
+ display: none;
250
+ }
125
251
  }
126
252
 
127
253
  &__large {
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  &__content {
24
- font-size: 0.75rem;
24
+ font-size: .75rem;
25
25
  line-height: 1rem;
26
26
 
27
27
  p {