@sc-360-v2/storefront-cms-library 0.3.68 → 0.3.70

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 (50) hide show
  1. package/dist/add-order.scss +31 -14
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +0 -5
  4. package/dist/bundle.scss +1 -0
  5. package/dist/cart-details.scss +45 -2
  6. package/dist/checkbox-radio.scss +16 -0
  7. package/dist/checkout.scss +63 -63
  8. package/dist/confirmationModal.scss +2 -4
  9. package/dist/dropdownTemplate.scss +285 -307
  10. package/dist/employee-bulk-order.scss +2674 -2667
  11. package/dist/modal.scss +7 -0
  12. package/dist/my-templates.scss +284 -70
  13. package/dist/profile.scss +2 -1
  14. package/dist/quick-links.scss +175 -18
  15. package/dist/request-for-quotes.scss +348 -48
  16. package/dist/skeleton.scss +1 -1
  17. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +11 -11
  18. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +1 -1
  19. package/dist/types/builder/tools/element-edit/bundle.d.ts +5 -1
  20. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +1 -1
  21. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +3 -24
  22. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +18 -18
  23. package/dist/types/builder/tools/element-edit/cartAttributes.d.ts +10 -10
  24. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +12 -3
  25. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +30 -114
  26. package/dist/types/builder/tools/element-edit/checkout.d.ts +39 -57
  27. package/dist/types/builder/tools/element-edit/common.d.ts +1 -1
  28. package/dist/types/builder/tools/element-edit/countdown.d.ts +1 -1
  29. package/dist/types/builder/tools/element-edit/filterResults.d.ts +3 -17
  30. package/dist/types/builder/tools/element-edit/grid.d.ts +3 -3
  31. package/dist/types/builder/tools/element-edit/icon-list.d.ts +2 -9
  32. package/dist/types/builder/tools/element-edit/iconLibrary.d.ts +1 -1
  33. package/dist/types/builder/tools/element-edit/layouter-pro-item.d.ts +2 -2
  34. package/dist/types/builder/tools/element-edit/layouterPro.d.ts +2 -2
  35. package/dist/types/builder/tools/element-edit/line.d.ts +1 -1
  36. package/dist/types/builder/tools/element-edit/marchandiserSets.d.ts +1 -1
  37. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +24 -24
  38. package/dist/types/builder/tools/element-edit/productCustomizations.d.ts +1 -1
  39. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +4 -4
  40. package/dist/types/builder/tools/element-edit/scroll.d.ts +1 -1
  41. package/dist/types/builder/tools/element-edit/shipping-payments.d.ts +4 -22
  42. package/dist/types/builder/tools/element-edit/shippingEstimator.d.ts +1 -1
  43. package/dist/types/builder/tools/element-edit/social.d.ts +1 -1
  44. package/dist/types/builder/tools/element-edit/table.d.ts +1 -0
  45. package/dist/types/builder/tools/element-edit/tabs.d.ts +1 -1
  46. package/dist/types/builder/tools/element-edit/tabsV2.d.ts +1 -1
  47. package/dist/types/builder/tools/element-edit/userElements.d.ts +5 -5
  48. package/dist/types/builder/tools/element-edit/video.d.ts +14 -9
  49. package/dist/video.scss +9 -4
  50. package/package.json +1 -1
package/dist/modal.scss CHANGED
@@ -462,6 +462,13 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
462
462
  flex: 1 1 auto;
463
463
  overflow-y: auto;
464
464
 
