@sc-360-v2/storefront-cms-library 0.4.26 → 0.4.28

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 (58) hide show
  1. package/dist/add-order.scss +14 -12
  2. package/dist/add-products-tab.scss +179 -105
  3. package/dist/allocationDetails.scss +2 -2
  4. package/dist/allocations.scss +6 -6
  5. package/dist/builder.js +1 -1
  6. package/dist/bundleDetails copy.scss +1431 -0
  7. package/dist/bundleDetails.scss +3054 -107
  8. package/dist/button.scss +5 -2
  9. package/dist/buy-for-tab-container.scss +2 -1
  10. package/dist/buy-for-tab.scss +32 -21
  11. package/dist/buyForHeaders.scss +4544 -4082
  12. package/dist/buyForPopup.scss +154 -117
  13. package/dist/cart-details.scss +1 -1
  14. package/dist/cart-products-sidebar.scss +18 -56
  15. package/dist/cart-summary.scss +14 -12
  16. package/dist/coupon.scss +85 -0
  17. package/dist/dropdownTemplate.scss +5 -0
  18. package/dist/embroider-template-1-v2.scss +597 -0
  19. package/dist/embroider-template-1.scss +14 -5
  20. package/dist/embroidery.scss +25 -2
  21. package/dist/filters.scss +50 -15
  22. package/dist/functions.js +1 -1
  23. package/dist/functions.scss +4 -0
  24. package/dist/icons.js +1 -1
  25. package/dist/index.js +1 -1
  26. package/dist/language-selector.scss +4 -1
  27. package/dist/layouter-pro.scss +8 -0
  28. package/dist/modal.scss +37 -27
  29. package/dist/multi-select-dropdown.scss +53 -41
  30. package/dist/option-bar.scss +2 -2
  31. package/dist/order-status.scss +18 -14
  32. package/dist/product-actions.scss +27 -27
  33. package/dist/product-image.scss +14 -4
  34. package/dist/product-options.scss +1 -0
  35. package/dist/product-price.scss +1910 -1437
  36. package/dist/product-sizechart.scss +5 -2
  37. package/dist/profile.scss +3 -3
  38. package/dist/quantity-selector.scss +6 -6
  39. package/dist/quick-order-pad.scss +106 -42
  40. package/dist/repeater-embla-controls.scss +4 -2
  41. package/dist/repeater.scss +3 -3
  42. package/dist/search.scss +11 -1
  43. package/dist/section.scss +9 -9
  44. package/dist/shipping-payments.scss +5 -0
  45. package/dist/stack.scss +13 -3
  46. package/dist/types/builder/elements/common.d.ts +1 -0
  47. package/dist/types/builder/elements/light-box-v2/index.d.ts +1 -0
  48. package/dist/types/builder/elements/section/index.d.ts +1 -0
  49. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +481 -0
  50. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +5 -0
  51. package/dist/types/builder/tools/element-edit/filters.d.ts +5 -0
  52. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -0
  53. package/dist/types/builder/tools/element-edit/productPrice.d.ts +2 -1
  54. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +2 -0
  55. package/dist/types/website/constants/data-connector-souces.d.ts +13 -6
  56. package/dist/variant-picker.scss +1 -0
  57. package/dist/website.js +1 -1
  58. package/package.json +1 -1
package/dist/buyForPopup.scss CHANGED
@@ -7,60 +7,144 @@
7
7
  align-items: center;
8
8
  justify-content: center;
9
9
  z-index: 1000;
