@sc-360-v2/storefront-cms-library 0.3.62 → 0.3.63

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 (45) hide show
  1. package/dist/add-products-tab copy.scss +9 -8
  2. package/dist/add-products-tab.scss +9 -8
  3. package/dist/badge.scss +87 -83
  4. package/dist/builder.js +1 -1
  5. package/dist/cart-details.scss +25 -22
  6. package/dist/cart-summary.scss +17 -143
  7. package/dist/cart-wrapper.scss +127 -0
  8. package/dist/cartDropdownOverlay.scss +23 -4
  9. package/dist/checkout.scss +96 -573
  10. package/dist/dropdownTemplate.scss +58 -4
  11. package/dist/icon-list.scss +25 -19
  12. package/dist/icons.js +1 -1
  13. package/dist/image-for-product.scss +19 -0
  14. package/dist/index.js +1 -1
  15. package/dist/item-stock.scss +27 -26
  16. package/dist/mega-menu-container.scss +96 -0
  17. package/dist/mega-menu.scss +832 -0
  18. package/dist/menu-v2.scss +30 -5
  19. package/dist/modal.scss +168 -8
  20. package/dist/order-status.scss +18 -15
  21. package/dist/past-orders.scss +279 -271
  22. package/dist/payment-methods.scss +72 -69
  23. package/dist/position-module.scss +2 -1
  24. package/dist/prefix-list.scss +3 -0
  25. package/dist/quick-links.scss +49 -46
  26. package/dist/quick-order-pad.scss +3 -0
  27. package/dist/quotes.scss +123 -117
  28. package/dist/rfqs.scss +123 -117
  29. package/dist/simple-list.scss +264 -0
  30. package/dist/templates.scss +299 -0
  31. package/dist/types/builder/elements/cart-wrapper/index.d.ts +44 -0
  32. package/dist/types/builder/elements/mega-menu/index.d.ts +47 -0
  33. package/dist/types/builder/elements/mega-menu-container/index.d.ts +44 -0
  34. package/dist/types/builder/elements/simple-list/index.d.ts +47 -0
  35. package/dist/types/builder/enums/index.d.ts +7 -1
  36. package/dist/types/builder/index.d.ts +5 -1
  37. package/dist/types/builder/tools/element-edit/cart-wrapper.d.ts +16 -0
  38. package/dist/types/builder/tools/element-edit/index.d.ts +5 -1
  39. package/dist/types/builder/tools/element-edit/mega-menu.d.ts +41 -0
  40. package/dist/types/builder/tools/element-edit/megaMenuContainer.d.ts +9 -0
  41. package/dist/types/builder/tools/element-edit/simple-list.d.ts +37 -0
  42. package/dist/types/website/constants/data-connectors.d.ts +18 -0
  43. package/dist/website.js +1 -1
  44. package/dist/widget.scss +4 -0
  45. package/package.json +1 -1
package/dist/rfqs.scss CHANGED
@@ -48,22 +48,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
48
48
  // border: 1px solid var(--_primary-100);
49
49
  // background: #fff;
50
50
  width: 349px;
