@sc-360-v2/storefront-cms-library 0.3.2 → 0.3.4

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 (26) hide show
  1. package/dist/breadcrumbs.scss +6 -0
  2. package/dist/builder.js +1 -1
  3. package/dist/bundleDetails.scss +45 -20
  4. package/dist/button copy.scss +275 -0
  5. package/dist/button.scss +73 -196
  6. package/dist/checkout.scss +1 -2
  7. package/dist/dropdownTemplate.scss +11 -0
  8. package/dist/icon-library.scss +13 -21
  9. package/dist/layouter-pro-item.scss +38 -0
  10. package/dist/layouter-pro.scss +50 -0
  11. package/dist/menu-v2.scss +6 -1
  12. package/dist/product-actions copy.scss +2783 -0
  13. package/dist/product-actions.scss +1912 -2640
  14. package/dist/product-options.scss +335 -228
  15. package/dist/stack.scss +2 -2
  16. package/dist/types/builder/tools/element-edit/common.d.ts +1 -0
  17. package/dist/types/builder/tools/element-edit/filters.d.ts +2 -2
  18. package/dist/types/builder/tools/element-edit/layouterPro.d.ts +5 -11
  19. package/dist/types/builder/tools/element-edit/productActions.d.ts +3 -2
  20. package/dist/types/builder/tools/element-edit/productOptions.d.ts +2 -1
  21. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +2 -0
  22. package/dist/types/global/types.d.ts +1 -0
  23. package/dist/uom-selector.scss +2 -0
  24. package/dist/variant-picker.scss +556 -849
  25. package/dist/widget.scss +2 -0
  26. package/package.json +1 -1
