@aortl/admin-css 0.1.0 → 0.3.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/admin.css +228 -0
- package/dist/admin.min.css +1 -1
- package/dist/admin.scoped.css +231 -0
- package/dist/admin.scoped.min.css +3 -2
- package/package.json +4 -4
- package/src/components/dialog.css +91 -0
- package/src/components/index.css +2 -0
- package/src/components/tooltip.css +115 -0
- /package/src/{index.css → admin.css} +0 -0
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.dialog {
|
|
3
|
+
@apply m-auto p-0
|
|
4
|
+
bg-surface text-text
|
|
5
|
+
border border-border
|
|
6
|
+
rounded-xl
|
|
7
|
+
shadow-lg
|
|
8
|
+
overflow-hidden
|
|
9
|
+
flex-col;
|
|
10
|
+
width: calc(100% - 2rem);
|
|
11
|
+
max-width: 32rem;
|
|
12
|
+
max-height: calc(100dvh - 2rem);
|
|
13
|
+
opacity: 1;
|
|
14
|
+
transform: translateY(0) scale(1);
|
|
15
|
+
transition:
|
|
16
|
+
display 150ms allow-discrete,
|
|
17
|
+
overlay 150ms allow-discrete,
|
|
18
|
+
opacity 150ms ease-out,
|
|
19
|
+
transform 150ms ease-out;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* `display: flex` only when open — without this gate, our flex rule would
|
|
23
|
+
override the UA `dialog:not([open]) { display: none }` and the dialog
|
|
24
|
+
would render in-flow before showModal() was ever called. */
|
|
25
|
+
.dialog[open] {
|
|
26
|
+
display: flex;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.dialog::backdrop {
|
|
30
|
+
background: rgb(0 0 0 / 0.4);
|
|
31
|
+
transition:
|
|
32
|
+
display 150ms allow-discrete,
|
|
33
|
+
overlay 150ms allow-discrete,
|
|
34
|
+
background 150ms ease-out;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Entry — animate from these values up to the open state. */
|
|
38
|
+
@starting-style {
|
|
39
|
+
.dialog[open] {
|
|
40
|
+
opacity: 0;
|
|
41
|
+
transform: translateY(-0.5rem) scale(0.98);
|
|
42
|
+
}
|
|
43
|
+
.dialog[open]::backdrop {
|
|
44
|
+
background: rgb(0 0 0 / 0);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Sizes */
|
|
49
|
+
.dialog-sm {
|
|
50
|
+
max-width: 24rem;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.dialog-lg {
|
|
54
|
+
max-width: 48rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Subparts */
|
|
58
|
+
.dialog-header {
|
|
59
|
+
@apply flex items-start gap-3 px-5 pt-5 pb-3;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.dialog-title {
|
|
63
|
+
@apply flex-1 flex items-center gap-2 text-lg font-semibold leading-tight m-0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.dialog-description {
|
|
67
|
+
@apply px-5 -mt-2 mb-3 text-sm text-text-muted;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.dialog-body {
|
|
71
|
+
@apply px-5 py-3 overflow-y-auto flex flex-col gap-3;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.dialog-footer {
|
|
75
|
+
@apply flex flex-wrap items-center justify-end gap-2
|
|
76
|
+
px-5 py-3
|
|
77
|
+
border-t border-border
|
|
78
|
+
bg-surface-muted;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.dialog-close {
|
|
82
|
+
@apply inline-flex items-center justify-center
|
|
83
|
+
size-7 shrink-0
|
|
84
|
+
rounded-md text-text-muted
|
|
85
|
+
bg-transparent
|
|
86
|
+
hover:bg-surface-strong hover:text-text
|
|
87
|
+
cursor-pointer
|
|
88
|
+
transition-colors duration-150
|
|
89
|
+
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
|
|
90
|
+
}
|
|
91
|
+
}
|
package/src/components/index.css
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
@import "./switch.css";
|
|
18
18
|
@import "./select.css";
|
|
19
19
|
@import "./card.css";
|
|
20
|
+
@import "./dialog.css";
|
|
20
21
|
@import "./field.css";
|
|
21
22
|
@import "./file-input.css";
|
|
22
23
|
@import "./footer.css";
|
|
@@ -25,3 +26,4 @@
|
|
|
25
26
|
@import "./sidebar.css";
|
|
26
27
|
@import "./tabs.css";
|
|
27
28
|
@import "./table.css";
|
|
29
|
+
@import "./tooltip.css";
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
/*
|
|
3
|
+
* Two paths, one class.
|
|
4
|
+
*
|
|
5
|
+
* React: Base UI portals the popup to <body> and anchors it with floating-ui;
|
|
6
|
+
* the `.tooltip` class only carries paint + per-side enter/exit transitions
|
|
7
|
+
* driven by Base UI's `data-side` / `data-starting-style` / `data-ending-style`
|
|
8
|
+
* attributes.
|
|
9
|
+
*
|
|
10
|
+
* Vanilla: `.tooltip-wrap` is a `position: relative` parent that reveals a
|
|
11
|
+
* nested `.tooltip` on `:hover` / `:focus-within`. No portal, no JS — works in
|
|
12
|
+
* every modern browser today. The platform-native future is `interesttarget` +
|
|
13
|
+
* `popover="hint"`, but cross-browser support is still rolling out.
|
|
14
|
+
*/
|
|
15
|
+
.tooltip {
|
|
16
|
+
@apply inline-block max-w-xs px-2 py-1
|
|
17
|
+
rounded-md
|
|
18
|
+
text-xs leading-snug font-medium
|
|
19
|
+
bg-text text-surface
|
|
20
|
+
shadow-md
|
|
21
|
+
pointer-events-none;
|
|
22
|
+
text-wrap: balance;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Sizes */
|
|
26
|
+
.tooltip-sm {
|
|
27
|
+
@apply px-1.5 py-0.5;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* React (portalled) enter/exit — Base UI sets these data attrs on Popup.
|
|
31
|
+
150ms ease, matching Dialog. */
|
|
32
|
+
.tooltip {
|
|
33
|
+
transition:
|
|
34
|
+
opacity 150ms ease-out,
|
|
35
|
+
transform 150ms ease-out;
|
|
36
|
+
}
|
|
37
|
+
.tooltip[data-starting-style],
|
|
38
|
+
.tooltip[data-ending-style] {
|
|
39
|
+
opacity: 0;
|
|
40
|
+
}
|
|
41
|
+
.tooltip[data-side="top"][data-starting-style],
|
|
42
|
+
.tooltip[data-side="top"][data-ending-style] {
|
|
43
|
+
transform: translateY(0.25rem);
|
|
44
|
+
}
|
|
45
|
+
.tooltip[data-side="bottom"][data-starting-style],
|
|
46
|
+
.tooltip[data-side="bottom"][data-ending-style] {
|
|
47
|
+
transform: translateY(-0.25rem);
|
|
48
|
+
}
|
|
49
|
+
.tooltip[data-side="left"][data-starting-style],
|
|
50
|
+
.tooltip[data-side="left"][data-ending-style] {
|
|
51
|
+
transform: translateX(0.25rem);
|
|
52
|
+
}
|
|
53
|
+
.tooltip[data-side="right"][data-starting-style],
|
|
54
|
+
.tooltip[data-side="right"][data-ending-style] {
|
|
55
|
+
transform: translateX(-0.25rem);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Vanilla CSS-only path. */
|
|
59
|
+
.tooltip-wrap {
|
|
60
|
+
@apply relative inline-flex items-center;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Default position: top, centered. Equivalent to .tooltip-wrap-top. */
|
|
64
|
+
.tooltip-wrap > .tooltip {
|
|
65
|
+
@apply absolute opacity-0 invisible;
|
|
66
|
+
left: 50%;
|
|
67
|
+
bottom: 100%;
|
|
68
|
+
margin-bottom: calc(var(--spacing) * 1.5);
|
|
69
|
+
transform: translateX(-50%);
|
|
70
|
+
transition:
|
|
71
|
+
opacity 150ms ease-out 0ms,
|
|
72
|
+
visibility 0s linear 150ms;
|
|
73
|
+
}
|
|
74
|
+
.tooltip-wrap-bottom > .tooltip {
|
|
75
|
+
top: 100%;
|
|
76
|
+
right: auto;
|
|
77
|
+
bottom: auto;
|
|
78
|
+
left: 50%;
|
|
79
|
+
margin-top: calc(var(--spacing) * 1.5);
|
|
80
|
+
margin-right: 0;
|
|
81
|
+
margin-bottom: 0;
|
|
82
|
+
margin-left: 0;
|
|
83
|
+
transform: translateX(-50%);
|
|
84
|
+
}
|
|
85
|
+
.tooltip-wrap-left > .tooltip {
|
|
86
|
+
top: 50%;
|
|
87
|
+
right: 100%;
|
|
88
|
+
bottom: auto;
|
|
89
|
+
left: auto;
|
|
90
|
+
margin-top: 0;
|
|
91
|
+
margin-right: calc(var(--spacing) * 1.5);
|
|
92
|
+
margin-bottom: 0;
|
|
93
|
+
margin-left: 0;
|
|
94
|
+
transform: translateY(-50%);
|
|
95
|
+
}
|
|
96
|
+
.tooltip-wrap-right > .tooltip {
|
|
97
|
+
top: 50%;
|
|
98
|
+
right: auto;
|
|
99
|
+
bottom: auto;
|
|
100
|
+
left: 100%;
|
|
101
|
+
margin-top: 0;
|
|
102
|
+
margin-right: 0;
|
|
103
|
+
margin-bottom: 0;
|
|
104
|
+
margin-left: calc(var(--spacing) * 1.5);
|
|
105
|
+
transform: translateY(-50%);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.tooltip-wrap:hover > .tooltip,
|
|
109
|
+
.tooltip-wrap:focus-within > .tooltip {
|
|
110
|
+
@apply opacity-100 visible;
|
|
111
|
+
transition:
|
|
112
|
+
opacity 150ms ease-out 200ms,
|
|
113
|
+
visibility 0s linear 200ms;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
File without changes
|