51
- font-family: prepareMediaVariable(dn-wt-se-ft-fy);
52
- font-size: prepareMediaVariable(dn-wt-se-ft-se);
53
- color: prepareMediaVariable(dn-wt-se-cr);
54
- font-weight: prepareMediaVariable(dn-wt-se-ft-wt);
55
- font-style: prepareMediaVariable(dn-wt-se-ft-se-ic);
56
- text-decoration: prepareMediaVariable(dn-wt-se-ue);
57
- text-align: prepareMediaVariable(dn-wt-se-tt-an);
58
- letter-spacing: prepareMediaVariable(dn-wt-se-lr-sg);
59
- line-height: prepareMediaVariable(dn-wt-se-le-ht);
60
- background-color: prepareMediaVariable(dn-wt-se-bd-cr);
61
- border-width: prepareMediaVariable(dn-wt-se-br-wh);
62
- border-color: prepareMediaVariable(dn-wt-se-br-cr);
63
- border-style: prepareMediaVariable(dn-wt-se-br-se);
64
- border-radius: prepareMediaVariable(dn-wt-se-br-rs);
65
- box-shadow: prepareMediaVariable(dn-wt-se-sw-ae) prepareMediaVariable(dn-wt-se-sw-br)
66
- prepareMediaVariable(dn-wt-se-sw-sd) prepareMediaVariable(dn-wt-se-sw-cr);
51
+ font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
52
+ font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
53
+ color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
54
+ font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
55
+ font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
56
+ text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
57
+ text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
58
+ letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
59
+ line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
60
+ background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
61
+ border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
62
+ border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
63
+ border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
64
+ border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
65
+ box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)
66
+ prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)
67
+ prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
67
68
  .rfqs_card {
68
69
  display: flex;
69
70
  flex-direction: column;
@@ -83,15 +84,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
83
84
  // font-size: 20px;
84
85
  // font-weight: 600;
85
86
  // line-height: 30px;
86
- font-family: prepareMediaVariable(dn-wt-se-ft-fy);
87
- font-size: prepareMediaVariable(dn-wt-se-ft-se);
88
- color: prepareMediaVariable(dn-wt-se-cr);
89
- font-weight: prepareMediaVariable(dn-wt-se-ft-wt);
90
- font-style: prepareMediaVariable(dn-wt-se-ft-se-ic);
91
- text-decoration: prepareMediaVariable(dn-wt-se-ue);
92
- text-align: prepareMediaVariable(dn-wt-se-tt-an);
93
- letter-spacing: prepareMediaVariable(dn-wt-se-lr-sg);
94
- line-height: prepareMediaVariable(dn-wt-se-le-ht);
87
+ font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
88
+ font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
89
+ color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
90
+ font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
91
+ font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
92
+ text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
93
+ text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
94
+ letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
95
+ line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
95
96
  }
96
97
  }
97
98
 
@@ -103,13 +104,14 @@ $resizeActive: '[data-cms-element-resizer="true"]';
103
104
  align-self: stretch;
104
105
  //border-radius: 0px 0px 6px 6px;
105
106
 
106
- background-color: prepareMediaVariable(dn-im-se-bd-cr);
107
- border-width: prepareMediaVariable(dn-im-se-br-wh);
108
- border-color: prepareMediaVariable(dn-im-se-br-cr);
109
- border-style: prepareMediaVariable(dn-im-se-br-se);
110
- border-radius: prepareMediaVariable(dn-im-se-br-rs);
111
- box-shadow: prepareMediaVariable(dn-im-se-sw-ae) prepareMediaVariable(dn-im-se-sw-br)
112
- prepareMediaVariable(dn-im-se-sw-sd) prepareMediaVariable(dn-im-se-sw-cr);
107
+ background-color: prepareMediaVariable(--_ctm-dn-im-se-bd-cr);
108
+ border-width: prepareMediaVariable(--_ctm-dn-im-se-br-wh);
109
+ border-color: prepareMediaVariable(--_ctm-dn-im-se-br-cr);
110
+ border-style: prepareMediaVariable(--_ctm-dn-im-se-br-se);
111
+ border-radius: prepareMediaVariable(--_ctm-dn-im-se-br-rs);
112
+ box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae)
113
+ prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd)
114
+ prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
113
115
 
