@sc-360-v2/storefront-cms-library 0.2.97 → 0.2.99
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.
- package/dist/amount-estimator.scss +291 -226
- package/dist/builder.js +1 -1
- package/dist/button.scss +1 -1
- package/dist/buy-for-tab.scss +8 -7
- package/dist/cartDropdownOverlay.scss +0 -13
- package/dist/faq.scss +20 -24
- package/dist/icon-list.scss +76 -13
- package/dist/icons.js +1 -1
- package/dist/index.js +1 -1
- package/dist/map.scss +35 -35
- package/dist/menu-item.scss +19 -0
- package/dist/menu-v2.scss +695 -0
- package/dist/order-status.scss +483 -0
- package/dist/pickup-locations.scss +22 -19
- package/dist/product-options.scss +118 -76
- package/dist/quick-links.scss +186 -143
- package/dist/quotes.scss +1 -0
- package/dist/repeater-item.scss +1 -0
- package/dist/section.scss +29 -78
- package/dist/stack.scss +16 -61
- package/dist/store-locations.scss +21 -20
- package/dist/tab-v2.scss +8 -7
- package/dist/table-common.scss +510 -0
- package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +6 -1
- package/dist/types/builder/tools/element-edit/icon-list.d.ts +73 -7
- package/dist/types/builder/tools/element-edit/menu_v2.d.ts +4 -0
- package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +94 -1
- package/dist/uom-selector.scss +929 -1416
- package/dist/variant-picker.scss +416 -68
- package/dist/volume-pricing copy.scss +1092 -0
- package/dist/volume-pricing.scss +1007 -606
- package/dist/widget.scss +3 -0
- package/package.json +1 -1
package/dist/section.scss
CHANGED
|
@@ -50,43 +50,17 @@ section {
|
|
|
50
50
|
);
|
|
51
51
|
box-shadow: var(
|
|
52
52
|
--_hide-section-shadow,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
var(--_ctm-mob-sec-dn-sw-sd, var(--_ctm-tab-sec-dn-sw-sd, var(--_ctm-sec-dn-sw-sd)))
|
|
56
|
-
var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-sec-dn-sw-cr)))
|
|
53
|
+
prepareMediaVariable(--_ctm-sec-dn-sw-ae) prepareMediaVariable(--_ctm-sec-dn-sw-b)
|
|
54
|
+
prepareMediaVariable(--_ctm-sec-dn-sw-sd) prepareMediaVariable(--_ctm-sec-dn-sw-cr)
|
|
57
55
|
);
|
|
58
|
-
background-color:
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
);
|
|
62
|
-
background-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
);
|
|
66
|
-
background-attachment: var(
|
|
67
|
-
--_ctm-mob-sec-dn-bd-at,
|
|
68
|
-
var(--_ctm-tab-sec-dn-bd-at, var(--_ctm-sec-dn-bd-at))
|
|
69
|
-
);
|
|
70
|
-
background-position: var(
|
|
71
|
-
--_ctm-mob-sec-dn-bd-pn,
|
|
72
|
-
var(--_ctm-tab-sec-dn-bd-pn, var(--_ctm-sec-dn-bd-pn))
|
|
73
|
-
);
|
|
74
|
-
background-position-y: var(
|
|
75
|
-
--_ctm-mob-sec-dn-bd-pn-y,
|
|
76
|
-
var(--_ctm-tab-sec-dn-bd-pn-y, var(--_ctm-sec-dn-bd-pn-y))
|
|
77
|
-
);
|
|
78
|
-
background-repeat: var(
|
|
79
|
-
--_ctm-mob-sec-dn-bd-rt,
|
|
80
|
-
var(--_ctm-tab-sec-dn-bd-rt, var(--_ctm-sec-dn-bd-rt))
|
|
81
|
-
);
|
|
82
|
-
background-size: var(
|
|
83
|
-
--_ctm-mob-sec-dn-bd-se,
|
|
84
|
-
var(--_ctm-tab-sec-dn-bd-se, var(--_ctm-sec-dn-bd-se))
|
|
85
|
-
);
|
|
86
|
-
border-radius: var(
|
|
87
|
-
--_ctm-mob-sec-dn-br-rs,
|
|
88
|
-
var(--_ctm-tab-sec-dn-br-rs, var(--_ctm-sec-dn-br-rs))
|
|
89
|
-
) !important;
|
|
56
|
+
background-color: prepareMediaVariable(--_ctm-sec-dn-bd-cr);
|
|
57
|
+
background-image: prepareMediaVariable(--_ctm-sec-dn-bd-ie);
|
|
58
|
+
background-attachment: prepareMediaVariable(--_ctm-sec-dn-bd-at);
|
|
59
|
+
background-position: prepareMediaVariable(--_ctm-sec-dn-bd-pn);
|
|
60
|
+
background-position-y: prepareMediaVariable(--_ctm-sec-dn-bd-pn-y);
|
|
61
|
+
background-repeat: prepareMediaVariable(--_ctm-sec-dn-bd-rt);
|
|
62
|
+
background-size: prepareMediaVariable(--_ctm-sec-dn-bd-se);
|
|
63
|
+
border-radius: prepareMediaVariable(--_ctm-sec-dn-br-rs) !important;
|
|
90
64
|
&[data-show-shadow="false"] {
|
|
91
65
|
--_hide-section-shadow: none;
|
|
92
66
|
}
|
|
@@ -108,40 +82,22 @@ section {
|
|
|
108
82
|
// --_hide-section-border,
|
|
109
83
|
// var(--_ctm-mob-sec-dn-br-cr, var(--_ctm-tab-sec-dn-br-cr, var(--_ctm-sec-dn-br-cr)))
|
|
110
84
|
// );
|
|
111
|
-
border-color: var(
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
);
|
|
115
|
-
border-style: var(
|
|
116
|
-
--_hide-section-border,
|
|
117
|
-
var(--_ctm-mob-sec-dn-br-se, var(--_ctm-tab-sec-dn-br-se, var(--_ctm-sec-dn-br-se)))
|
|
118
|
-
);
|
|
119
|
-
border-width: var(
|
|
120
|
-
--_hide-section-border,
|
|
121
|
-
var(--_ctm-mob-sec-dn-br-wh, var(--_ctm-tab-sec-dn-br-wh, var(--_ctm-sec-dn-br-wh)))
|
|
122
|
-
);
|
|
123
|
-
border-radius: var(
|
|
124
|
-
--_ctm-mob-sec-dn-br-rs,
|
|
125
|
-
var(--_ctm-tab-sec-dn-br-rs, var(--_ctm-sec-dn-br-rs))
|
|
126
|
-
);
|
|
85
|
+
border-color: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-cr));
|
|
86
|
+
border-style: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-se));
|
|
87
|
+
border-width: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-wh));
|
|
88
|
+
border-radius: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-rs));
|
|
127
89
|
}
|
|
128
90
|
&[data-div-type="cms-section-wrapper"] {
|
|
129
91
|
// max-width: var(--_sf-wp-mx-wt);
|
|
130
|
-
max-width:
|
|
92
|
+
max-width: prepareMediaVariable(--_ctm-sec-lt-wh);
|
|
131
93
|
margin-inline: auto;
|
|
132
94
|
position: var(--_p-relative);
|
|
133
95
|
width: 100%;
|
|
134
96
|
// padding-inline: 10px;
|
|
135
97
|
// padding-block: 10px;
|
|
136
|
-
padding:
|
|
137
|
-
column-gap:
|
|
138
|
-
|
|
139
|
-
var(--_ctm-tab-sec-lt-cn-gp, var(--_ctm-sec-lt-cn-gp))
|
|
140
|
-
);
|
|
141
|
-
row-gap: var(
|
|
142
|
-
--_ctm-mob-sec-lt-rw-gp,
|
|
143
|
-
var(--_ctm-tab-sec-lt-rw-gp, var(--_ctm-sec-lt-rw-gp))
|
|
144
|
-
);
|
|
98
|
+
padding: prepareMediaVariable(--_ctm-sec-lt-pg);
|
|
99
|
+
column-gap: prepareMediaVariable(--_ctm-sec-lt-cn-gp);
|
|
100
|
+
row-gap: prepareMediaVariable(--_ctm-sec-lt-rw-gp);
|
|
145
101
|
}
|
|
146
102
|
}
|
|
147
103
|
}
|
|
@@ -150,6 +106,11 @@ div[data-div-type="element"] {
|
|
|
150
106
|
position: var(--_p-relative);
|
|
151
107
|
& > .wrapper {
|
|
152
108
|
grid-area: 1/1/2/2 !important;
|
|
109
|
+
|
|
110
|
+
a {
|
|
111
|
+
color: inherit;
|
|
112
|
+
text-decoration: none;
|
|
113
|
+
}
|
|
153
114
|
}
|
|
154
115
|
&[data-view-state="full"] {
|
|
155
116
|
width: auto;
|
|
@@ -177,33 +138,23 @@ div[data-div-type="element"] {
|
|
|
177
138
|
&:is([data-element-type="stack"]) {
|
|
178
139
|
width: max(
|
|
179
140
|
0.5px,
|
|
180
|
-
calc(
|
|
181
|
-
|
|
182
|
-
--_ctm-mob-sta-ele-nw-wh-vl,
|
|
183
|
-
var(--_ctm-tab-sta-ele-nw-wh-vl, var(--_ctm-sta-ele-nw-wh-vl))
|
|
184
|
-
) / 100
|
|
185
|
-
) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
|
|
141
|
+
calc(#{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)} / 100) *
|
|
142
|
+
(var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
|
|
186
143
|
);
|
|
187
144
|
}
|
|
188
145
|
&:is([data-element-type="container"]) {
|
|
189
146
|
width: max(
|
|
190
147
|
0.5px,
|
|
191
|
-
calc(
|
|
192
|
-
|
|
193
|
-
--_ctm-mob-con-ele-nw-wh-vl,
|
|
194
|
-
var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl))
|
|
195
|
-
) / 100
|
|
196
|
-
) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
|
|
148
|
+
calc(#{prepareMediaVariable(--_ctm-con-ele-nw-wh-vl)} / 100) *
|
|
149
|
+
(var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
|
|
197
150
|
);
|
|
198
151
|
}
|
|
199
152
|
|
|
200
153
|
&:not([data-element-type="container"], [data-element-type="stack"]) {
|
|
201
154
|
width: max(
|
|
202
155
|
0.5px,
|
|
203
|
-
calc(
|
|
204
|
-
|
|
205
|
-
100
|
|
206
|
-
) * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
|
|
156
|
+
calc(#{prepareMediaVariable(--_ctm-ele-nw-wh-vl)} / 100) *
|
|
157
|
+
(var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
|
|
207
158
|
);
|
|
208
159
|
}
|
|
209
160
|
}
|
package/dist/stack.scss
CHANGED
|
@@ -35,52 +35,19 @@ body {
|
|
|
35
35
|
// min-height: var(--_ctm-sta-lt-ht, 100px) !important;
|
|
36
36
|
min-width: 100px;
|
|
37
37
|
min-height: 100px;
|
|
38
|
-
margin:
|
|
39
|
-
--_ctm-mob-sta-lt-mn,
|
|
40
|
-
var(--_ctm-tab-sta-lt-mn, var(--_ctm-sta-lt-mn, var(--_ctm-lt-mn)))
|
|
41
|
-
);
|
|
38
|
+
margin: prepareMediaVariable(--_ctm-sta-lt-mn);
|
|
42
39
|
// display: var(--_d-grid);
|
|
43
|
-
background-color:
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
);
|
|
47
|
-
background-
|
|
48
|
-
|
|
49
|
-
var(--_ctm-tab-sta-dn-bd-ie, var(--_ctm-sta-dn-bd-ie))
|
|
50
|
-
);
|
|
51
|
-
background-attachment: var(
|
|
52
|
-
--_ctm-mob-sta-dn-bd-at,
|
|
53
|
-
var(--_ctm-tab-sta-dn-bd-at, var(--_ctm-sta-dn-bd-at))
|
|
54
|
-
);
|
|
55
|
-
background-position: var(
|
|
56
|
-
--_ctm-mob-sta-dn-bd-pn,
|
|
57
|
-
var(--_ctm-tab-sta-dn-bd-pn, var(--_ctm-sta-dn-bd-pn))
|
|
58
|
-
);
|
|
59
|
-
background-repeat: var(
|
|
60
|
-
--_ctm-mob-sta-dn-bd-rt,
|
|
61
|
-
var(--_ctm-tab-sta-dn-bd-rt, var(--_ctm-sta-dn-bd-rt))
|
|
62
|
-
);
|
|
63
|
-
background-size: var(
|
|
64
|
-
--_ctm-mob-sta-dn-bd-se,
|
|
65
|
-
var(--_ctm-tab-sta-dn-bd-se, var(--_ctm-sta-dn-bd-se))
|
|
66
|
-
);
|
|
40
|
+
background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
|
|
41
|
+
background-image: prepareMediaVariable(--_ctm-sta-dn-bd-ie);
|
|
42
|
+
background-attachment: prepareMediaVariable(--_ctm-sta-dn-bd-at);
|
|
43
|
+
background-position: prepareMediaVariable(--_ctm-sta-dn-bd-pn);
|
|
44
|
+
background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
|
|
45
|
+
background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);
|
|
67
46
|
|
|
68
|
-
border-color: var(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
);
|
|
72
|
-
border-style: var(
|
|
73
|
-
--_hide-grid-border,
|
|
74
|
-
var(--_ctm-mob-sta-dn-br-se, var(--_ctm-tab-sta-dn-br-se, var(--_ctm-sta-dn-br-se)))
|
|
75
|
-
);
|
|
76
|
-
border-width: var(
|
|
77
|
-
--_hide-grid-border,
|
|
78
|
-
var(--_ctm-mob-sta-dn-br-wh, var(--_ctm-tab-sta-dn-br-wh, var(--_ctm-sta-dn-br-wh)))
|
|
79
|
-
);
|
|
80
|
-
border-radius: var(
|
|
81
|
-
--_ctm-mob-sta-dn-br-rs,
|
|
82
|
-
var(--_ctm-tab-sta-dn-br-rs, var(--_ctm-sta-dn-br-rs))
|
|
83
|
-
);
|
|
47
|
+
border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-cr));
|
|
48
|
+
border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-se));
|
|
49
|
+
border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-sta-dn-br-wh));
|
|
50
|
+
border-radius: prepareMediaVariable(--_ctm-sta-dn-br-rs);
|
|
84
51
|
grid-template-columns: 100%;
|
|
85
52
|
|
|
86
53
|
// &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
|
|
@@ -90,13 +57,7 @@ body {
|
|
|
90
57
|
&.vtl {
|
|
91
58
|
// width: var(--_sf-sta-nw-wh, auto);
|
|
92
59
|
min-height: 30px;
|
|
93
|
-
width: calc(
|
|
94
|
-
1% *
|
|
95
|
-
var(
|
|
96
|
-
--_ctm-mob-sta-ele-nw-wh-vl,
|
|
97
|
-
var(--_ctm-tab-sta-ele-nw-wh-vl, var(--_ctm-sta-ele-nw-wh-vl))
|
|
98
|
-
)
|
|
99
|
-
);
|
|
60
|
+
width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
|
|
100
61
|
min-width: 100px;
|
|
101
62
|
& > .wrapper {
|
|
102
63
|
flex-direction: column;
|
|
@@ -104,10 +65,7 @@ body {
|
|
|
104
65
|
height: 100%;
|
|
105
66
|
// justify-content: var(--_ctm-sta-lt-jy-ct);
|
|
106
67
|
// align-items: var(--_ctm-sta-lt-an-is);
|
|
107
|
-
align-items:
|
|
108
|
-
--_ctm-mob-sta-lt-jy-ct,
|
|
109
|
-
var(--_ctm-tab-sta-lt-jy-ct, var(--_ctm-sta-lt-jy-ct))
|
|
110
|
-
);
|
|
68
|
+
align-items: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
|
|
111
69
|
}
|
|
112
70
|
}
|
|
113
71
|
&.hrz {
|
|
@@ -129,19 +87,16 @@ body {
|
|
|
129
87
|
height: 100%;
|
|
130
88
|
flex-direction: row;
|
|
131
89
|
// justify-content: var(--_ctm-sta-lt-an-is);
|
|
132
|
-
align-items:
|
|
133
|
-
--_ctm-mob-sta-lt-an-is,
|
|
134
|
-
var(--_ctm-tab-sta-lt-an-is, var(--_ctm-sta-lt-an-is))
|
|
135
|
-
);
|
|
90
|
+
align-items: prepareMediaVariable(--_ctm-sta-lt-an-is);
|
|
136
91
|
}
|
|
137
92
|
}
|
|
138
93
|
|
|
139
94
|
& > div {
|
|
140
95
|
&.wrapper {
|
|
141
96
|
// width: 100%;
|
|
142
|
-
padding:
|
|
97
|
+
padding: prepareMediaVariable(--_ctm-sta-lt-pg);
|
|
143
98
|
display: var(--_d-flex);
|
|
144
|
-
gap:
|
|
99
|
+
gap: prepareMediaVariable(--_ctm-sta-lt-im-gp);
|
|
145
100
|
|
|
146
101
|
// border-color: var(
|
|
147
102
|
// --_hide-grid-border,
|
|
@@ -5,37 +5,19 @@
|
|
|
5
5
|
&[data-element-type="storeLocations"] {
|
|
6
6
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
7
7
|
margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
|
|
8
|
-
|
|
9
8
|
// aspect-ratio: 1 / var(--_sf-aspect-ratio);
|
|
10
9
|
|
|
11
10
|
& > .wrapper {
|
|
12
11
|
width: 100%;
|
|
13
12
|
}
|
|
13
|
+
|
|
14
14
|
&[data-show-shadow="false"] {
|
|
15
15
|
--_show-shadow-im-se: none;
|
|
16
16
|
}
|
|
17
17
|
&[data-show-border="false"] {
|
|
18
18
|
--_show-border-im-se: none;
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
.horizontal {
|
|
22
|
-
flex-wrap: wrap;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
&[data-overflow-items="Scroll"] {
|
|
26
|
-
.horizontal {
|
|
27
|
-
width: 100%;
|
|
28
|
-
overflow-x: auto;
|
|
29
|
-
.item {
|
|
30
|
-
width: 100%;
|
|
31
|
-
flex-shrink: 0;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
.vertical {
|
|
35
|
-
overflow-y: auto;
|
|
36
|
-
max-height: 30%;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
20
|
+
|
|
39
21
|
.text-element {
|
|
40
22
|
background: #6d96e4;
|
|
41
23
|
padding: 10px;
|
|
@@ -559,6 +541,25 @@
|
|
|
559
541
|
var(--_ctm-tab-dn-iy-tt-se-ue, var(--_ctm-dn-iy-tt-se-ue))
|
|
560
542
|
);
|
|
561
543
|
}
|
|
544
|
+
&[data-overflow-items="Wrap"] {
|
|
545
|
+
.horizontal {
|
|
546
|
+
flex-wrap: wrap;
|
|
547
|
+
}
|
|
548
|
+
}
|
|
549
|
+
&[data-overflow-items="Scroll"] {
|
|
550
|
+
.horizontal {
|
|
551
|
+
width: 100%;
|
|
552
|
+
overflow-x: auto;
|
|
553
|
+
.item {
|
|
554
|
+
width: 100%;
|
|
555
|
+
flex-shrink: 0;
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
.vertical {
|
|
559
|
+
overflow-y: auto;
|
|
560
|
+
max-height: 100px;
|
|
561
|
+
}
|
|
562
|
+
}
|
|
562
563
|
.horizontal {
|
|
563
564
|
display: flex;
|
|
564
565
|
flex-direction: row;
|
package/dist/tab-v2.scss
CHANGED
|
@@ -446,15 +446,16 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
|
|
|
446
446
|
// width: max-content;
|
|
447
447
|
|
|
448
448
|
font-family: var(
|
|
449
|
-
|
|
450
|
-
var(
|
|
451
|
-
--_sf-tbs-hr-ft-fy,
|
|
449
|
+
--_sf-tbs-sd-ft-fy,
|
|
452
450
|
var(
|
|
453
|
-
--
|
|
454
|
-
var(
|
|
451
|
+
--_sf-tbs-hr-ft-fy,
|
|
452
|
+
var(
|
|
453
|
+
--_ctm-mob-tbs-dn-ts-dt-se-ft-fy,
|
|
454
|
+
var(--_ctm-tab-tbs-dn-ts-dt-se-ft-fy, var(--_ctm-tbs-dn-ts-dt-se-ft-fy))
|
|
455
|
+
)
|
|
455
456
|
)
|
|
456
|
-
)
|
|
457
|
-
|
|
457
|
+
),
|
|
458
|
+
sans-serif;
|
|
458
459
|
font-size: var(
|
|
459
460
|
--_sf-tbs-sd-ft-sz,
|
|
460
461
|
var(
|