@sc-360-v2/storefront-cms-library 0.5.15 → 0.5.17
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/add-existing-form.scss +68 -66
- package/dist/builder.js +1 -1
- package/dist/cart-summary.scss +12 -8
- package/dist/category-groups-element.scss +667 -93
- package/dist/category-groups-product-grid.scss +186 -0
- package/dist/category-groups-product-image.scss +2226 -0
- package/dist/category-groups-product-options.scss +826 -0
- package/dist/category-groups-product-price.scss +4944 -0
- package/dist/coupon.scss +91 -4
- package/dist/gallery-slider-temp.scss +5 -5
- package/dist/global-styles.scss +175 -86
- package/dist/login.scss +2 -1
- package/dist/product-image.scss +5 -5
- package/dist/quota-details.scss +2 -2
- package/dist/simple-list.scss +259 -259
- package/dist/social.scss +277 -276
- package/dist/types/builder/tools/element-edit/cartSummary.d.ts +11 -0
- package/dist/types/builder/tools/element-edit/categoryGroups.d.ts +2759 -7
- package/dist/types/builder/tools/element-edit/social.d.ts +7 -1
- package/package.json +1 -1
|
@@ -4,21 +4,137 @@
|
|
|
4
4
|
$activeElementSelector: "[data-has-clicked='true']";
|
|
5
5
|
$resizerId: "[data-cms-tool='cms-element-resizer']";
|
|
6
6
|
$resizeActive: '[data-cms-element-resizer="true"]';
|
|
7
|
+
|
|
8
|
+
// Generated CSS-var bases (prefix `catego`; path = design-key shortcodes via
|
|
9
|
+
// splitCamelCaseAndJoin). Edits in the design panel write these; the second arg
|
|
10
|
+
// to prepareMediaVariable keeps the Figma default when a var is unset.
|
|
11
|
+
$cg-widget: "--_ctm-catego-dn-wt-se"; // design.widgetStyle
|
|
12
|
+
$cg-sidebar: "--_ctm-catego-dn-sr-dn-sr-cr"; // sidebarDesign.sidebarContainer
|
|
13
|
+
$cg-cat-heading: "--_ctm-catego-dn-sr-dn-cs-hg"; // sidebarDesign.categoriesHeading
|
|
14
|
+
$cg-tree: "--_ctm-catego-dn-sr-dn-cy-te-im"; // sidebarDesign.categoryTreeItem
|
|
15
|
+
$cg-tree-icon: "--_ctm-catego-dn-sr-dn-cy-te-in"; // sidebarDesign.categoryTreeIcon
|
|
16
|
+
$cg-subtree: "--_ctm-catego-dn-sr-dn-sb-cy-te-im"; // sidebarDesign.subCategoryTreeItem
|
|
17
|
+
$cg-chip: "--_ctm-catego-dn-sb-cy-sr-dn-sb-cy-cp"; // subCategoryScrollerDesign.subCategoryChip
|
|
18
|
+
$cg-arrow: "--_ctm-catego-dn-sb-cy-sr-dn-sr-aw"; // subCategoryScrollerDesign.scrollerArrow
|
|
19
|
+
$cg-chip-image: "--_ctm-catego-dn-sb-cy-sr-dn-sb-cy-ie"; // subCategoryScrollerDesign.subCategoryImage
|
|
20
|
+
$cg-bc-item: "--_ctm-catego-dn-bb-dn-bb-im"; // breadcrumbDesign.breadcrumbItem
|
|
21
|
+
$cg-bc-sep: "--_ctm-catego-dn-bb-dn-sr-in"; // breadcrumbDesign.separatorIcon
|
|
22
|
+
$cg-allprod-heading: "--_ctm-catego-dn-pt-gd-dn-al-ps-hg"; // productGridDesign.allProductsHeading
|
|
23
|
+
$cg-card: "--_ctm-catego-dn-pt-gd-dn-pt-cd"; // productGridDesign.productCard
|
|
24
|
+
$cg-brand: "--_ctm-catego-dn-pt-gd-dn-bd-ne"; // productGridDesign.brandName
|
|
25
|
+
$cg-name: "--_ctm-catego-dn-pt-gd-dn-pt-ne"; // productGridDesign.productName
|
|
26
|
+
$cg-price: "--_ctm-catego-dn-pt-gd-dn-pt-pe"; // productGridDesign.productPrice
|
|
27
|
+
$cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsText
|
|
28
|
+
// Design-block bases for the section item-gaps.
|
|
29
|
+
$cg-sidebar-design: "--_ctm-catego-dn-sr-dn"; // sidebarDesign (itemGap)
|
|
30
|
+
$cg-scroller-design: "--_ctm-catego-dn-sb-cy-sr-dn"; // subCategoryScrollerDesign (itemGap)
|
|
31
|
+
$cg-grid: "--_ctm-catego-dn-pt-gd-dn"; // productGridDesign (itemGap)
|
|
32
|
+
$cg-main: "--_ctm-catego-dn-mn-sn"; // mainSection (right section container + itemGap)
|
|
33
|
+
$cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selector)
|
|
34
|
+
|
|
35
|
+
@mixin cg-font($base, $color, $size, $weight: 600) {
|
|
36
|
+
color: prepareMediaVariable(#{$base}-cr, $color);
|
|
37
|
+
font-family: prepareMediaVariable(#{$base}-ft-fy, ("Inter", sans-serif));
|
|
38
|
+
font-size: prepareMediaVariable(#{$base}-ft-se, $size);
|
|
39
|
+
font-weight: prepareMediaVariable(#{$base}-ft-wt, $weight);
|
|
40
|
+
// Remaining typography states (only apply when set in the design panel).
|
|
41
|
+
font-style: prepareMediaVariable(#{$base}-ft-se-ic);
|
|
42
|
+
text-align: prepareMediaVariable(#{$base}-tt-an);
|
|
43
|
+
letter-spacing: prepareMediaVariable(#{$base}-lr-sg);
|
|
44
|
+
line-height: prepareMediaVariable(#{$base}-le-ht);
|
|
45
|
+
text-decoration: prepareMediaVariable(#{$base}-ue);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Container fill / border / radius / shadow for a given state base
|
|
49
|
+
// (e.g. `$cg-tree-dt-se`). Shadow stays invisible until set in the panel.
|
|
50
|
+
@mixin cg-design($base) {
|
|
51
|
+
background-color: prepareMediaVariable(#{$base}-bd-cr, transparent);
|
|
52
|
+
border-color: prepareMediaVariable(#{$base}-br-cr, transparent);
|
|
53
|
+
border-style: prepareMediaVariable(#{$base}-br-se, solid);
|
|
54
|
+
border-width: prepareMediaVariable(#{$base}-br-wh, 0);
|
|
55
|
+
border-radius: prepareMediaVariable(#{$base}-br-rs, 4px);
|
|
56
|
+
box-shadow: prepareMediaVariable(#{$base}-sw-ae, 0 0) prepareMediaVariable(#{$base}-sw-br, 0)
|
|
57
|
+
prepareMediaVariable(#{$base}-sw-sd, 0) prepareMediaVariable(#{$base}-sw-cr, transparent);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Interactive-state typography ($state = "hr-se" | "sd-se"): the state's own
|
|
61
|
+
// vars fall back to the DEFAULT state (dt-se), then the Figma value — so Figma
|
|
62
|
+
// only seeds the default state and edits to the default cascade to every state.
|
|
63
|
+
@mixin cg-font-state($base, $state, $color, $size, $weight: 600) {
|
|
64
|
+
color: prepareMediaVariable(
|
|
65
|
+
#{$base}-#{$state}-cr,
|
|
66
|
+
prepareMediaVariable(#{$base}-dt-se-cr, $color)
|
|
67
|
+
);
|
|
68
|
+
font-family: prepareMediaVariable(
|
|
69
|
+
#{$base}-#{$state}-ft-fy,
|
|
70
|
+
prepareMediaVariable(#{$base}-dt-se-ft-fy, ("Inter", sans-serif))
|
|
71
|
+
);
|
|
72
|
+
font-size: prepareMediaVariable(
|
|
73
|
+
#{$base}-#{$state}-ft-se,
|
|
74
|
+
prepareMediaVariable(#{$base}-dt-se-ft-se, $size)
|
|
75
|
+
);
|
|
76
|
+
font-weight: prepareMediaVariable(
|
|
77
|
+
#{$base}-#{$state}-ft-wt,
|
|
78
|
+
prepareMediaVariable(#{$base}-dt-se-ft-wt, $weight)
|
|
79
|
+
);
|
|
80
|
+
font-style: prepareMediaVariable(
|
|
81
|
+
#{$base}-#{$state}-ft-se-ic,
|
|
82
|
+
prepareMediaVariable(#{$base}-dt-se-ft-se-ic)
|
|
83
|
+
);
|
|
84
|
+
text-align: prepareMediaVariable(
|
|
85
|
+
#{$base}-#{$state}-tt-an,
|
|
86
|
+
prepareMediaVariable(#{$base}-dt-se-tt-an)
|
|
87
|
+
);
|
|
88
|
+
letter-spacing: prepareMediaVariable(
|
|
89
|
+
#{$base}-#{$state}-lr-sg,
|
|
90
|
+
prepareMediaVariable(#{$base}-dt-se-lr-sg)
|
|
91
|
+
);
|
|
92
|
+
line-height: prepareMediaVariable(
|
|
93
|
+
#{$base}-#{$state}-le-ht,
|
|
94
|
+
prepareMediaVariable(#{$base}-dt-se-le-ht)
|
|
95
|
+
);
|
|
96
|
+
text-decoration: prepareMediaVariable(
|
|
97
|
+
#{$base}-#{$state}-ue,
|
|
98
|
+
prepareMediaVariable(#{$base}-dt-se-ue)
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// Interactive-state container design, falling back to the DEFAULT state.
|
|
103
|
+
@mixin cg-design-state($base, $state) {
|
|
104
|
+
background-color: prepareMediaVariable(
|
|
105
|
+
#{$base}-#{$state}-bd-cr,
|
|
106
|
+
prepareMediaVariable(#{$base}-dt-se-bd-cr, transparent)
|
|
107
|
+
);
|
|
108
|
+
border-color: prepareMediaVariable(
|
|
109
|
+
#{$base}-#{$state}-br-cr,
|
|
110
|
+
prepareMediaVariable(#{$base}-dt-se-br-cr, transparent)
|
|
111
|
+
);
|
|
112
|
+
border-style: prepareMediaVariable(
|
|
113
|
+
#{$base}-#{$state}-br-se,
|
|
114
|
+
prepareMediaVariable(#{$base}-dt-se-br-se, solid)
|
|
115
|
+
);
|
|
116
|
+
border-width: prepareMediaVariable(
|
|
117
|
+
#{$base}-#{$state}-br-wh,
|
|
118
|
+
prepareMediaVariable(#{$base}-dt-se-br-wh, 0)
|
|
119
|
+
);
|
|
120
|
+
border-radius: prepareMediaVariable(
|
|
121
|
+
#{$base}-#{$state}-br-rs,
|
|
122
|
+
prepareMediaVariable(#{$base}-dt-se-br-rs, 4px)
|
|
123
|
+
);
|
|
124
|
+
box-shadow: prepareMediaVariable(
|
|
125
|
+
#{$base}-#{$state}-sw-ae,
|
|
126
|
+
prepareMediaVariable(#{$base}-dt-se-sw-ae, 0 0)
|
|
127
|
+
)
|
|
128
|
+
prepareMediaVariable(#{$base}-#{$state}-sw-br, prepareMediaVariable(#{$base}-dt-se-sw-br, 0))
|
|
129
|
+
prepareMediaVariable(#{$base}-#{$state}-sw-sd, prepareMediaVariable(#{$base}-dt-se-sw-sd, 0))
|
|
130
|
+
prepareMediaVariable(
|
|
131
|
+
#{$base}-#{$state}-sw-cr,
|
|
132
|
+
prepareMediaVariable(#{$base}-dt-se-sw-cr, transparent)
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
|
|
7
136
|
[data-div-type="element"] {
|
|
8
137
|
&[data-element-type="categoryGroups"] {
|
|
9
|
-
// width: var(--_sf-catego-nw-wh);
|
|
10
|
-
// width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
|
|
11
|
-
// width: calc(
|
|
12
|
-
// 1% *
|
|
13
|
-
// var(
|
|
14
|
-
// --_ctm-mob-catego-ele-nw-wh-vl,
|
|
15
|
-
// var(--_ctm-tab-catego-ele-nw-wh-vl, var(--_ctm-catego-ele-nw-wh-vl)),
|
|
16
|
-
// auto
|
|
17
|
-
// )
|
|
18
|
-
// );
|
|
19
|
-
// width: 100%;
|
|
20
|
-
// height: var(--_ctm-catego-lt-ht);
|
|
21
|
-
|
|
22
138
|
width: calc(
|
|
23
139
|
1% *
|
|
24
140
|
var(
|
|
@@ -45,94 +161,552 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
45
161
|
var(--_ctm-tab-catego-lt-pg, var(--_ctm-catego-lt-pg))
|
|
46
162
|
);
|
|
47
163
|
|
|
48
|
-
background-color:
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
);
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
164
|
+
background-color: prepareMediaVariable(#{$cg-widget}-bd-cr, transparent);
|
|
165
|
+
border-color: prepareMediaVariable(#{$cg-widget}-br-cr, transparent);
|
|
166
|
+
border-style: prepareMediaVariable(#{$cg-widget}-br-se, solid);
|
|
167
|
+
border-width: prepareMediaVariable(#{$cg-widget}-br-wh, 0);
|
|
168
|
+
border-radius: prepareMediaVariable(#{$cg-widget}-br-rs, 0);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
// -------------------------------------------------------------------
|
|
173
|
+
// Fixed two-column layout. Figma tokens are the prepareMediaVariable
|
|
174
|
+
// fallbacks so the design renders correctly before any panel edits.
|
|
175
|
+
// -------------------------------------------------------------------
|
|
176
|
+
.category__groups__element__container {
|
|
177
|
+
display: flex;
|
|
178
|
+
// Widget Style → gap between the left sidebar and the right main section.
|
|
179
|
+
gap: prepareMediaVariable(#{$cg-widget}-im-gp, 36px);
|
|
180
|
+
align-items: flex-start;
|
|
181
|
+
width: 100%;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
// ---- Mobile (fixed layout): the sidebar tree is replaced by a selector
|
|
185
|
+
// that opens the CategoryTree in a modal; everything stacks vertically.
|
|
186
|
+
.category__groups__element__container.is-mobile {
|
|
187
|
+
flex-direction: column;
|
|
188
|
+
gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
|
|
189
|
+
|
|
190
|
+
.cg_main {
|
|
191
|
+
width: 100%;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
.cg_mobile_category_select {
|
|
195
|
+
display: flex;
|
|
196
|
+
flex-direction: row;
|
|
197
|
+
align-items: center;
|
|
198
|
+
justify-content: space-between;
|
|
199
|
+
gap: 12px;
|
|
200
|
+
width: 100%;
|
|
201
|
+
cursor: pointer;
|
|
202
|
+
}
|
|
203
|
+
// Mobile Select-category button (rendered by the shared ButtonComponent as
|
|
204
|
+
// `.btn__with__text`). Styled from the `selectButton` design block — which
|
|
205
|
+
// uses the standard button property suffixes — via the cg-design / cg-font
|
|
206
|
+
// mixins (default + hover), plus the button-specific layout vars.
|
|
207
|
+
.btn__with__text[data-btn-name="selectButton"] {
|
|
208
|
+
display: flex;
|
|
209
|
+
align-items: center;
|
|
210
|
+
flex-direction: var(--_sf-fd-bn, row);
|
|
211
|
+
cursor: pointer;
|
|
212
|
+
width: prepareMediaVariable(#{$cg-select-btn}-dt-se-wh, auto);
|
|
213
|
+
padding: prepareMediaVariable(#{$cg-select-btn}-dt-se-pg, 8px 12px);
|
|
214
|
+
gap: prepareMediaVariable(#{$cg-select-btn}-dt-se-gp, 8px);
|
|
215
|
+
justify-content: prepareMediaVariable(#{$cg-select-btn}-dt-se-at, space-between);
|
|
216
|
+
@include cg-design(#{$cg-select-btn}-dt-se);
|
|
217
|
+
|
|
218
|
+
&[data-icon-position="right"] {
|
|
219
|
+
--_sf-fd-bn: row-reverse;
|
|
220
|
+
}
|
|
221
|
+
&[data-icon-position="left"],
|
|
222
|
+
&[data-icon-position="center"] {
|
|
223
|
+
--_sf-fd-bn: row;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.txt {
|
|
227
|
+
flex: 1;
|
|
228
|
+
min-width: 0;
|
|
229
|
+
overflow: hidden;
|
|
230
|
+
text-overflow: ellipsis;
|
|
231
|
+
white-space: nowrap;
|
|
232
|
+
@include cg-font(#{$cg-select-btn}-dt-se, #002a4e, 14px, 400);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.icon {
|
|
236
|
+
display: flex;
|
|
237
|
+
flex-shrink: 0;
|
|
238
|
+
svg {
|
|
239
|
+
width: prepareMediaVariable(#{$cg-select-btn}-dt-se-in-se, 16px);
|
|
240
|
+
height: prepareMediaVariable(#{$cg-select-btn}-dt-se-in-se, 16px);
|
|
241
|
+
path {
|
|
242
|
+
stroke: prepareMediaVariable(#{$cg-select-btn}-dt-se-in-c1, currentColor);
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
.icon--hover {
|
|
247
|
+
display: none;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
&:hover {
|
|
251
|
+
@include cg-design-state($cg-select-btn, hr-se);
|
|
252
|
+
.txt {
|
|
253
|
+
@include cg-font-state($cg-select-btn, hr-se, #002a4e, 14px, 400);
|
|
254
|
+
}
|
|
255
|
+
.icon--hover {
|
|
256
|
+
display: flex;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
// Swap to the hover icon only when one is configured.
|
|
260
|
+
&:hover:has(.icon--hover) .icon--default {
|
|
261
|
+
display: none;
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
// Tree rendered inside the (portaled) category modal.
|
|
265
|
+
.cg_category_modal_tree {
|
|
266
|
+
width: 100%;
|
|
267
|
+
padding: 4px;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
// ---- Left sidebar -------------------------------------------------
|
|
271
|
+
.cg_sidebar {
|
|
272
|
+
display: flex;
|
|
273
|
+
flex-direction: column;
|
|
274
|
+
// Sidebar Container → gap (heading ↔ tree) + padding.
|
|
275
|
+
gap: prepareMediaVariable(#{$cg-sidebar}-im-gp, 12px);
|
|
276
|
+
padding: prepareMediaVariable(#{$cg-sidebar}-pg, 0);
|
|
277
|
+
width: 260px;
|
|
278
|
+
flex-shrink: 0;
|
|
279
|
+
background-color: prepareMediaVariable(#{$cg-sidebar}-bd-cr, transparent);
|
|
280
|
+
border-color: prepareMediaVariable(#{$cg-sidebar}-br-cr, transparent);
|
|
281
|
+
border-style: prepareMediaVariable(#{$cg-sidebar}-br-se, solid);
|
|
282
|
+
border-width: prepareMediaVariable(#{$cg-sidebar}-br-wh, 0);
|
|
283
|
+
border-radius: prepareMediaVariable(#{$cg-sidebar}-br-rs, 0);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.cg_sidebar_heading {
|
|
287
|
+
margin: 0;
|
|
288
|
+
text-transform: uppercase;
|
|
289
|
+
line-height: 1.25;
|
|
290
|
+
@include cg-font($cg-cat-heading, #002a4e, 16px, 400);
|
|
291
|
+
}
|
|
292
|
+
.cg_all_products_heading {
|
|
293
|
+
margin: 0;
|
|
294
|
+
text-transform: uppercase;
|
|
295
|
+
line-height: 1.25;
|
|
296
|
+
@include cg-font($cg-allprod-heading, #002a4e, 24px, 400);
|
|
297
|
+
}
|
|
298
|
+
.cg_subcategory_title {
|
|
299
|
+
margin: 0;
|
|
300
|
+
font-family: "Inter", sans-serif;
|
|
301
|
+
color: #002a4e;
|
|
302
|
+
text-transform: uppercase;
|
|
303
|
+
line-height: 1.25;
|
|
304
|
+
font-size: 16px;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.cg_sidebar_divider,
|
|
308
|
+
.cg_main_divider {
|
|
309
|
+
display: block;
|
|
310
|
+
width: 100%;
|
|
311
|
+
// Widget Style → Divider (show toggle + colour + thickness).
|
|
312
|
+
height: prepareMediaVariable(#{$cg-widget}-dr-wh, 1px);
|
|
313
|
+
background: prepareMediaVariable(#{$cg-widget}-dr-cr, #e5e7eb);
|
|
314
|
+
}
|
|
315
|
+
&[data-show-dividers="false"] {
|
|
316
|
+
.cg_sidebar_divider,
|
|
317
|
+
.cg_main_divider,
|
|
318
|
+
.cg_subcategory_divider {
|
|
319
|
+
display: none;
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.cg_category_tree {
|
|
324
|
+
display: flex;
|
|
325
|
+
flex-direction: column;
|
|
326
|
+
// Gap BETWEEN category rows (Sidebar Container → Category Tree Gap).
|
|
327
|
+
gap: prepareMediaVariable(#{$cg-sidebar}-cy-te-gp, 8px);
|
|
328
|
+
width: 100%;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.cg_tree_node {
|
|
332
|
+
display: flex;
|
|
333
|
+
align-items: center;
|
|
334
|
+
// Category Tree Item → item gap (icon ↔ label).
|
|
335
|
+
gap: prepareMediaVariable(#{$cg-tree}-dt-se-im-gp, 4px);
|
|
336
|
+
// Category Tree Item → Layout padding.
|
|
337
|
+
padding: prepareMediaVariable(#{$cg-tree}-dt-se-pg, 4px 0);
|
|
338
|
+
cursor: pointer;
|
|
339
|
+
@include cg-design(#{$cg-tree}-dt-se);
|
|
340
|
+
}
|
|
341
|
+
.cg_tree_node_icon {
|
|
342
|
+
display: flex;
|
|
343
|
+
align-items: center;
|
|
344
|
+
justify-content: center;
|
|
345
|
+
width: 24px;
|
|
346
|
+
height: 24px;
|
|
347
|
+
flex-shrink: 0;
|
|
348
|
+
// Configurable expand/collapse icon colour (inherited by the SVG below).
|
|
349
|
+
color: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
|
|
350
|
+
}
|
|
351
|
+
.cg_chevron {
|
|
352
|
+
display: flex;
|
|
353
|
+
align-items: center;
|
|
354
|
+
justify-content: center;
|
|
355
|
+
transition: transform 0.15s ease;
|
|
356
|
+
color: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
|
|
357
|
+
svg {
|
|
358
|
+
width: prepareMediaVariable(#{$cg-tree-icon}-in-se, 20px);
|
|
359
|
+
height: prepareMediaVariable(#{$cg-tree-icon}-in-se, 20px);
|
|
360
|
+
// Apply the configured colour even when the fetched SVG hardcodes its
|
|
361
|
+
// own stroke/fill (skip parts explicitly set to "none").
|
|
362
|
+
&[stroke]:not([stroke="none"]),
|
|
363
|
+
[stroke]:not([stroke="none"]) {
|
|
364
|
+
stroke: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
|
|
365
|
+
}
|
|
366
|
+
&[fill]:not([fill="none"]),
|
|
367
|
+
[fill]:not([fill="none"]) {
|
|
368
|
+
fill: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
.cg_chevron.is-open {
|
|
373
|
+
transform: rotate(90deg);
|
|
374
|
+
}
|
|
375
|
+
// Expanded icon uses its own size/colour vars (iconSizeExpanded /
|
|
376
|
+
// iconColorExpanded) so it is independent of the collapsed icon.
|
|
377
|
+
.cg_chevron.is-expanded {
|
|
378
|
+
color: prepareMediaVariable(#{$cg-tree-icon}-in-cr-ed, #002a4e);
|
|
379
|
+
svg {
|
|
380
|
+
width: prepareMediaVariable(#{$cg-tree-icon}-in-se-ed, 20px);
|
|
381
|
+
height: prepareMediaVariable(#{$cg-tree-icon}-in-se-ed, 20px);
|
|
382
|
+
&[stroke]:not([stroke="none"]),
|
|
383
|
+
[stroke]:not([stroke="none"]) {
|
|
384
|
+
stroke: prepareMediaVariable(#{$cg-tree-icon}-in-cr-ed, #002a4e);
|
|
385
|
+
}
|
|
386
|
+
&[fill]:not([fill="none"]),
|
|
387
|
+
[fill]:not([fill="none"]) {
|
|
388
|
+
fill: prepareMediaVariable(#{$cg-tree-icon}-in-cr-ed, #002a4e);
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
.cg_tree_node_label {
|
|
393
|
+
flex: 1;
|
|
394
|
+
@include cg-font(#{$cg-tree}-dt-se, #002a4e, 14px, 600);
|
|
395
|
+
}
|
|
396
|
+
.cg_tree_node:hover {
|
|
397
|
+
@include cg-design-state($cg-tree, hr-se);
|
|
398
|
+
}
|
|
399
|
+
.cg_tree_node:hover .cg_tree_node_label {
|
|
400
|
+
@include cg-font-state($cg-tree, hr-se, #002a4e, 14px, 600);
|
|
401
|
+
}
|
|
402
|
+
.cg_tree_node.is-active {
|
|
403
|
+
@include cg-design-state($cg-tree, sd-se);
|
|
404
|
+
}
|
|
405
|
+
.cg_tree_node.is-active .cg_tree_node_label {
|
|
406
|
+
@include cg-font-state($cg-tree, sd-se, #002a4e, 14px, 600);
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.cg_subtree {
|
|
410
|
+
display: flex;
|
|
411
|
+
flex-direction: column;
|
|
412
|
+
// Gap BETWEEN sub-category rows (Sidebar Container → Sub Category Gap).
|
|
413
|
+
gap: prepareMediaVariable(#{$cg-sidebar}-sb-cy-gp, 8px);
|
|
414
|
+
padding-left: 31px;
|
|
415
|
+
width: 100%;
|
|
416
|
+
}
|
|
417
|
+
.cg_subtree_node {
|
|
418
|
+
// Sub Category Tree Item → Layout padding.
|
|
419
|
+
padding: prepareMediaVariable(#{$cg-subtree}-dt-se-pg, 4px 0);
|
|
420
|
+
cursor: pointer;
|
|
421
|
+
@include cg-design(#{$cg-subtree}-dt-se);
|
|
422
|
+
}
|
|
423
|
+
.cg_subtree_node_label {
|
|
424
|
+
letter-spacing: -0.28px;
|
|
425
|
+
@include cg-font(#{$cg-subtree}-dt-se, #1d1b1c, 14px, 400);
|
|
426
|
+
}
|
|
427
|
+
.cg_subtree_node:hover {
|
|
428
|
+
@include cg-design-state($cg-subtree, hr-se);
|
|
429
|
+
}
|
|
430
|
+
.cg_subtree_node:hover .cg_subtree_node_label {
|
|
431
|
+
@include cg-font-state($cg-subtree, hr-se, #1d1b1c, 14px, 400);
|
|
432
|
+
}
|
|
433
|
+
.cg_subtree_node.is-active {
|
|
434
|
+
@include cg-design-state($cg-subtree, sd-se);
|
|
435
|
+
}
|
|
436
|
+
.cg_subtree_node.is-active .cg_subtree_node_label {
|
|
437
|
+
@include cg-font-state($cg-subtree, sd-se, #1d1b1c, 14px, 400);
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
// ---- Right main ---------------------------------------------------
|
|
441
|
+
// mainSection: container fill/border + gap between heading, breadcrumb,
|
|
442
|
+
// sub-categories and the product grid.
|
|
443
|
+
.cg_main {
|
|
444
|
+
display: flex;
|
|
445
|
+
flex-direction: column;
|
|
446
|
+
gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
|
|
447
|
+
padding: prepareMediaVariable(#{$cg-main}-pg, 0);
|
|
448
|
+
flex: 1 0 0;
|
|
449
|
+
min-width: 0;
|
|
450
|
+
@include cg-design($cg-main);
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
// Drill-down breadcrumb (reuses the Breadcrumbs element DOM classes), styled
|
|
454
|
+
// from the breadcrumbDesign panel: breadcrumbItem (default/hover/selected) +
|
|
455
|
+
// separatorIcon. Selected state = the current (last) crumb.
|
|
456
|
+
.cg_breadcrumb {
|
|
457
|
+
width: 100%;
|
|
458
|
+
.horizontal_breadcrumb_wrapper {
|
|
459
|
+
display: inline-flex;
|
|
460
|
+
align-items: center;
|
|
461
|
+
flex-wrap: wrap;
|
|
462
|
+
gap: 6px;
|
|
463
|
+
}
|
|
464
|
+
.breadcrumb_item {
|
|
465
|
+
padding: 0 4px;
|
|
466
|
+
display: flex;
|
|
467
|
+
align-items: center;
|
|
468
|
+
gap: 8px;
|
|
469
|
+
white-space: nowrap;
|
|
470
|
+
@include cg-design(#{$cg-bc-item}-dt-se);
|
|
471
|
+
@include cg-font(#{$cg-bc-item}-dt-se, #4b4546, 14px, 400);
|
|
472
|
+
&[data-show-cursor="true"] {
|
|
473
|
+
cursor: pointer;
|
|
474
|
+
}
|
|
475
|
+
&[data-show-cursor="true"]:hover {
|
|
476
|
+
@include cg-design-state($cg-bc-item, hr-se);
|
|
477
|
+
@include cg-font-state($cg-bc-item, hr-se, #4b4546, 14px, 400);
|
|
478
|
+
}
|
|
479
|
+
&:last-of-type {
|
|
480
|
+
@include cg-design-state($cg-bc-item, sd-se);
|
|
481
|
+
@include cg-font-state($cg-bc-item, sd-se, #1d1b1c, 14px, 600);
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
// Collapse ("…") button shown when the trail is too deep.
|
|
485
|
+
.collapse_btn {
|
|
486
|
+
display: flex;
|
|
487
|
+
align-items: center;
|
|
488
|
+
padding: 0 4px;
|
|
489
|
+
border: none;
|
|
490
|
+
background: transparent;
|
|
491
|
+
cursor: pointer;
|
|
492
|
+
line-height: 1;
|
|
493
|
+
@include cg-font(#{$cg-bc-item}-dt-se, #4b4546, 16px, 600);
|
|
494
|
+
}
|
|
495
|
+
.separator .icon {
|
|
496
|
+
display: flex;
|
|
497
|
+
svg {
|
|
498
|
+
width: prepareMediaVariable(#{$cg-bc-sep}-in-se, 16px);
|
|
499
|
+
height: prepareMediaVariable(#{$cg-bc-sep}-in-se, 16px);
|
|
500
|
+
path {
|
|
501
|
+
stroke: prepareMediaVariable(#{$cg-bc-sep}-in-c1, #8a8a8a);
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
// Breadcrumb (top) + chip row (bottom) stack vertically.
|
|
508
|
+
.cg_subcategory_scroller {
|
|
509
|
+
display: flex;
|
|
510
|
+
flex-direction: column;
|
|
511
|
+
align-items: stretch;
|
|
512
|
+
// Same gap as the main section so breadcrumb ↔ sub-categories spacing
|
|
513
|
+
// follows the Main Section item gap.
|
|
514
|
+
gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
|
|
515
|
+
width: 100%;
|
|
516
|
+
}
|
|
517
|
+
// The horizontal chip row: left arrow + scrolling rail + right arrow.
|
|
518
|
+
.cg_subcategory_row {
|
|
519
|
+
display: flex;
|
|
520
|
+
align-items: center;
|
|
521
|
+
gap: 12px;
|
|
522
|
+
width: 100%;
|
|
523
|
+
}
|
|
524
|
+
.cg_subcategory_divider {
|
|
525
|
+
width: 100%;
|
|
526
|
+
// Widget Style → Divider (colour + thickness), same as the other dividers.
|
|
527
|
+
height: prepareMediaVariable(#{$cg-widget}-dr-wh, 1px);
|
|
528
|
+
background: prepareMediaVariable(#{$cg-widget}-dr-cr, #cbd5e1);
|
|
529
|
+
flex-shrink: 0;
|
|
530
|
+
}
|
|
531
|
+
.cg_scroller_arrow {
|
|
532
|
+
display: flex;
|
|
533
|
+
align-items: center;
|
|
534
|
+
justify-content: center;
|
|
535
|
+
padding: prepareMediaVariable(#{$cg-arrow}-dt-se-pg, 0);
|
|
536
|
+
cursor: pointer;
|
|
537
|
+
flex-shrink: 0;
|
|
538
|
+
// Default state: fill / border / radius / shadow.
|
|
539
|
+
@include cg-design(#{$cg-arrow}-dt-se);
|
|
540
|
+
// Icon colour (in-c1) drives the SVG `currentColor` stroke.
|
|
541
|
+
color: prepareMediaVariable(#{$cg-arrow}-dt-se-in-c1, #002a4e);
|
|
542
|
+
svg {
|
|
543
|
+
width: prepareMediaVariable(#{$cg-arrow}-dt-se-in-se, 20px);
|
|
544
|
+
height: prepareMediaVariable(#{$cg-arrow}-dt-se-in-se, 20px);
|
|
545
|
+
}
|
|
546
|
+
&:hover {
|
|
547
|
+
@include cg-design-state($cg-arrow, hr-se);
|
|
548
|
+
color: prepareMediaVariable(
|
|
549
|
+
#{$cg-arrow}-hr-se-in-c1,
|
|
550
|
+
prepareMediaVariable(#{$cg-arrow}-dt-se-in-c1, #002a4e)
|
|
112
551
|
);
|
|
113
552
|
}
|
|
114
553
|
}
|
|
554
|
+
.cg_chip_rail {
|
|
555
|
+
display: flex;
|
|
556
|
+
align-items: center;
|
|
557
|
+
gap: prepareMediaVariable(#{$cg-scroller-design}-im-gp, 16px);
|
|
558
|
+
flex: 1 0 0;
|
|
559
|
+
min-width: 0;
|
|
560
|
+
overflow-x: auto;
|
|
561
|
+
scrollbar-width: none;
|
|
562
|
+
&::-webkit-scrollbar {
|
|
563
|
+
display: none;
|
|
564
|
+
}
|
|
565
|
+
}
|
|
566
|
+
.cg_chip {
|
|
567
|
+
display: flex;
|
|
568
|
+
align-items: center;
|
|
569
|
+
// Spacing between the chip image and its label (Sub Category Chip item gap).
|
|
570
|
+
gap: prepareMediaVariable(#{$cg-chip}-dt-se-im-gp, 8px);
|
|
571
|
+
cursor: pointer;
|
|
572
|
+
flex-shrink: 0;
|
|
573
|
+
padding: 0;
|
|
574
|
+
@include cg-design(#{$cg-chip}-dt-se);
|
|
575
|
+
}
|
|
576
|
+
.cg_chip_icon {
|
|
577
|
+
display: flex;
|
|
578
|
+
align-items: center;
|
|
579
|
+
justify-content: center;
|
|
580
|
+
width: prepareMediaVariable(#{$cg-chip-image}-wh, 36px);
|
|
581
|
+
height: prepareMediaVariable(#{$cg-chip-image}-ht, 36px);
|
|
582
|
+
padding: prepareMediaVariable(#{$cg-chip-image}-pg, 0);
|
|
583
|
+
flex-shrink: 0;
|
|
584
|
+
overflow: hidden;
|
|
585
|
+
color: #002a4e;
|
|
586
|
+
// Sub Category Image design controls (fill / border / radius / shadow).
|
|
587
|
+
@include cg-design($cg-chip-image);
|
|
588
|
+
img {
|
|
589
|
+
width: 100%;
|
|
590
|
+
height: 100%;
|
|
591
|
+
object-fit: cover;
|
|
592
|
+
transition: transform 0.3s ease-in-out;
|
|
593
|
+
}
|
|
594
|
+
// Image Settings -> On Hover (zoom).
|
|
595
|
+
&[data-on-hover="Zoom In"]:hover img {
|
|
596
|
+
transform: scale(1.08);
|
|
597
|
+
}
|
|
598
|
+
&[data-on-hover="Zoom Out"]:hover img {
|
|
599
|
+
transform: scale(0.92);
|
|
600
|
+
}
|
|
601
|
+
}
|
|
602
|
+
.cg_chip_label {
|
|
603
|
+
padding: 4px 12px;
|
|
604
|
+
white-space: nowrap;
|
|
605
|
+
@include cg-font(#{$cg-chip}-dt-se, #002a4e, 14px, 400);
|
|
606
|
+
}
|
|
607
|
+
.cg_chip:hover {
|
|
608
|
+
@include cg-design-state($cg-chip, hr-se);
|
|
609
|
+
}
|
|
610
|
+
.cg_chip:hover .cg_chip_label {
|
|
611
|
+
@include cg-font-state($cg-chip, hr-se, #002a4e, 14px, 400);
|
|
612
|
+
}
|
|
613
|
+
.cg_chip.is-active {
|
|
614
|
+
@include cg-design-state($cg-chip, sd-se);
|
|
615
|
+
}
|
|
616
|
+
.cg_chip.is-active .cg_chip_label {
|
|
617
|
+
@include cg-font-state($cg-chip, sd-se, #002a4e, 14px, 400);
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
// ---- Product grid -------------------------------------------------
|
|
621
|
+
// Container box only. Display modes (grid / cards / slider) + gaps live in
|
|
622
|
+
// category-groups-product-grid.scss (imported below).
|
|
623
|
+
.cg_product_grid {
|
|
624
|
+
width: 100%;
|
|
625
|
+
position: relative;
|
|
626
|
+
padding: prepareMediaVariable(#{$cg-grid}-lt-pg, 0);
|
|
627
|
+
// Grid container fill / border / radius / shadow.
|
|
628
|
+
@include cg-design(#{$cg-grid}-lt);
|
|
629
|
+
}
|
|
630
|
+
// Display styles (Grid / Cards / Slider) for the product grid.
|
|
631
|
+
@import "./category-groups-product-grid.scss";
|
|
632
|
+
.cg_product_card {
|
|
633
|
+
display: flex;
|
|
634
|
+
flex-direction: column;
|
|
635
|
+
gap: prepareMediaVariable(#{$cg-card}-dt-se-im-gp, 16px);
|
|
636
|
+
padding: prepareMediaVariable(#{$cg-card}-dt-se-pg, 0);
|
|
637
|
+
position: relative;
|
|
638
|
+
min-width: 0;
|
|
639
|
+
background-color: prepareMediaVariable(#{$cg-card}-dt-se-bd-cr, transparent);
|
|
640
|
+
border-color: prepareMediaVariable(#{$cg-card}-dt-se-br-cr, transparent);
|
|
641
|
+
border-style: prepareMediaVariable(#{$cg-card}-dt-se-br-se, solid);
|
|
642
|
+
border-width: prepareMediaVariable(#{$cg-card}-dt-se-br-wh, 0);
|
|
643
|
+
border-radius: prepareMediaVariable(#{$cg-card}-dt-se-br-rs, 0);
|
|
644
|
+
}
|
|
645
|
+
.cg_product_card:hover {
|
|
646
|
+
background-color: prepareMediaVariable(#{$cg-card}-hr-se-bd-cr, transparent);
|
|
647
|
+
border-color: prepareMediaVariable(#{$cg-card}-hr-se-br-cr, transparent);
|
|
648
|
+
}
|
|
649
|
+
.cg_product_image_wrapper {
|
|
650
|
+
position: relative;
|
|
651
|
+
width: 100%;
|
|
652
|
+
overflow: hidden;
|
|
653
|
+
|
|
654
|
+
// Gallery / zoom / thumbnail styling for the embedded ProductImageContent,
|
|
655
|
+
// rebound to the Category Groups productImage CSS-variable paths.
|
|
656
|
+
@import "./category-groups-product-image.scss";
|
|
657
|
+
}
|
|
658
|
+
// Fallback image (rendered only when the Product Image setting is absent).
|
|
659
|
+
.cg_product_image {
|
|
660
|
+
display: block;
|
|
661
|
+
width: 100%;
|
|
662
|
+
height: 400px;
|
|
663
|
+
object-fit: cover;
|
|
664
|
+
}
|
|
665
|
+
.cg_product_info {
|
|
666
|
+
display: flex;
|
|
667
|
+
flex-direction: column;
|
|
668
|
+
// Product Card → content gap (between brand / name / price / options).
|
|
669
|
+
gap: prepareMediaVariable(#{$cg-card}-dt-se-ct-gp, 12px);
|
|
670
|
+
}
|
|
671
|
+
.cg_brand_name {
|
|
672
|
+
margin: 0;
|
|
673
|
+
@include cg-font($cg-brand, #737373, 14px, 400);
|
|
674
|
+
// Text overflow toggle + max lines (Brand Name design controls).
|
|
675
|
+
&.flex__overflow {
|
|
676
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
677
|
+
}
|
|
678
|
+
}
|
|
679
|
+
.cg_product_name {
|
|
680
|
+
margin: 0;
|
|
681
|
+
letter-spacing: -0.32px;
|
|
682
|
+
@include cg-font($cg-name, #0a3355, 16px, 600);
|
|
683
|
+
// Text overflow toggle + max lines (Product Name design controls).
|
|
684
|
+
&.flex__overflow {
|
|
685
|
+
@include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
.cg_product_price {
|
|
689
|
+
margin: 0;
|
|
690
|
+
display: flex;
|
|
691
|
+
align-items: center;
|
|
692
|
+
gap: 6px;
|
|
693
|
+
@include cg-font($cg-price, #000, 16px, 800);
|
|
694
|
+
}
|
|
695
|
+
.cg_variants_text {
|
|
696
|
+
margin: 0;
|
|
697
|
+
@include cg-font($cg-variants, #737373, 14px, 400);
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
@import "./category-groups-product-options.scss";
|
|
701
|
+
|
|
702
|
+
// Price styling for the embedded ProductPriceContent, rebound to the Category
|
|
703
|
+
// Groups productPrice CSS-variable paths.
|
|
704
|
+
@import "./category-groups-product-price.scss";
|
|
115
705
|
|
|
116
706
|
.loading_view {
|
|
117
707
|
width: 100%;
|
|
118
708
|
display: flex;
|
|
119
709
|
justify-content: center;
|
|
120
710
|
}
|
|
121
|
-
|
|
122
|
-
// &[data-view-state="full"] {
|
|
123
|
-
// width: auto;
|
|
124
|
-
// margin: 0;
|
|
125
|
-
// justify-self: stretch !important;
|
|
126
|
-
// align-self: stretch !important;
|
|
127
|
-
// cursor: auto;
|
|
128
|
-
// &:is(#{$activeElementSelector}) {
|
|
129
|
-
// & > div {
|
|
130
|
-
// &[data-div-type="wrapper__layer"] {
|
|
131
|
-
// --_sf-vt-zz: visible;
|
|
132
|
-
// --_sf-op-zz: 1;
|
|
133
|
-
// }
|
|
134
|
-
// }
|
|
135
|
-
// }
|
|
136
|
-
// }
|
|
137
711
|
}
|
|
138
712
|
}
|