114
116
  .content {
115
117
  display: flex;
@@ -120,15 +122,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
120
122
  gap: 12px;
121
123
  flex: 1 0 0;
122
124
  align-self: stretch;
123
- font-family: prepareMediaVariable(dn-im-se-ft-fy);
124
- font-size: prepareMediaVariable(dn-im-se-ft-se);
125
- color: prepareMediaVariable(dn-im-se-cr);
126
- font-weight: prepareMediaVariable(dn-im-se-ft-wt);
127
- font-style: prepareMediaVariable(dn-im-se-ft-se-ic);
128
- text-decoration: prepareMediaVariable(dn-im-se-ue);
129
- text-align: prepareMediaVariable(dn-im-se-tt-an);
130
- letter-spacing: prepareMediaVariable(dn-im-se-lr-sg);
131
- line-height: prepareMediaVariable(dn-im-se-le-ht);
125
+ font-family: prepareMediaVariable(--_ctm-dn-im-se-ft-fy);
126
+ font-size: prepareMediaVariable(--_ctm-dn-im-se-ft-se);
127
+ color: prepareMediaVariable(--_ctm-dn-im-se-cr);
128
+ font-weight: prepareMediaVariable(--_ctm-dn-im-se-ft-wt);
129
+ font-style: prepareMediaVariable(--_ctm-dn-im-se-ft-se-ic);
130
+ text-decoration: prepareMediaVariable(--_ctm-dn-im-se-ue);
131
+ text-align: prepareMediaVariable(--_ctm-dn-im-se-tt-an);
132
+ letter-spacing: prepareMediaVariable(--_ctm-dn-im-se-lr-sg);
133
+ line-height: prepareMediaVariable(--_ctm-dn-im-se-le-ht);
132
134
 
133
135
  .metric_wrapper {
134
136
  display: flex;
@@ -143,23 +145,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
143
145
  // font-size: 14px;
144
146
  // font-weight: 600;
145
147
  // line-height: 20px;
146
- font-family: prepareMediaVariable(dn-rq-id-ft-fy);
147
- font-size: prepareMediaVariable(dn-rq-id-ft-se);
148
- color: prepareMediaVariable(dn-rq-id-cr);
149
- font-weight: prepareMediaVariable(dn-rq-id-ft-wt);
150
- font-style: prepareMediaVariable(dn-rq-id-ft-se-ic);
151
- text-decoration: prepareMediaVariable(dn-rq-id-ue);
152
- text-align: prepareMediaVariable(dn-rq-id-tt-an);
153
- letter-spacing: prepareMediaVariable(dn-rq-id-lr-sg);
154
- line-height: prepareMediaVariable(dn-rq-id-le-ht);
155
- background-color: prepareMediaVariable(dn-rq-id-bd-cr);
156
- border-width: prepareMediaVariable(dn-rq-id-br-wh);
157
- border-color: prepareMediaVariable(dn-rq-id-br-cr);
158
- border-style: prepareMediaVariable(dn-rq-id-br-se);
159
- border-radius: prepareMediaVariable(dn-rq-id-br-rs);
160
- box-shadow: prepareMediaVariable(dn-rq-id-sw-ae)
161
- prepareMediaVariable(dn-rq-id-sw-br) prepareMediaVariable(dn-rq-id-sw-sd)
162
- prepareMediaVariable(dn-rq-id-sw-cr);
148
+ font-family: prepareMediaVariable(--_ctm-dn-rq-id-ft-fy);
149
+ font-size: prepareMediaVariable(--_ctm-dn-rq-id-ft-se);
150
+ color: prepareMediaVariable(--_ctm-dn-rq-id-cr);
151
+ font-weight: prepareMediaVariable(--_ctm-dn-rq-id-ft-wt);
152
+ font-style: prepareMediaVariable(--_ctm-dn-rq-id-ft-se-ic);
153
+ text-decoration: prepareMediaVariable(--_ctm-dn-rq-id-ue);
154
+ text-align: prepareMediaVariable(--_ctm-dn-rq-id-tt-an);
155
+ letter-spacing: prepareMediaVariable(--_ctm-dn-rq-id-lr-sg);
156
+ line-height: prepareMediaVariable(--_ctm-dn-rq-id-le-ht);
157
+ background-color: prepareMediaVariable(--_ctm-dn-rq-id-bd-cr);
158
+ border-width: prepareMediaVariable(--_ctm-dn-rq-id-br-wh);
159
+ border-color: prepareMediaVariable(--_ctm-dn-rq-id-br-cr);
160
+ border-style: prepareMediaVariable(--_ctm-dn-rq-id-br-se);
161
+ border-radius: prepareMediaVariable(--_ctm-dn-rq-id-br-rs);
162
+ box-shadow: prepareMediaVariable(--_ctm-dn-rq-id-sw-ae)
163
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-br)
164
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-sd)
165
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-cr);
163
166
  }
164
167
 
