@sc-360-v2/storefront-cms-library 0.5.71 → 0.5.72
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/bundleCategories.scss +301 -301
- package/dist/cart-summary.scss +2826 -2826
- package/dist/cartAttributes.scss +1422 -1422
- package/dist/countdown.scss +899 -899
- package/dist/coupon.scss +1519 -1519
- package/dist/filters.scss +3040 -3040
- package/dist/gallery-slider-temp.scss +1776 -1776
- package/dist/map.scss +1359 -1359
- package/dist/order-status.scss +2261 -2187
- package/dist/product-highlights.scss +348 -348
- package/dist/product-image-allocation.scss +1477 -1477
- package/dist/product-options.scss +1444 -1444
- package/dist/quotes.scss +847 -847
- package/dist/search-results-heading.scss +309 -309
- package/dist/sort.scss +176 -176
- package/dist/user-elements.scss +2896 -2896
- package/dist/widget.scss +153 -153
- package/package.json +1 -1
package/dist/sort.scss
CHANGED
|
@@ -1,176 +1,176 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
@use "sass:list";
|
|
3
|
-
@use "./functions.scss" as *;
|
|
4
|
-
|
|
5
|
-
$resizerId: "[data-cms-tool='cms-element-resizer']";
|
|
6
|
-
$resizeActive: '[data-cms-element-resizer="true"]';
|
|
7
|
-
[data-div-type="element"] {
|
|
8
|
-
&[data-element-type="sort"] {
|
|
9
|
-
width: var(
|
|
10
|
-
--_sf-el-wh-st-mx,
|
|
11
|
-
calc(
|
|
12
|
-
1% *
|
|
13
|
-
var(
|
|
14
|
-
--_ctm-mob-ele-nw-wh-vl,
|
|
15
|
-
var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
|
|
16
|
-
)
|
|
17
|
-
)
|
|
18
|
-
);
|
|
19
|
-
margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
|
|
20
|
-
|
|
21
|
-
// The Design tab's Sort Button toggles. Both are CONTROLS with no CSS property of
|
|
22
|
-
// their own, so the element publishes them as data attributes and the styling has
|
|
23
|
-
// to act on them here — an unhandled toggle stores a value that never reaches the
|
|
24
|
-
// page, which is what the whole Design tab did before these variables were wired.
|
|
25
|
-
&[data-sort-button-shadow="false"] {
|
|
26
|
-
--_show-shadow-sort-button: none;
|
|
27
|
-
}
|
|
28
|
-
&[data-sort-button-border="false"] {
|
|
29
|
-
.est__dropdown {
|
|
30
|
-
border: none;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
& > div {
|
|
35
|
-
&.wrapper {
|
|
36
|
-
width: 100%;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
//Dropdown
|
|
40
|
-
.est__dropdown__main {
|
|
41
|
-
position: relative;
|
|
42
|
-
width: 100%;
|
|
43
|
-
|
|
44
|
-
label {
|
|
45
|
-
font-size: 14px;
|
|
46
|
-
color: var(--_gray-700);
|
|
47
|
-
margin-bottom: 8px;
|
|
48
|
-
display: block;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.est__dropdown {
|
|
52
|
-
cursor: pointer;
|
|
53
|
-
position: relative;
|
|
54
|
-
display: flex;
|
|
55
|
-
justify-content: space-between;
|
|
56
|
-
align-items: center;
|
|
57
|
-
gap: 8px;
|
|
58
|
-
width: 100%;
|
|
59
|
-
|
|
60
|
-
// Design > Sort Button. `--_ctm-dn-st-bn-*` is what the schema's
|
|
61
|
-
// design.sortButton scope emits: splitCamelCaseAndJoin("design") -> "dn",
|
|
62
|
-
// ("sortButton") -> "st-bn". The literals stay as the fallbacks so an element
|
|
63
|
-
// saved before the Design tab existed keeps the look it had.
|
|
64
|
-
background-color: prepareMediaVariable(--_ctm-dn-st-bn-bd-cr, #fff);
|
|
65
|
-
border-color: prepareMediaVariable(--_ctm-dn-st-bn-br-cr, transparent);
|
|
66
|
-
border-style: prepareMediaVariable(--_ctm-dn-st-bn-br-se, solid);
|
|
67
|
-
border-width: prepareMediaVariable(--_ctm-dn-st-bn-br-wh, 0);
|
|
68
|
-
border-radius: prepareMediaVariable(--_ctm-dn-st-bn-br-rs, 6px);
|
|
69
|
-
box-shadow: var(
|
|
70
|
-
--_show-shadow-sort-button,
|
|
71
|
-
prepareMediaVariable(--_ctm-dn-st-bn-sw-ae, 0 0)
|
|
72
|
-
prepareMediaVariable(--_ctm-dn-st-bn-sw-br, 0)
|
|
73
|
-
prepareMediaVariable(--_ctm-dn-st-bn-sw-sd, 0)
|
|
74
|
-
prepareMediaVariable(--_ctm-dn-st-bn-sw-cr, transparent)
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
.value__selected {
|
|
78
|
-
display: flex;
|
|
79
|
-
align-items: baseline;
|
|
80
|
-
gap: 4px;
|
|
81
|
-
// The title and the value are laid out side by side, so the pair has to be
|
|
82
|
-
// allowed to shrink — without min-width the flex item keeps its content
|
|
83
|
-
// width and pushes the chevron out of a narrow element instead of clamping.
|
|
84
|
-
min-width: 0;
|
|
85
|
-
flex: 1;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
// Text Overflow is a CONTROL, not CSS: the element adds this class and
|
|
89
|
-
// publishes the line count inline, one variable per typography scope.
|
|
90
|
-
.sort__title.flex__overflow {
|
|
91
|
-
white-space: normal;
|
|
92
|
-
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
93
|
-
}
|
|
94
|
-
.selected__option.flex__overflow {
|
|
95
|
-
white-space: normal;
|
|
96
|
-
@include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
// Design > Sort Title (design.sortTitle -> "dn-st-te")
|
|
100
|
-
.sort__title {
|
|
101
|
-
color: prepareMediaVariable(--_ctm-dn-st-te-cr, var(--_gray-700));
|
|
102
|
-
font-family: var(--_sf-hr-ff, prepareMediaVariable(--_ctm-dn-st-te-ft-fy, inherit));
|
|
103
|
-
font-size: prepareMediaVariable(--_ctm-dn-st-te-ft-se, inherit);
|
|
104
|
-
font-weight: prepareMediaVariable(--_ctm-dn-st-te-ft-wt, inherit);
|
|
105
|
-
font-style: prepareMediaVariable(--_ctm-dn-st-te-ft-se-ic, normal);
|
|
106
|
-
text-align: prepareMediaVariable(--_ctm-dn-st-te-tt-an, left);
|
|
107
|
-
letter-spacing: prepareMediaVariable(--_ctm-dn-st-te-lr-sg, normal);
|
|
108
|
-
line-height: prepareMediaVariable(--_ctm-dn-st-te-le-ht, normal);
|
|
109
|
-
text-decoration: prepareMediaVariable(--_ctm-dn-st-te-ue, none);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// Design > Selected Option (design.selectedOption -> "dn-sd-on")
|
|
113
|
-
.selected__option {
|
|
114
|
-
color: prepareMediaVariable(--_ctm-dn-sd-on-cr, var(--_gray-700));
|
|
115
|
-
font-family: var(--_sf-hr-ff, prepareMediaVariable(--_ctm-dn-sd-on-ft-fy, inherit));
|
|
116
|
-
font-size: prepareMediaVariable(--_ctm-dn-sd-on-ft-se, inherit);
|
|
117
|
-
font-weight: prepareMediaVariable(--_ctm-dn-sd-on-ft-wt, inherit);
|
|
118
|
-
font-style: prepareMediaVariable(--_ctm-dn-sd-on-ft-se-ic, normal);
|
|
119
|
-
text-align: prepareMediaVariable(--_ctm-dn-sd-on-tt-an, left);
|
|
120
|
-
letter-spacing: prepareMediaVariable(--_ctm-dn-sd-on-lr-sg, normal);
|
|
121
|
-
line-height: prepareMediaVariable(--_ctm-dn-sd-on-le-ht, normal);
|
|
122
|
-
text-decoration: prepareMediaVariable(--_ctm-dn-sd-on-ue, none);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
&.open .list {
|
|
126
|
-
display: flex;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.list {
|
|
130
|
-
display: none;
|
|
131
|
-
flex-direction: column;
|
|
132
|
-
border: 1px solid var(--_gray-200);
|
|
133
|
-
border-radius: 6px;
|
|
134
|
-
position: absolute;
|
|
135
|
-
top: 100%;
|
|
136
|
-
left: 0;
|
|
137
|
-
width: 100%;
|
|
138
|
-
background-color: #fff;
|
|
139
|
-
border-radius: 4px;
|
|
140
|
-
z-index: var(--_higher-zIndex);
|
|
141
|
-
max-height: 200px;
|
|
142
|
-
overflow-y: auto;
|
|
143
|
-
|
|
144
|
-
&.top {
|
|
145
|
-
bottom: 100%;
|
|
146
|
-
top: auto;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.list__option {
|
|
150
|
-
padding: 12px;
|
|
151
|
-
cursor: pointer;
|
|
152
|
-
// The list has no design scope of its own. It borrows the Selected
|
|
153
|
-
// Option's type so the open list matches the closed control — colour and
|
|
154
|
-
// alignment are left to the list's own resting/hover rules below, which
|
|
155
|
-
// are what make an option look clickable.
|
|
156
|
-
font-family: var(--_sf-hr-ff, prepareMediaVariable(--_ctm-dn-sd-on-ft-fy, inherit));
|
|
157
|
-
font-size: prepareMediaVariable(--_ctm-dn-sd-on-ft-se, inherit);
|
|
158
|
-
font-weight: prepareMediaVariable(--_ctm-dn-sd-on-ft-wt, inherit);
|
|
159
|
-
letter-spacing: prepareMediaVariable(--_ctm-dn-sd-on-lr-sg, normal);
|
|
160
|
-
color: var(--_gray-700);
|
|
161
|
-
|
|
162
|
-
&:hover {
|
|
163
|
-
background-color: var(--_primary-25);
|
|
164
|
-
color: var(--_primary-400);
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
&[aria-selected="true"] {
|
|
168
|
-
background-color: var(--_primary-25);
|
|
169
|
-
color: var(--_primary-400);
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
}
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "sass:list";
|
|
3
|
+
@use "./functions.scss" as *;
|
|
4
|
+
|
|
5
|
+
$resizerId: "[data-cms-tool='cms-element-resizer']";
|
|
6
|
+
$resizeActive: '[data-cms-element-resizer="true"]';
|
|
7
|
+
[data-div-type="element"] {
|
|
8
|
+
&[data-element-type="sort"] {
|
|
9
|
+
width: var(
|
|
10
|
+
--_sf-el-wh-st-mx,
|
|
11
|
+
calc(
|
|
12
|
+
1% *
|
|
13
|
+
var(
|
|
14
|
+
--_ctm-mob-ele-nw-wh-vl,
|
|
15
|
+
var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
|
|
16
|
+
)
|
|
17
|
+
)
|
|
18
|
+
);
|
|
19
|
+
margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
|
|
20
|
+
|
|
21
|
+
// The Design tab's Sort Button toggles. Both are CONTROLS with no CSS property of
|
|
22
|
+
// their own, so the element publishes them as data attributes and the styling has
|
|
23
|
+
// to act on them here — an unhandled toggle stores a value that never reaches the
|
|
24
|
+
// page, which is what the whole Design tab did before these variables were wired.
|
|
25
|
+
&[data-sort-button-shadow="false"] {
|
|
26
|
+
--_show-shadow-sort-button: none;
|
|
27
|
+
}
|
|
28
|
+
&[data-sort-button-border="false"] {
|
|
29
|
+
.est__dropdown {
|
|
30
|
+
border: none;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
& > div {
|
|
35
|
+
&.wrapper {
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
//Dropdown
|
|
40
|
+
.est__dropdown__main {
|
|
41
|
+
position: relative;
|
|
42
|
+
width: 100%;
|
|
43
|
+
|
|
44
|
+
label {
|
|
45
|
+
font-size: 14px;
|
|
46
|
+
color: var(--_gray-700);
|
|
47
|
+
margin-bottom: 8px;
|
|
48
|
+
display: block;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.est__dropdown {
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
position: relative;
|
|
54
|
+
display: flex;
|
|
55
|
+
justify-content: space-between;
|
|
56
|
+
align-items: center;
|
|
57
|
+
gap: 8px;
|
|
58
|
+
width: 100%;
|
|
59
|
+
|
|
60
|
+
// Design > Sort Button. `--_ctm-dn-st-bn-*` is what the schema's
|
|
61
|
+
// design.sortButton scope emits: splitCamelCaseAndJoin("design") -> "dn",
|
|
62
|
+
// ("sortButton") -> "st-bn". The literals stay as the fallbacks so an element
|
|
63
|
+
// saved before the Design tab existed keeps the look it had.
|
|
64
|
+
background-color: prepareMediaVariable(--_ctm-dn-st-bn-bd-cr, #fff);
|
|
65
|
+
border-color: prepareMediaVariable(--_ctm-dn-st-bn-br-cr, transparent);
|
|
66
|
+
border-style: prepareMediaVariable(--_ctm-dn-st-bn-br-se, solid);
|
|
67
|
+
border-width: prepareMediaVariable(--_ctm-dn-st-bn-br-wh, 0);
|
|
68
|
+
border-radius: prepareMediaVariable(--_ctm-dn-st-bn-br-rs, 6px);
|
|
69
|
+
box-shadow: var(
|
|
70
|
+
--_show-shadow-sort-button,
|
|
71
|
+
prepareMediaVariable(--_ctm-dn-st-bn-sw-ae, 0 0)
|
|
72
|
+
prepareMediaVariable(--_ctm-dn-st-bn-sw-br, 0)
|
|
73
|
+
prepareMediaVariable(--_ctm-dn-st-bn-sw-sd, 0)
|
|
74
|
+
prepareMediaVariable(--_ctm-dn-st-bn-sw-cr, transparent)
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
.value__selected {
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: baseline;
|
|
80
|
+
gap: 4px;
|
|
81
|
+
// The title and the value are laid out side by side, so the pair has to be
|
|
82
|
+
// allowed to shrink — without min-width the flex item keeps its content
|
|
83
|
+
// width and pushes the chevron out of a narrow element instead of clamping.
|
|
84
|
+
min-width: 0;
|
|
85
|
+
flex: 1;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Text Overflow is a CONTROL, not CSS: the element adds this class and
|
|
89
|
+
// publishes the line count inline, one variable per typography scope.
|
|
90
|
+
.sort__title.flex__overflow {
|
|
91
|
+
white-space: normal;
|
|
92
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
93
|
+
}
|
|
94
|
+
.selected__option.flex__overflow {
|
|
95
|
+
white-space: normal;
|
|
96
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// Design > Sort Title (design.sortTitle -> "dn-st-te")
|
|
100
|
+
.sort__title {
|
|
101
|
+
color: prepareMediaVariable(--_ctm-dn-st-te-cr, var(--_gray-700));
|
|
102
|
+
font-family: var(--_sf-hr-ff, prepareMediaVariable(--_ctm-dn-st-te-ft-fy, inherit));
|
|
103
|
+
font-size: prepareMediaVariable(--_ctm-dn-st-te-ft-se, inherit);
|
|
104
|
+
font-weight: prepareMediaVariable(--_ctm-dn-st-te-ft-wt, inherit);
|
|
105
|
+
font-style: prepareMediaVariable(--_ctm-dn-st-te-ft-se-ic, normal);
|
|
106
|
+
text-align: prepareMediaVariable(--_ctm-dn-st-te-tt-an, left);
|
|
107
|
+
letter-spacing: prepareMediaVariable(--_ctm-dn-st-te-lr-sg, normal);
|
|
108
|
+
line-height: prepareMediaVariable(--_ctm-dn-st-te-le-ht, normal);
|
|
109
|
+
text-decoration: prepareMediaVariable(--_ctm-dn-st-te-ue, none);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// Design > Selected Option (design.selectedOption -> "dn-sd-on")
|
|
113
|
+
.selected__option {
|
|
114
|
+
color: prepareMediaVariable(--_ctm-dn-sd-on-cr, var(--_gray-700));
|
|
115
|
+
font-family: var(--_sf-hr-ff, prepareMediaVariable(--_ctm-dn-sd-on-ft-fy, inherit));
|
|
116
|
+
font-size: prepareMediaVariable(--_ctm-dn-sd-on-ft-se, inherit);
|
|
117
|
+
font-weight: prepareMediaVariable(--_ctm-dn-sd-on-ft-wt, inherit);
|
|
118
|
+
font-style: prepareMediaVariable(--_ctm-dn-sd-on-ft-se-ic, normal);
|
|
119
|
+
text-align: prepareMediaVariable(--_ctm-dn-sd-on-tt-an, left);
|
|
120
|
+
letter-spacing: prepareMediaVariable(--_ctm-dn-sd-on-lr-sg, normal);
|
|
121
|
+
line-height: prepareMediaVariable(--_ctm-dn-sd-on-le-ht, normal);
|
|
122
|
+
text-decoration: prepareMediaVariable(--_ctm-dn-sd-on-ue, none);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&.open .list {
|
|
126
|
+
display: flex;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.list {
|
|
130
|
+
display: none;
|
|
131
|
+
flex-direction: column;
|
|
132
|
+
border: 1px solid var(--_gray-200);
|
|
133
|
+
border-radius: 6px;
|
|
134
|
+
position: absolute;
|
|
135
|
+
top: 100%;
|
|
136
|
+
left: 0;
|
|
137
|
+
width: 100%;
|
|
138
|
+
background-color: #fff;
|
|
139
|
+
border-radius: 4px;
|
|
140
|
+
z-index: var(--_higher-zIndex);
|
|
141
|
+
max-height: 200px;
|
|
142
|
+
overflow-y: auto;
|
|
143
|
+
|
|
144
|
+
&.top {
|
|
145
|
+
bottom: 100%;
|
|
146
|
+
top: auto;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.list__option {
|
|
150
|
+
padding: 12px;
|
|
151
|
+
cursor: pointer;
|
|
152
|
+
// The list has no design scope of its own. It borrows the Selected
|
|
153
|
+
// Option's type so the open list matches the closed control — colour and
|
|
154
|
+
// alignment are left to the list's own resting/hover rules below, which
|
|
155
|
+
// are what make an option look clickable.
|
|
156
|
+
font-family: var(--_sf-hr-ff, prepareMediaVariable(--_ctm-dn-sd-on-ft-fy, inherit));
|
|
157
|
+
font-size: prepareMediaVariable(--_ctm-dn-sd-on-ft-se, inherit);
|
|
158
|
+
font-weight: prepareMediaVariable(--_ctm-dn-sd-on-ft-wt, inherit);
|
|
159
|
+
letter-spacing: prepareMediaVariable(--_ctm-dn-sd-on-lr-sg, normal);
|
|
160
|
+
color: var(--_gray-700);
|
|
161
|
+
|
|
162
|
+
&:hover {
|
|
163
|
+
background-color: var(--_primary-25);
|
|
164
|
+
color: var(--_primary-400);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
&[aria-selected="true"] {
|
|
168
|
+
background-color: var(--_primary-25);
|
|
169
|
+
color: var(--_primary-400);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|