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

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 (15) hide show
  1. package/dist/breadcrumbs.scss +6 -0
  2. package/dist/builder.js +1 -1
  3. package/dist/icon-library.scss +13 -21
  4. package/dist/layouter-pro-item.scss +37 -0
  5. package/dist/layouter-pro.scss +43 -0
  6. package/dist/menu-v2.scss +6 -1
  7. package/dist/product-options.scss +205 -223
  8. package/dist/stack.scss +2 -2
  9. package/dist/types/builder/tools/element-edit/filters.d.ts +1 -39
  10. package/dist/types/builder/tools/element-edit/productOptions.d.ts +2 -1
  11. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +2 -0
  12. package/dist/uom-selector.scss +2 -0
  13. package/dist/variant-picker.scss +464 -879
  14. package/dist/widget.scss +2 -0
  15. 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,83 @@
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
+ // new
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
+ .swatch__item[data-selected="true"] {
187
+ --_sf-sd-bd-cr: var(
168
188
  --_ctm-mob-dn-on-ve-se-sd-se-bd-cr,
169
189
  var(--_ctm-tab-dn-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-on-ve-se-sd-se-bd-cr))
170
190
  );
171
- --_sf-hr-br-cr: var(
191
+ --_sf-sd-br-cr: var(
172
192
  --_ctm-mob-dn-on-ve-se-sd-se-br-cr,
173
193
  var(--_ctm-tab-dn-on-ve-se-sd-se-br-cr, var(--_ctm-dn-on-ve-se-sd-se-br-cr))
174
194
  );
175
- --_sf-hr-br-se: var(
195
+ --_sf-sd-br-se: var(
176
196
  --_ctm-mob-dn-on-ve-se-sd-se-br-se,
177
197
  var(--_ctm-tab-dn-on-ve-se-sd-se-br-se, var(--_ctm-dn-on-ve-se-sd-se-br-se))
178
198
  );
179
- --_sf-hr-br-wh: var(
199
+ --_sf-sd-br-wh: var(
180
200
  --_ctm-mob-dn-on-ve-se-sd-se-br-wh,
181
201
  var(--_ctm-tab-dn-on-ve-se-sd-se-br-wh, var(--_ctm-dn-on-ve-se-sd-se-br-wh))
182
202
  );
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))
203
+ // new
204
+ --_sf-sd-sw-ae: var(
205
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
206
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-on-ve-se-sd-se-sw-ae))
186
207
  );
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
- )
208
+ --_sf-sd-sw-br: var(
209
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
210
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-br, var(--_ctm-dn-on-ve-se-sd-se-sw-br))
211
+ );
212
+ --_sf-sd-sw-sd: var(
213
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
214
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-on-ve-se-sd-se-sw-sd))
215
+ );
216
+ --_sf-sd-sw-cr: var(
217
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
218
+ var(--_ctm-tab-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-on-ve-se-sd-se-sw-cr))
205
219
  );
206
220
  }
207
221
 
208
222
  .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
223
  text-align: center;
213
224
  overflow: hidden;
214
225
  flex-shrink: 0;
@@ -216,77 +227,29 @@
216
227
  align-items: center;
217
228
  justify-content: center;
218
229
  // 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)));
230
+
231
+ height: prepareMediaVariable(--_ctm-lt-sh-im-se);
232
+ width: prepareMediaVariable(--_ctm-lt-sh-im-se);
233
+ gap: prepareMediaVariable(--_ctm-lt-im-gp);
234
+ padding: prepareMediaVariable(--_ctm-lt-sh-im-pg);
220
235
 
221
236
  cursor: pointer;
222
237
 
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
- );
238
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));
230
239
 
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
- );
240
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr));
241
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
242
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
278
243
 
244
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
245
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
246
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
247
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
279
248
  & div {
280
249
  height: 100%;
281
250
  width: 100%;
282
251
  }
283
252
 
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
253
  &[data-background-shape="circle"] {
291
254
  border-radius: 50%;
292
255
  }
@@ -294,101 +257,123 @@
294
257
  border-radius: 5px;
295
258
  }
296
259
  &[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
- );
260
+ --toggle-height: var(--_ctm-lt-sh-im-se);
261
+ --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
262
+
263
+ width: var(--toggle-width);
264
+ height: var(--toggle-height);
265
+
266
+ border-radius: var(--toggle-height); /* Full pill shape */
267
+ box-sizing: border-box;
301
268
  }
302
269
  &[data-swatch-shape="circle"] {
303
270
  & div {
304
271
  border-radius: 50%;
272
+ width: var(--_ctm-lt-sh-im-se);
305
273
  }
306
274
  // border-radius: 50%;
307
275
  }
308
276
  &[data-swatch-shape="capsule"] {
309
277
  & div {
310
- border-radius: 50%;
278
+ // border-radius: 50%;
279
+ width: 100%;
280
+ height: 100%;
281
+ border-radius: inherit;
311
282
  }
312
283
  // border-radius: 50%;
313
284
  }