10
- }
10
+ .popup_container {
11
+ width: 90%;
12
+ max-width: 600px;
13
+ background: var(--_base-white);
14
+ border-radius: 12px;
15
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
16
+ display: flex;
17
+ flex-direction: column;
18
+ min-height: 480px;
11
19
 
12
- .popup_container {
13
- width: 90%;
14
- max-width: 600px;
15
- background: var(--_base-white);
16
- border-radius: 12px;
17
- box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
18
- display: flex;
19
- flex-direction: column;
20
- max-height: 83vh;
21
- }
20
+ .popup_header {
21
+ display: flex;
22
+ justify-content: space-between;
23
+ align-items: center;
24
+ border-bottom: 1px solid var(--_gray-200);
25
+ padding: 16px 24px;
26
+ gap: 4px;
27
+
28
+ .close-icon {
29
+ width: 32px;
30
+ height: 32px;
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ border-radius: 4px;
35
+ svg {
36
+ width: 18px;
37
+ height: 18px;
38
+ path {
39
+ stroke: var(--_gray-600);
40
+ }
41
+ }
42
+ &:hover {
43
+ background-color: var(--_gray-100);
44
+ svg path {
45
+ stroke: var(--_gray-900);
46
+ }
47
+ }
48
+ }
22
49
 
23
- .popup_header {
24
- display: flex;
25
- justify-content: space-between;
26
- align-items: center;
27
- border-bottom: 1px solid var(--_gray-200);
28
- padding: 16px 24px;
29
- gap: 4px;
50
+ h2 {
51
+ color: var(--_thm-ty-p1-tt-cr);
52
+ font-size: 18px;
53
+ font-weight: normal;
54
+ margin: 0;
55
+ line-height: 28px;
56
+ }
30
57
 
31
- .close-icon {
32
- width: 32px;
33
- height: 32px;
34
- display: flex;
35
- justify-content: center;
36
- align-items: center;
37
- border-radius: 4px;
38
- svg {
39
- width: 18px;
40
- height: 18px;
41
- path {
42
- stroke: var(--_gray-600);
58
+ p {
59
+ font-size: 14px;
60
+ color: #666;
61
+ margin: 4px 0 0;
43
62
  }
44
63
  }
45
- &:hover {
46
- background-color: var(--_gray-100);
47
- svg path {
48
- stroke: var(--_gray-900);
64
+
65
+ .popup_body {
66
+ padding: 8px 24px 24px 24px;
67
+ flex-grow: 1;
68
+ .est__dropdown__main {
69
+ .est__dropdown {
70
+ .list .list__option {
71
+ font-size: 14px;
72
+ }
73
+ .est__dropdown__button {
74
+ display: flex;
75
+ justify-content: space-between;
76
+ align-items: center;
77
+ width: 100%;
78
+ .value__selected {
79
+ justify-content: start;
80
+ }
81
+ }
82
+ }
49
83
  }
50
84
  }
51
- }
52
85
 
53
- h2 {
54
- font-size: 18px;
55
- font-weight: normal;
56
- margin: 0;
57
- line-height: 28px;
58
- }
86
+ .popup_footer {
87
+ display: flex;
88
+ padding: 16px 24px;
89
+ border-top: 1px solid var(--_gray-200);
90
+ justify-content: end;
91
+ gap: 12px;
92
+
93
+ button {
94
+ padding: 10px 16px;
95
+ // border-radius: 6px;
96
+ // font-size: 14px;
97
+ // font-weight: 500;
98
+ // cursor: pointer;
99
+ // border: none;
100
+ // transition: background 0.2s ease;
101
+ // display: flex;
102
+ // align-items: center;
103
+ // &[aria-label="Discard"] {
104
+ // &:hover {
105
+ // background-color: var(--_gray-100);
106
+ // color: var(--_gray-900);
107
+ // }
108
+ // }
109
+
110
+ // &:first-child {
111
+ // // background: #f3f3f3;
112
+ // color: #333;
113
+
114
+ // &:hover {
115
+ // // background: #e0e0e0;
116
+ // }
117
+ // }
118
+
119
+ &.proceed_button {
120
+ // background: var(--_primary-400);
121
+ // color: #fff;
122
+ // display: flex;
123
+ // gap: 10px;
124
+
125
+ // span {
126
+ // svg {
127
+ // width: 18px;
128
+ // height: 18px;
129
+
130
+ // path {
131
+ // stroke: #ffffff;
132
+ // }
133
+ // }
134
+ // }
135
+
136
+ &:disabled {
137
+ background: var(--_sf-hr-bd-cr, var(--_thm-py-bs-dt-se-bd-cr));
138
+ cursor: not-allowed;
139
+ opacity: 0.7;
140
+ }
59
141
 
60
- p {
61
- font-size: 14px;
62
- color: #666;
63
- margin: 4px 0 0;
142
+ // &:not(:disabled):hover {
143
+ // background: #0069d9;
144
+ // }
145
+ }
146
+ }
147
+ }
64
148
  }
65
149
  }
66
150
 
@@ -93,11 +177,6 @@
93
177
  }
94
178
  }
95
179
 
96
- .popup_body {
97
- padding: 24px;
98
- flex-grow: 1;
99
- }
100
-
101
180
  .search_input {
102
181
  padding: 10px 12px;
103
182
  border: 1px solid #ddd;
@@ -120,7 +199,22 @@
120
199
  flex-direction: column;
121
200
  gap: 16px;
122
201
  overflow-y: auto;
123
- max-height: 30vh;
202
+ max-height: 210px;
203
+ .empty__data {
204
+ width: 100%;
205
+ display: flex;
206
+ flex-direction: column;
207
+ justify-content: center;
208
+ align-items: center;
209
+ height: 210px;
210
+ p {
211
+ color: var(--_thm-ty-p1-tt-cr);
212
+ font-size: 18px;
213
+ font-weight: normal;
214
+ margin: 0;
215
+ line-height: 28px;
216
+ }
217
+ }
124
218
  }
125
219
 
126
220
  .group_section {
@@ -130,12 +224,12 @@
130
224
  gap: 8px;
131
225
  font-weight: 500;
132
226
  font-size: 14px;
133
- margin-bottom: 8px;
134
- padding: 8px;
227
+ padding-block: 16px 0px;
135
228
  border-bottom: 1px solid var(--_gray-200);
229
+ margin-bottom: 16px;
136
230
 
137
231
  input {
138
- width: auto;
232
+ width: 100%;
139
233
  }
140
234
 
141
235
  label {
@@ -155,6 +249,7 @@
155
249
  margin-bottom: 8px;
156
250
  cursor: pointer;
157
251
  transition: all 0.2s ease;
252
+ margin-top: 16px;
158
253
 
159
254
  &:last-child {
160
255
  margin-bottom: 0;
@@ -174,12 +269,16 @@
174
269
  flex-direction: column;
175
270
 
176
271
  .user_name {
272
+ color: var(--_thm-ty-p1-tt-cr);
177
273
  font-weight: 500;
274
+ font-size: 18px;
275
+ margin: 0;
276
+ line-height: 28px;
178
277
  }
179
278
 
180
279
  .user_id {
181
280
  font-size: 12px;
182
- color: #666;
281
+ color: var(--_thm-ty-p3-tt-cr);
183
282
  display: flex;
184
283
  gap: 4px;
185
284
  margin-top: 6px;
@@ -197,65 +296,3 @@
197
296
  }
198
297
  }
199
298
  }
200
-
201
- .popup_footer {
202
- display: flex;
203
- padding: 16px 24px;
204
- border-top: 1px solid var(--_gray-200);
205
- justify-content: end;
206
- gap: 12px;
207
-
208
- button {
209
- padding: 10px 16px;
210
- border-radius: 6px;
211
- font-size: 14px;
212
- font-weight: 500;
213
- cursor: pointer;
214
- border: none;
215
- transition: background 0.2s ease;
216
- display: flex;
217
- align-items: center;
218
- &[aria-label="Discard"] {
219
- &:hover {
220
- background-color: var(--_gray-100);
221
- color: var(--_gray-900);
222
- }
223
- }
224
-
225
- &:first-child {
226
- // background: #f3f3f3;
227
- color: #333;
228
-
229
- &:hover {
230
- // background: #e0e0e0;
231
- }
232
- }
233
-
234
- &.proceed_button {
235
- background: var(--_primary-400);
236
- color: #fff;
237
- display: flex;
238
- gap: 10px;
239
-
240
- span {
241
- svg {
242
- width: 18px;
243
- height: 18px;
244
-
245
- path {
246
- stroke: #ffffff;
247
- }
248
- }
249
- }
250
-
251
- &:disabled {
252
- background: var(--_primary-100);
253
- cursor: not-allowed;
254
- }
255
-
256
- &:not(:disabled):hover {
257
- background: #0069d9;
258
- }
259
- }
260
- }
261
- }
package/dist/cart-details.scss CHANGED
@@ -1386,7 +1386,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1386
1386
  height: 40px;
1387
1387
  display: flex;
1388
1388
  position: relative;
1389
- max-width: 55px;
1389
+ width: 55px;
1390
1390
  border-radius: 0px 4px 4px 0px;
1391
1391
  background: #fff;
1392
1392
  border-left: 1px solid #d0d5dd;
package/dist/cart-products-sidebar.scss CHANGED
@@ -17,7 +17,6 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
17
17
  width: 100%;
18
18
  height: 100%;
19
19
  top: 0;
20
- // background: rgba(112, 112, 112, 0.13);
21
20
  background: transparent;
22
21
  z-index: 9999;
23
22
  }
@@ -52,9 +51,6 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
52
51
 
53
52
  // Sidebar Header
54
53
  .minicart_header {
55
- // display: flex;
56
- // justify-content: flex-end;
57
- // align-items: center;
58
54
  padding-top: 6px;
59
55
  position: sticky;
60
56
  top: 0;
@@ -64,6 +60,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
64
60
  display: flex;
65
61
  justify-content: flex-end;
66
62
  width: 100%;
63
+ cursor: pointer;
67
64
  svg {
68
65
  margin-right: 8px;
69
66
  width: 18px;
@@ -101,78 +98,58 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
101
98
  .text_label {
102
99
  padding: 6px 16px;
103
100
  background-color: var(--_gray-100);
104
- color: var(--_gray-600);
105
101
  width: 100%;
106
102
  text-align: center;
107
- font-size: 12px;
108
- font-weight: 500;
109
- line-height: 18px;
110
103
  }
111
104
  }
112
105
 
113
106
  .mincart_items {
114
- flex-grow: 1;
115
- overflow-y: auto;
116
- // Cart Popup
117
107
  .cart_popup {
118
108
  background-color: #fff;
119
- // border-radius: 8px;
120
- display: flex;
121
- flex-direction: column;
122
- gap: 16px;
123
- padding: 16px;
124
109
  }
125
110
 
126
111
  .cart_item {
127
112
  display: flex;
128
113
  flex-direction: column;
129
114
  align-items: center;
130
- // margin-bottom: 8px;
115
+ gap: 4px;
131
116
  text-align: center;
132
- // padding: 16px;
133
- // border-bottom: 1px solid var(--_base-white);
117
+ padding: 16px;
134
118
  &:hover {
135
- background-color: var(--_gray-50);
136
119
  }
137
-
120
+ .product_img {
121
+ width: 64px !important;
122
+ height: 64px !important;
123
+ }
138
124
  .item_info {
139
- margin-top: 10px;
140
125
  text-align: center;
141
126
  }
142
127
 
143
128
  .item_title {
144
- font-size: 12px;
145
129
  font-weight: 500;
146
- color: var(--_gray-600);
147
130
  margin-bottom: 4px;
148
- line-height: 18px;
131
+ text-align: center;
149
132
  }
150
133
 
151
134
  .item_price {
152
- font-size: 12px;
153
135
  font-weight: 700;
154
- color: var(--_gray-900);
155
- line-height: 18px;
136
+ text-align: center;
156
137
  }
157
138
 
158
139
  .item_image {
159
- max-width: 64px;
160
- height: 64px;
161
- border-radius: 1px;
162
- object-fit: contain;
163
140
  }
164
141
  .item_action_btn {
165
142
  padding: 8px;
166
- color: #243dc6;
167
- // margin-top: 4px;
143
+ color: var(--_thm-cs-tt-ls-as);
168
144
  border-radius: 4px;
169
145
  font-size: 14px;
170
146
  font-weight: 400;
171
147
  line-height: 18px;
148
+ cursor: pointer;
172
149
 
173
150
  &:hover {
174
151
  background-color: var(--_primary-50);
175
- color: #243dc6;
152
+ color: var(--_thm-cs-tt-ls-as);
176
153
  }
177
154
  }
178
155
  }
@@ -184,7 +161,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
184
161
  display: flex;
185
162
  flex-direction: column;
186
163
  justify-content: center;
187
- padding: 12px;
164
+ padding: 16px;
188
165
  border-top: 1px solid #eee;
189
166
 
190
167
  .discard__btn {
@@ -207,7 +184,6 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
207
184
  transition: background 0.2s;
208
185
 
209
186
  &:hover {
210
- // background: darken($primary-color, 5%);
211
187
  background: color-mix(in srgb, #243dc6 95%, transparent 5%);
212
188
  }
213
189
  }
@@ -217,33 +193,19 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
217
193
  display: flex;
218
194
  flex-direction: column;
219
195
  align-items: center;
220
- gap: 4px;
196
+ gap: 6px;
221
197
  .total_label {
222
- font-size: 12px;
223
- font-weight: 500;
224
- color: var(--_gray-600);
225
- line-height: 18px;
226
198
  }
227
199
 
228
200
  .total_price {
229
- font-size: 12px;
230
201
  font-weight: 700;
231
- color: var(--_gray-900);
232
- line-height: 18px;
233
202
  }
234
203
 
235
204
  .view_cart_btn {
236
- padding: 10px 15px;
237
- background-color: var(--_thm-py-bs-dt-se-bd-cr);
238
- color: var(--_thm-py-bs-dt-se-tt-cr);
239
- border: none;
240
- border-radius: 4px;
205
+ padding: 8px 12px;
206
+ margin-bottom: 8px;
207
+ font-size: 14px;
208
+ font-weight: 500;
241
209
  cursor: pointer;
242
- margin-bottom: 12px;
243
-
244
- &:hover {
245
- background-color: var(--_thm-py-bs-hr-se-bd-cr);
246
- color: var(--_thm-py-bs-dt-se-tt-cr --_thm-py-bs-hr-se-tt-cr);
247
- }
248
210
  }
249
211
  }
package/dist/cart-summary.scss CHANGED
@@ -1080,6 +1080,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1080
1080
  --_ctm-mob-dn-pt-wt-pt-ce-pg,
1081
1081
  var(--_ctm-tab-dn-pt-wt-pt-ce-pg, var(--_ctm-dn-pt-wt-pt-ce-pg))
1082
1082
  );
1083
+ word-break: break-word;
1083
1084
  }
1084
1085
  .cart_summary_secondary_text {
1085
1086
  color: var(--_ctm-dn-sy-tt-dn-cr);
@@ -1310,7 +1311,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1310
1311
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-se)};
1311
1312
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-se)};
1312
1313
  --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-in-c1)};