165
168
  .status_badge {
@@ -170,29 +173,30 @@ $resizeActive: '[data-cms-element-resizer="true"]';
170
173
  // border-radius: 16px;
171
174
  // background: #fff4ed;
172
175
  mix-blend-mode: multiply;
173
- background-color: prepareMediaVariable(dn-rq-ss-bd-cr);
174
- border-width: prepareMediaVariable(dn-rq-ss-br-wh);
175
- border-color: prepareMediaVariable(dn-rq-ss-br-cr);
176
- border-style: prepareMediaVariable(dn-rq-ss-br-se);
177
- border-radius: prepareMediaVariable(dn-rq-ss-br-rs);
178
- box-shadow: prepareMediaVariable(dn-rq-ss-sw-ae)
179
- prepareMediaVariable(dn-rq-ss-sw-br) prepareMediaVariable(dn-rq-ss-sw-sd)
180
- prepareMediaVariable(dn-rq-ss-sw-cr);
176
+ background-color: prepareMediaVariable(--_ctm-dn-rq-ss-bd-cr);
177
+ border-width: prepareMediaVariable(--_ctm-dn-rq-ss-br-wh);
178
+ border-color: prepareMediaVariable(--_ctm-dn-rq-ss-br-cr);
179
+ border-style: prepareMediaVariable(--_ctm-dn-rq-ss-br-se);
180
+ border-radius: prepareMediaVariable(--_ctm-dn-rq-ss-br-rs);
181
+ box-shadow: prepareMediaVariable(--_ctm-dn-rq-ss-sw-ae)
182
+ prepareMediaVariable(--_ctm-dn-rq-ss-sw-br)
183
+ prepareMediaVariable(--_ctm-dn-rq-ss-sw-sd)
184
+ prepareMediaVariable(--_ctm-dn-rq-ss-sw-cr);
181
185
 
182
186
  .rfq_status {
183
187
  // color: #b93815;
184
188
  // text-align: center;
185
189
  // font-size: 12px;
186
190
  // line-height: 18px;
187
- font-family: prepareMediaVariable(dn-rq-ss-ft-fy);
188
- font-size: prepareMediaVariable(dn-rq-ss-ft-se);
189
- color: prepareMediaVariable(dn-rq-ss-cr);
190
- font-weight: prepareMediaVariable(dn-rq-ss-ft-wt);
191
- font-style: prepareMediaVariable(dn-rq-ss-ft-se-ic);
192
- text-decoration: prepareMediaVariable(dn-rq-ss-ue);
193
- text-align: prepareMediaVariable(dn-rq-ss-tt-an);
194
- letter-spacing: prepareMediaVariable(dn-rq-ss-lr-sg);
195
- line-height: prepareMediaVariable(dn-rq-ss-le-ht);
191
+ font-family: prepareMediaVariable(--_ctm-dn-rq-ss-ft-fy);
192
+ font-size: prepareMediaVariable(--_ctm-dn-rq-ss-ft-se);
193
+ color: prepareMediaVariable(--_ctm-dn-rq-ss-cr);
194
+ font-weight: prepareMediaVariable(--_ctm-dn-rq-ss-ft-wt);
195
+ font-style: prepareMediaVariable(--_ctm-dn-rq-ss-ft-se-ic);
196
+ text-decoration: prepareMediaVariable(--_ctm-dn-rq-ss-ue);
197
+ text-align: prepareMediaVariable(--_ctm-dn-rq-ss-tt-an);
198
+ letter-spacing: prepareMediaVariable(--_ctm-dn-rq-ss-lr-sg);
199
+ line-height: prepareMediaVariable(--_ctm-dn-rq-ss-le-ht);
196
200
  }
197
201
  }
198
202
 
@@ -203,23 +207,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
203
207
  // font-weight: 400;
204
208
  // line-height: 18px;
205
209
 
