@sc-360-v2/storefront-cms-library 0.1.94 → 0.1.96

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 (49) hide show
  1. package/dist/amount-estimator.scss +444 -4
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-variant-picker.scss +629 -19
  4. package/dist/container.scss +9 -0
  5. package/dist/editor-core.scss +97 -8
  6. package/dist/functions.js +1 -1
  7. package/dist/gallery-slider-temp.scss +463 -348
  8. package/dist/grid.scss +20 -2
  9. package/dist/image-temp.scss +1 -1
  10. package/dist/menu.scss +89 -0
  11. package/dist/payment-methods.scss +175 -11
  12. package/dist/pickup-locations.scss +443 -11
  13. package/dist/product-actions.scss +905 -77
  14. package/dist/product-basic-elements.scss +37 -6
  15. package/dist/product-highlights.scss +114 -4
  16. package/dist/product-image.scss +472 -339
  17. package/dist/product-inventory.scss +559 -14
  18. package/dist/product-options.scss +156 -0
  19. package/dist/product-price.scss +695 -289
  20. package/dist/product-promotions.scss +1118 -17
  21. package/dist/product.scss +32 -172
  22. package/dist/productDetails.scss +28 -0
  23. package/dist/quantity-selector.scss +58 -4
  24. package/dist/repeater-item.scss +22 -0
  25. package/dist/repeater.scss +113 -0
  26. package/dist/section.scss +16 -0
  27. package/dist/shipping-estimator.scss +13 -5
  28. package/dist/stack.scss +7 -1
  29. package/dist/store-locations.scss +442 -14
  30. package/dist/tooltip.scss +276 -0
  31. package/dist/types/builder/enums/index.d.ts +9 -2
  32. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +2 -1
  33. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  34. package/dist/types/builder/tools/element-edit/productActions.d.ts +1 -0
  35. package/dist/types/builder/tools/element-edit/productDetails.d.ts +6 -31
  36. package/dist/types/builder/tools/element-edit/productDetailsOLd.d.ts +42 -0
  37. package/dist/types/builder/tools/element-edit/productOptions.d.ts +59 -0
  38. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -1
  39. package/dist/types/helper/helper-functions.d.ts +1 -0
  40. package/dist/uom-selector.scss +501 -4
  41. package/dist/variable.scss +9 -1
  42. package/dist/variant-picker.scss +672 -19
  43. package/dist/volume-pricing.scss +473 -19
  44. package/dist/widget.scss +25 -3
  45. package/package.json +1 -1
  46. package/dist/App.scss +0 -31
  47. package/dist/mixin.scss +0 -9
  48. package/dist/modal.module.scss +0 -121
  49. package/dist/range-slider.module.scss +0 -85
@@ -12,10 +12,10 @@
12
12
  margin: var(--_ctm-lt-mn, --_tst-lt-mn);
13
13
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
14
14
  // height: ;
15
- aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
- --_aspect-ratio: calc(
17
- 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
- );
15
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
+ // --_aspect-ratio: calc(
17
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
+ // );
19
19
 
