@sigx/zero-daisyui 0.13.0 → 0.15.0
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/audit.json +60 -0
- package/dist/css/components/combobox.css +5 -0
- package/dist/css/components/container.css +1 -0
- package/dist/css/components/input.css +9 -0
- package/dist/css/components/nav-list.css +7 -0
- package/dist/css/components/spinner.css +5 -5
- package/dist/css/index.css +27 -5
- package/dist/lynx/components/alert.css +49 -7
- package/dist/lynx/components/avatar-group.css +13 -1
- package/dist/lynx/components/avatar.css +56 -1
- package/dist/lynx/components/badge.css +209 -6
- package/dist/lynx/components/breadcrumbs.css +30 -21
- package/dist/lynx/components/button.css +2 -7
- package/dist/lynx/components/card.css +12 -2
- package/dist/lynx/components/carousel.css +4 -4
- package/dist/lynx/components/chat-log.css +5 -5
- package/dist/lynx/components/chat.css +1 -1
- package/dist/lynx/components/combobox.css +5 -0
- package/dist/lynx/components/container.css +3 -2
- package/dist/lynx/components/diff.css +1 -1
- package/dist/lynx/components/divider.css +53 -8
- package/dist/lynx/components/drawer.css +8 -8
- package/dist/lynx/components/empty-state.css +7 -1
- package/dist/lynx/components/fieldset.css +1 -1
- package/dist/lynx/components/grid.css +2 -2
- package/dist/lynx/components/kbd.css +16 -3
- package/dist/lynx/components/menu.css +20 -1
- package/dist/lynx/components/nav-list.css +15 -2
- package/dist/lynx/components/navbar.css +9 -5
- package/dist/lynx/components/pagination.css +97 -65
- package/dist/lynx/components/radial-progress.css +10 -10
- package/dist/lynx/components/select.css +1 -2
- package/dist/lynx/components/skeleton.css +1 -1
- package/dist/lynx/components/spinner.css +22 -12
- package/dist/lynx/components/stack.css +2 -2
- package/dist/lynx/components/stats.css +39 -3
- package/dist/lynx/components/status.css +197 -11
- package/dist/lynx/components/steps.css +114 -22
- package/dist/lynx/components/table.css +1 -1
- package/dist/lynx/components/tabs.css +1 -1
- package/dist/lynx/components/textarea.css +1 -1
- package/dist/lynx/components/timeline.css +12 -25
- package/dist/lynx/components/toast.css +331 -12
- package/dist/lynx/components/tree-view.css +31 -4
- package/dist/lynx/index.css +1382 -262
- package/dist/lynx/manifest.json +3 -3
- package/dist/manifest.json +1 -1
- package/dist/recipes.d.ts +6 -1
- package/dist/recipes.d.ts.map +1 -1
- package/dist/recipes.js +934 -25
- package/dist/recipes.js.map +1 -1
- package/dist/report.json +565 -89
- package/package.json +4 -4
- package/src/recipes.ts +939 -25
package/dist/audit.json
CHANGED
|
@@ -5455,6 +5455,18 @@
|
|
|
5455
5455
|
"ink": "#18181b",
|
|
5456
5456
|
"bg": "#f8f8f8"
|
|
5457
5457
|
},
|
|
5458
|
+
{
|
|
5459
|
+
"key": "daisyui/light/combobox/tag/-/focus-visible/-",
|
|
5460
|
+
"scope": "combobox",
|
|
5461
|
+
"part": "tag",
|
|
5462
|
+
"flag": "focus-visible",
|
|
5463
|
+
"matrix": "text",
|
|
5464
|
+
"verdict": "pass",
|
|
5465
|
+
"ratio": 16.68,
|
|
5466
|
+
"inGroup": 16.68,
|
|
5467
|
+
"ink": "#18181b",
|
|
5468
|
+
"bg": "#f8f8f8"
|
|
5469
|
+
},
|
|
5458
5470
|
{
|
|
5459
5471
|
"key": "daisyui/light/combobox/tag-label/-/-/-",
|
|
5460
5472
|
"scope": "combobox",
|
|
@@ -61330,6 +61342,18 @@
|
|
|
61330
61342
|
"ink": "#ecf9ff",
|
|
61331
61343
|
"bg": "#191e24"
|
|
61332
61344
|
},
|
|
61345
|
+
{
|
|
61346
|
+
"key": "daisyui/dark/combobox/tag/-/focus-visible/-",
|
|
61347
|
+
"scope": "combobox",
|
|
61348
|
+
"part": "tag",
|
|
61349
|
+
"flag": "focus-visible",
|
|
61350
|
+
"matrix": "text",
|
|
61351
|
+
"verdict": "pass",
|
|
61352
|
+
"ratio": 15.62,
|
|
61353
|
+
"inGroup": 15.62,
|
|
61354
|
+
"ink": "#ecf9ff",
|
|
61355
|
+
"bg": "#191e24"
|
|
61356
|
+
},
|
|
61333
61357
|
{
|
|
61334
61358
|
"key": "daisyui/dark/combobox/tag-label/-/-/-",
|
|
61335
61359
|
"scope": "combobox",
|
|
@@ -117205,6 +117229,18 @@
|
|
|
117205
117229
|
"ink": "#b2ccd6",
|
|
117206
117230
|
"bg": "#242933"
|
|
117207
117231
|
},
|
|
117232
|
+
{
|
|
117233
|
+
"key": "daisyui/dim/combobox/tag/-/focus-visible/-",
|
|
117234
|
+
"scope": "combobox",
|
|
117235
|
+
"part": "tag",
|
|
117236
|
+
"flag": "focus-visible",
|
|
117237
|
+
"matrix": "text",
|
|
117238
|
+
"verdict": "pass",
|
|
117239
|
+
"ratio": 8.68,
|
|
117240
|
+
"inGroup": 8.68,
|
|
117241
|
+
"ink": "#b2ccd6",
|
|
117242
|
+
"bg": "#242933"
|
|
117243
|
+
},
|
|
117208
117244
|
{
|
|
117209
117245
|
"key": "daisyui/dim/combobox/tag-label/-/-/-",
|
|
117210
117246
|
"scope": "combobox",
|
|
@@ -173080,6 +173116,18 @@
|
|
|
173080
173116
|
"ink": "#2e3440",
|
|
173081
173117
|
"bg": "#e5e9f0"
|
|
173082
173118
|
},
|
|
173119
|
+
{
|
|
173120
|
+
"key": "daisyui/nord/combobox/tag/-/focus-visible/-",
|
|
173121
|
+
"scope": "combobox",
|
|
173122
|
+
"part": "tag",
|
|
173123
|
+
"flag": "focus-visible",
|
|
173124
|
+
"matrix": "text",
|
|
173125
|
+
"verdict": "pass",
|
|
173126
|
+
"ratio": 10.26,
|
|
173127
|
+
"inGroup": 10.26,
|
|
173128
|
+
"ink": "#2e3440",
|
|
173129
|
+
"bg": "#e5e9f0"
|
|
173130
|
+
},
|
|
173083
173131
|
{
|
|
173084
173132
|
"key": "daisyui/nord/combobox/tag-label/-/-/-",
|
|
173085
173133
|
"scope": "combobox",
|
|
@@ -228955,6 +229003,18 @@
|
|
|
228955
229003
|
"ink": "#9fb9d0",
|
|
228956
229004
|
"bg": "#0e171e"
|
|
228957
229005
|
},
|
|
229006
|
+
{
|
|
229007
|
+
"key": "daisyui/sunset/combobox/tag/-/focus-visible/-",
|
|
229008
|
+
"scope": "combobox",
|
|
229009
|
+
"part": "tag",
|
|
229010
|
+
"flag": "focus-visible",
|
|
229011
|
+
"matrix": "text",
|
|
229012
|
+
"verdict": "pass",
|
|
229013
|
+
"ratio": 8.9,
|
|
229014
|
+
"inGroup": 8.9,
|
|
229015
|
+
"ink": "#9fb9d0",
|
|
229016
|
+
"bg": "#0e171e"
|
|
229017
|
+
},
|
|
228958
229018
|
{
|
|
228959
229019
|
"key": "daisyui/sunset/combobox/tag-label/-/-/-",
|
|
228960
229020
|
"scope": "combobox",
|
|
@@ -83,6 +83,11 @@
|
|
|
83
83
|
line-height: var(--leading-none);
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
+
[data-scope="combobox"][data-part="tag"][data-focus-visible] {
|
|
87
|
+
outline: 2px solid var(--color-base-content);
|
|
88
|
+
outline-offset: 2px;
|
|
89
|
+
}
|
|
90
|
+
|
|
86
91
|
[data-scope="combobox"][data-part="tag-label"] {
|
|
87
92
|
white-space: nowrap;
|
|
88
93
|
}
|
|
@@ -76,6 +76,15 @@
|
|
|
76
76
|
color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
+
[data-scope="input"][data-part="input"]::-webkit-search-cancel-button {
|
|
80
|
+
appearance: none;
|
|
81
|
+
display: none;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
[data-scope="input"][data-part="input"]::-webkit-search-decoration {
|
|
85
|
+
appearance: none;
|
|
86
|
+
}
|
|
87
|
+
|
|
79
88
|
[data-scope="input"][data-part="adornment"] {
|
|
80
89
|
display: inline-flex;
|
|
81
90
|
align-items: center;
|
|
@@ -46,6 +46,13 @@
|
|
|
46
46
|
align-items: center;
|
|
47
47
|
gap: var(--space-sm);
|
|
48
48
|
text-decoration: none;
|
|
49
|
+
appearance: none;
|
|
50
|
+
background: none;
|
|
51
|
+
border: 0;
|
|
52
|
+
font: inherit;
|
|
53
|
+
text-align: start;
|
|
54
|
+
inline-size: 100%;
|
|
55
|
+
cursor: pointer;
|
|
49
56
|
color: var(--nav-ink);
|
|
50
57
|
padding: var(--space-sm) var(--space-lg);
|
|
51
58
|
border-radius: var(--radius-field);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
@layer zero.recipes {
|
|
4
4
|
[data-scope="spinner"][data-part="root"] {
|
|
5
|
-
--spinner-size: calc(var(--size-
|
|
5
|
+
--spinner-size: calc(var(--size-selector) * 6);
|
|
6
6
|
--spinner-ink: var(--color-primary);
|
|
7
7
|
--spinner-track: var(--color-base-300);
|
|
8
8
|
}
|
|
@@ -51,19 +51,19 @@
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
[data-scope="spinner"][data-part="root"][data-size="xs"] {
|
|
54
|
-
--spinner-size: calc(var(--size-
|
|
54
|
+
--spinner-size: calc(var(--size-selector) * 4);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
[data-scope="spinner"][data-part="root"][data-size="sm"] {
|
|
58
|
-
--spinner-size: calc(var(--size-
|
|
58
|
+
--spinner-size: calc(var(--size-selector) * 5);
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
[data-scope="spinner"][data-part="root"][data-size="lg"] {
|
|
62
|
-
--spinner-size: calc(var(--size-
|
|
62
|
+
--spinner-size: calc(var(--size-selector) * 7);
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
[data-scope="spinner"][data-part="root"][data-size="xl"] {
|
|
66
|
-
--spinner-size: calc(var(--size-
|
|
66
|
+
--spinner-size: calc(var(--size-selector) * 8);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
@media (prefers-reduced-motion: reduce) {
|
package/dist/css/index.css
CHANGED
|
@@ -447,6 +447,7 @@
|
|
|
447
447
|
}
|
|
448
448
|
|
|
449
449
|
[data-scope="container"][data-part="root"] {
|
|
450
|
+
box-sizing: border-box;
|
|
450
451
|
inline-size: 100%;
|
|
451
452
|
max-inline-size: var(--l-measure);
|
|
452
453
|
margin-inline: auto;
|
|
@@ -5309,6 +5310,11 @@
|
|
|
5309
5310
|
line-height: var(--leading-none);
|
|
5310
5311
|
}
|
|
5311
5312
|
|
|
5313
|
+
[data-scope="combobox"][data-part="tag"][data-focus-visible] {
|
|
5314
|
+
outline: 2px solid var(--color-base-content);
|
|
5315
|
+
outline-offset: 2px;
|
|
5316
|
+
}
|
|
5317
|
+
|
|
5312
5318
|
[data-scope="combobox"][data-part="tag-label"] {
|
|
5313
5319
|
white-space: nowrap;
|
|
5314
5320
|
}
|
|
@@ -6627,6 +6633,15 @@
|
|
|
6627
6633
|
color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
|
|
6628
6634
|
}
|
|
6629
6635
|
|
|
6636
|
+
[data-scope="input"][data-part="input"]::-webkit-search-cancel-button {
|
|
6637
|
+
appearance: none;
|
|
6638
|
+
display: none;
|
|
6639
|
+
}
|
|
6640
|
+
|
|
6641
|
+
[data-scope="input"][data-part="input"]::-webkit-search-decoration {
|
|
6642
|
+
appearance: none;
|
|
6643
|
+
}
|
|
6644
|
+
|
|
6630
6645
|
[data-scope="input"][data-part="adornment"] {
|
|
6631
6646
|
display: inline-flex;
|
|
6632
6647
|
align-items: center;
|
|
@@ -7811,7 +7826,7 @@
|
|
|
7811
7826
|
|
|
7812
7827
|
@layer zero.recipes {
|
|
7813
7828
|
[data-scope="spinner"][data-part="root"] {
|
|
7814
|
-
--spinner-size: calc(var(--size-
|
|
7829
|
+
--spinner-size: calc(var(--size-selector) * 6);
|
|
7815
7830
|
--spinner-ink: var(--color-primary);
|
|
7816
7831
|
--spinner-track: var(--color-base-300);
|
|
7817
7832
|
}
|
|
@@ -7860,19 +7875,19 @@
|
|
|
7860
7875
|
}
|
|
7861
7876
|
|
|
7862
7877
|
[data-scope="spinner"][data-part="root"][data-size="xs"] {
|
|
7863
|
-
--spinner-size: calc(var(--size-
|
|
7878
|
+
--spinner-size: calc(var(--size-selector) * 4);
|
|
7864
7879
|
}
|
|
7865
7880
|
|
|
7866
7881
|
[data-scope="spinner"][data-part="root"][data-size="sm"] {
|
|
7867
|
-
--spinner-size: calc(var(--size-
|
|
7882
|
+
--spinner-size: calc(var(--size-selector) * 5);
|
|
7868
7883
|
}
|
|
7869
7884
|
|
|
7870
7885
|
[data-scope="spinner"][data-part="root"][data-size="lg"] {
|
|
7871
|
-
--spinner-size: calc(var(--size-
|
|
7886
|
+
--spinner-size: calc(var(--size-selector) * 7);
|
|
7872
7887
|
}
|
|
7873
7888
|
|
|
7874
7889
|
[data-scope="spinner"][data-part="root"][data-size="xl"] {
|
|
7875
|
-
--spinner-size: calc(var(--size-
|
|
7890
|
+
--spinner-size: calc(var(--size-selector) * 8);
|
|
7876
7891
|
}
|
|
7877
7892
|
|
|
7878
7893
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -9385,6 +9400,13 @@
|
|
|
9385
9400
|
align-items: center;
|
|
9386
9401
|
gap: var(--space-sm);
|
|
9387
9402
|
text-decoration: none;
|
|
9403
|
+
appearance: none;
|
|
9404
|
+
background: none;
|
|
9405
|
+
border: 0;
|
|
9406
|
+
font: inherit;
|
|
9407
|
+
text-align: start;
|
|
9408
|
+
inline-size: 100%;
|
|
9409
|
+
cursor: pointer;
|
|
9388
9410
|
color: var(--nav-ink);
|
|
9389
9411
|
padding: var(--space-sm) var(--space-lg);
|
|
9390
9412
|
border-radius: var(--radius-field);
|
|
@@ -1,17 +1,22 @@
|
|
|
1
1
|
.zx-alert__root {
|
|
2
2
|
--alert-tint: var(--color-info-soft);
|
|
3
3
|
--alert-ink: var(--color-base-content);
|
|
4
|
+
--alert-pad-y: var(--space-md);
|
|
5
|
+
--alert-pad-x: var(--space-lg);
|
|
4
6
|
}
|
|
5
7
|
|
|
6
8
|
.zx-alert__root {
|
|
7
|
-
display:
|
|
9
|
+
display: flex;
|
|
8
10
|
grid-template-columns: auto 1fr auto;
|
|
9
|
-
align-items:
|
|
10
|
-
gap: var(--space-sm)
|
|
11
|
+
align-items: stretch;
|
|
12
|
+
gap: var(--space-sm);
|
|
11
13
|
background: var(--alert-tint);
|
|
12
14
|
color: var(--color-base-content);
|
|
13
15
|
border-radius: var(--radius-box);
|
|
14
|
-
padding: var(--
|
|
16
|
+
padding: var(--alert-pad-y) var(--alert-pad-x);
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
position: relative;
|
|
19
|
+
box-sizing: border-box;
|
|
15
20
|
}
|
|
16
21
|
|
|
17
22
|
.zx-alert__icon {
|
|
@@ -21,6 +26,12 @@
|
|
|
21
26
|
color: var(--alert-ink);
|
|
22
27
|
font-size: var(--text-lg);
|
|
23
28
|
line-height: var(--leading-none);
|
|
29
|
+
position: absolute;
|
|
30
|
+
left: var(--alert-pad-x);
|
|
31
|
+
top: 0;
|
|
32
|
+
bottom: 0;
|
|
33
|
+
width: var(--text-xl);
|
|
34
|
+
justify-content: center;
|
|
24
35
|
}
|
|
25
36
|
|
|
26
37
|
.zx-alert__title {
|
|
@@ -41,12 +52,22 @@
|
|
|
41
52
|
appearance: none;
|
|
42
53
|
border: none;
|
|
43
54
|
background: transparent;
|
|
44
|
-
color:
|
|
55
|
+
color: var(--color-base-content);
|
|
45
56
|
border-radius: var(--radius-selector);
|
|
46
|
-
padding:
|
|
57
|
+
padding: 0;
|
|
47
58
|
line-height: var(--leading-none);
|
|
48
59
|
cursor: pointer;
|
|
49
60
|
transition: background var(--duration-fast) var(--ease-standard);
|
|
61
|
+
position: absolute;
|
|
62
|
+
top: calc(var(--alert-pad-y) - var(--space-2xs));
|
|
63
|
+
right: calc(var(--alert-pad-x) - var(--space-2xs));
|
|
64
|
+
font-size: var(--text-md);
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
box-sizing: border-box;
|
|
69
|
+
width: calc(var(--text-md) + var(--space-2xs) * 2);
|
|
70
|
+
height: calc(var(--text-md) + var(--space-2xs) * 2);
|
|
50
71
|
}
|
|
51
72
|
|
|
52
73
|
.zx-alert__close.zx-f-disabled {
|
|
@@ -55,8 +76,9 @@
|
|
|
55
76
|
}
|
|
56
77
|
|
|
57
78
|
.zx-alert__close.zx-f-focus-visible {
|
|
58
|
-
outline:
|
|
79
|
+
outline: none;
|
|
59
80
|
outline-offset: 2px;
|
|
81
|
+
box-shadow: 0 0 0 2px var(--alert-tint), 0 0 0 4px var(--color-base-content);
|
|
60
82
|
}
|
|
61
83
|
|
|
62
84
|
.zx-root .zx-alert__close.zx-f-pressed {
|
|
@@ -273,16 +295,36 @@
|
|
|
273
295
|
|
|
274
296
|
.zx-alert__root.zx-a-size-xs {
|
|
275
297
|
padding: var(--space-2xs) var(--space-sm);
|
|
298
|
+
--alert-pad-y: var(--space-2xs);
|
|
299
|
+
--alert-pad-x: var(--space-sm);
|
|
276
300
|
}
|
|
277
301
|
|
|
278
302
|
.zx-alert__root.zx-a-size-sm {
|
|
279
303
|
padding: var(--space-xs) var(--space-md);
|
|
304
|
+
--alert-pad-y: var(--space-xs);
|
|
305
|
+
--alert-pad-x: var(--space-md);
|
|
280
306
|
}
|
|
281
307
|
|
|
282
308
|
.zx-alert__root.zx-a-size-lg {
|
|
283
309
|
padding: var(--space-lg) var(--space-xl);
|
|
310
|
+
--alert-pad-y: var(--space-lg);
|
|
311
|
+
--alert-pad-x: var(--space-xl);
|
|
284
312
|
}
|
|
285
313
|
|
|
286
314
|
.zx-alert__root.zx-a-size-xl {
|
|
287
315
|
padding: var(--space-xl) var(--space-2xl);
|
|
316
|
+
--alert-pad-y: var(--space-xl);
|
|
317
|
+
--alert-pad-x: var(--space-2xl);
|
|
318
|
+
}
|
|
319
|
+
.zx-alert__title.zx-m-with-icon {
|
|
320
|
+
margin-left: calc(var(--text-xl) + var(--space-md));
|
|
321
|
+
}
|
|
322
|
+
.zx-alert__description.zx-m-with-icon {
|
|
323
|
+
margin-left: calc(var(--text-xl) + var(--space-md));
|
|
324
|
+
}
|
|
325
|
+
.zx-alert__title.zx-m-with-close {
|
|
326
|
+
margin-right: calc(var(--text-md) + var(--space-md));
|
|
327
|
+
}
|
|
328
|
+
.zx-alert__description.zx-m-with-close {
|
|
329
|
+
margin-right: calc(var(--text-md) + var(--space-md));
|
|
288
330
|
}
|
|
@@ -8,11 +8,13 @@
|
|
|
8
8
|
align-items: center;
|
|
9
9
|
vertical-align: middle;
|
|
10
10
|
isolation: isolate;
|
|
11
|
+
flex-direction: row;
|
|
12
|
+
width: max-content;
|
|
11
13
|
}
|
|
12
14
|
|
|
13
15
|
.zx-avatar-group__overflow {
|
|
14
16
|
position: relative;
|
|
15
|
-
display:
|
|
17
|
+
display: flex;
|
|
16
18
|
place-items: center;
|
|
17
19
|
box-sizing: border-box;
|
|
18
20
|
min-width: calc(var(--size-selector) * 10);
|
|
@@ -26,26 +28,36 @@
|
|
|
26
28
|
font-variant-numeric: tabular-nums;
|
|
27
29
|
white-space: nowrap;
|
|
28
30
|
user-select: none;
|
|
31
|
+
align-items: center;
|
|
32
|
+
justify-content: center;
|
|
33
|
+
flex-shrink: 0;
|
|
34
|
+
padding-left: var(--space-2xs);
|
|
35
|
+
padding-right: var(--space-2xs);
|
|
36
|
+
margin-left: calc((var(--size-selector) * 10) * -0.25);
|
|
29
37
|
}
|
|
30
38
|
|
|
31
39
|
.zx-avatar-group__overflow.zx-a-size-xs {
|
|
32
40
|
min-width: calc(var(--size-selector) * 6);
|
|
33
41
|
height: calc(var(--size-selector) * 6);
|
|
42
|
+
margin-left: calc((var(--size-selector) * 6) * -0.25);
|
|
34
43
|
}
|
|
35
44
|
|
|
36
45
|
.zx-avatar-group__overflow.zx-a-size-sm {
|
|
37
46
|
min-width: calc(var(--size-selector) * 8);
|
|
38
47
|
height: calc(var(--size-selector) * 8);
|
|
48
|
+
margin-left: calc((var(--size-selector) * 8) * -0.25);
|
|
39
49
|
}
|
|
40
50
|
|
|
41
51
|
.zx-avatar-group__overflow.zx-a-size-lg {
|
|
42
52
|
min-width: calc(var(--size-selector) * 12);
|
|
43
53
|
height: calc(var(--size-selector) * 12);
|
|
54
|
+
margin-left: calc((var(--size-selector) * 12) * -0.25);
|
|
44
55
|
}
|
|
45
56
|
|
|
46
57
|
.zx-avatar-group__overflow.zx-a-size-xl {
|
|
47
58
|
min-width: calc(var(--size-selector) * 16);
|
|
48
59
|
height: calc(var(--size-selector) * 16);
|
|
60
|
+
margin-left: calc((var(--size-selector) * 16) * -0.25);
|
|
49
61
|
}
|
|
50
62
|
|
|
51
63
|
.zx-avatar-group__root.zx-a-color-primary {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
.zx-avatar__root {
|
|
7
7
|
position: relative;
|
|
8
|
-
display:
|
|
8
|
+
display: flex;
|
|
9
9
|
width: calc(var(--size-selector) * 10);
|
|
10
10
|
height: calc(var(--size-selector) * 10);
|
|
11
11
|
border-radius: 9999px;
|
|
@@ -13,6 +13,10 @@
|
|
|
13
13
|
vertical-align: middle;
|
|
14
14
|
background: var(--color-base-200);
|
|
15
15
|
box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--avatar-ring);
|
|
16
|
+
flex-direction: row;
|
|
17
|
+
align-items: center;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
flex-shrink: 0;
|
|
16
20
|
}
|
|
17
21
|
|
|
18
22
|
.zx-avatar__root.zx-a-size-xs {
|
|
@@ -40,6 +44,10 @@
|
|
|
40
44
|
width: 100%;
|
|
41
45
|
height: 100%;
|
|
42
46
|
object-fit: cover;
|
|
47
|
+
position: absolute;
|
|
48
|
+
top: 0;
|
|
49
|
+
left: 0;
|
|
50
|
+
border-radius: 9999px;
|
|
43
51
|
}
|
|
44
52
|
|
|
45
53
|
.zx-avatar__fallback {
|
|
@@ -52,20 +60,52 @@
|
|
|
52
60
|
font-size: var(--avatar-text);
|
|
53
61
|
font-weight: var(--weight-semibold);
|
|
54
62
|
user-select: none;
|
|
63
|
+
position: absolute;
|
|
64
|
+
top: 0;
|
|
65
|
+
left: 0;
|
|
66
|
+
border-radius: 9999px;
|
|
67
|
+
display: flex;
|
|
68
|
+
align-items: center;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
text-align: center;
|
|
55
71
|
}
|
|
56
72
|
|
|
57
73
|
.zx-avatar__root.zx-a-shape-circle {
|
|
58
74
|
border-radius: 9999px;
|
|
59
75
|
}
|
|
60
76
|
|
|
77
|
+
.zx-avatar__image.zx-a-shape-circle {
|
|
78
|
+
border-radius: 9999px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.zx-avatar__fallback.zx-a-shape-circle {
|
|
82
|
+
border-radius: 9999px;
|
|
83
|
+
}
|
|
84
|
+
|
|
61
85
|
.zx-avatar__root.zx-a-shape-square {
|
|
62
86
|
border-radius: 0;
|
|
63
87
|
}
|
|
64
88
|
|
|
89
|
+
.zx-avatar__image.zx-a-shape-square {
|
|
90
|
+
border-radius: 0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.zx-avatar__fallback.zx-a-shape-square {
|
|
94
|
+
border-radius: 0;
|
|
95
|
+
}
|
|
96
|
+
|
|
65
97
|
.zx-avatar__root.zx-a-shape-rounded {
|
|
66
98
|
border-radius: var(--radius-selector);
|
|
67
99
|
}
|
|
68
100
|
|
|
101
|
+
.zx-avatar__image.zx-a-shape-rounded {
|
|
102
|
+
border-radius: var(--radius-selector);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.zx-avatar__fallback.zx-a-shape-rounded {
|
|
106
|
+
border-radius: var(--radius-selector);
|
|
107
|
+
}
|
|
108
|
+
|
|
69
109
|
.zx-avatar__root.zx-a-color-primary {
|
|
70
110
|
--avatar-ring: var(--color-primary);
|
|
71
111
|
}
|
|
@@ -113,3 +153,18 @@
|
|
|
113
153
|
.zx-avatar__root.zx-a-size-xl {
|
|
114
154
|
--avatar-text: var(--text-lg);
|
|
115
155
|
}
|
|
156
|
+
.zx-avatar__root.zx-m-stacked {
|
|
157
|
+
margin-left: calc(var(--size-selector) * -2.5);
|
|
158
|
+
}
|
|
159
|
+
.zx-avatar__root.zx-m-stacked.zx-a-size-xs {
|
|
160
|
+
margin-left: calc(var(--size-selector) * -1.5);
|
|
161
|
+
}
|
|
162
|
+
.zx-avatar__root.zx-m-stacked.zx-a-size-sm {
|
|
163
|
+
margin-left: calc(var(--size-selector) * -2);
|
|
164
|
+
}
|
|
165
|
+
.zx-avatar__root.zx-m-stacked.zx-a-size-lg {
|
|
166
|
+
margin-left: calc(var(--size-selector) * -3);
|
|
167
|
+
}
|
|
168
|
+
.zx-avatar__root.zx-m-stacked.zx-a-size-xl {
|
|
169
|
+
margin-left: calc(var(--size-selector) * -4);
|
|
170
|
+
}
|