206
- font-family: prepareMediaVariable(dn-rd-on-ft-fy);
207
- font-size: prepareMediaVariable(dn-rd-on-ft-se);
208
- color: prepareMediaVariable(dn-rd-on-cr);
209
- font-weight: prepareMediaVariable(dn-rd-on-ft-wt);
210
- font-style: prepareMediaVariable(dn-rd-on-ft-se-ic);
211
- text-decoration: prepareMediaVariable(dn-rd-on-ue);
212
- text-align: prepareMediaVariable(dn-rd-on-tt-an);
213
- letter-spacing: prepareMediaVariable(dn-rd-on-lr-sg);
214
- line-height: prepareMediaVariable(dn-rd-on-le-ht);
215
- background-color: prepareMediaVariable(dn-rd-on-bd-cr);
216
- border-width: prepareMediaVariable(dn-rd-on-br-wh);
217
- border-color: prepareMediaVariable(dn-rd-on-br-cr);
218
- border-style: prepareMediaVariable(dn-rd-on-br-se);
219
- border-radius: prepareMediaVariable(dn-rd-on-br-rs);
220
- box-shadow: prepareMediaVariable(dn-rd-on-sw-ae)
221
- prepareMediaVariable(dn-rd-on-sw-br) prepareMediaVariable(dn-rd-on-sw-sd)
222
- prepareMediaVariable(dn-rd-on-sw-cr);
210
+ font-family: prepareMediaVariable(--_ctm-dn-rd-on-ft-fy);
211
+ font-size: prepareMediaVariable(--_ctm-dn-rd-on-ft-se);
212
+ color: prepareMediaVariable(--_ctm-dn-rd-on-cr);
213
+ font-weight: prepareMediaVariable(--_ctm-dn-rd-on-ft-wt);
214
+ font-style: prepareMediaVariable(--_ctm-dn-rd-on-ft-se-ic);
215
+ text-decoration: prepareMediaVariable(--_ctm-dn-rd-on-ue);
216
+ text-align: prepareMediaVariable(--_ctm-dn-rd-on-tt-an);
217
+ letter-spacing: prepareMediaVariable(--_ctm-dn-rd-on-lr-sg);
218
+ line-height: prepareMediaVariable(--_ctm-dn-rd-on-le-ht);
219
+ background-color: prepareMediaVariable(--_ctm-dn-rd-on-bd-cr);
220
+ border-width: prepareMediaVariable(--_ctm-dn-rd-on-br-wh);
221
+ border-color: prepareMediaVariable(--_ctm-dn-rd-on-br-cr);
222
+ border-style: prepareMediaVariable(--_ctm-dn-rd-on-br-se);
223
+ border-radius: prepareMediaVariable(--_ctm-dn-rd-on-br-rs);
224
+ box-shadow: prepareMediaVariable(--_ctm-dn-rd-on-sw-ae)
225
+ prepareMediaVariable(--_ctm-dn-rd-on-sw-br)
226
+ prepareMediaVariable(--_ctm-dn-rd-on-sw-sd)
227
+ prepareMediaVariable(--_ctm-dn-rd-on-sw-cr);
223
228
  }
224
229
 
225
230
  .rfqs_amount {
@@ -229,23 +234,24 @@ $resizeActive: '[data-cms-element-resizer="true"]';
229
234
  // font-weight: 600;
230
235
  // line-height: 20px;
231
236
 
232
- font-family: prepareMediaVariable(dn-rq-id-ft-fy);
233
- font-size: prepareMediaVariable(dn-rq-id-ft-se);
234
- color: prepareMediaVariable(dn-rq-id-cr);
235
- font-weight: prepareMediaVariable(dn-rq-id-ft-wt);
236
- font-style: prepareMediaVariable(dn-rq-id-ft-se-ic);
237
- text-decoration: prepareMediaVariable(dn-rq-id-ue);
238
- text-align: prepareMediaVariable(dn-rq-id-tt-an);
239
- letter-spacing: prepareMediaVariable(dn-rq-id-lr-sg);
240
- line-height: prepareMediaVariable(dn-rq-id-le-ht);
241
- background-color: prepareMediaVariable(dn-rq-id-bd-cr);
242
- border-width: prepareMediaVariable(dn-rq-id-br-wh);
243
- border-color: prepareMediaVariable(dn-rq-id-br-cr);
244
- border-style: prepareMediaVariable(dn-rq-id-br-se);
245
- border-radius: prepareMediaVariable(dn-rq-id-br-rs);
246
- box-shadow: prepareMediaVariable(dn-rq-id-sw-ae)
247
- prepareMediaVariable(dn-rq-id-sw-br) prepareMediaVariable(dn-rq-id-sw-sd)
248
- prepareMediaVariable(dn-rq-id-sw-cr);
237
+ font-family: prepareMediaVariable(--_ctm-dn-rq-id-ft-fy);
238
+ font-size: prepareMediaVariable(--_ctm-dn-rq-id-ft-se);
239
+ color: prepareMediaVariable(--_ctm-dn-rq-id-cr);
240
+ font-weight: prepareMediaVariable(--_ctm-dn-rq-id-ft-wt);
241
+ font-style: prepareMediaVariable(--_ctm-dn-rq-id-ft-se-ic);
242
+ text-decoration: prepareMediaVariable(--_ctm-dn-rq-id-ue);
243
+ text-align: prepareMediaVariable(--_ctm-dn-rq-id-tt-an);
244
+ letter-spacing: prepareMediaVariable(--_ctm-dn-rq-id-lr-sg);
245
+ line-height: prepareMediaVariable(--_ctm-dn-rq-id-le-ht);
246
+ background-color: prepareMediaVariable(--_ctm-dn-rq-id-bd-cr);
247
+ border-width: prepareMediaVariable(--_ctm-dn-rq-id-br-wh);
248
+ border-color: prepareMediaVariable(--_ctm-dn-rq-id-br-cr);
249
+ border-style: prepareMediaVariable(--_ctm-dn-rq-id-br-se);
250
+ border-radius: prepareMediaVariable(--_ctm-dn-rq-id-br-rs);
251
+ box-shadow: prepareMediaVariable(--_ctm-dn-rq-id-sw-ae)
252
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-br)
253
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-sd)
254
+ prepareMediaVariable(--_ctm-dn-rq-id-sw-cr);
249
255
  }
