maquina-components 0.2.0 → 0.3.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.
- checksums.yaml +4 -4
- data/README.md +77 -0
- data/app/assets/stylesheets/calendar.css +222 -0
- data/app/assets/stylesheets/combobox.css +218 -0
- data/app/assets/stylesheets/date_picker.css +172 -0
- data/app/assets/stylesheets/toast.css +433 -0
- data/app/assets/tailwind/maquina_components_engine/engine.css +16 -14
- data/app/helpers/maquina_components/calendar_helper.rb +196 -0
- data/app/helpers/maquina_components/combobox_helper.rb +300 -0
- data/app/helpers/maquina_components/icons_helper.rb +220 -0
- data/app/helpers/maquina_components/table_helper.rb +9 -10
- data/app/helpers/maquina_components/toast_helper.rb +115 -0
- data/app/javascript/controllers/calendar_controller.js +394 -0
- data/app/javascript/controllers/combobox_controller.js +325 -0
- data/app/javascript/controllers/date_picker_controller.js +261 -0
- data/app/javascript/controllers/toast_controller.js +115 -0
- data/app/javascript/controllers/toaster_controller.js +226 -0
- data/app/views/components/_calendar.html.erb +121 -0
- data/app/views/components/_combobox.html.erb +13 -0
- data/app/views/components/_date_picker.html.erb +102 -0
- data/app/views/components/_toast.html.erb +53 -0
- data/app/views/components/_toaster.html.erb +17 -0
- data/app/views/components/calendar/_header.html.erb +22 -0
- data/app/views/components/calendar/_week.html.erb +53 -0
- data/app/views/components/combobox/_content.html.erb +17 -0
- data/app/views/components/combobox/_empty.html.erb +9 -0
- data/app/views/components/combobox/_group.html.erb +8 -0
- data/app/views/components/combobox/_input.html.erb +18 -0
- data/app/views/components/combobox/_label.html.erb +8 -0
- data/app/views/components/combobox/_list.html.erb +8 -0
- data/app/views/components/combobox/_option.html.erb +24 -0
- data/app/views/components/combobox/_separator.html.erb +6 -0
- data/app/views/components/combobox/_trigger.html.erb +22 -0
- data/app/views/components/toast/_action.html.erb +14 -0
- data/app/views/components/toast/_description.html.erb +8 -0
- data/app/views/components/toast/_title.html.erb +8 -0
- data/lib/maquina_components/version.rb +1 -1
- metadata +33 -2
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
/* ===== DatePicker Component Styles ===== */
|
|
2
|
+
/*
|
|
3
|
+
* A date picker with trigger button and popover calendar.
|
|
4
|
+
* Uses native Popover API for open/close without JavaScript.
|
|
5
|
+
* Supports single and range selection modes.
|
|
6
|
+
*
|
|
7
|
+
* Structure:
|
|
8
|
+
* - date-picker (root container)
|
|
9
|
+
* - trigger (button with popovertarget)
|
|
10
|
+
* - popover (native popover with calendar)
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
/* ===== Root Container ===== */
|
|
14
|
+
[data-component="date-picker"] {
|
|
15
|
+
position: relative;
|
|
16
|
+
display: inline-block;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* ===== Trigger Button ===== */
|
|
20
|
+
[data-date-picker-part="trigger"] {
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
justify-content: flex-start;
|
|
24
|
+
gap: 0.5rem;
|
|
25
|
+
width: 100%;
|
|
26
|
+
min-width: 200px;
|
|
27
|
+
@apply h-9 px-3 py-2 text-sm rounded-md;
|
|
28
|
+
border: 1px solid var(--input);
|
|
29
|
+
background-color: var(--background);
|
|
30
|
+
color: var(--foreground);
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
text-align: left;
|
|
33
|
+
@apply transition-colors duration-150;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
[data-date-picker-part="trigger"]:hover:not(:disabled) {
|
|
37
|
+
background-color: var(--accent);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[data-date-picker-part="trigger"]:focus-visible {
|
|
41
|
+
@apply outline-none;
|
|
42
|
+
border-color: var(--ring);
|
|
43
|
+
box-shadow: 0 0 0 2px var(--background),
|
|
44
|
+
0 0 0 4px var(--ring);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
[data-date-picker-part="trigger"]:disabled {
|
|
48
|
+
@apply opacity-50 cursor-not-allowed;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
[data-date-picker-part="trigger"] svg {
|
|
52
|
+
@apply size-4 shrink-0;
|
|
53
|
+
color: var(--muted-foreground);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Placeholder state */
|
|
57
|
+
[data-date-picker-part="trigger"]:has([data-date-picker-part="placeholder-indicator"]) {
|
|
58
|
+
color: var(--muted-foreground);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* ===== Popover ===== */
|
|
62
|
+
[data-date-picker-part="popover"] {
|
|
63
|
+
@apply p-0 rounded-lg border;
|
|
64
|
+
background-color: var(--background);
|
|
65
|
+
border-color: var(--border);
|
|
66
|
+
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
67
|
+
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
68
|
+
|
|
69
|
+
/* Reset default popover styles */
|
|
70
|
+
margin: 0;
|
|
71
|
+
overflow: visible;
|
|
72
|
+
|
|
73
|
+
/* Position below trigger */
|
|
74
|
+
position-area: bottom span-right;
|
|
75
|
+
position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
|
|
76
|
+
margin-top: 0.25rem;
|
|
77
|
+
|
|
78
|
+
/* Entry animation */
|
|
79
|
+
opacity: 1;
|
|
80
|
+
transform: translateY(0) scale(1);
|
|
81
|
+
transition: opacity 150ms ease-out,
|
|
82
|
+
transform 150ms ease-out;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Closed state - for exit animation */
|
|
86
|
+
[data-date-picker-part="popover"]:not(:popover-open) {
|
|
87
|
+
opacity: 0;
|
|
88
|
+
transform: translateY(-0.5rem) scale(0.95);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Entry animation starting state */
|
|
92
|
+
@starting-style {
|
|
93
|
+
[data-date-picker-part="popover"]:popover-open {
|
|
94
|
+
opacity: 0;
|
|
95
|
+
transform: translateY(-0.5rem) scale(0.95);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* Backdrop */
|
|
100
|
+
[data-date-picker-part="popover"]::backdrop {
|
|
101
|
+
background-color: transparent;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* ===== Calendar inside popover adjustments ===== */
|
|
105
|
+
[data-date-picker-part="popover"] [data-component="calendar"] {
|
|
106
|
+
border: none;
|
|
107
|
+
box-shadow: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* ===== Trigger aria-expanded state ===== */
|
|
111
|
+
[data-date-picker-part="trigger"][aria-expanded="true"] {
|
|
112
|
+
border-color: var(--ring);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* ===== Size Variants ===== */
|
|
116
|
+
[data-component="date-picker"][data-size="sm"] [data-date-picker-part="trigger"] {
|
|
117
|
+
@apply h-8 px-2 py-1 text-xs;
|
|
118
|
+
min-width: 160px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
[data-component="date-picker"][data-size="sm"] [data-date-picker-part="trigger"] svg {
|
|
122
|
+
@apply size-3.5;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
[data-component="date-picker"][data-size="lg"] [data-date-picker-part="trigger"] {
|
|
126
|
+
@apply h-11 px-4 py-3 text-base;
|
|
127
|
+
min-width: 240px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
[data-component="date-picker"][data-size="lg"] [data-date-picker-part="trigger"] svg {
|
|
131
|
+
@apply size-5;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* ===== Full width variant ===== */
|
|
135
|
+
[data-component="date-picker"][data-full-width] {
|
|
136
|
+
display: block;
|
|
137
|
+
width: 100%;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
[data-component="date-picker"][data-full-width] [data-date-picker-part="trigger"] {
|
|
141
|
+
width: 100%;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* ===== Error state ===== */
|
|
145
|
+
[data-component="date-picker"]:has(input:invalid),
|
|
146
|
+
[data-component="date-picker"]:has(input[aria-invalid="true"]) {
|
|
147
|
+
[data-date-picker-part="trigger"] {
|
|
148
|
+
border-color: var(--destructive);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
[data-date-picker-part="trigger"]:focus-visible {
|
|
152
|
+
box-shadow: 0 0 0 2px var(--background),
|
|
153
|
+
0 0 0 4px var(--destructive);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* ===== Fallback for browsers without anchor positioning ===== */
|
|
158
|
+
@supports not (position-area: bottom) {
|
|
159
|
+
[data-date-picker-part="popover"] {
|
|
160
|
+
position: absolute;
|
|
161
|
+
top: 100%;
|
|
162
|
+
left: 0;
|
|
163
|
+
margin-top: 0.25rem;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* ===== Dark Mode ===== */
|
|
168
|
+
/*
|
|
169
|
+
* Dark mode is handled automatically through CSS variables.
|
|
170
|
+
* The theme variables change based on the .dark class on html/body.
|
|
171
|
+
* No additional dark mode styles needed here.
|
|
172
|
+
*/
|
|
@@ -0,0 +1,433 @@
|
|
|
1
|
+
/* ===== Toast Component Styles ===== */
|
|
2
|
+
/*
|
|
3
|
+
* Toast notification system for displaying temporary messages.
|
|
4
|
+
* Uses data attributes for styling to maintain consistency.
|
|
5
|
+
* Fully compatible with dark mode via CSS variables.
|
|
6
|
+
*
|
|
7
|
+
* Structure:
|
|
8
|
+
* - toaster (fixed container, manages stack)
|
|
9
|
+
* - toast (individual notification)
|
|
10
|
+
* - icon (variant icon)
|
|
11
|
+
* - content (title + description)
|
|
12
|
+
* - action (optional button)
|
|
13
|
+
* - close (dismiss button)
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
/* ===== Toaster Container ===== */
|
|
17
|
+
[data-component="toaster"] {
|
|
18
|
+
position: fixed;
|
|
19
|
+
z-index: 100;
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
pointer-events: none;
|
|
23
|
+
@apply gap-3 p-4;
|
|
24
|
+
max-height: 100vh;
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Position variants */
|
|
29
|
+
[data-component="toaster"][data-position="top-left"] {
|
|
30
|
+
top: 0;
|
|
31
|
+
left: 0;
|
|
32
|
+
align-items: flex-start;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-component="toaster"][data-position="top-center"] {
|
|
36
|
+
top: 0;
|
|
37
|
+
left: 50%;
|
|
38
|
+
transform: translateX(-50%);
|
|
39
|
+
align-items: center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
[data-component="toaster"][data-position="top-right"] {
|
|
43
|
+
top: 0;
|
|
44
|
+
right: 0;
|
|
45
|
+
align-items: flex-end;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
[data-component="toaster"][data-position="bottom-left"] {
|
|
49
|
+
bottom: 0;
|
|
50
|
+
left: 0;
|
|
51
|
+
align-items: flex-start;
|
|
52
|
+
flex-direction: column-reverse;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
[data-component="toaster"][data-position="bottom-center"] {
|
|
56
|
+
bottom: 0;
|
|
57
|
+
left: 50%;
|
|
58
|
+
transform: translateX(-50%);
|
|
59
|
+
align-items: center;
|
|
60
|
+
flex-direction: column-reverse;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
[data-component="toaster"][data-position="bottom-right"] {
|
|
64
|
+
bottom: 0;
|
|
65
|
+
right: 0;
|
|
66
|
+
align-items: flex-end;
|
|
67
|
+
flex-direction: column-reverse;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* ===== Toast Base Styles ===== */
|
|
71
|
+
[data-component="toast"] {
|
|
72
|
+
position: relative;
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: flex-start;
|
|
75
|
+
pointer-events: auto;
|
|
76
|
+
background-color: var(--popover, var(--background));
|
|
77
|
+
color: var(--popover-foreground, var(--foreground));
|
|
78
|
+
border-color: var(--border);
|
|
79
|
+
@apply w-full max-w-sm gap-3 rounded-lg border p-4 pr-10 shadow-lg;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* ===== Icon ===== */
|
|
83
|
+
[data-toast-part="icon"] {
|
|
84
|
+
@apply shrink-0;
|
|
85
|
+
color: var(--foreground);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
[data-toast-part="icon"] svg {
|
|
89
|
+
@apply size-5;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* ===== Content ===== */
|
|
93
|
+
[data-toast-part="content"] {
|
|
94
|
+
@apply flex-1 min-w-0;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* ===== Title ===== */
|
|
98
|
+
[data-toast-part="title"] {
|
|
99
|
+
@apply text-sm font-semibold;
|
|
100
|
+
color: var(--foreground);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Title followed by description */
|
|
104
|
+
[data-toast-part="title"]:has(+ [data-toast-part="description"]) {
|
|
105
|
+
@apply mb-1;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* ===== Description ===== */
|
|
109
|
+
[data-toast-part="description"] {
|
|
110
|
+
@apply text-sm;
|
|
111
|
+
color: var(--muted-foreground);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* ===== Close Button ===== */
|
|
115
|
+
[data-toast-part="close"] {
|
|
116
|
+
position: absolute;
|
|
117
|
+
top: 0.5rem;
|
|
118
|
+
right: 0.5rem;
|
|
119
|
+
display: flex;
|
|
120
|
+
align-items: center;
|
|
121
|
+
justify-content: center;
|
|
122
|
+
border: none;
|
|
123
|
+
background: transparent;
|
|
124
|
+
cursor: pointer;
|
|
125
|
+
opacity: 0.5;
|
|
126
|
+
color: var(--foreground);
|
|
127
|
+
@apply size-6 rounded-sm transition-opacity;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
[data-toast-part="close"]:hover {
|
|
131
|
+
opacity: 1;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
[data-toast-part="close"]:focus-visible {
|
|
135
|
+
opacity: 1;
|
|
136
|
+
outline: 2px solid var(--ring);
|
|
137
|
+
outline-offset: 2px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
[data-toast-part="close"] svg {
|
|
141
|
+
@apply size-4;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* ===== Action Button ===== */
|
|
145
|
+
[data-toast-part="action"] {
|
|
146
|
+
display: inline-flex;
|
|
147
|
+
align-items: center;
|
|
148
|
+
justify-content: center;
|
|
149
|
+
border: 1px solid var(--border);
|
|
150
|
+
background-color: transparent;
|
|
151
|
+
color: var(--foreground);
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
text-decoration: none;
|
|
154
|
+
@apply mt-2 h-8 rounded-md px-3 text-xs font-medium transition-colors;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
[data-toast-part="action"]:hover {
|
|
158
|
+
background-color: var(--accent);
|
|
159
|
+
color: var(--accent-foreground);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
[data-toast-part="action"]:focus-visible {
|
|
163
|
+
outline: 2px solid var(--ring);
|
|
164
|
+
outline-offset: 2px;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* ===== Variant: Default ===== */
|
|
168
|
+
[data-component="toast"][data-variant="default"] {
|
|
169
|
+
background-color: var(--popover, var(--background));
|
|
170
|
+
color: var(--popover-foreground, var(--foreground));
|
|
171
|
+
border-color: var(--border);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* ===== Variant: Success ===== */
|
|
175
|
+
[data-component="toast"][data-variant="success"] {
|
|
176
|
+
background-color: var(--success);
|
|
177
|
+
color: var(--success-foreground);
|
|
178
|
+
border-color: var(--success);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
[data-component="toast"][data-variant="success"] [data-toast-part="icon"],
|
|
182
|
+
[data-component="toast"][data-variant="success"] [data-toast-part="title"],
|
|
183
|
+
[data-component="toast"][data-variant="success"] [data-toast-part="close"] {
|
|
184
|
+
color: var(--success-foreground);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
[data-component="toast"][data-variant="success"] [data-toast-part="description"] {
|
|
188
|
+
color: var(--success-foreground);
|
|
189
|
+
opacity: 0.9;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
[data-component="toast"][data-variant="success"] [data-toast-part="action"] {
|
|
193
|
+
border-color: var(--success-foreground);
|
|
194
|
+
color: var(--success-foreground);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
[data-component="toast"][data-variant="success"] [data-toast-part="action"]:hover {
|
|
198
|
+
background-color: var(--success-foreground);
|
|
199
|
+
color: var(--success);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* ===== Variant: Info ===== */
|
|
203
|
+
[data-component="toast"][data-variant="info"] {
|
|
204
|
+
background-color: var(--info, var(--primary));
|
|
205
|
+
color: var(--info-foreground, var(--primary-foreground));
|
|
206
|
+
border-color: var(--info, var(--primary));
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
[data-component="toast"][data-variant="info"] [data-toast-part="icon"],
|
|
210
|
+
[data-component="toast"][data-variant="info"] [data-toast-part="title"],
|
|
211
|
+
[data-component="toast"][data-variant="info"] [data-toast-part="close"] {
|
|
212
|
+
color: var(--info-foreground, var(--primary-foreground));
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
[data-component="toast"][data-variant="info"] [data-toast-part="description"] {
|
|
216
|
+
color: var(--info-foreground, var(--primary-foreground));
|
|
217
|
+
opacity: 0.9;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
[data-component="toast"][data-variant="info"] [data-toast-part="action"] {
|
|
221
|
+
border-color: var(--info-foreground, var(--primary-foreground));
|
|
222
|
+
color: var(--info-foreground, var(--primary-foreground));
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
[data-component="toast"][data-variant="info"] [data-toast-part="action"]:hover {
|
|
226
|
+
background-color: var(--info-foreground, var(--primary-foreground));
|
|
227
|
+
color: var(--info, var(--primary));
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* ===== Variant: Warning ===== */
|
|
231
|
+
[data-component="toast"][data-variant="warning"] {
|
|
232
|
+
background-color: var(--warning);
|
|
233
|
+
color: var(--warning-foreground);
|
|
234
|
+
border-color: var(--warning);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
[data-component="toast"][data-variant="warning"] [data-toast-part="icon"],
|
|
238
|
+
[data-component="toast"][data-variant="warning"] [data-toast-part="title"],
|
|
239
|
+
[data-component="toast"][data-variant="warning"] [data-toast-part="close"] {
|
|
240
|
+
color: var(--warning-foreground);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
[data-component="toast"][data-variant="warning"] [data-toast-part="description"] {
|
|
244
|
+
color: var(--warning-foreground);
|
|
245
|
+
opacity: 0.9;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
[data-component="toast"][data-variant="warning"] [data-toast-part="action"] {
|
|
249
|
+
border-color: var(--warning-foreground);
|
|
250
|
+
color: var(--warning-foreground);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
[data-component="toast"][data-variant="warning"] [data-toast-part="action"]:hover {
|
|
254
|
+
background-color: var(--warning-foreground);
|
|
255
|
+
color: var(--warning);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* ===== Variant: Error ===== */
|
|
259
|
+
[data-component="toast"][data-variant="error"] {
|
|
260
|
+
background-color: var(--destructive);
|
|
261
|
+
color: var(--destructive-foreground);
|
|
262
|
+
border-color: var(--destructive);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
[data-component="toast"][data-variant="error"] [data-toast-part="icon"],
|
|
266
|
+
[data-component="toast"][data-variant="error"] [data-toast-part="title"],
|
|
267
|
+
[data-component="toast"][data-variant="error"] [data-toast-part="close"] {
|
|
268
|
+
color: var(--destructive-foreground);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
[data-component="toast"][data-variant="error"] [data-toast-part="description"] {
|
|
272
|
+
color: var(--destructive-foreground);
|
|
273
|
+
opacity: 0.9;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
[data-component="toast"][data-variant="error"] [data-toast-part="action"] {
|
|
277
|
+
border-color: var(--destructive-foreground);
|
|
278
|
+
color: var(--destructive-foreground);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
[data-component="toast"][data-variant="error"] [data-toast-part="action"]:hover {
|
|
282
|
+
background-color: var(--destructive-foreground);
|
|
283
|
+
color: var(--destructive);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
/* ===== Animation States ===== */
|
|
287
|
+
|
|
288
|
+
/* Enter from right (for right-aligned positions) */
|
|
289
|
+
[data-component="toast"][data-state="entering"] {
|
|
290
|
+
animation: toast-enter-right 200ms ease-out;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
/* Enter from left (for left-aligned positions) */
|
|
294
|
+
[data-component="toaster"][data-position="top-left"] [data-component="toast"][data-state="entering"],
|
|
295
|
+
[data-component="toaster"][data-position="bottom-left"] [data-component="toast"][data-state="entering"] {
|
|
296
|
+
animation: toast-enter-left 200ms ease-out;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
/* Enter from top (for center-aligned positions) */
|
|
300
|
+
[data-component="toaster"][data-position="top-center"] [data-component="toast"][data-state="entering"] {
|
|
301
|
+
animation: toast-enter-top 200ms ease-out;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
/* Enter from bottom (for bottom-center) */
|
|
305
|
+
[data-component="toaster"][data-position="bottom-center"] [data-component="toast"][data-state="entering"] {
|
|
306
|
+
animation: toast-enter-bottom 200ms ease-out;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
/* Visible state */
|
|
310
|
+
[data-component="toast"][data-state="visible"] {
|
|
311
|
+
opacity: 1;
|
|
312
|
+
transform: translateX(0) translateY(0);
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/* Exit animations */
|
|
316
|
+
[data-component="toast"][data-state="exiting"] {
|
|
317
|
+
animation: toast-exit-right 150ms ease-in forwards;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
[data-component="toaster"][data-position="top-left"] [data-component="toast"][data-state="exiting"],
|
|
321
|
+
[data-component="toaster"][data-position="bottom-left"] [data-component="toast"][data-state="exiting"] {
|
|
322
|
+
animation: toast-exit-left 150ms ease-in forwards;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
[data-component="toaster"][data-position="top-center"] [data-component="toast"][data-state="exiting"] {
|
|
326
|
+
animation: toast-exit-top 150ms ease-in forwards;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
[data-component="toaster"][data-position="bottom-center"] [data-component="toast"][data-state="exiting"] {
|
|
330
|
+
animation: toast-exit-bottom 150ms ease-in forwards;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
/* Keyframes */
|
|
334
|
+
@keyframes toast-enter-right {
|
|
335
|
+
from {
|
|
336
|
+
opacity: 0;
|
|
337
|
+
transform: translateX(100%);
|
|
338
|
+
}
|
|
339
|
+
to {
|
|
340
|
+
opacity: 1;
|
|
341
|
+
transform: translateX(0);
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
@keyframes toast-enter-left {
|
|
346
|
+
from {
|
|
347
|
+
opacity: 0;
|
|
348
|
+
transform: translateX(-100%);
|
|
349
|
+
}
|
|
350
|
+
to {
|
|
351
|
+
opacity: 1;
|
|
352
|
+
transform: translateX(0);
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
@keyframes toast-enter-top {
|
|
357
|
+
from {
|
|
358
|
+
opacity: 0;
|
|
359
|
+
transform: translateY(-100%);
|
|
360
|
+
}
|
|
361
|
+
to {
|
|
362
|
+
opacity: 1;
|
|
363
|
+
transform: translateY(0);
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
@keyframes toast-enter-bottom {
|
|
368
|
+
from {
|
|
369
|
+
opacity: 0;
|
|
370
|
+
transform: translateY(100%);
|
|
371
|
+
}
|
|
372
|
+
to {
|
|
373
|
+
opacity: 1;
|
|
374
|
+
transform: translateY(0);
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
@keyframes toast-exit-right {
|
|
379
|
+
from {
|
|
380
|
+
opacity: 1;
|
|
381
|
+
transform: translateX(0);
|
|
382
|
+
}
|
|
383
|
+
to {
|
|
384
|
+
opacity: 0;
|
|
385
|
+
transform: translateX(100%);
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
@keyframes toast-exit-left {
|
|
390
|
+
from {
|
|
391
|
+
opacity: 1;
|
|
392
|
+
transform: translateX(0);
|
|
393
|
+
}
|
|
394
|
+
to {
|
|
395
|
+
opacity: 0;
|
|
396
|
+
transform: translateX(-100%);
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
@keyframes toast-exit-top {
|
|
401
|
+
from {
|
|
402
|
+
opacity: 1;
|
|
403
|
+
transform: translateY(0);
|
|
404
|
+
}
|
|
405
|
+
to {
|
|
406
|
+
opacity: 0;
|
|
407
|
+
transform: translateY(-100%);
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
@keyframes toast-exit-bottom {
|
|
412
|
+
from {
|
|
413
|
+
opacity: 1;
|
|
414
|
+
transform: translateY(0);
|
|
415
|
+
}
|
|
416
|
+
to {
|
|
417
|
+
opacity: 0;
|
|
418
|
+
transform: translateY(100%);
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
/* ===== Hover Pause Indicator ===== */
|
|
423
|
+
[data-component="toast"]:hover {
|
|
424
|
+
/* Slight scale to indicate interaction */
|
|
425
|
+
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
/* ===== Dark Mode ===== */
|
|
429
|
+
/*
|
|
430
|
+
* Dark mode is handled automatically through CSS variables.
|
|
431
|
+
* The theme variables change based on the .dark class on html/body.
|
|
432
|
+
* No additional dark mode styles needed here.
|
|
433
|
+
*/
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
@source "../../../views/";
|
|
2
2
|
|
|
3
|
-
@
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
3
|
+
@import "../../stylesheets/alert.css";
|
|
4
|
+
@import "../../stylesheets/badge.css";
|
|
5
|
+
@import "../../stylesheets/breadcrumbs.css";
|
|
6
|
+
@import "../../stylesheets/calendar.css";
|
|
7
|
+
@import "../../stylesheets/card.css";
|
|
8
|
+
@import "../../stylesheets/combobox.css";
|
|
9
|
+
@import "../../stylesheets/date_picker.css";
|
|
10
|
+
@import "../../stylesheets/dropdown_menu.css";
|
|
11
|
+
@import "../../stylesheets/empty.css";
|
|
12
|
+
@import "../../stylesheets/form.css";
|
|
13
|
+
@import "../../stylesheets/header.css";
|
|
14
|
+
@import "../../stylesheets/pagination.css";
|
|
15
|
+
@import "../../stylesheets/sidebar.css";
|
|
16
|
+
@import "../../stylesheets/table.css";
|
|
17
|
+
@import "../../stylesheets/toast.css";
|
|
18
|
+
@import "../../stylesheets/toggle_group.css";
|