465
+ .dropdown-with-input-section {
466
+ // border: 0.5px solid var(--_gray-300);
467
+ .dropdown-menu {
468
+ margin-left: -7px !important;
469
+ }
470
+ }
471
+
465
472
  .wishlist-modal {
466
473
  display: flex;
467
474
  flex-direction: column;
@@ -3,82 +3,296 @@
3
3
 
4
4
  [data-div-type="element"] {
5
5
  &[data-element-type="myTemplates"] {
6
- // width: var(--_lt-wh);
7
- // height: var(--_lt-ht);
8
- // margin: var(--_lt-mn);
9
- // padding: var(--_lt-pg);
10
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
- // width: 50%;
12
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
- width: var(
14
- --_sf-el-wh-st-mx,
15
- calc(
16
- 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
17
- )
18
- );
19
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
-
21
- // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
22
- // height: var(--_ctm-lt-ht);
23
- // height: ;
24
- // height: auto;
25
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
26
- // --_aspect-ratio: calc(
27
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
28
- // );
29
-
30
- // &[data-element-sub-child="true"] {
31
- // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
32
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
33
- // }
6
+ width: 100% !important;
34
7
 
35
8
  & > .wrapper {
36
- // width: 100%;
37
- // height: 100%;
9
+ .template_wrapper {
10
+ width: 100%;
11
+ .template_section {
12
+ width: 100%;
13
+ display: flex;
14
+ justify-content: space-between;
15
+ align-items: center;
16
+ margin-bottom: 24px;
17
+ h2 {
18
+ font-size: 24px;
19
+ }
20
+ .back_to_cart {
21
+ color: var(--_primary-400);
22
+ &:hover {
23
+ text-decoration: underline;
24
+ }
25
+ }
26
+ }
27
+ .template_body {
28
+ display: flex;
29
+ gap: 60px;
30
+ justify-content: space-between;
31
+ .template_col_left {
32
+ width: 100%;
33
+ height: 400px;
34
+ background-color: var(--_base-white);
35
+ .wishlist-modal {
36
+ display: flex;
37
+ flex-direction: column;
38
+ width: 100%;
39
+
40
+ .wishlist-modal-section {
41
+ // padding: 16px 24px 24px 24px;
42
+ gap: 16px !important;
43
+ overflow-x: hidden;
44
+ display: flex;
45
+ flex-direction: column;
46
+
47
+ .form-group {
48
+ display: flex;
49
+ flex-direction: column;
50
+ gap: 8px;
51
+ max-width: 500px;
52
+
53
+ label {
54
+ display: block;
55
+ font-size: 0.875rem;
56
+ font-weight: 500;
57
+ color: #374151;
58
+ }
59
+
60
+ .primary_text_label {
61
+ font-weight: 700;
62
+ }
63
+
64
+ input[type="radio"],
65
+ textarea {
66
+ width: 100%;
67
+ padding: 0.5rem 0.75rem;
68
+ font-size: 0.875rem;
69
+ border: 1px solid #d1d5db;
70
+ border-radius: 0.375rem;
71
+ outline: none;
72
+ box-sizing: border-box;
73
+ transition: all 0.2s;
74
+
75
+ &:focus {
76
+ border-color: #2563eb;
77
+ // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
78
+ }
79
+
80
+ &[type="radio"] {
81
+ width: fit-content;
82
+ height: fit-content;
83
+ }
84
+ }
85
+
86
+ .radio-group {
87
+ display: flex;
88
+ flex-direction: column;
89
+ gap: 12px;
90
+ font-weight: normal;
91
+
92
+ .radio-label {
93
+ display: inline-flex;
94
+ align-items: center;
95
+ gap: 8px;
96
+ cursor: pointer;
97
+ width: fit-content;
98
+
99
+ span {
100
+ color: var(--_gray-500);
101
+
102
+ span {
103
+ color: var(--_gray-900);
104
+ font-weight: 500;
105
+ }
106
+ }
107
+ }
108
+ }
109
+
110
+ textarea {
111
+ min-height: 100px;
112
+ resize: vertical;
113
+ }
114
+
115
+ .global-can-edit {
116
+ display: flex;
117
+ flex-direction: column;
118
+ align-items: flex-start;
119
+ margin-left: 20px;
120
+ margin-top: 6px;
121
+ gap: 6px;
122
+
123
+ input[type="checkbox"] {
124
+ margin: 0;
125
+ width: 16px;
126
+ height: 16px;
127
+ cursor: pointer;
128
+ }
129
+
130
+ span {
131
+ font-size: 0.875rem;
132
+ font-weight: 600;
133
+ color: var(--_gray-900);
134
+ margin-left: -15px;
135
+ }
136
+ }
137
+ }
138
+ input[type="text"] {
139
+ height: 40px;
140
+ border: 1px solid var(--_gray-300);
141
+ border-radius: 6px;
142
+ padding-inline: 16px;
143
+ }
144
+ }
145
+ }
146
+ .action-buttons {
147
+ display: flex;
148
+ gap: 1rem;
149
+ align-items: center;
150
+ // justify-content: flex-end;
151
+ flex: 1 1 auto;
152
+ // padding: 16px 24px;
153
+ // border-top: 1px solid var(--_gray-200);
154
+ gap: 12px;
155
+ margin-block: 24px;
156
+ padding-bottom: 24px;
157
+ button {
158
+ padding: 12px 16px;
159
+ border-radius: 6px;
160
+ }
161
+ .create-btn {
162
+ display: flex;
163
+ justify-content: center;
164
+ align-items: center;
165
+ gap: 8px;
166
+ background-color: var(--_primary-400);
167
+ color: var(--_base-white);
168
+ &.disabled {
169
+ opacity: 0.5;
170
+ pointer-events: none;
171
+ }
172
+ .loader {
173
+ animation: rotate-icon 1s linear infinite;
174
+ display: inline-block;
175
+ transform-origin: center;
176
+
177
+ svg path {
178
+ stroke: var(--_primary-200);
179
+ }
180
+ }
181
+
182
+ &:hover {
183
+ background-color: var(--_primary-500);
184
+ }
185
+ }
186
+ .discard-btn {
187
+ &:hover {
188
+ background-color: var(--_gray-50);
189
+ color: var(--_gray-900);
190
+ }
191
+ }
192
+ }
193
+ }
194
+ .template_col_right {
195
+ width: 400px;
196
+ height: fit-content;
197
+ background-color: var(--_base-white);
198
+ .template_summary_wrapper {
199
+ border: 1px solid var(--_gray-300);
200
+ border-radius: 4px;
201
+ width: 350px;
202
+ .template_summary_header {
203
+ padding: 12px 16px;
204
+ border-bottom: 1px solid var(--_gray-300);
205
+ font-size: 16px;
206
+ font-weight: 600;
207
+ background-color: #f5f5f5;
208
+ }
209
+ .template_summary_body {
210
+ .template_summary_items {
211
+ padding: 16px;
212
+ display: flex;
213
+ flex-direction: column;
214
+ gap: 8px;
215
+ .template_summary_item {
216
+ display: flex;
217
+ justify-content: space-between;
218
+ gap: 16px;
219
+ .template_summary_item_details {
220
+ display: flex;
221
+ gap: 16px;
222
+ .template_summary_item_pro_info {
223
+ h5 {
224
+ font-size: 16px;
225
+ font-weight: 600;
226
+ color: var(--_gray-900);
227
+ }
228
+ .template_summary_item_pro_qty {
229
+ color: var(--_gray-500);
230
+ font-size: 12px;
231
+ span {
232
+ display: block;
233
+ }
234
+ .qty {
235
+ color: var(--_gray-900);
236
+ }
237
+ }
238
+ }
239
+ }
240
+ .template_summary_item_detail_price {
241
+ font-size: 16px;
242
+ font-weight: 600;
243
+ color: var(--_gray-900);
244
+ }
245
+ }
246
+ }
247
+ }
248
+ }
249
+ }
250
+ }
251
+ }
38
252
  }
39
253
  &[data-show-shadow="false"] {
40
254
  --_show-shadow: none;
41
255
  }
42
256
 
43
- .accordion-element {
44
- background-color: var(
45
- --_ctm-mob-dn-fq-wt-bd-cr,
46
- var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
47
- );
48
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
49
- display: flex;
50
- flex-direction: column;
51
- --_sf-gp: var(
52
- --_ctm-mob-lt-im-sg,
53
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
54
- );
55
- --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
56
- row-gap: var(--_sf-gp);
57
- width: 100%;
58
- // height: 100%;
59
- border-color: var(
60
- --_ctm-mob-dn-fq-wt-br-cr,
61
- var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
62
- );
63
- border-style: var(
64
- --_ctm-mob-dn-fq-wt-br-se,
65
- var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
66
- );
67
- border-width: var(
68
- --_ctm-mob-dn-fq-wt-br-wh,
69
- var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
70
- );
71
- border-radius: var(
72
- --_ctm-mob-dn-fq-wt-br-rs,
73
- var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
74
- );
75
- box-shadow: var(
76
- --_show-shadow,
77
- var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
78
- var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
79
- var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
80
- var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
81
- );
82
- }
257
+ // .accordion-element {
258
+ // background-color: var(
259
+ // --_ctm-mob-dn-fq-wt-bd-cr,
260
+ // var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
261
+ // );
262
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
263
+ // display: flex;
264
+ // flex-direction: column;
265
+ // --_sf-gp: var(
266
+ // --_ctm-mob-lt-im-sg,
267
+ // var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
268
+ // );
269
+ // --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
270
+ // row-gap: var(--_sf-gp);
271
+ // width: 100%;
272
+ // // height: 100%;
273
+ // border-color: var(
274
+ // --_ctm-mob-dn-fq-wt-br-cr,
275
+ // var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
276
+ // );
277
+ // border-style: var(
278
+ // --_ctm-mob-dn-fq-wt-br-se,
279
+ // var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
280
+ // );
281
+ // border-width: var(
282
+ // --_ctm-mob-dn-fq-wt-br-wh,
283
+ // var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
284
+ // );
285
+ // border-radius: var(
286
+ // --_ctm-mob-dn-fq-wt-br-rs,
287
+ // var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
288
+ // );
289
+ // box-shadow: var(
290
+ // --_show-shadow,
291
+ // var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
292
+ // var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
293
+ // var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
294
+ // var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
295
+ // );
296
+ // }
83
297
  }
84
298
  }
package/dist/profile.scss CHANGED
@@ -301,9 +301,10 @@
301
301
  --_ctm-mob-dn-dn-is-dt-se-bd-cr,
302
302
  var(--_ctm-tab-dn-dn-is-dt-se-bd-cr, var(--_ctm-dn-dn-is-dt-se-bd-cr))
303
303
  );