250
256
  }
251
257
  .rfq_action {
@@ -296,7 +302,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
296
302
  gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
297
303
 
298
304
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
299
- height: calc(100% - calc(prepareMediaVariable(dn-pn-as-aw-se) + 10px));
305
+ height: calc(100% - calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) + 10px));
300
306
  }
301
307
 
302
308
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
@@ -473,8 +479,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
473
479
  padding: 10px;
474
480
  border-radius: 50%;
475
481
  border: none;
476
- width: prepareMediaVariable(dn-pn-as-aw-se);
477
- height: prepareMediaVariable(dn-pn-as-aw-se);
482
+ width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
483
+ height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
478
484
  display: flex;
479
485
  align-items: center;
480
486
  justify-content: center;
@@ -492,8 +498,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
492
498
  .right-button {
493
499
  border-radius: 50%;
494
500
  border: none;
495
- width: prepareMediaVariable(dn-pn-as-aw-se);
496
- height: prepareMediaVariable(dn-pn-as-aw-se);
501
+ width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
502
+ height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
497
503
 
498
504
  display: flex;
499
505
  align-items: center;
@@ -515,11 +521,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
515
521
  display: flex;
516
522
 
517
523
  svg {
518
- width: calc(prepareMediaVariable(dn-pn-as-aw-se) * 0.5);
519
- height: calc(prepareMediaVariable(dn-pn-as-aw-se) * 0.5);
524
+ width: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
525
+ height: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
520
526
 
521
527
  path {
522
- stroke: prepareMediaVariable(dn-pn-as-aw-cr);
528
+ stroke: prepareMediaVariable(--_ctm-dn-pn-as-aw-cr);
523
529
  }
524
530
  }
525
531
  }