20
20
  & > .wrapper {
21
21
  width: 100%;
@@ -24,24 +24,478 @@
24
24
  &[data-show-shadow="false"] {
25
25
  --_show-shadow: none;
26
26
  }
27
-
28
- table {
29
- font-family: arial, sans-serif;
30
- border-collapse: collapse;
31
- width: 100%;
32
- height: 100%;
27
+ .text-element {
28
+ background: #6d96e4;
29
+ padding: 10px;
30
+ font-weight: 600;
31
+ color: rgba(75, 69, 70, 1);
33
32
  }
33
+ .volume__container {
34
+ padding: var(--_ctm-lt-pg);
35
+ .stack {
36
+ .static {
37
+ color: var(--_ctm-dn-um-te-se-cr);
38
+ font-family: var(--_ctm-dn-um-te-se-ft-fy), sans-serif;
39
+ font-size: var(--_ctm-dn-um-te-se-ft-se);
40
+ font-weight: var(--_ctm-dn-um-te-se-ft-wt);
41
+ font-style: var(--_ctm-dn-um-te-se-ft-se-ic);
42
+ text-align: var(--_ctm-dn-um-te-se-tt-an);
43
+ letter-spacing: var(--_ctm-dn-um-te-se-lr-sg);
44
+ line-height: var(--_ctm-dn-um-te-se-le-ht);
45
+ text-decoration: var(--_ctm-dn-um-te-se-ue);
46
+ }
47
+ .horizontal {
48
+ display: flex;
49
+ flex-direction: row;
50
+ gap: var(--_ctm-lt-im-sg);
51
+ .item {
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ flex-direction: column;
56
+ gap: 4px;
57
+ padding: var(--_ctm-dn-im-se-dt-se-vl-pg) var(--_ctm-dn-im-se-dt-se-hl-pg);
58
+ cursor: pointer;
59
+ background-color: var(--_ctm-dn-im-se-dt-se-bd-cr);
60
+ border-color: var(
61
+ --_show-border-im-se,
62
+ var(--_ctm-dn-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
63
+ );
64
+ border-style: var(
65
+ --_show-border-im-se,
66
+ var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
67
+ );
68
+ border-width: var(
69
+ --_show-border-im-se,
70
+ var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
71
+ );
72
+ border-radius: var(--_ctm-dn-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
73
+ box-shadow: var(
74
+ --_show-shadow-im-se,
75
+ var(--_ctm-dn-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
76
+ var(--_ctm-dn-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
77
+ var(--_ctm-dn-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
78
+ var(--_ctm-dn-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
79
+ );
80
+ .each {
81
+ color: var(--_ctm-dn-um-se-cr);
82
+ font-family: var(--_ctm-dn-um-se-ft-fy), sans-serif;
83
+ font-size: var(--_ctm-dn-um-se-ft-se);
84
+ font-weight: var(--_ctm-dn-um-se-ft-wt);
85
+ font-style: var(--_ctm-dn-um-se-ft-se-ic);
86
+ text-align: var(--_ctm-dn-um-se-tt-an);
87
+ letter-spacing: var(--_ctm-dn-um-se-lr-sg);
88
+ line-height: var(--_ctm-dn-um-se-le-ht);
89
+ text-decoration: var(--_ctm-dn-um-se-ue);
90
+ }
91
+ .price {
92
+ color: var(--_ctm-dn-pt-pe-cr);
93
+ font-family: var(--_ctm-dn-pt-pe-ft-fy), sans-serif;
94
+ font-size: var(--_ctm-dn-pt-pe-ft-se);
95
+ font-weight: var(--_ctm-dn-pt-pe-ft-wt);
96
+ font-style: var(--_ctm-dn-pt-pe-ft-se-ic);
97
+ text-align: var(--_ctm-dn-pt-pe-tt-an);
98
+ letter-spacing: var(--_ctm-dn-pt-pe-lr-sg);
99
+ line-height: var(--_ctm-dn-pt-pe-le-ht);
100
+ text-decoration: var(--_ctm-dn-pt-pe-ue);
101
+ }
102
+ .off__price {
103
+ font-size: 12px;
104
+ display: flex;
105
+ justify-content: space-around;
106
+ gap: 10px;
107
+ align-items: center;
108
+ .offer__price {
109
+ color: var(--_ctm-dn-ss-cr);
110
+ font-family: var(--_ctm-dn-ss-ft-fy), sans-serif;
111
+ font-size: var(--_ctm-dn-ss-ft-se);
112
+ font-weight: var(--_ctm-dn-ss-ft-wt);
113
+ font-style: var(--_ctm-dn-ss-ft-se-ic);
114
+ text-align: var(--_ctm-dn-ss-tt-an);
115
+ letter-spacing: var(--_ctm-dn-ss-lr-sg);
116
+ line-height: var(--_ctm-dn-ss-le-ht);
117
+ text-decoration: var(--_ctm-dn-ss-ue);
118
+ }
119
+ .discount__price {
120
+ color: var(--_ctm-dn-al-pe-cr);
121
+ font-family: var(--_ctm-dn-al-pe-ft-fy), sans-serif;
122
+ font-size: var(--_ctm-dn-al-pe-ft-se);
123
+ font-weight: var(--_ctm-dn-al-pe-ft-wt);
124
+ font-style: var(--_ctm-dn-al-pe-ft-se-ic);
125
+ text-align: var(--_ctm-dn-al-pe-tt-an);
126
+ letter-spacing: var(--_ctm-dn-al-pe-lr-sg);
127
+ line-height: var(--_ctm-dn-al-pe-le-ht);
128
+ text-decoration: var(--_ctm-dn-al-pe-ue);
129
+ }
130
+ }
131
+ .units {
132
+ color: var(--_ctm-dn-pe-pr-ut-cr);
133
+ font-family: var(--_ctm-dn-pe-pr-ut-ft-fy), sans-serif;
134
+ font-size: var(--_ctm-dn-pe-pr-ut-ft-se);
135
+ font-weight: var(--_ctm-dn-pe-pr-ut-ft-wt);
136
+ font-style: var(--_ctm-dn-pe-pr-ut-ft-se-ic);
137
+ text-align: var(--_ctm-dn-pe-pr-ut-tt-an);
138
+ letter-spacing: var(--_ctm-dn-pe-pr-ut-lr-sg);
139
+ line-height: var(--_ctm-dn-pe-pr-ut-le-ht);
140
+ text-decoration: var(--_ctm-dn-pe-pr-ut-ue);
141
+ }
142
+ }
143
+ }
144
+ .vertical {
145
+ display: flex;
146
+ flex-direction: column;
147
+ gap: var(--_ctm-lt-im-sg);
148
+ .item {
149
+ display: flex;
150
+ align-items: center;
151
+ justify-content: space-between;
152
+ padding: var(--_ctm-dn-im-se-dt-se-vl-pg) var(--_ctm-dn-im-se-dt-se-hl-pg);
153
+ cursor: pointer;
154
+ background-color: var(--_ctm-dn-im-se-dt-se-bd-cr);
155
+ border-color: var(
156
+ --_show-border-im-se,
157
+ var(--_ctm-dn-im-se-dt-se-br-cr, var(--_tst-dn-br-cr))
158
+ );
159
+ border-style: var(
160
+ --_show-border-im-se,
161
+ var(--_ctm-dn-im-se-dt-se-br-se, var(--_tst-dn-br-se))
162
+ );
163
+ border-width: var(
164
+ --_show-border-im-se,
165
+ var(--_ctm-dn-im-se-dt-se-br-wh, var(--_tst-dn-br-wh))
166
+ );
167
+ border-radius: var(--_ctm-dn-im-se-dt-se-br-rs, var(--_tst-dn-br-rs));
168
+ box-shadow: var(
169
+ --_show-shadow-im-se,
170
+ var(--_ctm-dn-im-se-dt-se-sw-ae, var(--_tst-dn-sw-ae))
171
+ var(--_ctm-dn-im-se-dt-se-sw-br, var(--_tst-dn-sw-br))
172
+ var(--_ctm-dn-im-se-dt-se-sw-sd, var(--_tst-dn-sw-sd))
173
+ var(--_ctm-dn-im-se-dt-se-sw-cr, var(--_tst-dn-sw-cr))
174
+ );
175
+ .text {
176
+ color: var(--_ctm-dn-um-se-cr);
177
+ font-family: var(--_ctm-dn-um-se-ft-fy), sans-serif;
178
+ font-size: var(--_ctm-dn-um-se-ft-se);
179
+ font-weight: var(--_ctm-dn-um-se-ft-wt);
180
+ font-style: var(--_ctm-dn-um-se-ft-se-ic);
181
+ text-align: var(--_ctm-dn-um-se-tt-an);
182
+ letter-spacing: var(--_ctm-dn-um-se-lr-sg);
183
+ line-height: var(--_ctm-dn-um-se-le-ht);
184
+ text-decoration: var(--_ctm-dn-um-se-ue);
185
+ }
186
+ .off__price {
187
+ .hilight__price {
188
+ color: var(--_ctm-dn-pt-pe-cr);
189
+ font-family: var(--_ctm-dn-pt-pe-ft-fy), sans-serif;
190
+ font-size: var(--_ctm-dn-pt-pe-ft-se);
191
+ font-weight: var(--_ctm-dn-pt-pe-ft-wt);
192
+ font-style: var(--_ctm-dn-pt-pe-ft-se-ic);
193
+ text-align: var(--_ctm-dn-pt-pe-tt-an);
194
+ letter-spacing: var(--_ctm-dn-pt-pe-lr-sg);
195
+ line-height: var(--_ctm-dn-pt-pe-le-ht);
196
+ text-decoration: var(--_ctm-dn-pt-pe-ue);
197
+ }
198
+ .secondary__price {
199
+ color: var(--_ctm-dn-pe-pr-ut-cr);
200
+ font-family: var(--_ctm-dn-pe-pr-ut-ft-fy), sans-serif;
201
+ font-size: var(--_ctm-dn-pe-pr-ut-ft-se);
202
+ font-weight: var(--_ctm-dn-pe-pr-ut-ft-wt);
203
+ font-style: var(--_ctm-dn-pe-pr-ut-ft-se-ic);
204
+ text-align: var(--_ctm-dn-pe-pr-ut-tt-an);
205
+ letter-spacing: var(--_ctm-dn-pe-pr-ut-lr-sg);
206
+ line-height: var(--_ctm-dn-pe-pr-ut-le-ht);
207
+ text-decoration: var(--_ctm-dn-pe-pr-ut-ue);
208
+ }
209
+ }
210
+ .discount__price {
211
+ display: flex;
212
+ justify-content: space-around;
213
+ gap: 10px;
214
+ .price {
215
+ color: var(--_ctm-dn-al-pe-cr);
216
+ font-family: var(--_ctm-dn-al-pe-ft-fy), sans-serif;
217
+ font-size: var(--_ctm-dn-al-pe-ft-se);
218
+ font-weight: var(--_ctm-dn-al-pe-ft-wt);
219
+ font-style: var(--_ctm-dn-al-pe-ft-se-ic);
220
+ text-align: var(--_ctm-dn-al-pe-tt-an);
221
+ letter-spacing: var(--_ctm-dn-al-pe-lr-sg);
222
+ line-height: var(--_ctm-dn-al-pe-le-ht);
223
+ text-decoration: var(--_ctm-dn-al-pe-ue);
224
+ }
225
+ .save__price {
226
+ color: var(--_ctm-dn-ss-cr);
227
+ font-family: var(--_ctm-dn-ss-ft-fy), sans-serif;
228
+ font-size: var(--_ctm-dn-ss-ft-se);
229
+ font-weight: var(--_ctm-dn-ss-ft-wt);
230
+ font-style: var(--_ctm-dn-ss-ft-se-ic);
231
+ text-align: var(--_ctm-dn-ss-tt-an);
232
+ letter-spacing: var(--_ctm-dn-ss-lr-sg);
233
+ line-height: var(--_ctm-dn-ss-le-ht);
234
+ text-decoration: var(--_ctm-dn-ss-ue);
235
+ }
236
+ }
237
+ }
238
+ }
239
+ }
240
+ .table-content {
241
+ border-collapse: collapse;
242
+ background-color: var(--_ctm-dn-te-bd-cr);
243
+ border-color: var(--_show-border-im-se, var(--_ctm-dn-te-br-cr, var(--_tst-dn-br-cr)));
244
+ border-style: var(--_show-border-im-se, var(--_ctm-dn-te-br-se, var(--_tst-dn-br-se)));
245
+ border-width: var(--_show-border-im-se, var(--_ctm-dn-te-br-wh, var(--_tst-dn-br-wh)));
246
+ border-radius: var(--_ctm-dn-te-br-rs, var(--_tst-dn-br-rs));
247
+ box-shadow: var(
248
+ --_show-shadow-im-se,
249
+ var(--_ctm-dn-te-sw-ae, var(--_tst-dn-sw-ae))
250
+ var(--_ctm-dn-te-sw-br, var(--_tst-dn-sw-br))
251
+ var(--_ctm-dn-te-sw-sd, var(--_tst-dn-sw-sd))
252
+ var(--_ctm-dn-te-sw-cr, var(--_tst-dn-sw-cr))
253
+ );
254
+ &[data-header-divider="true"] {
255
+ thead tr th {
256
+ border-bottom: 1px solid var(--_ctm-dn-rw-ds-hr-dr);
257
+ }
258
+ }
259
+ &[data-row-divider="true"] {
260
+ tbody tr td {
261
+ border-bottom: 1px solid var(--_ctm-dn-rw-ds-rw-dr);
262
+ }
263
+ }
264
+ &[data-column-divider="true"] {
265
+ tbody tr td,
266
+ thead tr th {
267
+ border-right: 1px solid var(--_ctm-dn-rw-ds-cn-dr);
268
+ }
34
269
 
35
- td,
36
- th {
37
- border: 1px solid #dddddd;
38
- text-align: center;
39
- padding: 8px;
40
- }
270
+ tbody tr td:last-child,
271
+ thead tr th:last-child {
272
+ border-right: none;
273
+ }
274
+ }
275
+ &[data-alternative-row-colors="true"] {
276
+ tbody tr:nth-child(odd) {
277
+ background-color: var(--_gray-300);
278
+ width: 100%;
279
+ }
280
+ }
281
+ thead {
282
+ height: var(--_ctm-lt-hr-ht);
283
+ tr {
284
+ th {
285
+ padding: var(--_ctm-lt-hr-cl-pg);
286
+ text-align: var(--_ctm-lt-ct-at);
287
+ border: 0;
288
+ background-color: var(--_ctm-dn-te-hr-bd-cr);
289
+ color: var(--_ctm-dn-hr-tt-cr);
290
+ font-family: var(--_ctm-dn-hr-tt-ft-fy), sans-serif;
291
+ font-size: var(--_ctm-dn-hr-tt-ft-se);
292
+ font-weight: var(--_ctm-dn-hr-tt-ft-wt);
293
+ font-style: var(--_ctm-dn-hr-tt-ft-se-ic);
294
+ text-align: var(--_ctm-dn-hr-tt-tt-an);
295
+ letter-spacing: var(--_ctm-dn-hr-tt-lr-sg);
296
+ line-height: var(--_ctm-dn-hr-tt-le-ht);
297
+ text-decoration: var(--_ctm-dn-hr-tt-ue);
298
+ }
299
+ }
300
+ }
301
+ tbody {
302
+ tr {
303
+ padding: var(--_ctm-lt-rw-cl-pg);
304
+ height: var(--_ctm-lt-rw-ht);
305
+ background-color: var(--_ctm-dn-te-rw-bd-cr);
306
+ text-align: var(--_ctm-lt-ct-at);
307
+ th,
308
+ td {
309
+ border: 0;
310
+ padding: inherit;
311
+ color: var(--_ctm-dn-te-rw-cr);
312
+ font-family: var(--_ctm-dn-te-rw-ft-fy), sans-serif;
313
+ font-size: var(--_ctm-dn-te-rw-ft-se);
314
+ font-weight: var(--_ctm-dn-te-rw-ft-wt);
315
+ font-style: var(--_ctm-dn-te-rw-ft-se-ic);
316
+ text-align: var(--_ctm-dn-te-rw-tt-an);
317
+ letter-spacing: var(--_ctm-dn-te-rw-lr-sg);
318
+ line-height: var(--_ctm-dn-te-rw-le-ht);
319
+ text-decoration: var(--_ctm-dn-te-rw-ue);
320
+ }
321
+ }
322
+ }
323
+ }
324
+ .pagination_container {
325
+ display: flex;
326
+ justify-content: center;
327
+ align-items: center;
328
+ gap: 10px;
329
+ button {
330
+ font-size: 16px;
331
+ // padding: 10px 20px;
332
+ // background-color: #000;
333
+ color: #fff;
334
+ border: none;
335
+ cursor: pointer;
336
+ // border-radius: 10px;
337
+ }
338
+ span {
339
+ cursor: pointer;
340
+ color: var(--_ctm-dn-pn-dt-se-cr);
341
+ font-family: var(--_ctm-dn-pn-dt-se-ft-fy), sans-serif;
342
+ font-size: var(--_ctm-dn-pn-dt-se-ft-se);
343
+ font-weight: var(--_ctm-dn-pn-dt-se-ft-wt);
344
+ font-style: var(--_ctm-dn-pn-dt-se-ft-se-ic);
345
+ text-align: var(--_ctm-dn-pn-dt-se-tt-an);
346
+ letter-spacing: var(--_ctm-dn-pn-dt-se-lr-sg);
347
+ line-height: var(--_ctm-dn-pn-dt-se-le-ht);
348
+ text-decoration: var(--_ctm-dn-pn-dt-se-ue);
349
+ }
350
+ .active {
351
+ span {
352
+ background-color: var(--_ctm-dn-pn-dt-se-bd-cr);
353
+ padding: 2px;
354
+ }
355
+ }
356
+ }
357
+ .loadmore_conatiner {
358
+ display: flex;
359
+ justify-content: center;
360
+ align-items: center;
361
+ gap: 10px;
362
+ margin-top: 10px;
363
+ button {
364
+ padding: 10px;
365
+ cursor: pointer;
366
+ color: var(--_ctm-dn-sw-me-is-bn-cr);
367
+ font-family: var(--_ctm-dn-sw-me-is-bn-ft-fy), sans-serif;
368
+ font-size: var(--_ctm-dn-sw-me-is-bn-ft-se);
369
+ font-weight: var(--_ctm-dn-sw-me-is-bn-ft-wt);
370
+ font-style: var(--_ctm-dn-sw-me-is-bn-ft-se-ic);
371
+ text-align: var(--_ctm-dn-sw-me-is-bn-tt-an);
372
+ letter-spacing: var(--_ctm-dn-sw-me-is-bn-lr-sg);
373
+ line-height: var(--_ctm-dn-sw-me-is-bn-le-ht);
374
+ text-decoration: var(--_ctm-dn-sw-me-is-bn-ue);
375
+ background-color: var(--_ctm-dn-sw-me-is-bn-bd-cr);
376
+ border-color: var(
377
+ --_show-border-im-se,
378
+ var(--_ctm-dn-sw-me-is-bn-br-cr, var(--_tst-dn-br-cr))
379
+ );
380
+ border-style: var(
381
+ --_show-border-im-se,
382
+ var(--_ctm-dn-sw-me-is-bn-br-se, var(--_tst-dn-br-se))
383
+ );
384
+ border-width: var(
385
+ --_show-border-im-se,
386
+ var(--_ctm-dn-sw-me-is-bn-br-wh, var(--_tst-dn-br-wh))
387
+ );
388
+ border-radius: var(--_ctm-dn-sw-me-is-bn-br-rs, var(--_tst-dn-br-rs));
389
+ box-shadow: var(
390
+ --_show-shadow-im-se,
391
+ var(--_ctm-dn-sw-me-is-bn-sw-ae, var(--_tst-dn-sw-ae))
392
+ var(--_ctm-dn-sw-me-is-bn-sw-br, var(--_tst-dn-sw-br))
393
+ var(--_ctm-dn-sw-me-is-bn-sw-sd, var(--_tst-dn-sw-sd))
394
+ var(--_ctm-dn-sw-me-is-bn-sw-cr, var(--_tst-dn-sw-cr))
395
+ );
396
+ }
397
+ }
398
+ // horizontal tabs
399
+ .tabs__main {
400
+ &.tabs__vertical {
401
+ .tabs {
402
+ .tabs__container {
403
+ flex-direction: column;
404
+ width: 120px;
405
+ }
406
+ }
407
+ }
408
+ &.tabs__hr {
409
+ .tabs {
410
+ flex-direction: column;
411
+ .tabs__container {
412
+ width: 100%;
413
+ }
414
+ }
415
+ }
416
+ .tabs {
417
+ display: flex;
418
+ gap: 12px;
419
+
420
+ .tabs__container {
421
+ display: flex;
422
+
423
+ background-color: var(--_gray-100);
424
+ .tab {
425
+ text-align: left;
426
+ padding-left: 10px;
427
+ span {
428
+ padding: 8px;
429
+ &.active {
430
+ border-bottom: 2px solid var(--_primary-400);
431
+ }
432
+ }
433
+ }
434
+ // .tab__content {
435
+ // }
436
+ }
437
+ }
438
+ }
439
+ // tabs
440
+ .tabs__container {
441
+ display: flex;
442
+ position: relative;
443
+ .tab {
444
+ flex: 1;
445
+ padding-block: 20px;
446
+ font-weight: 600;
447
+ text-align: center;
448
+ cursor: pointer;
449
+ position: relative;
450
+ &.tab__active {
451
+ font-weight: bold;
452
+ }
453
+ }
454
+ .tab__active-indicator {
455
+ position: absolute;
456
+ bottom: 0;
457
+ left: 0;
458
+ height: 2px;
459
+ background-color: #000;
460
+ transition:
461
+ left 0.3s ease,
462
+ width 0.3s ease;
463
+ }
464
+ }
41
465
 
42
- .line-through {
43
- text-decoration: line-through;
44
- color: red;
466
+ // accordion tabs
467
+ .tab__accordion {
468
+ display: flex;
469
+ flex-direction: column;
470
+ .tab__container {
471
+ .tab {
472
+ display: flex;
473
+ padding-inline: 2px;
474
+ border-bottom: 1px solid var(--_gray-200);
475
+ position: relative;
476
+ cursor: pointer;
477
+ span {
478
+ padding-block: 12px;
479
+ display: inline-block;
480
+ }
481
+ .active {
482
+ border-bottom: 2px solid var(--_primary-400);
483
+ }
484
+ &.inactive {
485
+ height: 0px;
486
+ }
487
+ }
488
+ .tab__content {
489
+ padding-block: 20px;
490
+ &.d-none {
491
+ display: none;
492
+ }
493
+ &.d-block {
494
+ display: block;
495
+ }
496
+ }
497
+ }
498
+ }
45
499
  }
46
500
  }
47
501
  }
package/dist/widget.scss CHANGED
@@ -1,6 +1,3 @@
1
- @import "./section.scss";
2
- @import "./grid.scss";
3
- @import "./container.scss";
4
1
  @import "./video.scss";
5
2
  @import "./social.scss";
6
3
  @import "./faq.scss";
@@ -21,3 +18,28 @@
21
18
  @import "./product-inventory.scss";
22
19
  @import "./store-locations.scss";
23
20
  @import "./pickup-locations.scss";
21
+ @import "./product-highlights.scss";
22
+ @import "./payment-methods.scss";
23
+ @import "./shipping-estimator.scss";
24
+ @import "./amount-estimator.scss";
25
+ @import "./quantity-selector.scss";
26
+ @import "./product-promotions.scss";
27
+ @import "./bulk-variant-picker.scss";
28
+ @import "./variant-picker.scss";
29
+ @import "./uom-selector.scss";
30
+ @import "./product-image.scss";
31
+ @import "./product-basic-elements.scss";
32
+ @import "./lightbox.scss";
33
+ @import "./cart.scss";
34
+ @import "./profile.scss";
35
+ @import "./product.scss";
36
+ @import "./productDetails.scss";
37
+ @import "./menu.scss";
38
+ @import "./product-options.scss";
39
+
40
+ @import "./section.scss";
41
+ @import "./grid.scss";
42
+ @import "./container.scss";
43
+ @import "./stack.scss";
44
+ @import "./repeater.scss";
45
+ @import "./repeater-item.scss";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.1.94",
3
+ "version": "0.1.96",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {
package/dist/App.scss DELETED
@@ -1,31 +0,0 @@
1
- @import "./video.scss";
2
- @import "./social.scss";
3
- @import "./faq.scss";
4
- @import "./table.scss";
5
- @import "./button.scss";
6
- @import "./code-temp.scss";
7
- @import "./embed-temp.scss";
8
- @import "./text-temp.scss";
9
- @import "./image-temp.scss";
10
- @import "./gallery-slider-temp.scss";
11
- @import "./scroll.scss";
12
- @import "./countdown.scss";
13
- @import "./hotspot.scss";
14
- @import "./map.scss";
15
- @import "./product-price.scss";
16
- @import "./product-actions.scss";
17
- @import "./volume-pricing.scss";
18
- @import "./product-inventory.scss";
19
- @import "./store-locations.scss";
20
- @import "./pickup-locations.scss";
21
- @import "./product-highlights.scss";
22
- @import "./payment-methods.scss";
23
- @import "./shipping-estimator.scss";
24
- @import "./amount-estimator.scss";
25
- @import "./quantity-selector.scss";
26
- @import "./product-promotions.scss";
27
- @import "./bulk-variant-picker.scss";
28
- @import "./variant-picker.scss";
29
- @import "./uom-selector.scss";
30
- @import "./product-image.scss";
31
- @import "./product-basic-elements.scss";
package/dist/mixin.scss DELETED
@@ -1,9 +0,0 @@
1
- // mixins
2
-
3
- @mixin status($border-color, $bg-color, $text-color) {
4
- border: 1px solid $border-color;
5
- background-color: $bg-color;
6
- color: $text-color;
7
- border-radius: var(--_br-6);
8
- padding: var(--_pd-2) var(--_pd-10) var(--_pd-4) var(--_pd-10);
9
- }