@fluixi-ui/tokens 0.3.0 → 0.4.0-alpha.1
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/css/aspect-ratio.css +17 -0
- package/dist/css/bottom-sheet.css +116 -0
- package/dist/css/breadcrumb.css +55 -0
- package/dist/css/card.css +45 -0
- package/dist/css/drawer.css +125 -0
- package/dist/css/pagination.css +70 -0
- package/dist/css/sidenav.css +127 -0
- package/dist/css/stepper.css +116 -0
- package/dist/preset.css +8 -0
- package/dist/tokens.css +579 -0
- package/dist/tsconfig.lib.tsbuildinfo +1 -1
- package/package.json +6 -3
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* ----------------------------------------------------------------------------
|
|
3
|
+
* AspectRatio
|
|
4
|
+
* ------------------------------------------------------------------------- */
|
|
5
|
+
:where([data-aspect-ratio]) {
|
|
6
|
+
width: 100%;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
}
|
|
9
|
+
/* Stretch a single media/child to fill the ratio box. */
|
|
10
|
+
:where([data-aspect-ratio] > img),
|
|
11
|
+
:where([data-aspect-ratio] > video),
|
|
12
|
+
:where([data-aspect-ratio] > picture) {
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
object-fit: cover;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* ----------------------------------------------------------------------------
|
|
3
|
+
* BottomSheet
|
|
4
|
+
*
|
|
5
|
+
* Content carries role="dialog"; these rules override the centered dialog
|
|
6
|
+
* default (parts/overlays.css) via cascade order — bottom-sheet sorts after it.
|
|
7
|
+
* ------------------------------------------------------------------------- */
|
|
8
|
+
:where([data-bottom-sheet-overlay]) {
|
|
9
|
+
position: fixed;
|
|
10
|
+
inset: 0;
|
|
11
|
+
background: var(--flx-ui-color-overlay);
|
|
12
|
+
animation: flx-ui-fade var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:where([data-bottom-sheet-content]) {
|
|
16
|
+
position: fixed;
|
|
17
|
+
left: 0;
|
|
18
|
+
right: 0;
|
|
19
|
+
bottom: 0;
|
|
20
|
+
top: auto;
|
|
21
|
+
transform: none;
|
|
22
|
+
margin-inline: auto;
|
|
23
|
+
width: 100%;
|
|
24
|
+
max-width: 32rem;
|
|
25
|
+
height: var(--flx-ui-bottom-sheet-h, auto);
|
|
26
|
+
max-height: 95vh;
|
|
27
|
+
max-height: 95dvh;
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
background: var(--flx-ui-color-bg);
|
|
31
|
+
color: var(--flx-ui-color-fg);
|
|
32
|
+
/* Rounded top only — reset the bottom corners the shared [role=dialog] rule
|
|
33
|
+
rounds, so the sheet sits flush on the bottom edge. */
|
|
34
|
+
border-radius: var(--flx-ui-radius-xl) var(--flx-ui-radius-xl) 0 0;
|
|
35
|
+
box-shadow: var(--flx-ui-shadow-xl);
|
|
36
|
+
outline: none;
|
|
37
|
+
transition: height var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
|
|
38
|
+
animation: flx-ui-bottom-sheet-in var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
|
|
39
|
+
}
|
|
40
|
+
/* Full-bleed on small screens; clear the iOS home indicator. */
|
|
41
|
+
@media (max-width: 40rem) {
|
|
42
|
+
:where([data-bottom-sheet-content]) {
|
|
43
|
+
max-width: 100%;
|
|
44
|
+
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
/* Following the finger 1:1 — no snap transition while dragging. */
|
|
48
|
+
:where([data-bottom-sheet-content][data-dragging]) {
|
|
49
|
+
transition: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:where([data-bottom-sheet-handle]) {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
flex: 0 0 auto;
|
|
57
|
+
padding: var(--flx-ui-space-3) 0 var(--flx-ui-space-2);
|
|
58
|
+
cursor: grab;
|
|
59
|
+
touch-action: none;
|
|
60
|
+
}
|
|
61
|
+
:where([data-bottom-sheet-handle])::before {
|
|
62
|
+
content: '';
|
|
63
|
+
width: 2.25rem;
|
|
64
|
+
height: 0.25rem;
|
|
65
|
+
border-radius: var(--flx-ui-radius-full);
|
|
66
|
+
background: var(--flx-ui-color-border);
|
|
67
|
+
}
|
|
68
|
+
:where([data-bottom-sheet-handle]:active) {
|
|
69
|
+
cursor: grabbing;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
:where([data-bottom-sheet-header]) {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: flex-start;
|
|
75
|
+
justify-content: space-between;
|
|
76
|
+
gap: var(--flx-ui-space-3);
|
|
77
|
+
padding: var(--flx-ui-space-2) var(--flx-ui-space-5) var(--flx-ui-space-4);
|
|
78
|
+
}
|
|
79
|
+
:where([data-bottom-sheet-title]) {
|
|
80
|
+
margin: 0;
|
|
81
|
+
font-size: var(--flx-ui-font-size-lg);
|
|
82
|
+
font-weight: var(--flx-ui-font-weight-semibold);
|
|
83
|
+
line-height: var(--flx-ui-leading-tight);
|
|
84
|
+
color: var(--flx-ui-color-fg);
|
|
85
|
+
}
|
|
86
|
+
:where([data-bottom-sheet-description]) {
|
|
87
|
+
margin: var(--flx-ui-space-1) 0 0;
|
|
88
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
89
|
+
color: var(--flx-ui-color-fg-muted);
|
|
90
|
+
}
|
|
91
|
+
:where([data-bottom-sheet-body]) {
|
|
92
|
+
flex: 1;
|
|
93
|
+
min-height: 0;
|
|
94
|
+
overflow-y: auto;
|
|
95
|
+
padding: 0 var(--flx-ui-space-5) var(--flx-ui-space-5);
|
|
96
|
+
}
|
|
97
|
+
:where([data-bottom-sheet-footer]) {
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: flex-end;
|
|
101
|
+
gap: var(--flx-ui-space-2);
|
|
102
|
+
padding: var(--flx-ui-space-4) var(--flx-ui-space-5);
|
|
103
|
+
border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@keyframes flx-ui-bottom-sheet-in {
|
|
107
|
+
from { transform: translateY(100%); }
|
|
108
|
+
to { transform: translateY(0); }
|
|
109
|
+
}
|
|
110
|
+
@media (prefers-reduced-motion: reduce) {
|
|
111
|
+
:where([data-bottom-sheet-overlay]),
|
|
112
|
+
:where([data-bottom-sheet-content]) {
|
|
113
|
+
animation: none;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* ----------------------------------------------------------------------------
|
|
3
|
+
* Breadcrumb
|
|
4
|
+
* ------------------------------------------------------------------------- */
|
|
5
|
+
:where([data-breadcrumb-list]) {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-wrap: wrap;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: var(--flx-ui-space-2);
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
list-style: none;
|
|
13
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
14
|
+
color: var(--flx-ui-color-fg-muted);
|
|
15
|
+
}
|
|
16
|
+
:where([data-breadcrumb-item]) {
|
|
17
|
+
display: inline-flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
}
|
|
20
|
+
:where([data-breadcrumb-link]) {
|
|
21
|
+
color: var(--flx-ui-color-fg-muted);
|
|
22
|
+
text-decoration: none;
|
|
23
|
+
border-radius: var(--flx-ui-radius-sm);
|
|
24
|
+
transition: color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
|
|
25
|
+
}
|
|
26
|
+
:where([data-breadcrumb-link]:hover) {
|
|
27
|
+
color: var(--flx-ui-color-fg);
|
|
28
|
+
}
|
|
29
|
+
:where([data-breadcrumb-link]:focus-visible) {
|
|
30
|
+
outline: var(--flx-ui-ctl-ring);
|
|
31
|
+
outline-offset: 2px;
|
|
32
|
+
}
|
|
33
|
+
:where([data-breadcrumb-page]) {
|
|
34
|
+
color: var(--flx-ui-color-fg);
|
|
35
|
+
font-weight: var(--flx-ui-font-weight-medium);
|
|
36
|
+
}
|
|
37
|
+
:where([data-breadcrumb-separator]) {
|
|
38
|
+
display: inline-flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
color: var(--flx-ui-color-fg-subtle);
|
|
41
|
+
user-select: none;
|
|
42
|
+
}
|
|
43
|
+
:where([data-breadcrumb-separator] svg) {
|
|
44
|
+
width: 0.875em;
|
|
45
|
+
height: 0.875em;
|
|
46
|
+
}
|
|
47
|
+
:where([data-breadcrumb-ellipsis]) {
|
|
48
|
+
display: inline-flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
width: 1.25rem;
|
|
52
|
+
height: 1rem;
|
|
53
|
+
color: var(--flx-ui-color-fg-muted);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* ----------------------------------------------------------------------------
|
|
3
|
+
* Card
|
|
4
|
+
* ------------------------------------------------------------------------- */
|
|
5
|
+
:where([data-card]) {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
background: var(--flx-ui-color-bg);
|
|
9
|
+
color: var(--flx-ui-color-fg);
|
|
10
|
+
border: 1px solid var(--flx-ui-color-border);
|
|
11
|
+
border-radius: var(--flx-ui-radius-lg);
|
|
12
|
+
box-shadow: var(--flx-ui-shadow-sm);
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
}
|
|
15
|
+
:where([data-card-header]) {
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
gap: var(--flx-ui-space-1);
|
|
19
|
+
padding: var(--flx-ui-space-5) var(--flx-ui-space-5) 0;
|
|
20
|
+
}
|
|
21
|
+
:where([data-card-title]) {
|
|
22
|
+
margin: 0;
|
|
23
|
+
font-size: var(--flx-ui-font-size-lg);
|
|
24
|
+
font-weight: var(--flx-ui-font-weight-semibold);
|
|
25
|
+
line-height: var(--flx-ui-leading-tight);
|
|
26
|
+
color: var(--flx-ui-color-fg);
|
|
27
|
+
}
|
|
28
|
+
:where([data-card-description]) {
|
|
29
|
+
margin: 0;
|
|
30
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
31
|
+
color: var(--flx-ui-color-fg-muted);
|
|
32
|
+
}
|
|
33
|
+
:where([data-card-body]) {
|
|
34
|
+
padding: var(--flx-ui-space-5);
|
|
35
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
36
|
+
color: var(--flx-ui-color-fg);
|
|
37
|
+
}
|
|
38
|
+
:where([data-card-footer]) {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: var(--flx-ui-space-2);
|
|
42
|
+
padding: 0 var(--flx-ui-space-5) var(--flx-ui-space-5);
|
|
43
|
+
margin-top: auto;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* ----------------------------------------------------------------------------
|
|
3
|
+
* Drawer (off-canvas sheet)
|
|
4
|
+
*
|
|
5
|
+
* The content carries role="dialog"; these rules override the centered dialog
|
|
6
|
+
* default (parts/overlays.css) via cascade order — drawer.css sorts after it.
|
|
7
|
+
* ------------------------------------------------------------------------- */
|
|
8
|
+
:where([data-drawer-overlay]) {
|
|
9
|
+
position: fixed;
|
|
10
|
+
inset: 0;
|
|
11
|
+
background: var(--flx-ui-color-overlay);
|
|
12
|
+
animation: flx-ui-fade var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:where([data-drawer-content]) {
|
|
16
|
+
position: fixed;
|
|
17
|
+
top: auto;
|
|
18
|
+
left: auto;
|
|
19
|
+
transform: none;
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
background: var(--flx-ui-color-bg);
|
|
23
|
+
color: var(--flx-ui-color-fg);
|
|
24
|
+
box-shadow: var(--flx-ui-shadow-xl);
|
|
25
|
+
outline: none;
|
|
26
|
+
/* Flush to the edge — reset the radius the shared [role=dialog] rule applies. */
|
|
27
|
+
border-radius: 0;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Horizontal drawers — full height, fixed width. */
|
|
31
|
+
:where([data-drawer-content][data-side='right']),
|
|
32
|
+
:where([data-drawer-content][data-side='left']) {
|
|
33
|
+
top: 0;
|
|
34
|
+
bottom: 0;
|
|
35
|
+
height: 100%;
|
|
36
|
+
width: min(24rem, calc(100vw - var(--flx-ui-space-8)));
|
|
37
|
+
}
|
|
38
|
+
:where([data-drawer-content][data-side='right']) {
|
|
39
|
+
right: 0;
|
|
40
|
+
border-left: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
|
|
41
|
+
animation: flx-ui-drawer-in-right var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
|
|
42
|
+
}
|
|
43
|
+
:where([data-drawer-content][data-side='left']) {
|
|
44
|
+
left: 0;
|
|
45
|
+
border-right: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
|
|
46
|
+
animation: flx-ui-drawer-in-left var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Vertical drawers — full width, content-sized height (capped). */
|
|
50
|
+
:where([data-drawer-content][data-side='top']),
|
|
51
|
+
:where([data-drawer-content][data-side='bottom']) {
|
|
52
|
+
left: 0;
|
|
53
|
+
right: 0;
|
|
54
|
+
width: 100%;
|
|
55
|
+
max-height: min(85vh, 32rem);
|
|
56
|
+
}
|
|
57
|
+
:where([data-drawer-content][data-side='top']) {
|
|
58
|
+
top: 0;
|
|
59
|
+
border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
|
|
60
|
+
animation: flx-ui-drawer-in-top var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
|
|
61
|
+
}
|
|
62
|
+
:where([data-drawer-content][data-side='bottom']) {
|
|
63
|
+
bottom: 0;
|
|
64
|
+
border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
|
|
65
|
+
animation: flx-ui-drawer-in-bottom var(--flx-ui-duration-normal) var(--flx-ui-ease-emphasized);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
:where([data-drawer-header]) {
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: flex-start;
|
|
71
|
+
justify-content: space-between;
|
|
72
|
+
gap: var(--flx-ui-space-3);
|
|
73
|
+
padding: var(--flx-ui-space-5);
|
|
74
|
+
border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
|
|
75
|
+
}
|
|
76
|
+
:where([data-drawer-title]) {
|
|
77
|
+
margin: 0;
|
|
78
|
+
font-size: var(--flx-ui-font-size-lg);
|
|
79
|
+
font-weight: var(--flx-ui-font-weight-semibold);
|
|
80
|
+
line-height: var(--flx-ui-leading-tight);
|
|
81
|
+
color: var(--flx-ui-color-fg);
|
|
82
|
+
}
|
|
83
|
+
:where([data-drawer-description]) {
|
|
84
|
+
margin: var(--flx-ui-space-1) 0 0;
|
|
85
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
86
|
+
color: var(--flx-ui-color-fg-muted);
|
|
87
|
+
}
|
|
88
|
+
:where([data-drawer-body]) {
|
|
89
|
+
flex: 1;
|
|
90
|
+
min-height: 0;
|
|
91
|
+
overflow-y: auto;
|
|
92
|
+
padding: var(--flx-ui-space-5);
|
|
93
|
+
}
|
|
94
|
+
:where([data-drawer-footer]) {
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: flex-end;
|
|
98
|
+
gap: var(--flx-ui-space-2);
|
|
99
|
+
padding: var(--flx-ui-space-5);
|
|
100
|
+
border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@keyframes flx-ui-drawer-in-right {
|
|
104
|
+
from { transform: translateX(100%); }
|
|
105
|
+
to { transform: translateX(0); }
|
|
106
|
+
}
|
|
107
|
+
@keyframes flx-ui-drawer-in-left {
|
|
108
|
+
from { transform: translateX(-100%); }
|
|
109
|
+
to { transform: translateX(0); }
|
|
110
|
+
}
|
|
111
|
+
@keyframes flx-ui-drawer-in-top {
|
|
112
|
+
from { transform: translateY(-100%); }
|
|
113
|
+
to { transform: translateY(0); }
|
|
114
|
+
}
|
|
115
|
+
@keyframes flx-ui-drawer-in-bottom {
|
|
116
|
+
from { transform: translateY(100%); }
|
|
117
|
+
to { transform: translateY(0); }
|
|
118
|
+
}
|
|
119
|
+
@media (prefers-reduced-motion: reduce) {
|
|
120
|
+
:where([data-drawer-overlay]),
|
|
121
|
+
:where([data-drawer-content]) {
|
|
122
|
+
animation: none;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* ----------------------------------------------------------------------------
|
|
3
|
+
* Pagination
|
|
4
|
+
* ------------------------------------------------------------------------- */
|
|
5
|
+
:where([data-pagination-list]) {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-wrap: wrap;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: var(--flx-ui-space-1);
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
list-style: none;
|
|
13
|
+
}
|
|
14
|
+
:where([data-pagination-item]) {
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
}
|
|
17
|
+
:where([data-pagination-page]),
|
|
18
|
+
:where([data-pagination-prev]),
|
|
19
|
+
:where([data-pagination-next]) {
|
|
20
|
+
display: inline-flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
justify-content: center;
|
|
23
|
+
min-width: 2rem;
|
|
24
|
+
height: 2rem;
|
|
25
|
+
padding: 0 var(--flx-ui-space-2);
|
|
26
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
27
|
+
font-family: inherit;
|
|
28
|
+
color: var(--flx-ui-color-fg-muted);
|
|
29
|
+
background: transparent;
|
|
30
|
+
border: 1px solid transparent;
|
|
31
|
+
border-radius: var(--flx-ui-radius-md);
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
user-select: none;
|
|
34
|
+
transition: background var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
|
|
35
|
+
color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
|
|
36
|
+
border-color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
|
|
37
|
+
}
|
|
38
|
+
:where([data-pagination-page]:hover:not([disabled])),
|
|
39
|
+
:where([data-pagination-prev]:hover:not([disabled])),
|
|
40
|
+
:where([data-pagination-next]:hover:not([disabled])) {
|
|
41
|
+
background: var(--flx-ui-color-bg-subtle);
|
|
42
|
+
color: var(--flx-ui-color-fg);
|
|
43
|
+
}
|
|
44
|
+
:where([data-pagination-page][data-current]) {
|
|
45
|
+
background: var(--flx-ui-color-primary);
|
|
46
|
+
color: var(--flx-ui-color-primary-fg);
|
|
47
|
+
border-color: var(--flx-ui-color-primary);
|
|
48
|
+
}
|
|
49
|
+
:where([data-pagination-page]:focus-visible),
|
|
50
|
+
:where([data-pagination-prev]:focus-visible),
|
|
51
|
+
:where([data-pagination-next]:focus-visible) {
|
|
52
|
+
outline: var(--flx-ui-ctl-ring);
|
|
53
|
+
outline-offset: 2px;
|
|
54
|
+
}
|
|
55
|
+
:where([data-pagination-page][disabled]),
|
|
56
|
+
:where([data-pagination-prev][disabled]),
|
|
57
|
+
:where([data-pagination-next][disabled]) {
|
|
58
|
+
color: var(--flx-ui-color-fg-subtle);
|
|
59
|
+
cursor: not-allowed;
|
|
60
|
+
}
|
|
61
|
+
:where([data-pagination-ellipsis]) {
|
|
62
|
+
display: inline-flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
min-width: 2rem;
|
|
66
|
+
height: 2rem;
|
|
67
|
+
color: var(--flx-ui-color-fg-muted);
|
|
68
|
+
user-select: none;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* ----------------------------------------------------------------------------
|
|
3
|
+
* Sidenav (persistent navigation rail)
|
|
4
|
+
* ------------------------------------------------------------------------- */
|
|
5
|
+
:where([data-sidenav]) {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
width: 16rem;
|
|
9
|
+
height: 100%;
|
|
10
|
+
background: var(--flx-ui-color-bg);
|
|
11
|
+
color: var(--flx-ui-color-fg);
|
|
12
|
+
transition: width var(--flx-ui-duration-normal) var(--flx-ui-ease-standard);
|
|
13
|
+
}
|
|
14
|
+
:where([data-sidenav][data-side='left']) {
|
|
15
|
+
border-right: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
|
|
16
|
+
}
|
|
17
|
+
:where([data-sidenav][data-side='right']) {
|
|
18
|
+
border-left: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
|
|
19
|
+
}
|
|
20
|
+
:where([data-sidenav][data-collapsed]) {
|
|
21
|
+
width: 3.75rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:where([data-sidenav-header]) {
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
gap: var(--flx-ui-space-2);
|
|
28
|
+
padding: var(--flx-ui-space-4);
|
|
29
|
+
font-weight: var(--flx-ui-font-weight-semibold);
|
|
30
|
+
min-height: 3.5rem;
|
|
31
|
+
}
|
|
32
|
+
:where([data-sidenav-footer]) {
|
|
33
|
+
margin-top: auto;
|
|
34
|
+
padding: var(--flx-ui-space-3);
|
|
35
|
+
border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
:where([data-sidenav-nav]) {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
gap: var(--flx-ui-space-1);
|
|
42
|
+
flex: 1;
|
|
43
|
+
min-height: 0;
|
|
44
|
+
overflow-y: auto;
|
|
45
|
+
margin: 0;
|
|
46
|
+
padding: var(--flx-ui-space-2);
|
|
47
|
+
list-style: none;
|
|
48
|
+
}
|
|
49
|
+
:where([data-sidenav-item]) {
|
|
50
|
+
display: block;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
:where([data-sidenav-link]) {
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
gap: var(--flx-ui-space-3);
|
|
57
|
+
padding: var(--flx-ui-space-2) var(--flx-ui-space-3);
|
|
58
|
+
border-radius: var(--flx-ui-radius-md);
|
|
59
|
+
color: var(--flx-ui-color-fg-muted);
|
|
60
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
61
|
+
font-weight: var(--flx-ui-font-weight-medium);
|
|
62
|
+
text-decoration: none;
|
|
63
|
+
white-space: nowrap;
|
|
64
|
+
overflow: hidden;
|
|
65
|
+
transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
|
|
66
|
+
color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
|
|
67
|
+
}
|
|
68
|
+
:where([data-sidenav-link]:hover) {
|
|
69
|
+
background: var(--flx-ui-color-bg-subtle);
|
|
70
|
+
color: var(--flx-ui-color-fg);
|
|
71
|
+
}
|
|
72
|
+
:where([data-sidenav-link][data-active]) {
|
|
73
|
+
background: var(--flx-ui-color-primary-subtle, var(--flx-ui-color-bg-subtle));
|
|
74
|
+
color: var(--flx-ui-color-primary);
|
|
75
|
+
}
|
|
76
|
+
:where([data-sidenav-link]:focus-visible) {
|
|
77
|
+
outline: var(--flx-ui-ctl-ring);
|
|
78
|
+
outline-offset: -2px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
:where([data-sidenav-group]) {
|
|
82
|
+
display: flex;
|
|
83
|
+
flex-direction: column;
|
|
84
|
+
gap: var(--flx-ui-space-1);
|
|
85
|
+
margin-top: var(--flx-ui-space-3);
|
|
86
|
+
}
|
|
87
|
+
:where([data-sidenav-group-label]) {
|
|
88
|
+
padding: var(--flx-ui-space-1) var(--flx-ui-space-3);
|
|
89
|
+
font-size: var(--flx-ui-font-size-xs);
|
|
90
|
+
font-weight: var(--flx-ui-font-weight-medium);
|
|
91
|
+
text-transform: uppercase;
|
|
92
|
+
letter-spacing: 0.04em;
|
|
93
|
+
color: var(--flx-ui-color-fg-subtle);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
:where([data-sidenav-trigger]) {
|
|
97
|
+
display: inline-flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
justify-content: center;
|
|
100
|
+
width: 2rem;
|
|
101
|
+
height: 2rem;
|
|
102
|
+
padding: 0;
|
|
103
|
+
background: transparent;
|
|
104
|
+
border: none;
|
|
105
|
+
border-radius: var(--flx-ui-radius-md);
|
|
106
|
+
color: var(--flx-ui-color-fg-muted);
|
|
107
|
+
cursor: pointer;
|
|
108
|
+
}
|
|
109
|
+
:where([data-sidenav-trigger]:hover) {
|
|
110
|
+
background: var(--flx-ui-color-bg-subtle);
|
|
111
|
+
color: var(--flx-ui-color-fg);
|
|
112
|
+
}
|
|
113
|
+
:where([data-sidenav-trigger]:focus-visible) {
|
|
114
|
+
outline: var(--flx-ui-ctl-ring);
|
|
115
|
+
outline-offset: 2px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Collapsed rail: hide text labels, center the icons. */
|
|
119
|
+
:where([data-sidenav][data-collapsed] [data-sidenav-label]),
|
|
120
|
+
:where([data-sidenav][data-collapsed] [data-sidenav-group-label]) {
|
|
121
|
+
display: none;
|
|
122
|
+
}
|
|
123
|
+
:where([data-sidenav][data-collapsed] [data-sidenav-link]) {
|
|
124
|
+
justify-content: center;
|
|
125
|
+
padding-inline: 0;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
@layer flx.components {
|
|
2
|
+
/* ----------------------------------------------------------------------------
|
|
3
|
+
* Stepper
|
|
4
|
+
* ------------------------------------------------------------------------- */
|
|
5
|
+
:where([data-stepper]) {
|
|
6
|
+
display: flex;
|
|
7
|
+
margin: 0;
|
|
8
|
+
padding: 0;
|
|
9
|
+
list-style: none;
|
|
10
|
+
}
|
|
11
|
+
:where([data-stepper][data-orientation='horizontal']) {
|
|
12
|
+
flex-direction: row;
|
|
13
|
+
align-items: center;
|
|
14
|
+
}
|
|
15
|
+
:where([data-stepper][data-orientation='vertical']) {
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
align-items: stretch;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:where([data-stepper-item]) {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
flex: 1;
|
|
24
|
+
min-width: 0;
|
|
25
|
+
}
|
|
26
|
+
:where([data-stepper-item]:last-child) {
|
|
27
|
+
flex: 0 0 auto;
|
|
28
|
+
}
|
|
29
|
+
:where([data-stepper][data-orientation='vertical'] [data-stepper-item]) {
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
align-items: flex-start;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:where([data-stepper-trigger]) {
|
|
35
|
+
display: inline-flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
gap: var(--flx-ui-space-2);
|
|
38
|
+
padding: var(--flx-ui-space-1);
|
|
39
|
+
background: transparent;
|
|
40
|
+
border: none;
|
|
41
|
+
border-radius: var(--flx-ui-radius-md);
|
|
42
|
+
font-family: inherit;
|
|
43
|
+
color: inherit;
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
text-align: start;
|
|
46
|
+
}
|
|
47
|
+
:where([data-stepper-trigger][disabled]) {
|
|
48
|
+
cursor: default;
|
|
49
|
+
}
|
|
50
|
+
:where([data-stepper-trigger]:focus-visible) {
|
|
51
|
+
outline: var(--flx-ui-ctl-ring);
|
|
52
|
+
outline-offset: 2px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
:where([data-stepper-indicator]) {
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
justify-content: center;
|
|
59
|
+
flex: 0 0 auto;
|
|
60
|
+
width: 1.75rem;
|
|
61
|
+
height: 1.75rem;
|
|
62
|
+
border-radius: var(--flx-ui-radius-full);
|
|
63
|
+
border: 2px solid var(--flx-ui-color-border);
|
|
64
|
+
background: var(--flx-ui-color-bg);
|
|
65
|
+
color: var(--flx-ui-color-fg-muted);
|
|
66
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
67
|
+
font-weight: var(--flx-ui-font-weight-medium);
|
|
68
|
+
line-height: 1;
|
|
69
|
+
transition: background var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
|
|
70
|
+
border-color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard),
|
|
71
|
+
color var(--flx-ui-duration-fast) var(--flx-ui-easing-standard);
|
|
72
|
+
}
|
|
73
|
+
:where([data-stepper-indicator][data-state='active']) {
|
|
74
|
+
border-color: var(--flx-ui-color-primary);
|
|
75
|
+
color: var(--flx-ui-color-primary);
|
|
76
|
+
}
|
|
77
|
+
:where([data-stepper-indicator][data-state='complete']) {
|
|
78
|
+
background: var(--flx-ui-color-primary);
|
|
79
|
+
border-color: var(--flx-ui-color-primary);
|
|
80
|
+
color: var(--flx-ui-color-primary-fg);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
:where([data-stepper-title]) {
|
|
84
|
+
font-size: var(--flx-ui-font-size-sm);
|
|
85
|
+
font-weight: var(--flx-ui-font-weight-medium);
|
|
86
|
+
color: var(--flx-ui-color-fg-muted);
|
|
87
|
+
}
|
|
88
|
+
:where([data-stepper-title][data-state='active']),
|
|
89
|
+
:where([data-stepper-title][data-state='complete']) {
|
|
90
|
+
color: var(--flx-ui-color-fg);
|
|
91
|
+
}
|
|
92
|
+
:where([data-stepper-description]) {
|
|
93
|
+
display: block;
|
|
94
|
+
font-size: var(--flx-ui-font-size-xs);
|
|
95
|
+
color: var(--flx-ui-color-fg-subtle);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
:where([data-stepper-separator]) {
|
|
99
|
+
flex: 1;
|
|
100
|
+
min-width: var(--flx-ui-space-4);
|
|
101
|
+
align-self: center;
|
|
102
|
+
margin: 0 var(--flx-ui-space-2);
|
|
103
|
+
background: var(--flx-ui-color-border);
|
|
104
|
+
}
|
|
105
|
+
:where([data-stepper][data-orientation='horizontal'] [data-stepper-separator]) {
|
|
106
|
+
height: 2px;
|
|
107
|
+
}
|
|
108
|
+
:where([data-stepper][data-orientation='vertical'] [data-stepper-separator]) {
|
|
109
|
+
width: 2px;
|
|
110
|
+
min-height: var(--flx-ui-space-4);
|
|
111
|
+
margin: var(--flx-ui-space-1) 0 var(--flx-ui-space-1) 0.875rem;
|
|
112
|
+
}
|
|
113
|
+
:where([data-stepper-separator][data-state='complete']) {
|
|
114
|
+
background: var(--flx-ui-color-primary);
|
|
115
|
+
}
|
|
116
|
+
}
|
package/dist/preset.css
CHANGED
|
@@ -30,12 +30,20 @@
|
|
|
30
30
|
@import './css/progress.css';
|
|
31
31
|
@import './css/spinner.css';
|
|
32
32
|
@import './css/separator.css';
|
|
33
|
+
@import './css/breadcrumb.css';
|
|
34
|
+
@import './css/pagination.css';
|
|
35
|
+
@import './css/card.css';
|
|
36
|
+
@import './css/aspect-ratio.css';
|
|
37
|
+
@import './css/stepper.css';
|
|
33
38
|
@import './css/select-combobox.css';
|
|
34
39
|
@import './css/parts/listbox.css';
|
|
35
40
|
@import './css/parts/overlays.css';
|
|
41
|
+
@import './css/drawer.css';
|
|
42
|
+
@import './css/bottom-sheet.css';
|
|
36
43
|
@import './css/parts/menu.css';
|
|
37
44
|
@import './css/menubar.css';
|
|
38
45
|
@import './css/navigation-menu.css';
|
|
46
|
+
@import './css/sidenav.css';
|
|
39
47
|
@import './css/toast.css';
|
|
40
48
|
@import './css/command.css';
|
|
41
49
|
@import './css/tooltip.css';
|