@sc-360-v2/storefront-cms-library 0.2.51 → 0.2.52
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/README.md +12 -12
- package/dist/cart.scss +1 -1
- package/dist/categoryDetails.scss +1 -0
- package/dist/filters.scss +26 -9
- package/dist/globals.scss +94 -94
- package/dist/image-temp.scss +0 -7
- package/dist/product-basic-elements.scss +7 -1
- package/dist/productDetails.scss +1 -0
- package/dist/profile.scss +1 -1
- package/dist/variant-picker.scss +26 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
# @sc-360-v2/storefront-cms-library
|
|
2
|
-
|
|
3
|
-
`@sc-360-v2/storefront-cms-library` is a versatile library that provides styling and property components for other modules in your projects. This package is designed to streamline the creation of consistent and customizable storefront layouts.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
You can install the package using npm or yarn:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install @sc-360-v2/storefront-cms-library
|
|
11
|
-
# or
|
|
12
|
-
yarn add @sc-360-v2/storefront-cms-library
|
|
1
|
+
# @sc-360-v2/storefront-cms-library
|
|
2
|
+
|
|
3
|
+
`@sc-360-v2/storefront-cms-library` is a versatile library that provides styling and property components for other modules in your projects. This package is designed to streamline the creation of consistent and customizable storefront layouts.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
You can install the package using npm or yarn:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @sc-360-v2/storefront-cms-library
|
|
11
|
+
# or
|
|
12
|
+
yarn add @sc-360-v2/storefront-cms-library
|
package/dist/cart.scss
CHANGED
|
@@ -25,6 +25,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
25
25
|
height: auto;
|
|
26
26
|
margin: var(--_ctm-categ-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
|
|
27
27
|
background: var(--_ctm-categ-dn-bd-cr);
|
|
28
|
+
min-height: var(--_ctm-mob-categ-lt-ht, var(--_ctm-tab-categ-lt-ht, var(--_ctm-categ-lt-ht)));
|
|
28
29
|
|
|
29
30
|
// &:not(:has(#{$resizerId}#{$resizeActive})) {
|
|
30
31
|
// min-height: 100px !important;
|
package/dist/filters.scss
CHANGED
|
@@ -31,7 +31,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
31
31
|
display: flex;
|
|
32
32
|
flex-direction: column;
|
|
33
33
|
padding-block: 12px;
|
|
34
|
-
padding-right: 10px;
|
|
34
|
+
// padding-right: 10px;
|
|
35
35
|
&.divider_filter {
|
|
36
36
|
border-bottom: 1px solid var(--_gray-300);
|
|
37
37
|
}
|
|
@@ -39,11 +39,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
39
39
|
display: flex;
|
|
40
40
|
justify-content: space-between;
|
|
41
41
|
gap: 12px;
|
|
42
|
+
|
|
42
43
|
h2 {
|
|
43
44
|
font-size: var(--_fs-14);
|
|
44
45
|
font-weight: var(--_fw-600);
|
|
45
46
|
text-transform: uppercase;
|
|
46
47
|
}
|
|
48
|
+
h3 {
|
|
49
|
+
font-size: 14px;
|
|
50
|
+
text-transform: uppercase;
|
|
51
|
+
}
|
|
47
52
|
.reset__btn {
|
|
48
53
|
font-size: 12px;
|
|
49
54
|
text-transform: uppercase;
|
|
@@ -61,6 +66,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
61
66
|
font-size: var(--_fs-14);
|
|
62
67
|
font-weight: var(--_fw-600);
|
|
63
68
|
}
|
|
69
|
+
h3 {
|
|
70
|
+
font-size: 12px;
|
|
71
|
+
text-transform: uppercase;
|
|
72
|
+
color: #333;
|
|
73
|
+
}
|
|
64
74
|
.reset__btn {
|
|
65
75
|
font-size: 12px;
|
|
66
76
|
text-transform: uppercase;
|
|
@@ -82,8 +92,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
82
92
|
.filter__search {
|
|
83
93
|
display: flex;
|
|
84
94
|
align-items: center;
|
|
85
|
-
padding
|
|
86
|
-
border: 1px solid var(--_gray-
|
|
95
|
+
padding: 6px 10px;
|
|
96
|
+
border: 1px solid var(--_gray-300);
|
|
87
97
|
border-radius: 6px;
|
|
88
98
|
|
|
89
99
|
button {
|
|
@@ -107,7 +117,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
107
117
|
li {
|
|
108
118
|
display: flex;
|
|
109
119
|
align-items: center;
|
|
120
|
+
justify-content: space-between;
|
|
110
121
|
padding-block: 6px;
|
|
122
|
+
font-size: 14px;
|
|
123
|
+
|
|
111
124
|
a {
|
|
112
125
|
// padding-block: 6px;
|
|
113
126
|
padding-left: 10px;
|
|
@@ -145,6 +158,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
145
158
|
font-weight: var(--_fw-600);
|
|
146
159
|
text-transform: uppercase;
|
|
147
160
|
}
|
|
161
|
+
h3 {
|
|
162
|
+
font-size: 14px;
|
|
163
|
+
text-transform: uppercase;
|
|
164
|
+
}
|
|
148
165
|
.reset__btn {
|
|
149
166
|
font-size: 12px;
|
|
150
167
|
text-transform: uppercase;
|
|
@@ -255,7 +272,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
255
272
|
.checkmark {
|
|
256
273
|
height: 18px;
|
|
257
274
|
width: 18px;
|
|
258
|
-
border: 1px solid var(--_gray-
|
|
275
|
+
border: 1px solid var(--_gray-500);
|
|
259
276
|
background-color: var(--_base-white);
|
|
260
277
|
display: flex;
|
|
261
278
|
justify-content: center;
|
|
@@ -318,7 +335,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
318
335
|
width: 100%;
|
|
319
336
|
height: 5px;
|
|
320
337
|
margin: 30px 0;
|
|
321
|
-
background-color:
|
|
338
|
+
background-color: var(--_primary-400);
|
|
322
339
|
border-radius: 5px;
|
|
323
340
|
}
|
|
324
341
|
|
|
@@ -347,11 +364,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
347
364
|
width: 20px;
|
|
348
365
|
border-radius: 50%;
|
|
349
366
|
border: 3px solid #fff;
|
|
350
|
-
background: var(--
|
|
367
|
+
background: var(--_base-white);
|
|
351
368
|
pointer-events: auto;
|
|
352
369
|
appearance: none;
|
|
353
370
|
cursor: pointer;
|
|
354
|
-
box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.
|
|
371
|
+
box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
|
|
355
372
|
position: relative;
|
|
356
373
|
z-index: 2; /* Ensure thumbs appear above the track */
|
|
357
374
|
}
|
|
@@ -361,10 +378,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
361
378
|
width: 25px;
|
|
362
379
|
border-radius: 50%;
|
|
363
380
|
border: 3px solid #fff;
|
|
364
|
-
background: var(--
|
|
381
|
+
background: var(--_base-white);
|
|
365
382
|
pointer-events: auto;
|
|
366
383
|
cursor: pointer;
|
|
367
|
-
box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.
|
|
384
|
+
box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
|
|
368
385
|
position: relative;
|
|
369
386
|
z-index: 2;
|
|
370
387
|
}
|
package/dist/globals.scss
CHANGED
|
@@ -1,94 +1,94 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--max-width: 1100px;
|
|
3
|
-
--border-radius: 12px;
|
|
4
|
-
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
|
|
5
|
-
"Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
|
|
6
|
-
"Courier New", monospace;
|
|
7
|
-
|
|
8
|
-
--foreground-rgb: 0, 0, 0;
|
|
9
|
-
--background-start-rgb: 214, 219, 220;
|
|
10
|
-
--background-end-rgb: 255, 255, 255;
|
|
11
|
-
|
|
12
|
-
--primary-glow: conic-gradient(
|
|
13
|
-
from 180deg at 50% 50%,
|
|
14
|
-
#16abff33 0deg,
|
|
15
|
-
#0885ff33 55deg,
|
|
16
|
-
#54d6ff33 120deg,
|
|
17
|
-
#0071ff33 160deg,
|
|
18
|
-
transparent 360deg
|
|
19
|
-
);
|
|
20
|
-
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
|
21
|
-
|
|
22
|
-
--tile-start-rgb: 239, 245, 249;
|
|
23
|
-
--tile-end-rgb: 228, 232, 233;
|
|
24
|
-
--tile-border: conic-gradient(
|
|
25
|
-
#00000080,
|
|
26
|
-
#00000040,
|
|
27
|
-
#00000030,
|
|
28
|
-
#00000020,
|
|
29
|
-
#00000010,
|
|
30
|
-
#00000010,
|
|
31
|
-
#00000080
|
|
32
|
-
);
|
|
33
|
-
|
|
34
|
-
--callout-rgb: 238, 240, 241;
|
|
35
|
-
--callout-border-rgb: 172, 175, 176;
|
|
36
|
-
--card-rgb: 180, 185, 188;
|
|
37
|
-
--card-border-rgb: 131, 134, 135;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@media (prefers-color-scheme: dark) {
|
|
41
|
-
:root {
|
|
42
|
-
--foreground-rgb: 255, 255, 255;
|
|
43
|
-
--background-start-rgb: 0, 0, 0;
|
|
44
|
-
--background-end-rgb: 0, 0, 0;
|
|
45
|
-
|
|
46
|
-
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
|
47
|
-
--secondary-glow: linear-gradient(
|
|
48
|
-
to bottom right,
|
|
49
|
-
rgba(1, 65, 255, 0),
|
|
50
|
-
rgba(1, 65, 255, 0),
|
|
51
|
-
rgba(1, 65, 255, 0.3)
|
|
52
|
-
);
|
|
53
|
-
|
|
54
|
-
--tile-start-rgb: 2, 13, 46;
|
|
55
|
-
--tile-end-rgb: 2, 5, 19;
|
|
56
|
-
--tile-border: conic-gradient(
|
|
57
|
-
#ffffff80,
|
|
58
|
-
#ffffff40,
|
|
59
|
-
#ffffff30,
|
|
60
|
-
#ffffff20,
|
|
61
|
-
#ffffff10,
|
|
62
|
-
#ffffff10,
|
|
63
|
-
#ffffff80
|
|
64
|
-
);
|
|
65
|
-
|
|
66
|
-
--callout-rgb: 20, 20, 20;
|
|
67
|
-
--callout-border-rgb: 108, 108, 108;
|
|
68
|
-
--card-rgb: 100, 100, 100;
|
|
69
|
-
--card-border-rgb: 200, 200, 200;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
* {
|
|
74
|
-
box-sizing: border-box;
|
|
75
|
-
padding: 0;
|
|
76
|
-
margin: 0;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
html,
|
|
80
|
-
body {
|
|
81
|
-
max-width: 100vw;
|
|
82
|
-
overflow-x: hidden;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
a {
|
|
86
|
-
color: inherit;
|
|
87
|
-
text-decoration: none;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@media (prefers-color-scheme: dark) {
|
|
91
|
-
html {
|
|
92
|
-
color-scheme: dark;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
--max-width: 1100px;
|
|
3
|
+
--border-radius: 12px;
|
|
4
|
+
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
|
|
5
|
+
"Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
|
|
6
|
+
"Courier New", monospace;
|
|
7
|
+
|
|
8
|
+
--foreground-rgb: 0, 0, 0;
|
|
9
|
+
--background-start-rgb: 214, 219, 220;
|
|
10
|
+
--background-end-rgb: 255, 255, 255;
|
|
11
|
+
|
|
12
|
+
--primary-glow: conic-gradient(
|
|
13
|
+
from 180deg at 50% 50%,
|
|
14
|
+
#16abff33 0deg,
|
|
15
|
+
#0885ff33 55deg,
|
|
16
|
+
#54d6ff33 120deg,
|
|
17
|
+
#0071ff33 160deg,
|
|
18
|
+
transparent 360deg
|
|
19
|
+
);
|
|
20
|
+
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
|
21
|
+
|
|
22
|
+
--tile-start-rgb: 239, 245, 249;
|
|
23
|
+
--tile-end-rgb: 228, 232, 233;
|
|
24
|
+
--tile-border: conic-gradient(
|
|
25
|
+
#00000080,
|
|
26
|
+
#00000040,
|
|
27
|
+
#00000030,
|
|
28
|
+
#00000020,
|
|
29
|
+
#00000010,
|
|
30
|
+
#00000010,
|
|
31
|
+
#00000080
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
--callout-rgb: 238, 240, 241;
|
|
35
|
+
--callout-border-rgb: 172, 175, 176;
|
|
36
|
+
--card-rgb: 180, 185, 188;
|
|
37
|
+
--card-border-rgb: 131, 134, 135;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (prefers-color-scheme: dark) {
|
|
41
|
+
:root {
|
|
42
|
+
--foreground-rgb: 255, 255, 255;
|
|
43
|
+
--background-start-rgb: 0, 0, 0;
|
|
44
|
+
--background-end-rgb: 0, 0, 0;
|
|
45
|
+
|
|
46
|
+
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
|
47
|
+
--secondary-glow: linear-gradient(
|
|
48
|
+
to bottom right,
|
|
49
|
+
rgba(1, 65, 255, 0),
|
|
50
|
+
rgba(1, 65, 255, 0),
|
|
51
|
+
rgba(1, 65, 255, 0.3)
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
--tile-start-rgb: 2, 13, 46;
|
|
55
|
+
--tile-end-rgb: 2, 5, 19;
|
|
56
|
+
--tile-border: conic-gradient(
|
|
57
|
+
#ffffff80,
|
|
58
|
+
#ffffff40,
|
|
59
|
+
#ffffff30,
|
|
60
|
+
#ffffff20,
|
|
61
|
+
#ffffff10,
|
|
62
|
+
#ffffff10,
|
|
63
|
+
#ffffff80
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
--callout-rgb: 20, 20, 20;
|
|
67
|
+
--callout-border-rgb: 108, 108, 108;
|
|
68
|
+
--card-rgb: 100, 100, 100;
|
|
69
|
+
--card-border-rgb: 200, 200, 200;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
* {
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
padding: 0;
|
|
76
|
+
margin: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
html,
|
|
80
|
+
body {
|
|
81
|
+
max-width: 100vw;
|
|
82
|
+
overflow-x: hidden;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
a {
|
|
86
|
+
color: inherit;
|
|
87
|
+
text-decoration: none;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@media (prefers-color-scheme: dark) {
|
|
91
|
+
html {
|
|
92
|
+
color-scheme: dark;
|
|
93
|
+
}
|
|
94
|
+
}
|
package/dist/image-temp.scss
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
|
|
16
16
|
margin: var(--_ctm-lt-mn, --_tst-lt-mn);
|
|
17
17
|
word-break: break-all;
|
|
18
|
+
min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
18
19
|
|
|
19
20
|
// height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
20
21
|
// height: ;
|
|
@@ -92,6 +93,7 @@
|
|
|
92
93
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
93
94
|
width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
|
|
94
95
|
margin: var(--_ctm-lt-mn, --_tst-lt-mn);
|
|
96
|
+
min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
95
97
|
// height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
96
98
|
// height: ;
|
|
97
99
|
// aspect-ratio: 1 / var(--_sf-aspect-ratio);
|
|
@@ -164,6 +166,7 @@
|
|
|
164
166
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
165
167
|
width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
|
|
166
168
|
margin: var(--_ctm-lt-mn, --_tst-lt-mn);
|
|
169
|
+
min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
167
170
|
// height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
168
171
|
// height: ;
|
|
169
172
|
// aspect-ratio: 1 / var(--_sf-aspect-ratio);
|
|
@@ -237,7 +240,8 @@
|
|
|
237
240
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
238
241
|
width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
|
|
239
242
|
margin: var(--_ctm-lt-mn, --_tst-lt-mn);
|
|
240
|
-
height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
243
|
+
// height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
244
|
+
min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
241
245
|
// height: ;
|
|
242
246
|
// aspect-ratio: 1 / var(--_sf-aspect-ratio);
|
|
243
247
|
// --_aspect-ratio: calc(
|
|
@@ -309,6 +313,7 @@
|
|
|
309
313
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
310
314
|
width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
|
|
311
315
|
margin: var(--_ctm-lt-mn, --_tst-lt-mn);
|
|
316
|
+
min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
312
317
|
// height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
313
318
|
// height: ;
|
|
314
319
|
// aspect-ratio: 1 / var(--_sf-aspect-ratio);
|
|
@@ -378,6 +383,7 @@
|
|
|
378
383
|
// width: var(--_sf-nw-wh, var(--_tst-lt-wh));
|
|
379
384
|
width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
|
|
380
385
|
margin: var(--_ctm-lt-mn, --_tst-lt-mn);
|
|
386
|
+
min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
|
|
381
387
|
// height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
|
|
382
388
|
// height: ;
|
|
383
389
|
// aspect-ratio: 1 / var(--_sf-aspect-ratio);
|
package/dist/productDetails.scss
CHANGED
|
@@ -25,6 +25,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
|
|
|
25
25
|
height: auto;
|
|
26
26
|
margin: var(--_ctm-prod-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
|
|
27
27
|
background: var(--_ctm-prod-dn-bd-cr);
|
|
28
|
+
min-height: var(--_ctm-mob-prod-lt-ht, var(--_ctm-tab-prod-lt-ht, var(--_ctm-prod-lt-ht)));
|
|
28
29
|
|
|
29
30
|
// &:not(:has(#{$resizerId}#{$resizeActive})) {
|
|
30
31
|
// min-height: 100px !important;
|
package/dist/profile.scss
CHANGED
package/dist/variant-picker.scss
CHANGED
|
@@ -114,6 +114,7 @@
|
|
|
114
114
|
// }
|
|
115
115
|
}
|
|
116
116
|
&.selected_item {
|
|
117
|
+
width: fit-content;
|
|
117
118
|
background-color: var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr);
|
|
118
119
|
border-radius: var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs);
|
|
119
120
|
border-color: var(
|
|
@@ -386,12 +387,20 @@
|
|
|
386
387
|
.est__dropdown__main {
|
|
387
388
|
position: relative;
|
|
388
389
|
width: 100%;
|
|
390
|
+
display: flex;
|
|
391
|
+
flex-direction: column;
|
|
392
|
+
gap: var(--_ctm-lt-on-te-ve-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg));
|
|
389
393
|
margin-top: 10px;
|
|
390
394
|
|
|
391
395
|
label {
|
|
392
|
-
font-size:
|
|
393
|
-
|
|
394
|
-
|
|
396
|
+
font-size: var(--_ctm-dn-on-te-ft-se);
|
|
397
|
+
font-family: var(--_ctm-dn-on-te-ft-fy);
|
|
398
|
+
color: var(--_gray-700, var(--_ctm-dn-on-te-cr));
|
|
399
|
+
font-weight: var(--_ctm-dn-on-te-ft-wt);
|
|
400
|
+
text-decoration: var(--_ctm-dn-on-te-ue);
|
|
401
|
+
letter-spacing: var(--_ctm-dn-on-te-lr-sg);
|
|
402
|
+
text-align: var(--_ctm-dn-on-te-tt-an);
|
|
403
|
+
line-height: var(--_ctm-dn-on-te-le-ht);
|
|
395
404
|
display: block;
|
|
396
405
|
}
|
|
397
406
|
|
|
@@ -417,13 +426,22 @@
|
|
|
417
426
|
.list {
|
|
418
427
|
display: none;
|
|
419
428
|
flex-direction: column;
|
|
420
|
-
|
|
421
|
-
border
|
|
429
|
+
gap: var(--_ctm-lt-dn-dy-se-dn-os-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg));
|
|
430
|
+
border: var(--_ctm-dn-dn-se-br-wh) var(--_ctm-dn-dn-se-br-se)
|
|
431
|
+
var(--_gray-200, var(--_ctm-dn-dn-se-br-cr));
|
|
432
|
+
border-radius: var(--_ctm-dn-dn-se-br-rs);
|
|
433
|
+
box-shadow: var(
|
|
434
|
+
--_show-shadow-dn-se,
|
|
435
|
+
var(--_ctm-dn-dn-se-sw-ae, var(--_tst-dn-sw-ae))
|
|
436
|
+
var(--_ctm-dn-dn-se-sw-br, var(--_tst-dn-sw-br))
|
|
437
|
+
var(--_ctm-dn-dn-se-sw-sd, var(--_tst-dn-sw-sd))
|
|
438
|
+
var(--_ctm-dn-dn-se-sw-cr, var(--_tst-dn-sw-cr))
|
|
439
|
+
);
|
|
422
440
|
position: absolute;
|
|
423
441
|
top: 100%;
|
|
424
442
|
left: 0;
|
|
425
443
|
width: 100%;
|
|
426
|
-
background-color:
|
|
444
|
+
background-color: var(--_ctm-dn-dn-se-bd-cr);
|
|
427
445
|
border-radius: 4px;
|
|
428
446
|
z-index: var(--_higher-zIndex);
|
|
429
447
|
max-height: 200px;
|
|
@@ -435,7 +453,7 @@
|
|
|
435
453
|
}
|
|
436
454
|
|
|
437
455
|
.list__option {
|
|
438
|
-
padding:
|
|
456
|
+
padding: var(--_ctm-lt-dn-dy-se-dn-os-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg));
|
|
439
457
|
cursor: pointer;
|
|
440
458
|
|
|
441
459
|
&:hover {
|
|
@@ -451,7 +469,7 @@
|
|
|
451
469
|
.var__drop__selection {
|
|
452
470
|
display: flex;
|
|
453
471
|
width: 100%;
|
|
454
|
-
gap: var(--_ctm-lt-dn-dy-se-dn-lt-im-sg);
|
|
472
|
+
gap: var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg));
|
|
455
473
|
flex-direction: row;
|
|
456
474
|
&[data-dropdown-style="Vertical List"] {
|
|
457
475
|
flex-direction: column;
|