package/dist/product-options.scss CHANGED
@@ -1,15 +1,9 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  [data-div-type="element"] {
5
6
  &[data-element-type="productOptions"] {
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
7
  width: var(
14
8
  --_sf-el-wh-st-mx,
15
9
  calc(
@@ -30,11 +24,6 @@
30
24
  )
31
25
  );
32
26
 
33
- // &[data-element-sub-child="true"] {
34
- // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
35
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
36
- // }
37
-
38
27
  & > .wrapper {
39
28
  // width: 100%;
40
29
  // height: 100%;
@@ -54,12 +43,6 @@
54
43
  );
55
44
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
56
45
 
57
- // --_sf-gp: var(
58
- // --_ctm-mob-lt-im-sg,
59
- // var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
60
- // );
61
- // --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
62
- // row-gap: var(--_sf-gp);
63
46
  width: 100%;
64
47
  // height: 100%;
65
48
  border-color: var(
@@ -86,6 +69,44 @@
86
69
  var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
87
70
  );
88
71
 
72
+ .title {
73
+ margin-bottom: 4px;
74
+ color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
75
+ font-family: var(
76
+ --_ctm-mob-dn-on-te-ft-fy,
77
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
78
+ ),
79
+ sans-serif;
80
+ font-size: var(
81
+ --_ctm-mob-dn-on-te-ft-se,
82
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
83
+ );
84
+ font-weight: var(
85
+ --_ctm-mob-dn-on-te-ft-wt,
86
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
87
+ );
88
+ font-style: var(
89
+ --_ctm-mob-dn-on-te-ft-se-ic,
90
+ var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
91
+ );
92
+ text-align: var(
93
+ --_ctm-mob-dn-on-te-tt-an,
94
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
95
+ );
96
+ letter-spacing: var(
97
+ --_ctm-mob-dn-on-te-lr-sg,
98
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
99
+ );
100
+ line-height: var(
101
+ --_ctm-mob-dn-on-te-le-ht,
102
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
103
+ );
104
+ text-decoration: var(
105
+ --_ctm-mob-dn-on-te-ue,
106
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
107
+ );
108
+ }
109
+
89
110
  .product__option__element__swatch {
90
111
  display: flex;
91
112
  align-items: flex-start;
@@ -122,93 +143,163 @@
122
143
  }
123
144
  }
124
145
 
125
- // .swatch__item:hover {
126
- // --_sf-hr-bd-cr: var(
127
- // --_ctm-mob-dn-on-ve-se-hr-se-bd-cr,
128
- // var(--_ctm-tab-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-on-ve-se-hr-se-bd-cr))
129
- // );
130
- // --_sf-hr-br-cr: var(
131
- // --_ctm-mob-dn-on-ve-se-hr-se-br-cr,
132
- // var(--_ctm-tab-dn-on-ve-se-hr-se-br-cr, var(--_ctm-dn-on-ve-se-hr-se-br-cr))
133
- // );
134
- // --_sf-hr-br-se: var(
135
- // --_ctm-mob-dn-on-ve-se-hr-se-br-se,
136
- // var(--_ctm-tab-dn-on-ve-se-hr-se-br-se, var(--_ctm-dn-on-ve-se-hr-se-br-se))
137
- // );
138
- // --_sf-hr-br-wh: var(
139
- // --_ctm-mob-dn-on-ve-se-hr-se-br-wh,
140
- // var(--_ctm-tab-dn-on-ve-se-hr-se-br-wh, var(--_ctm-dn-on-ve-se-hr-se-br-wh))
141
- // );
142
- // --_sf-hr-br-bs: var(
143
- // --_ctm-mob-dn-on-ve-se-hr-se-br-rs,
144
- // var(--_ctm-tab-dn-on-ve-se-hr-se-br-rs, var(--_ctm-dn-on-ve-se-hr-se-br-rs))
145
- // );
146
- // --_sf-hr-bx-sw: var(
147
- // --_show-shadow,
148
- // var(
149
- // --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
150
- // var(--_ctm-tab-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-on-ve-se-hr-se-sw-ae))
151
- // )
152
- // var(
153
- // --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
154
- // var(--_ctm-tab-dn-on-ve-se-hr-se-sw-br, var(--_ctm-dn-on-ve-se-hr-se-sw-br))
155
- // )
156
- // var(
157
- // --_ctm-mob-dn-on-ve-se-hr-se-sw-sd,
158
- // var(--_ctm-tab-dn-on-ve-se-hr-se-sw-sd, var(--_ctm-dn-on-ve-se-hr-se-sw-sd))
159
- // )
160
- // var(
161
- // --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
162
- // var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr))
163
- // )
164
- // );
165
- // }
166
- .selected {
146
+ .swatch__item:hover {
167
147
  --_sf-hr-bd-cr: var(
148
+ --_ctm-mob-dn-on-ve-se-hr-se-bd-cr,
149
+ var(--_ctm-tab-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-on-ve-se-hr-se-bd-cr))
150
+ );
151
+ --_sf-hr-br-cr: var(
152
+ --_ctm-mob-dn-on-ve-se-hr-se-br-cr,
153
+ var(--_ctm-tab-dn-on-ve-se-hr-se-br-cr, var(--_ctm-dn-on-ve-se-hr-se-br-cr))
154
+ );
155
+ --_sf-hr-br-se: var(
156
+ --_ctm-mob-dn-on-ve-se-hr-se-br-se,
157
+ var(--_ctm-tab-dn-on-ve-se-hr-se-br-se, var(--_ctm-dn-on-ve-se-hr-se-br-se))
158
+ );
159
+ --_sf-hr-br-wh: var(
160
+ --_ctm-mob-dn-on-ve-se-hr-se-br-wh,
161
+ var(--_ctm-tab-dn-on-ve-se-hr-se-br-wh, var(--_ctm-dn-on-ve-se-hr-se-br-wh))
162
+ );
163
+ --_sf-hr-br-rs: var(
164
+ --_ctm-mob-dn-on-ve-se-hr-se-br-rs,
165
+ var(--_ctm-tab-dn-on-ve-se-hr-se-br-rs, var(--_ctm-dn-on-ve-se-hr-se-br-rs))
166
+ );
167
+
168
+ // for shadow
169
+ --_sf-hr-sw-ae: var(
170
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
171
+ var(--_ctm-tab-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-on-ve-se-hr-se-sw-ae))
172
+ );
173
+ --_sf-hr-sw-br: var(
174
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
175
+ var(--_ctm-tab-dn-on-ve-se-hr-se-sw-br, var(--_ctm-dn-on-ve-se-hr-se-sw-br))
176
+ );
177
+ --_sf-hr-sw-hr: var(
178
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
179
+ var(--_ctm-tab-dn-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-on-ve-se-hr-se-sw-hr))
180
+ );
181
+ --_sf-hr-sw-cr: var(
182
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
183
+ var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr))
184
+ );
185
+
186
+ // for font
187
+
188
+ --_sf-hr-cr: var(
189
+ --_ctm-mob-dn-on-ve-se-hr-se-cr,
190
+ var(--_ctm-tab-dn-on-ve-se-hr-se-cr, var(--_ctm-dn-on-ve-se-hr-se-cr))
191
+ );
192
+ --_sf-hr-ft-fy: var(
193
+ --_ctm-mob-dn-on-ve-se-hr-se-ft-fy,
194
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-on-ve-se-hr-se-ft-fy))
195
+ );
196
+ --_sf-hr-ft-se: var(
197
+ --_ctm-mob-dn-on-ve-se-hr-se-ft-se,
198
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ft-se, var(--_ctm-dn-on-ve-se-hr-se-ft-se))
199
+ );
200
+ --_sf-hr-ft-wt: var(
201
+ --_ctm-mob-dn-on-ve-se-hr-se-ft-wt,
202
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-on-ve-se-hr-se-ft-wt))
203
+ );
204
+ --_sf-hr-ft-se-ic: var(
205
+ --_ctm-mob-dn-on-ve-se-hr-se-ft-se-ic,
206
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ft-se-ic, var(--_ctm-dn-on-ve-se-hr-se-ft-se-ic))
207
+ );
208
+ --_sf-hr-tt-an: var(
209
+ --_ctm-mob-dn-on-ve-se-hr-se-tt-an,
210
+ var(--_ctm-tab-dn-on-ve-se-hr-se-tt-an, var(--_ctm-dn-on-ve-se-hr-se-tt-an))
211
+ );
212
+ --_sf-hr-lr-sg: var(
213
+ --_ctm-mob-dn-on-ve-se-hr-se-lr-sg,
214
+ var(--_ctm-tab-dn-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-on-ve-se-hr-se-lr-sg))
215
+ );
216
+ --_sf-hr-le-ht: var(
217
+ --_ctm-mob-dn-on-ve-se-hr-se-le-ht,
218
+ var(--_ctm-tab-dn-on-ve-se-hr-se-le-ht, var(--_ctm-dn-on-ve-se-hr-se-le-ht))
219
+ );
220
+
221
+ --_sf-hr-ue: var(
222
+ --_ctm-mob-dn-on-ve-se-hr-se-ue,
223
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
224
+ );
225
+ }
226
+ .swatch__item[data-selected="true"] {
227
+ --_sf-sd-bd-cr: var(
168
228
  --_ctm-mob-dn-on-ve-se-sd-se-bd-cr,
169
229
  var(--_ctm-tab-dn-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-on-ve-se-sd-se-bd-cr))
170
230
  );
