@noxickon/onyx 1.0.0 → 1.0.2
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/animations.css +264 -0
- package/dist/chunks/{ui-DxsSYHCv.js → ui-CgVv3Goh.js} +8382 -8380
- package/dist/chunks/ui-DnhwksUN.js +41 -0
- package/dist/contexts/contexts.cjs.js +1 -1
- package/dist/contexts/contexts.es.js +1 -1
- package/dist/layouts/layouts.cjs.js +1 -1
- package/dist/layouts/layouts.es.js +1 -1
- package/dist/onyx.cjs.js +1 -1
- package/dist/onyx.es.js +1 -1
- package/dist/pages/pages.cjs.js +2 -2
- package/dist/pages/pages.es.js +13 -13
- package/dist/routes/routes.cjs.js +1 -1
- package/dist/routes/routes.es.js +1 -1
- package/dist/utils/utils.cjs.js +1 -1
- package/dist/utils/utils.es.js +1 -1
- package/package.json +1 -1
- package/dist/chunks/ui-ChsTPgui.js +0 -41
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
@layer utilities {
|
|
2
|
+
/* Base animation keyframes - combine fade, slide, zoom, and spin effects using CSS variables */
|
|
3
|
+
@keyframes enter {
|
|
4
|
+
from {
|
|
5
|
+
opacity: var(--tw-enter-opacity, 1);
|
|
6
|
+
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
|
|
7
|
+
scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
|
|
8
|
+
rotate(var(--tw-enter-rotate, 0));
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@keyframes exit {
|
|
13
|
+
to {
|
|
14
|
+
opacity: var(--tw-exit-opacity, 1);
|
|
15
|
+
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
|
|
16
|
+
scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
|
|
17
|
+
rotate(var(--tw-exit-rotate, 0));
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Dropdown animations */
|
|
22
|
+
.ox-dropdown-animate[data-ox-state='open'][data-ox-side='right'] {
|
|
23
|
+
animation: enter 150ms ease-out;
|
|
24
|
+
--tw-enter-opacity: 0;
|
|
25
|
+
--tw-enter-translate-x: -0.5rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.ox-dropdown-animate[data-ox-state='open'][data-ox-side='left'] {
|
|
29
|
+
animation: enter 150ms ease-out;
|
|
30
|
+
--tw-enter-opacity: 0;
|
|
31
|
+
--tw-enter-translate-x: 0.5rem;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ox-dropdown-animate[data-ox-state='open'][data-ox-side='bottom'] {
|
|
35
|
+
animation: enter 150ms ease-out;
|
|
36
|
+
--tw-enter-opacity: 0;
|
|
37
|
+
--tw-enter-translate-y: -0.5rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ox-dropdown-animate[data-ox-state='open'][data-ox-side='top'] {
|
|
41
|
+
animation: enter 150ms ease-out;
|
|
42
|
+
--tw-enter-opacity: 0;
|
|
43
|
+
--tw-enter-translate-y: 0.5rem;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.ox-dropdown-animate[data-ox-state='closing'] {
|
|
47
|
+
animation: exit 100ms ease-in forwards;
|
|
48
|
+
--tw-exit-opacity: 0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Select animations */
|
|
52
|
+
.ox-select-animate[data-ox-state='open'][data-ox-side='bottom'] {
|
|
53
|
+
animation: enter 150ms ease-out;
|
|
54
|
+
--tw-enter-opacity: 0;
|
|
55
|
+
--tw-enter-translate-y: -0.5rem;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.ox-select-animate[data-ox-state='open'][data-ox-side='top'] {
|
|
59
|
+
animation: enter 150ms ease-out;
|
|
60
|
+
--tw-enter-opacity: 0;
|
|
61
|
+
--tw-enter-translate-y: 0.5rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.ox-select-animate[data-ox-state='closing'] {
|
|
65
|
+
animation: exit 100ms ease-in forwards;
|
|
66
|
+
--tw-exit-opacity: 0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Dialog animations */
|
|
70
|
+
.ox-dialog-animation[data-ox-state='open'] {
|
|
71
|
+
animation: enter 300ms ease-out;
|
|
72
|
+
--tw-enter-opacity: 0;
|
|
73
|
+
--tw-enter-scale: 0.95;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.ox-dialog-animation[data-ox-state='closing'] {
|
|
77
|
+
animation: exit 200ms ease-in forwards;
|
|
78
|
+
--tw-exit-opacity: 0;
|
|
79
|
+
--tw-exit-scale: 0.95;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Drawer animations */
|
|
83
|
+
.ox-drawer-animate[data-ox-state='open'][data-ox-side='left'] {
|
|
84
|
+
animation: enter 300ms ease-out;
|
|
85
|
+
--tw-enter-translate-x: -100%;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.ox-drawer-animate[data-ox-state='closing'][data-ox-side='left'] {
|
|
89
|
+
animation: exit 250ms ease-in forwards;
|
|
90
|
+
--tw-exit-translate-x: -100%;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.ox-drawer-animate[data-ox-state='open'][data-ox-side='right'] {
|
|
94
|
+
animation: enter 300ms ease-out;
|
|
95
|
+
--tw-enter-translate-x: 100%;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.ox-drawer-animate[data-ox-state='closing'][data-ox-side='right'] {
|
|
99
|
+
animation: exit 250ms ease-in forwards;
|
|
100
|
+
--tw-exit-translate-x: 100%;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.ox-drawer-animate[data-ox-state='open'][data-ox-side='top'] {
|
|
104
|
+
animation: enter 300ms ease-out;
|
|
105
|
+
--tw-enter-translate-y: -100%;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.ox-drawer-animate[data-ox-state='closing'][data-ox-side='top'] {
|
|
109
|
+
animation: exit 250ms ease-in forwards;
|
|
110
|
+
--tw-exit-translate-y: -100%;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.ox-drawer-animate[data-ox-state='open'][data-ox-side='bottom'] {
|
|
114
|
+
animation: enter 300ms ease-out;
|
|
115
|
+
--tw-enter-translate-y: 100%;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.ox-drawer-animate[data-ox-state='closing'][data-ox-side='bottom'] {
|
|
119
|
+
animation: exit 250ms ease-in forwards;
|
|
120
|
+
--tw-exit-translate-y: 100%;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* Popover animations */
|
|
124
|
+
.ox-popover-animate[data-ox-state='open'][data-ox-side='right'] {
|
|
125
|
+
animation: enter 150ms ease-out;
|
|
126
|
+
--tw-enter-opacity: 0;
|
|
127
|
+
--tw-enter-translate-x: -0.5rem;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.ox-popover-animate[data-ox-state='open'][data-ox-side='left'] {
|
|
131
|
+
animation: enter 150ms ease-out;
|
|
132
|
+
--tw-enter-opacity: 0;
|
|
133
|
+
--tw-enter-translate-x: 0.5rem;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.ox-popover-animate[data-ox-state='open'][data-ox-side='top'] {
|
|
137
|
+
animation: enter 150ms ease-out;
|
|
138
|
+
--tw-enter-opacity: 0;
|
|
139
|
+
--tw-enter-translate-y: 0.5rem;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.ox-popover-animate[data-ox-state='open'][data-ox-side='bottom'] {
|
|
143
|
+
animation: enter 150ms ease-out;
|
|
144
|
+
--tw-enter-opacity: 0;
|
|
145
|
+
--tw-enter-translate-y: -0.5rem;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.ox-popover-animate[data-ox-state='closing'] {
|
|
149
|
+
animation: exit 100ms ease-in forwards;
|
|
150
|
+
--tw-exit-opacity: 0;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* Tooltip animations */
|
|
154
|
+
.ox-tooltip-animate[data-ox-state='open'][data-ox-side='right'] {
|
|
155
|
+
animation: enter 150ms ease-out;
|
|
156
|
+
--tw-enter-opacity: 0;
|
|
157
|
+
--tw-enter-translate-x: -0.5rem;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.ox-tooltip-animate[data-ox-state='open'][data-ox-side='left'] {
|
|
161
|
+
animation: enter 150ms ease-out;
|
|
162
|
+
--tw-enter-opacity: 0;
|
|
163
|
+
--tw-enter-translate-x: 0.5rem;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.ox-tooltip-animate[data-ox-state='open'][data-ox-side='top'] {
|
|
167
|
+
animation: enter 150ms ease-out;
|
|
168
|
+
--tw-enter-opacity: 0;
|
|
169
|
+
--tw-enter-translate-y: 0.5rem;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.ox-tooltip-animate[data-ox-state='open'][data-ox-side='bottom'] {
|
|
173
|
+
animation: enter 150ms ease-out;
|
|
174
|
+
--tw-enter-opacity: 0;
|
|
175
|
+
--tw-enter-translate-y: -0.5rem;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.ox-tooltip-animate[data-ox-state='closing'] {
|
|
179
|
+
animation: exit 100ms ease-in forwards;
|
|
180
|
+
--tw-exit-opacity: 0;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* Backdrop */
|
|
184
|
+
@keyframes backdrop-in {
|
|
185
|
+
from {
|
|
186
|
+
opacity: 0;
|
|
187
|
+
background-color: rgba(0, 0, 0, 0);
|
|
188
|
+
backdrop-filter: blur(0px);
|
|
189
|
+
-webkit-backdrop-filter: blur(0px);
|
|
190
|
+
}
|
|
191
|
+
to {
|
|
192
|
+
opacity: 1;
|
|
193
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
194
|
+
backdrop-filter: blur(6px);
|
|
195
|
+
-webkit-backdrop-filter: blur(6px);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
@keyframes backdrop-out {
|
|
200
|
+
from {
|
|
201
|
+
opacity: 1;
|
|
202
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
203
|
+
backdrop-filter: blur(6px);
|
|
204
|
+
-webkit-backdrop-filter: blur(6px);
|
|
205
|
+
}
|
|
206
|
+
to {
|
|
207
|
+
opacity: 0;
|
|
208
|
+
background-color: rgba(0, 0, 0, 0);
|
|
209
|
+
backdrop-filter: blur(0px);
|
|
210
|
+
-webkit-backdrop-filter: blur(0px);
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* Dialog backdrop */
|
|
215
|
+
.ox-dialog-backdrop::backdrop {
|
|
216
|
+
opacity: 1;
|
|
217
|
+
backdrop-filter: blur(6px);
|
|
218
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
219
|
+
-webkit-backdrop-filter: blur(6px);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.ox-dialog-backdrop[data-ox-state='open']::backdrop {
|
|
223
|
+
animation: backdrop-in 300ms ease-out;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.ox-dialog-backdrop[data-ox-state='closing']::backdrop {
|
|
227
|
+
animation: backdrop-out 200ms ease-in;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* Drawer backdrop */
|
|
231
|
+
.ox-drawer-backdrop {
|
|
232
|
+
opacity: 1;
|
|
233
|
+
backdrop-filter: blur(6px);
|
|
234
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
235
|
+
-webkit-backdrop-filter: blur(6px);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.ox-drawer-backdrop[data-ox-state='open'] {
|
|
239
|
+
animation: backdrop-in 300ms ease-out forwards;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.ox-drawer-backdrop[data-ox-state='closing'] {
|
|
243
|
+
animation: backdrop-out 250ms ease-in forwards;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* Sidebar submenu collapse/expand animation */
|
|
247
|
+
.ox-sidebar-submenu {
|
|
248
|
+
grid-template-rows: 0fr;
|
|
249
|
+
opacity: 0;
|
|
250
|
+
transition:
|
|
251
|
+
grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
252
|
+
opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.ox-sidebar-submenu[data-ox-state='open'] {
|
|
256
|
+
grid-template-rows: 1fr;
|
|
257
|
+
opacity: 1;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.ox-sidebar-submenu > * {
|
|
261
|
+
overflow: hidden;
|
|
262
|
+
min-width: 0;
|
|
263
|
+
}
|
|
264
|
+
}
|