304
- border-radius: 10px;
304
+ border-radius: 4px;
305
305
  // padding: 8px 0;
306
306
  z-index: 10;
307
+ overflow: hidden;
307
308
  }
308
309
 
309
310
  .add_order_item {
@@ -30,6 +30,154 @@
30
30
  // height: 100%;
31
31
  }
32
32
 
33
+ // &[data-items-default-border="true"] {
34
+ // .quick__links__container .items__container .links__item {
35
+ // border-width: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-wh);
36
+ // border-color: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-cr);
37
+ // border-style: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-se);
38
+ // border-radius: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs);
39
+ // }
40
+ // }
41
+
42
+ // &[data-items-hover-border="true"] {
43
+ // .quick__links__container .items__container .links__item:hover {
44
+ // border-width: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-wh);
45
+ // border-color: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-cr);
46
+ // border-style: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-se);
47
+ // border-radius: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-rs);
48
+ // }
49
+ // }
50
+
51
+ // &[data-items-default-shadow="true"] {
52
+ // .quick__links__container .items__container .links__item {
53
+ // box-shadow: prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-ae)
54
+ // prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-br)
55
+ // prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-sd)
56
+ // prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-cr);
57
+ // }
58
+ // }
59
+
60
+ // &[data-items-hover-shadow="true"] {
61
+ // .quick__links__container .items__container .links__item:hover {
62
+ // box-shadow: prepareMediaVariable(--_ctm-dn-im-se-hr-se-sw-ae)
63
+ // prepareMediaVariable(--_ctm-dn-im-se-hr-se-sw-br)
64
+ // prepareMediaVariable(--_ctm-dn-im-se-hr-se-sw-sd)
65
+ // prepareMediaVariable(--_ctm-dn-im-se-hr-se-sw-cr);
66
+ // }
67
+ // }
68
+
69
+ &[data-items-default-border="true"] {
70
+ .quick__links__container .items__container .links__item,
71
+ .quick__links__container
72
+ .items__container
73
+ .dropdown__container
74
+ .est__dropdown__main
75
+ .est__dropdown
76
+ .list
77
+ .list__option {
78
+ border-width: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-wh);
79
+ border-color: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-cr);
80
+ border-style: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-se);
81
+ border-radius: prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs);
82
+ }
83
+ }
84
+
85
+ &[data-items-hover-border="true"] {
86
+ .quick__links__container .items__container .links__item:hover,
87
+ .quick__links__container
88
+ .items__container
89
+ .dropdown__container
90
+ .est__dropdown__main
91
+ .est__dropdown
92
+ .list
93
+ .list__option:hover {
94
+ border-width: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-wh);
95
+ border-color: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-cr);
96
+ border-style: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-se);
97
+ border-radius: prepareMediaVariable(--_ctm-dn-im-se-hr-se-br-rs);
98
+ }
99
+ }
100
+
101
+ &[data-items-default-shadow="true"] {
102
+ .quick__links__container .items__container .links__item,
103
+ .quick__links__container
104
+ .items__container
105
+ .dropdown__container
106
+ .est__dropdown__main
107
+ .est__dropdown
108
+ .list
109
+ .list__option {
110
+ box-shadow: prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-ae)
111
+ prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-br)
112
+ prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-sd)
113
+ prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-cr);
114
+ }
115
+ }
116
+
117
+ &[data-items-hover-shadow="true"] {
118
+ .quick__links__container .items__container .links__item:hover,
119
+ .quick__links__container
120
+ .items__container
121
+ .dropdown__container
122
+ .est__dropdown__main
123
+ .est__dropdown
124
+ .list
125
+ .list__option:hover {
126
+ box-shadow: prepareMediaVariable(--_ctm-dn-im-se-hr-se-sw-ae)
127
+ prepareMediaVariable(--_ctm-dn-im-se-hr-se-sw-br)
128
+ prepareMediaVariable(--_ctm-dn-im-se-hr-se-sw-sd)
129
+ prepareMediaVariable(--_ctm-dn-im-se-hr-se-sw-cr);
130
+ }
131
+ }
132
+
133
+ &[data-items-alignment="left"] {
134
+ .quick__links__container {
135
+ .items__container,
136
+ .items__container .dropdown__container .est__dropdown__main .est__dropdown {
137
+ justify-content: flex-start;
138
+ align-items: flex-start;
139
+
140
+ .est__dropdown__button,
141
+ .list {
142
+ justify-content: flex-start;
143
+ align-items: flex-start;
144
+ }
145
+ }
146
+ }
147
+ }
148
+
149
+ &[data-items-alignment="center"] {
150
+ .quick__links__container {
151
+ .items__container,
152
+ .items__container .dropdown__container .est__dropdown__main .est__dropdown {
153
+ justify-content: center;
154
+ align-items: center;
155
+
156
+ .est__dropdown__button,
157
+ .list {
158
+ justify-content: center;
159
+ align-items: center;
160
+ }
161
+ }
162
+ }
163
+ }
164
+
165
+ &[data-items-alignment="right"] {
166
+ .quick__links__container {
167
+ .items__container,
168
+ .items__container .dropdown__container .est__dropdown__main .est__dropdown {
169
+ justify-content: flex-end;
170
+ align-items: flex-end;
171
+
172
+ .est__dropdown__button,
173
+ .list {
174
+ justify-content: flex-end;
175
+ align-items: flex-end;
176
+ }
177
+ }
178
+ }
179
+ }
180
+
33
181
  &[data-display-style="Vertical"] {
34
182
  .quick__links__container .items__container {
35
183
  display: flex;
@@ -354,28 +502,37 @@
354
502
  }
355
503
 
356
504
  .items__container {
357
- .links__item {
505
+ .links__item,
506
+ .dropdown__container .est__dropdown__main .est__dropdown .list .list__option {
358
507
  display: block;
359
- font-family: prepareMediaVariable(--_ctm-dn-im-se-ft-fy);
360
- font-size: prepareMediaVariable(--_ctm-dn-im-se-ft-se);
361
- color: prepareMediaVariable(--_ctm-dn-im-se-cr);
362
- font-weight: prepareMediaVariable(--_ctm-dn-im-se-ft-wt);
363
- font-style: prepareMediaVariable(--_ctm-dn-im-se-ft-se-ic);
364
- text-decoration: prepareMediaVariable(--_ctm-dn-im-se-ue);
365
- text-align: prepareMediaVariable(--_ctm-dn-im-se-tt-an);
366
- letter-spacing: prepareMediaVariable(--_ctm-dn-im-se-lr-sg);
367
- line-height: prepareMediaVariable(--_ctm-dn-im-se-le-ht);
368
- background-color: prepareMediaVariable(--_ctm-dn-im-se-bd-cr);
369
- border-width: prepareMediaVariable(--_ctm-dn-im-se-br-wh);
370
- border-color: prepareMediaVariable(--_ctm-dn-im-se-br-cr);
371
- border-style: prepareMediaVariable(--_ctm-dn-im-se-br-se);
372
- border-radius: prepareMediaVariable(--_ctm-dn-im-se-br-rs);
373
- box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae)
374
- prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd)
375
- prepareMediaVariable(--_ctm-dn-im-se-sw-cr);
508
+ font-family: prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy);
509
+ font-size: prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se);
510
+ color: prepareMediaVariable(--_ctm-dn-im-se-dt-se-cr);
511
+ font-weight: prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-wt);
512
+ font-style: prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic);
513
+ text-decoration: prepareMediaVariable(--_ctm-dn-im-se-dt-se-ue);
514
+ text-align: prepareMediaVariable(--_ctm-dn-im-se-dt-se-tt-an);
515
+ letter-spacing: prepareMediaVariable(--_ctm-dn-im-se-dt-se-lr-sg);
516
+ line-height: prepareMediaVariable(--_ctm-dn-im-se-dt-se-le-ht);
517
+ background-color: prepareMediaVariable(--_ctm-dn-im-se-dt-se-bd-cr);
376
518
  padding: 2px 8px;