171
- --_sf-hr-br-cr: var(
231
+ --_sf-sd-br-cr: var(
172
232
  --_ctm-mob-dn-on-ve-se-sd-se-br-cr,
173
233
  var(--_ctm-tab-dn-on-ve-se-sd-se-br-cr, var(--_ctm-dn-on-ve-se-sd-se-br-cr))
174
234
  );
175
- --_sf-hr-br-se: var(
235
+ --_sf-sd-br-se: var(
176
236
  --_ctm-mob-dn-on-ve-se-sd-se-br-se,
177
237
  var(--_ctm-tab-dn-on-ve-se-sd-se-br-se, var(--_ctm-dn-on-ve-se-sd-se-br-se))
178
238
  );
179
- --_sf-hr-br-wh: var(
239
+ --_sf-sd-br-wh: var(
180
240
  --_ctm-mob-dn-on-ve-se-sd-se-br-wh,
181
241
  var(--_ctm-tab-dn-on-ve-se-sd-se-br-wh, var(--_ctm-dn-on-ve-se-sd-se-br-wh))
182
242
  );
183
- --_sf-hr-br-bs: var(
184
- --_ctm-mob-dn-on-ve-se-sd-se-br-rs,
185
- var(--_ctm-tab-dn-on-ve-se-sd-se-br-rs, var(--_ctm-dn-on-ve-se-sd-se-br-rs))
243
+ // new
244
+ --_sf-sd-sw-ae: var(
245
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
246
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-on-ve-se-sd-se-sw-ae))
186
247
  );
187
- --_sf-hr-bx-sw: var(
188
- --_show-shadow,
189
- var(
190
- --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
191
- var(--_ctm-tab-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-on-ve-se-sd-se-sw-ae))
192
- )
193
- var(
194
- --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
195
- var(--_ctm-tab-dn-on-ve-se-sd-se-sw-br, var(--_ctm-dn-on-ve-se-sd-se-sw-br))
196
- )
197
- var(
198
- --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
199
- var(--_ctm-tab-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-on-ve-se-sd-se-sw-sd))
200
- )
201
- var(
202
- --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
203
- var(--_ctm-tab-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-on-ve-se-sd-se-sw-cr))
204
- )
248
+ --_sf-sd-sw-br: var(
249
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
250
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-br, var(--_ctm-dn-on-ve-se-sd-se-sw-br))
251
+ );
252
+ --_sf-sd-sw-sd: var(
253
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
254
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-on-ve-se-sd-se-sw-sd))
255
+ );
256
+ --_sf-sd-sw-cr: var(
257
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
258
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-on-ve-se-sd-se-sw-cr))
259
+ );
260
+
261
+ // for font
262
+
263
+ --_sf-sd-cr: var(
264
+ --_ctm-mob-dn-on-ve-se-sd-se-cr,
265
+ var(--_ctm-tab-dn-on-ve-se-sd-se-cr, var(--_ctm-dn-on-ve-se-sd-se-cr))
266
+ );
267
+ --_sf-sd-ft-fy: var(
268
+ --_ctm-mob-dn-on-ve-se-sd-se-ft-fy,
269
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-on-ve-se-sd-se-ft-fy))
270
+ );
271
+ --_sf-sd-ft-se: var(
272
+ --_ctm-mob-dn-on-ve-se-sd-se-ft-se,
273
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ft-se, var(--_ctm-dn-on-ve-se-sd-se-ft-se))
274
+ );
275
+ --_sf-sd-ft-wt: var(
276
+ --_ctm-mob-dn-on-ve-se-sd-se-ft-wt,
277
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-on-ve-se-sd-se-ft-wt))
278
+ );
279
+ --_sf-sd-ft-se-ic: var(
280
+ --_ctm-mob-dn-on-ve-se-sd-se-ft-se-ic,
281
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ft-se-ic, var(--_ctm-dn-on-ve-se-sd-se-ft-se-ic))
282
+ );
283
+ --_sf-sd-tt-an: var(
284
+ --_ctm-mob-dn-on-ve-se-sd-se-tt-an,
285
+ var(--_ctm-tab-dn-on-ve-se-sd-se-tt-an, var(--_ctm-dn-on-ve-se-sd-se-tt-an))
286
+ );
287
+ --_sf-sd-lr-sg: var(
288
+ --_ctm-mob-dn-on-ve-se-sd-se-lr-sg,
289
+ var(--_ctm-tab-dn-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-on-ve-se-sd-se-lr-sg))
290
+ );
291
+ --_sf-sd-le-ht: var(
292
+ --_ctm-mob-dn-on-ve-se-sd-se-le-ht,
293
+ var(--_ctm-tab-dn-on-ve-se-sd-se-le-ht, var(--_ctm-dn-on-ve-se-sd-se-le-ht))
294
+ );
295
+
296
+ --_sf-sd-ue: var(
297
+ --_ctm-mob-dn-on-ve-se-sd-se-ue,
298
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
205
299
  );