1313
- --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-ue)};
1314
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-se-ue)};
1314
1315
 
1315
1316
  // for pading and width
1316
1317
  --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-ct-hr-pg)};
@@ -1402,7 +1403,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1402
1403
 
1403
1404
  &:hover .icon--hover {
1404
1405
  // opacity: 1;
1405
- display: inline;
1406
+ display: flex;
1406
1407
  }
1407
1408
 
1408
1409
  &:hover .icon--default {
@@ -1560,7 +1561,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1560
1561
 
1561
1562
  &:hover .icon--hover {
1562
1563
  // opacity: 1;
1563
- display: inline;
1564
+ display: flex;
1564
1565
  }
1565
1566
 
1566
1567
  &:hover .icon--default {
@@ -1584,7 +1585,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1584
1585
  }
1585
1586
 
1586
1587
  &:hover {
1587
- --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-bd-cr)};
1588
+ // --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-bd-cr)};
1589
+ @include BgColorLighter(var(--_sf-hr-cr), 5%);
1588
1590
  --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-cr)};
1589
1591
  --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-se)};
1590
1592
  --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-br-wh)};
@@ -1611,7 +1613,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1611
1613
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-se)};
1612
1614
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-se)};
1613
1615
  --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-in-c1)};
1614
- --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-ue)};
1616
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-se-ue)};
1615
1617
 