377
519
  width: fit-content;
520
+
521
+ &:hover {
522
+ font-family: prepareMediaVariable(--_ctm-dn-im-se-hr-se-ft-fy);
523
+ font-size: prepareMediaVariable(--_ctm-dn-im-se-hr-se-ft-se);
524
+ color: prepareMediaVariable(--_ctm-dn-im-se-hr-se-cr);
525
+ font-weight: prepareMediaVariable(--_ctm-dn-im-se-hr-se-ft-wt);
526
+ font-style: prepareMediaVariable(--_ctm-dn-im-se-hr-se-ft-se-ic);
527
+ text-decoration: prepareMediaVariable(--_ctm-dn-im-se-hr-se-ue);
528
+ text-align: prepareMediaVariable(--_ctm-dn-im-se-hr-se-tt-an);
529
+ letter-spacing: prepareMediaVariable(--_ctm-dn-im-se-hr-se-lr-sg);
530
+ line-height: prepareMediaVariable(--_ctm-dn-im-se-hr-se-le-ht);
531
+ background-color: prepareMediaVariable(--_ctm-dn-im-se-hr-se-bd-cr);
532
+ }
378
533
  }
534
+ }
535
+ .items__container {
379
536
  .dropdown__container {
380
537
  .est__dropdown__main {
381
538
  .est__dropdown {