206
300
  }
207
301
 
208
302
  .swatch__item {
209
- height: var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se)));
210
- width: var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se)));
211
- gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
212
303
  text-align: center;
213
304
  overflow: hidden;
214
305
  flex-shrink: 0;
@@ -216,77 +307,38 @@
216
307
  align-items: center;
217
308
  justify-content: center;
218
309
  // border: 1px solid gray;
219
- padding: var(--_ctm-mob-lt-sh-im-pg, var(--_ctm-tab-lt-sh-im-pg, var(--_ctm-lt-sh-im-pg)));
310
+
311
+ &[data-display-style="Swatch"] {
312
+ height: prepareMediaVariable(--_ctm-lt-sh-im-se);
313
+ width: prepareMediaVariable(--_ctm-lt-sh-im-se);
314
+ }
315
+ &[data-display-style="Single Select"] {
316
+ min-width: 20px;
317
+ min-height: 20px;
318
+ box-sizing: content-box;
319
+ }
320
+
321
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
322
+ padding: prepareMediaVariable(--_ctm-lt-sh-im-pg);
220
323
 
221
324
  cursor: pointer;
222
325
 
223
- border-color: var(
224
- --_sf-hr-br-cr,
225
- var(
226
- --_ctm-mob-dn-on-ve-se-dt-se-br-cr,
227
- var(--_ctm-tab-dn-on-ve-se-dt-se-br-cr, var(--_ctm-dn-on-ve-se-dt-se-br-cr))
228
- )
229
- );
326
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));
230
327
 