314
285
 
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"] {
286
+ &:hover {
287
+ &[data-background-shape-hover="circle"] {
352
288
  border-radius: 50%;
353
289
  }
354
- &[data-background-shape-selected="square"] {
290
+ &[data-background-shape-hover="square"] {
355
291
  border-radius: 5px;
356
292
  }
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
- );
293
+ &[data-background-shape-hover="capsule"] {
294
+ --toggle-height: var(--_ctm-lt-sh-im-se);
295
+ --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
296
+
297
+ width: var(--toggle-width);
298
+ height: var(--toggle-height);
299
+
300
+ border-radius: var(--toggle-height); /* Full pill shape */
301
+ box-sizing: border-box;
363
302
  }
364
303
 
365
- &[data-swatch-shape-selected="circle"] {
304
+ &[data-swatch-shape-hover="circle"] {
366
305
  & div {
367
306
  border-radius: 50%;
307
+ width: var(--_ctm-lt-sh-im-se);
368
308
  }
369
309
  // border-radius: 50%;
370
310
  }
311
+ &[data-swatch-shape-hover="capsule"] {
312
+ & div {
313
+ // border-radius: 50%;
314
+ width: 100%;
315
+ height: 100%;
316
+ border-radius: inherit;
317
+ }
318
+ }
319
+ &[data-swatch-shape-hover="square"] {
320
+ & div {
321
+ border-radius: 5px;
322
+ }
323
+ }
324
+ }
325
+ &[data-selected="true"] {
326
+ border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));
371
327
 
372
- &[data-swatch-shape-selected="square"] {
328
+ background-color: var(
329
+ --_sf-sd-bd-cr,
330
+ prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr)
331
+ );
332
+ border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
333
+ border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
334
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
335
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
336
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
337
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
338
+
339
+ &[data-background-shape-selected="circle"] {
340
+ border-radius: 50%;
341
+ }
342
+ &[data-background-shape-selected="square"] {
343
+ border-radius: 5px;
344
+ }
345
+ &[data-background-shape-selected="capsule"] {
346
+ --toggle-height: var(--_ctm-lt-sh-im-se);
347
+ --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
348
+
349
+ width: var(--toggle-width);
350
+ height: var(--toggle-height);
351
+
352
+ border-radius: var(--toggle-height); /* Full pill shape */
353
+ box-sizing: border-box;
354
+ }
355
+ &[data-swatch-shape-selected="circle"] {
373
356
  & div {
374
- border-radius: 0%;
357
+ border-radius: 50%;
358
+ width: var(--_ctm-lt-sh-im-se);
375
359
  }
376
360
  }
377
361
  &[data-swatch-shape-selected="capsule"] {
378
362
  & div {
379
- border-radius: 50%;
363
+ // border-radius: 50%;
364
+ width: 100%;
365
+ height: 100%;
366
+ border-radius: inherit;
367
+ }
368
+ }
369
+ &[data-swatch-shape-selected="square"] {
370
+ & div {
371
+ border-radius: 5px;
380
372
  }
381
- // border-radius: 50%;
382
373
  }
383
374
  }
384
375
  }
385
376
 
386
- .product-select-image {
387
- height: 100%;
388
- width: 100%;
389
- object-fit: contain;
390
- }
391
-
392
377
  .disabled {
393
378
  cursor: not-allowed;
394
379
  opacity: 0.4;
@@ -425,6 +410,11 @@
425
410
  }
426
411
  }
427
412
 
413
+ .product-select-image {
414
+ height: 100%;
415
+ width: 100%;
416
+ object-fit: contain;
417
+ }
428
418
  //Dropdown
429
419
  .est__dropdown__main {
430
420
  position: relative;
@@ -623,9 +613,7 @@
623
613
  width: 100%;
624
614
  display: flex;
625
615
  top: calc(
626
- calc(
627
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 8px
628
- ) /
616
+ calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 8px) /
629
617
  2
630
618
  );
631
619
  }
@@ -650,8 +638,7 @@
650
638
  --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
651
639
  var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
652
640
  )
653
- ) /
654
- 2
641
+ ) / 2
655
642
  );
656
643
  }
657
644
  }
@@ -701,8 +688,7 @@
701
688
  var(
702
689
  --_ctm-mob-dn-pn-as-aw-se,
703
690
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
704
- ) +
705
- 8px
691
+ ) + 8px
706
692
  )
707
693
  );
708
694
  }
@@ -712,8 +698,7 @@
712
698
  var(
713
699
  --_ctm-mob-dn-pn-le-le-ht,
714
700
  var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
715
- ) +
716
- 20px
701
+ ) + 20px
717
702
  )
718
703
  );
719
704
  }
@@ -723,8 +708,7 @@
723
708
  var(
724
709
  --_ctm-mob-dn-pn-ds-dt-se,
725
710
  var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
726
- ) +
727
- 20px
711
+ ) + 20px
728
712
  )
729
713
  );
730
714
  }
@@ -836,15 +820,13 @@
836
820
  var(
837
821
  --_ctm-mob-dn-pn-as-aw-se,
838
822
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
839
- ) *
840
- 0.5
823
+ ) * 0.5
841
824
  );
842
825
  height: calc(
843
826
  var(
844
827
  --_ctm-mob-dn-pn-as-aw-se,
845
828
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
846
- ) *
847
- 0.5
829
+ ) * 0.5
848
830
  );