@@ -0,0 +1,264 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $subMenuContainer: ".flex__submenu__container";
5
+ $nodatap: ".no__menu_item__p";
6
+ $subMenuItem: ".flex__sub__menu__item";
7
+ $subMenuItemText: ".flex__sub__menu__item__text";
8
+
9
+ [data-div-type="element"] {
10
+ &[data-element-type="simple-list"] {
11
+ width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
12
+ margin: prepareMediaVariable(--_ctm-lt-mn);
13
+
14
+ & > .wrapper {
15
+ width: 100%;
16
+ & > #{$subMenuContainer} {
17
+ padding: #{prepareMediaVariable(--_ctm-lt-pg, 0px)};
18
+ min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
19
+ background: prepareMediaVariable(--_ctm-dn-sb-mu-cr-bd-cr);
20
+ border-radius: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-rs);
21
+ width: 100%;
22
+ display: var(--_d-flex);
23
+ flex-direction: column;
24
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
25
+ align-items: prepareMediaVariable(--_ctm-lt-jy-ct);
26
+
27
+ // &:is(#{$hrz} *) {
28
+ // position: absolute;
29
+ // left: calc(50% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-x)});
30
+ // width: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-wh)});
31
+ // top: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)});
32
+ // transform: translateX(-50%);
33
+ // z-index: 2;
34
+ // }
35
+ // &:is(#{$vtl} *) {
36
+ // width: 100%;
37
+ // }
38
+
39
+ // max-height: 0px;
40
+ // overflow: clip;
41
+ max-height: 500px;
42
+ overflow-y: auto;
43
+ // animation: animTwo var(--_transition-duration)
44
+ // var(--_transition-timing-function) 1 forwards alternate;
45
+
46
+ @keyframes animTwo {
47
+ 100% {
48
+ max-height: 500px;
49
+ overflow-y: auto;
50
+ }
51
+ }
52
+
53
+ &[data-show-border="true"] {
54
+ border-width: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-wh);
55
+ border-color: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-cr);
56
+ border-style: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-se);
57
+ }
58
+ &[data-show-boxshadow="true"] {
59
+ box-shadow: prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-ae)
60
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-br)
61
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-sd)
62
+ prepareMediaVariable(--_ctm-dn-sb-mu-cr-sw-cr);
63
+ }
64
+
65
+ & > li {
66
+ &#{$subMenuItem} {
67
+ display: var(--_d-flex);
68
+ flex-direction: column;
69
+ width: 100%;
70
+ padding: var(
71
+ --_sf-sb-it-at-pd,
72
+ var(--_sf-sb-it-hr-pd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-pg, 0px)})
73
+ );
74
+ background: var(
75
+ --_sf-sb-it-at-bd,
76
+ var(--_sf-sb-it-hr-bd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-bd-cr)})
77
+ );
78
+ border-radius: var(
79
+ --_sf-sb-it-at-br,
80
+ var(--_sf-sb-it-hr-br, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-rs)})
81
+ );
82
+
83
+ &[data-show-border="true"] {
84
+ border-color: var(
85
+ --_sf-sb-it-at-brc,
86
+ var(--_sf-sb-it-hr-brc, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-cr)})
87
+ );
88
+ border-width: var(
89
+ --_sf-sb-it-at-bw,
90
+ var(--_sf-sb-it-hr-bw, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-wh)})
91
+ );
92
+ border-style: var(
93
+ --_sf-sb-it-at-bs,
94
+ var(--_sf-sb-it-hr-bs, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-se))
95
+ );
96
+ }
97
+ &[data-show-boxshadow="true"] {
98
+ box-shadow: var(
99
+ --_sf-sb-it-at-bsa,
100
+ var(
101
+ --_sf-sb-it-hr-bsa,
102
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-ae)}
103
+ )
104
+ )
105
+ var(
106
+ --_sf-sb-it-at-blr,
107
+ var(
108
+ --_sf-sb-it-hr-blr,
109
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-br)}
110
+ )
111
+ )
112
+ var(
113
+ --_sf-sb-it-at-spr,
114
+ var(
115
+ --_sf-sb-it-hr-spr,
116
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-sd)}
117
+ )
118
+ )
119
+ var(
120
+ --_sf-sb-it-at-bscl,
121
+ var(--_sf-sb-it-hr-bscl, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-cr))
122
+ );
123
+ }
124
+
125
+ &:hover {
126
+ --_sf-sb-it-hr-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-pg, 0px)};
127
+ --_sf-sb-it-hr-bd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-bd-cr)};
128
+ --_sf-sb-it-hr-br: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-rs)};
129
+ --_sf-sb-it-hr-brc: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-cr)};
130
+ --_sf-sb-it-hr-bw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-wh)};
131
+ --_sf-sb-it-hr-bs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-se)};
132
+ --_sf-sb-it-hr-bsa: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-ae)};
133
+ --_sf-sb-it-hr-blr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-br)};
134
+ --_sf-sb-it-hr-spr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-sd)};
135
+ --_sf-sb-it-hr-bscl: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-cr)};
136
+
137
+ --_sf-sb-it-hr-ff: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-fy)};
138
+ --_sf-sb-it-hr-fs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-se)};
139
+ --_sf-sb-it-hr-fclr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-cr)};
140
+ --_sf-sb-it-hr-fw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-wt)};
141
+
142
+ --_sf-sb-it-hr-fsi: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-se-ic)};
143
+ --_sf-sb-it-hr-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ue)};
144
+ --_sf-sb-it-hr-tae: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-tt-an)};
145
+ --_sf-sb-it-hr-ls: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-lr-sg)};
146
+ --_sf-sb-it-hr-lh: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-le-ht)};
147
+ }
148
+ &.active {
149
+ --_sf-sb-it-at-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-pg)};
150
+ --_sf-sb-it-at-bd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-bd-cr)};
151
+ --_sf-sb-it-at-br: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-rs)};
152
+ --_sf-sb-it-at-brc: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-cr)};
153
+ --_sf-sb-it-at-bw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-wh)};
154
+ --_sf-sb-it-at-bs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-se)};
155
+ --_sf-sb-it-hr-bsa: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-ae)};
156
+ --_sf-sb-it-at-blr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-br)};
157
+ --_sf-sb-it-at-spr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-sd)};
158
+ --_sf-sb-it-at-bscl: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-cr)};
159
+
160
+ --_sf-sb-it-at-ff: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-fy)};
161
+ --_sf-sb-it-at-fs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-se)};
162
+ --_sf-sb-it-at-fclr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-cr)};
163
+ --_sf-sb-it-at-fw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-wt)};
164
+ --_sf-sb-it-at-fsi: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-se-ic)};
165
+ --_sf-sb-it-at-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ue)};
166
+ --_sf-sb-it-at-tae: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-tt-an)};
167
+ --_sf-sb-it-at-ls: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-lr-sg)};
168
+ --_sf-sb-it-at-lh: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-le-ht)};
169
+ }
170
+
171
+ & > a {
172
+ display: var(--_d-flex);
173
+ justify-content: space-between;
174
+ align-items: center;
175
+ width: 100%;
176
+
177
+ & > span {
178
+ display: var(--_d-flex);
179
+ width: 100%;
180
+ justify-content: var(
181
+ --_sf-sb-it-at-tae,
182
+ var(
183
+ --_sf-sb-it-hr-tae,
184
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
185
+ )
186
+ );
187
+
188
+ &#{$subMenuItemText} {
189
+ font-family:
190
+ var(
191
+ --_sf-it-at-ff,
192
+ var(
193
+ --_sf-it-hr-ff,
194
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-fy)}
195
+ )
196
+ ),
197
+ sans-serif;
198
+ font-size: var(
199
+ --_sf-sb-it-at-fs,
200
+ var(
201
+ --_sf-sb-it-hr-fs,
202
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se)}
203
+ )
204
+ );
205
+ color: var(
206
+ --_sf-sb-it-at-fclr,
207
+ var(
208
+ --_sf-sb-it-hr-fclr,
209
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-cr)}
210
+ )
211
+ );
212
+ font-weight: var(
213
+ --_sf-sb-it-at-fw,
214
+ var(
215
+ --_sf-sb-it-hr-fw,
216
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-fw-se-ft-wt)}
217
+ )
218
+ );
219
+ font-style: var(
220
+ --_sf-sb-it-at-fsi,
221
+ var(
222
+ --_sf-sb-it-hr-fsi,
223
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se-ic)}
224
+ )
225
+ );
226
+ text-decoration: var(
227
+ --_sf-sb-it-at-td,
228
+ var(--_sf-sb-it-hr-td, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ue)})
229
+ );
230
+ text-align: var(
231
+ --_sf-sb-it-at-tae,
232
+ var(
233
+ --_sf-sb-it-hr-tae,
234
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
235
+ )
236
+ );
237
+ letter-spacing: var(
238
+ --_sf-sb-it-at-ls,
239
+ var(
240
+ --_sf-sb-it-hr-ls,
241
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-lr-sg)}
242
+ )
243
+ );
244
+ line-height: var(
245
+ --_sf-sb-it-at-lh,
246
+ var(
247
+ --_sf-sb-it-hr-lh,
248
+ #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-le-ht)}
249
+ )
250
+ );
251
+ }
252
+ }
253
+ }
254
+ }
255
+
256
+ &#{$nodatap} {
257
+ font-size: 14px;
258
+ color: var(--_gray-500);
259
+ }
260
+ }
261
+ }
262
+ }
263
+ }
264
+ }