231
- background-color: var(
232
- --_sf-hr-bd-cr,
233
- var(
234
- --_ctm-mob-dn-on-ve-se-dt-se-bd-cr,
235
- var(--_ctm-tab-dn-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-on-ve-se-dt-se-bd-cr))
236
- )
237
- );
238
- border-style: var(
239
- --_sf-hr-br-se,
240
- var(
241
- --_ctm-mob-dn-on-ve-se-dt-se-br-se,
242
- var(--_ctm-tab-dn-on-ve-se-dt-se-br-se, var(--_ctm-dn-on-ve-se-dt-se-br-se))
243
- )
244
- );
245
- border-width: var(
246
- --_sf-hr-br-wh,
247
- var(
248
- --_ctm-mob-dn-on-ve-se-dt-se-br-wh,
249
- var(--_ctm-tab-dn-on-ve-se-dt-se-br-wh, var(--_ctm-dn-on-ve-se-dt-se-br-wh))
250
- )
251
- );
252
- // border-radius: var(
253
- // --_ctm-mob-dn-on-ve-se-dt-se-br-rs,
254
- // var(--_ctm-tab-dn-on-ve-se-dt-se-br-rs, var(--_ctm-dn-on-ve-se-dt-se-br-rs))
255
- // );
256
- box-shadow: var(
257
- --_sf-hr-bd-cr,
258
- var(
259
- --_show-shadow,
260
- var(
261
- --_ctm-mob-dn-on-ve-se-dt-se-sw-ae,
262
- var(--_ctm-tab-dn-on-ve-se-dt-se-sw-ae, var(--_ctm-dn-on-ve-se-dt-se-sw-ae))
263
- )
264
- var(
265
- --_ctm-mob-dn-on-ve-se-dt-se-sw-br,
266
- var(--_ctm-tab-dn-on-ve-se-dt-se-sw-br, var(--_ctm-dn-on-ve-se-dt-se-sw-br))
267
- )
268
- var(
269
- --_ctm-mob-dn-on-ve-se-dt-se-sw-sd,
270
- var(--_ctm-tab-dn-on-ve-se-dt-se-sw-sd, var(--_ctm-dn-on-ve-se-dt-se-sw-sd))
271
- )
272
- var(
273
- --_ctm-mob-dn-on-ve-se-dt-se-sw-cr,
274
- var(--_ctm-tab-dn-on-ve-se-dt-se-sw-cr, var(--_ctm-dn-on-ve-se-dt-se-sw-cr))
275
- )
276
- )
277
- );
328
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr));
329
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
330
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
278
331
 
279
- & div {
332
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
333
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
334
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
335
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
336
+ & div,
337
+ .product-select-image {
280
338
  height: 100%;
281
339
  width: 100%;
282
340
  }
283
341
 
284
- &[data-background-shape="square"][data-display-style="Single Select"] {
285
- width: calc(
286
- var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) + 10px
287
- );
288
- }
289
-
290
342
  &[data-background-shape="circle"] {
291
343
  border-radius: 50%;
292
344
  }
@@ -294,99 +346,144 @@
294
346
  border-radius: 5px;
295
347
  }