849
831
  path {
850
832
  stroke: var(
package/dist/stack.scss CHANGED
@@ -34,7 +34,7 @@ body {
34
34
  // min-width: var(--_sf-sta-nw-wh) !important;
35
35
  // min-height: var(--_ctm-sta-lt-ht, 100px) !important;
36
36
  min-width: 100px;
37
- min-height: 100px;
37
+ // min-height: 100px;
38
38
  margin: prepareMediaVariable(--_ctm-sta-lt-mn);
39
39
  // display: var(--_d-grid);
40
40
  background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
@@ -77,7 +77,7 @@ body {
77
77
  min-height: 10px;
78
78
  }
79
79
  &.dnhsc {
80
- min-height: 50px;
80
+ min-height: 25px;
81
81
  }
82
82
  // height: var(--_ctm-sta-lt-ht, 100px);
83
83
  // width: var(--_sf-sta-nw-wh, auto);
package/dist/types/builder/tools/element-edit/filters.d.ts CHANGED
@@ -31,30 +31,6 @@ interface selfLayoutInterface {
31
31
  }
32
32
  interface selfDesignInterface {
33
33
  selectorKey: string;
34
- filtersWidget: {
35
- selectorKey: string;
36
- [key: string]: any;
37
- };
38
- checkboxStyle: {
39
- selectorKey: string;
40
- [key: string]: any;
41
- };
42
- clearAllButton: {
43
- selectorKey: string;
44
- [key: string]: any;
45
- };
46
- chipButton: {
47
- selectorKey: string;
48
- [key: string]: any;
49
- };
50
- optionLabels: {
51
- selectorKey: string;
52
- [key: string]: any;
53
- };
54
- moreButton: {
55
- selectorKey: string;
56
- [key: string]: any;
57
- };
58
34
  }
59
35
  export declare enum SelectorKeysEnum {
60
36
  LAYOUT = "layout",
@@ -65,21 +41,7 @@ export declare enum SelectorKeysEnum {
65
41
  SELECTED_STATE = "selected",
66
42
  TAB_CONTAINER = "tabContainer",
67
43
  TAB_CONTENT_CONTAINER = "tabContentContainer",
68
- TABS = "tabs",
69
- FILTERS_WIDGET = "filtersWidget",
70
- CHECKBOX_STYLE = "checkboxStyle",
71
- CHECKBOX_DEFAULT_STATE = "checkboxDefaultState",
72
- CHECKBOX_HOVER_STATE = "checkboxHoverState",
73
- CLEAR_ALL_BUTTON = "clearAllButton",
74
- CHIP_BUTTON = "chipButton",
75
- CLEAR_ALL_BUTTON_DEFAULT_STATE = "clearAllButtonDefaultState",
76
- CLEAR_ALL_BUTTON_HOVER_STATE = "clearAllButtonHoverState",
77
- CHIP_BUTTON_DEFAULT_STATE = "chipButtonDefaultState",
78
- CHIP_BUTTON_HOVER_STATE = "chipButtonHoverState",
79
- OPTION_STYLE = "optionStyle",
80
- MORE_BUTTON = "moreButton",
81
- MORE_BUTTON_DEFAULT_STATE = "moreButtonDefaultState",
82
- MORE_BUTTON_HOVER_STATE = "moreButtonHoverState"
44
+ TABS = "tabs"
83
45
  }
84
46
  export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
85
47
  export {};
package/dist/types/builder/tools/element-edit/productOptions.d.ts CHANGED
@@ -77,7 +77,8 @@ export declare enum SelectorKeysEnum {
77
77
  SELECTED_STATE = "selected",
78
78
  SWATCH_OPTION_VALUE_STYLE = "swatchOptionValueStyle",
79
79
  SINGLE_OPTION_VALUE_STYLE = "singleOptionValueStyle",
80
- DROPDOWN_DISPLAY_STYLE = "dropdownDisplayStyle"
80
+ DROPDOWN_DISPLAY_STYLE = "dropdownDisplayStyle",
81
+ OPTION_TITLE = "optionTitle"
81
82
  }
82
83
  export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
83
84
  export {};
package/dist/types/builder/tools/element-edit/variantPicker.d.ts CHANGED
@@ -21,6 +21,7 @@ interface selfLayoutInterface {
21
21
  maxItemsToDisplay: CMSIBCommonInterface;
22
22
  overflowItems: CMSIBCommonInterface;
23
23
  swatchImageType: CMSIBCommonInterface;
24
+ itemSize: CMSIBCommonInterface;
24
25
  };
25
26
  singleSelectDisplayStyle: {
26
27
  selectorKey: string;
@@ -33,6 +34,7 @@ interface selfLayoutInterface {
33
34
  itemsPerRow: CMSIBCommonInterface;
34
35
  itemContentAlignment: CMSIBCommonInterface;
35
36
  overflowDirection: CMSIBCommonInterface;
37
+ itemSize: CMSIBCommonInterface;
36
38
  };
37
39
  dropdownDisplayStyle: {
38
40
  selectorKey: string;