1616
1618
  // for pading and width
1617
1619
  --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-rt-qe-hr-pg)};
@@ -1717,7 +1719,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1717
1719
 
1718
1720
  &:hover .icon--hover {
1719
1721
  // opacity: 1;
1720
- display: inline;
1722
+ display: flex;
1721
1723
  }
1722
1724
 
1723
1725
  &:hover .icon--default {
@@ -1768,7 +1770,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1768
1770
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-se)};
1769
1771
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-se)};
1770
1772
  --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-in-c1)};
1771
- --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-ue)};
1773
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-se-ue)};
1772
1774
 
1773
1775
  // for pading and width
1774
1776
  --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-rw-or-hr-pg)};
@@ -1874,7 +1876,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1874
1876
 
1875
1877
  &:hover .icon--hover {
1876
1878
  // opacity: 1;
1877
- display: inline;
1879
+ display: flex;
1878
1880
  }
1879
1881
 
1880
1882
  &:hover .icon--default {
@@ -1925,7 +1927,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1925
1927
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-se)};
1926
1928
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-se)};
1927
1929
  --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-in-c1)};
1928
- --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-ue)};
1930
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-se-ue)};
1929
1931
 
1930
1932
  // for pading and width
1931
1933
  --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-ce-sb-os-hr-pg)};
@@ -2050,7 +2052,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2050
2052
 
2051
2053
  &:hover .icon--hover {
2052
2054
  // opacity: 1;
2053
- display: inline;
2055
+ display: flex;
2054
2056
  }
2055
2057
 
2056
2058
  &:hover .icon--default {
@@ -2101,7 +2103,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2101
2103
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-se)};
2102
2104
  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-se)};
2103
2105
  --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-in-c1)};
2104
- --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-ue)};
2106
+ --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-se-ue)};
2105
2107
 
2106
2108
  // for pading and width
2107
2109
  --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-ct-as-st-qe-hr-pg)};
@@ -2208,7 +2210,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2208
2210
 
2209
2211
  &:hover .icon--hover {
2210
2212
  // opacity: 1;
2211
- display: inline;
2213
+ display: flex;
2212
2214
  }
2213
2215
 
2214
2216
  &:hover .icon--default {