296
348
  &[data-background-shape="capsule"] {
297
- border-radius: 80%;
298
- width: calc(
299
- var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) + 8px
300
- );
349
+ &:not([data-display-style="Single Select"]) {
350
+ --toggle-height: var(--_ctm-lt-sh-im-se);
351
+ --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
352
+
353
+ width: var(--toggle-width);
354
+ height: var(--toggle-height);
355
+ }
356
+
357
+ border-radius: var(--toggle-height); /* Full pill shape */
358
+ box-sizing: border-box;
301
359
  }
302
360
  &[data-swatch-shape="circle"] {
303
- & div {
361
+ & div,
362
+ .product-select-image {
304
363
  border-radius: 50%;
305
364
  }
306
365
  // border-radius: 50%;
307
366
  }
308
367
  &[data-swatch-shape="capsule"] {
309
- & div {
310
- border-radius: 50%;
368
+ & div,
369
+ .product-select-image {
370
+ // border-radius: 50%;
371
+ width: 100%;
372
+ height: 100%;
373
+ border-radius: inherit;
311
374
  }
312
375
  // border-radius: 50%;
313
376
  }
314
377
 
315
- // &:hover {
316
- // &[data-background-shape-hover="circle"] {
317
- // border-radius: 50%;
318
- // }
319
- // &[data-background-shape-hover="square"] {
320
- // border-radius: 5px;
321
- // }
322
- // &[data-background-shape-hover="capsule"] {
323
- // border-radius: 80%;
324
- // width: calc(
325
- // var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) +
326
- // 8px
327
- // );
328
- // }
329
-
330
- // &[data-swatch-shape-hover="circle"] {
331
- // & div {
332
- // border-radius: 50%;
333
- // }
334
- // // border-radius: 50%;
335
- // }
336
-
337
- // &[data-swatch-shape-hover="square"] {
338
- // & div {
339
- // border-radius: 0%;
340
- // }
341
- // }
342
- // &[data-swatch-shape-hover="capsule"] {
343
- // & div {
344
- // border-radius: 50%;
345
- // }
346
- // // border-radius: 50%;
347
- // }
348
- // }
349
-
350
- &[data-is-selected="true"] {
351
- &[data-background-shape-selected="circle"] {
378
+ &:hover {
379
+ &[data-background-shape-hover="circle"] {
352
380
  border-radius: 50%;
353
381
  }
354
- &[data-background-shape-selected="square"] {
382
+ &[data-background-shape-hover="square"] {
355
383
  border-radius: 5px;
356
384
  }
357
- &[data-background-shape-selected="capsule"] {
358
- border-radius: 80%;
359
- width: calc(
360
- var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) +
361
- 8px
362
- );
385
+ &[data-background-shape-hover="capsule"] {
386
+ --toggle-height: var(--_ctm-lt-sh-im-se);
387
+ --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
388
+
389
+ width: var(--toggle-width);
390
+ height: var(--toggle-height);
391
+
392
+ border-radius: var(--toggle-height); /* Full pill shape */
393
+ box-sizing: border-box;
363
394
  }
364
395
 
365
- &[data-swatch-shape-selected="circle"] {
366
- & div {
396
+ &[data-swatch-shape-hover="circle"] {
397
+ & div,
398
+ .product-select-image {
367
399
  border-radius: 50%;
368
400
  }
369
401
  // border-radius: 50%;
370
402
  }
403
+ &[data-swatch-shape-hover="capsule"] {
404
+ & div,
405
+ .product-select-image {
406
+ // border-radius: 50%;
407
+ width: 100%;
408
+ height: 100%;
409
+ border-radius: inherit;
410
+ }
411
+ }
412
+ &[data-swatch-shape-hover="square"] {
413
+ & div,
414
+ .product-select-image {
415
+ border-radius: 5px;
416
+ }
417
+ }
418
+ }
419
+ &[data-selected="true"] {
420
+ border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));
371
421
 
372
- &[data-swatch-shape-selected="square"] {
373
- & div {
374
- border-radius: 0%;
422
+ background-color: var(
423
+ --_sf-sd-bd-cr,
424
+ prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr)
425
+ );
426
+ border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
427
+ border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
428
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
429
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
430
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
431
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
432
+
433
+ &[data-background-shape-selected="circle"] {
434
+ border-radius: 50%;
435
+ }
436
+ &[data-background-shape-selected="square"] {
437
+ border-radius: 5px;
438
+ }
439
+ &[data-background-shape-selected="capsule"] {
440
+ --toggle-height: var(--_ctm-lt-sh-im-se);
441
+ --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
442
+
443
+ width: var(--toggle-width);
444
+ height: var(--toggle-height);
445
+
446
+ border-radius: var(--toggle-height); /* Full pill shape */
447
+ box-sizing: border-box;
448
+ }
449
+ &[data-swatch-shape-selected="circle"] {
450
+ & div,
451
+ .product-select-image {
452
+ border-radius: 50%;
375
453
  }
376
454
  }
377
455
  &[data-swatch-shape-selected="capsule"] {
378
- & div {
379
- border-radius: 50%;
456
+ & div,
457
+ .product-select-image {
458
+ // border-radius: 50%;
459
+ width: 100%;
460
+ height: 100%;
461
+ border-radius: inherit;
462
+ }
463
+ }
464
+ &[data-swatch-shape-selected="square"] {
465
+ & div,
466
+ .product-select-image {
467
+ border-radius: 5px;
380
468
  }
381
- // border-radius: 50%;
382
469
  }
383
470
  }
384
- }
385
471
 
386
- .product-select-image {
387
- height: 100%;
388
- width: 100%;
389
- object-fit: contain;
472
+ .option__value__text {
473
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-cr));
474
+ font-family: var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-fy)),
475
+ sans-serif;
476
+ font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se));
477
+ font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-wt));
478
+ font-style: var(
479
+ --_sf-sd-ft-se-ic,
480
+ prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se-ic)
481
+ );
482
+ text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-tt-an));
483
+ letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-lr-sg));
484
+ line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-le-ht-dc));
485
+ text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ue));
486
+ }
390
487
  }
391
488
 
392
489
  .disabled {
@@ -425,6 +522,24 @@
425
522
  }
426
523
  }
427
524
 
525
+ .option__value__text {
526
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-cr));
527
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-fy)),
528
+ sans-serif;
529
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se));
530
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-wt));
531
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ft-se-ic));
532
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-tt-an));
533
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-lr-sg));
534
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-le-ht-dc));
535
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-ue));
536
+ }
537
+
538
+ .product-select-image {
539
+ height: 100%;
540
+ width: 100%;
541
+ object-fit: contain;
542
+ }
428
543
  //Dropdown
429
544
  .est__dropdown__main {
430
545
  position: relative;
@@ -623,9 +738,7 @@
623
738
  width: 100%;
624
739
  display: flex;
625
740
  top: calc(
626
- calc(
627
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 8px
628
- ) /
741
+ calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 8px) /
629
742
  2
630
743
  );
631
744
  }
@@ -650,8 +763,7 @@
650
763
  --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
651
764
  var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
652
765
  )
653
- ) /
654
- 2
766
+ ) / 2
655
767
  );
656
768
  }
657
769
  }
@@ -701,8 +813,7 @@
701
813
  var(
702
814
  --_ctm-mob-dn-pn-as-aw-se,
703
815
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
704
- ) +
705
- 8px
816
+ ) + 8px
706
817
  )
707
818
  );
708
819
  }
@@ -712,8 +823,7 @@
712
823
  var(
713
824
  --_ctm-mob-dn-pn-le-le-ht,
714
825
  var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
715
- ) +
716
- 20px
826
+ ) + 20px
717
827
  )
718
828
  );
719
829
  }
@@ -723,8 +833,7 @@
723
833
  var(
724
834
  --_ctm-mob-dn-pn-ds-dt-se,
725
835
  var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
726
- ) +
727
- 20px
836
+ ) + 20px
728
837
  )
729
838
  );
730
839
  }
@@ -836,15 +945,13 @@
836
945
  var(
837
946
  --_ctm-mob-dn-pn-as-aw-se,
838
947
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
839
- ) *
840
- 0.5
948
+ ) * 0.5
841
949
  );
842
950
  height: calc(
843
951
  var(
844
952
  --_ctm-mob-dn-pn-as-aw-se,
845
953
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
846
- ) *
847
- 0.5
954
+ ) * 0.5
848
955
  );
849
956
  path {
850
957
  stroke: var(