@radioactive-labs/plutonium 0.4.2 → 0.4.3
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/package.json +1 -1
- package/src/css/core.css +13 -10
- package/src/css/easymde.css +166 -720
- package/src/css/intl_tel_input.css +259 -0
- package/src/css/plutonium.css +1 -0
- package/src/css/plutonium.entry.css +6 -15
- package/src/css/slim_select.css +244 -246
- package/src/dist/css/plutonium.css +2 -2
- package/src/dist/js/plutonium.js +16 -0
- package/src/dist/js/plutonium.js.map +3 -3
- package/src/dist/js/plutonium.min.js +28 -28
- package/src/dist/js/plutonium.min.js.map +4 -4
- package/src/js/controllers/register_controllers.js +2 -0
- package/src/js/controllers/remote_modal_controller.js +24 -0
package/src/css/slim_select.css
CHANGED
|
@@ -1,313 +1,311 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Slim Select
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
--ss-font-placeholder-color: theme('colors.gray.500');
|
|
13
|
-
--ss-disabled-color: theme('colors.gray.100');
|
|
14
|
-
--ss-border-color: theme('colors.gray.300');
|
|
15
|
-
--ss-highlight-color: theme('colors.yellow.200');
|
|
16
|
-
--ss-success-color: theme('colors.green.500');
|
|
17
|
-
--ss-error-color: theme('colors.red.500');
|
|
18
|
-
--ss-focus-color: theme('colors.primary.500');
|
|
2
|
+
* Slim Select with Tailwind CSS
|
|
3
|
+
* Overrides for theming with Tailwind colors and dark mode support
|
|
4
|
+
* Import this AFTER the original slim_select.css
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* Animation keyframes */
|
|
8
|
+
@keyframes ss-valueIn {
|
|
9
|
+
0% {
|
|
10
|
+
transform: scale(0);
|
|
11
|
+
opacity: 0;
|
|
19
12
|
}
|
|
20
13
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
--ss-font-color: theme('colors.white');
|
|
25
|
-
--ss-font-placeholder-color: theme('colors.gray.400');
|
|
26
|
-
--ss-disabled-color: theme('colors.gray.800');
|
|
27
|
-
--ss-border-color: theme('colors.gray.600');
|
|
28
|
-
--ss-highlight-color: theme('colors.yellow.300');
|
|
29
|
-
--ss-success-color: theme('colors.green.400');
|
|
30
|
-
--ss-error-color: theme('colors.red.400');
|
|
31
|
-
--ss-focus-color: theme('colors.primary.400');
|
|
14
|
+
100% {
|
|
15
|
+
transform: scale(1);
|
|
16
|
+
opacity: 1;
|
|
32
17
|
}
|
|
18
|
+
}
|
|
33
19
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
20
|
+
@keyframes ss-valueOut {
|
|
21
|
+
0% {
|
|
22
|
+
transform: scale(1);
|
|
23
|
+
opacity: 1;
|
|
24
|
+
}
|
|
39
25
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
26
|
+
100% {
|
|
27
|
+
transform: scale(0);
|
|
28
|
+
opacity: 0;
|
|
44
29
|
}
|
|
30
|
+
}
|
|
45
31
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
32
|
+
/* Hide utility */
|
|
33
|
+
.ss-hide {
|
|
34
|
+
@apply !hidden;
|
|
35
|
+
}
|
|
51
36
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
37
|
+
/* Main container - Updated to match form input theme */
|
|
38
|
+
.ss-main {
|
|
39
|
+
@apply flex flex-row relative select-none w-full min-h-8 p-2 cursor-pointer border border-gray-300 rounded-md shadow-sm font-medium text-sm bg-white text-gray-700 outline-none transition-colors duration-200 overflow-hidden focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
|
|
40
|
+
}
|
|
57
41
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
42
|
+
.ss-main.ss-disabled {
|
|
43
|
+
@apply cursor-not-allowed bg-gray-100 text-gray-500 dark:bg-gray-900 dark:text-gray-400;
|
|
44
|
+
}
|
|
61
45
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
46
|
+
.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete {
|
|
47
|
+
@apply cursor-not-allowed;
|
|
48
|
+
}
|
|
65
49
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
50
|
+
.ss-main.ss-open-above {
|
|
51
|
+
@apply rounded-t-none;
|
|
52
|
+
}
|
|
69
53
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
54
|
+
.ss-main.ss-open-below {
|
|
55
|
+
@apply rounded-b-none;
|
|
56
|
+
}
|
|
73
57
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
58
|
+
/* Values container */
|
|
59
|
+
.ss-main .ss-values {
|
|
60
|
+
@apply inline-flex flex-wrap gap-1 flex-1;
|
|
61
|
+
}
|
|
77
62
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
63
|
+
.ss-main .ss-values .ss-placeholder {
|
|
64
|
+
@apply flex px-0 py-0 my-auto leading-none items-center w-full text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap dark:text-gray-400;
|
|
65
|
+
}
|
|
81
66
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
67
|
+
.ss-main .ss-values .ss-max {
|
|
68
|
+
@apply flex select-none items-center w-fit text-xs text-white leading-none px-2 py-1 bg-primary-500 rounded;
|
|
69
|
+
}
|
|
85
70
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
71
|
+
.ss-main .ss-values .ss-single {
|
|
72
|
+
@apply flex my-auto;
|
|
73
|
+
}
|
|
89
74
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
75
|
+
.ss-main .ss-values .ss-value {
|
|
76
|
+
@apply flex select-none items-center w-fit bg-primary-500 rounded text-white;
|
|
77
|
+
animation: ss-valueIn 0.2s ease-out forwards;
|
|
78
|
+
}
|
|
93
79
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
80
|
+
.ss-main .ss-values .ss-value.ss-value-out {
|
|
81
|
+
animation: ss-valueOut 0.2s ease-out forwards;
|
|
82
|
+
}
|
|
97
83
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
84
|
+
.ss-main .ss-values .ss-value .ss-value-text {
|
|
85
|
+
@apply text-xs leading-none px-2 py-1;
|
|
86
|
+
}
|
|
102
87
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
88
|
+
.ss-main .ss-values .ss-value .ss-value-delete {
|
|
89
|
+
@apply flex items-center h-2 w-2 px-2 py-1 cursor-pointer border-l border-solid border-white;
|
|
90
|
+
box-sizing: content-box;
|
|
91
|
+
}
|
|
106
92
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
93
|
+
.ss-main .ss-values .ss-value .ss-value-delete svg {
|
|
94
|
+
@apply h-2 w-2;
|
|
95
|
+
}
|
|
110
96
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
97
|
+
.ss-main .ss-values .ss-value .ss-value-delete svg path {
|
|
98
|
+
@apply fill-none stroke-white;
|
|
99
|
+
stroke-width: 18;
|
|
100
|
+
stroke-linecap: round;
|
|
101
|
+
stroke-linejoin: round;
|
|
102
|
+
}
|
|
114
103
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
104
|
+
/* Deselect button - Updated colors to match theme */
|
|
105
|
+
.ss-main .ss-deselect {
|
|
106
|
+
@apply flex-none flex items-center justify-center w-fit h-auto px-2;
|
|
107
|
+
}
|
|
118
108
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
stroke-linecap: round;
|
|
123
|
-
stroke-linejoin: round;
|
|
124
|
-
}
|
|
109
|
+
.ss-main .ss-deselect svg {
|
|
110
|
+
@apply w-2 h-2;
|
|
111
|
+
}
|
|
125
112
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
113
|
+
.ss-main .ss-deselect svg path {
|
|
114
|
+
@apply fill-none stroke-gray-700 dark:stroke-white;
|
|
115
|
+
stroke-width: 20;
|
|
116
|
+
stroke-linecap: round;
|
|
117
|
+
stroke-linejoin: round;
|
|
118
|
+
}
|
|
129
119
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
120
|
+
/* Arrow - Updated colors */
|
|
121
|
+
.ss-main .ss-arrow {
|
|
122
|
+
@apply flex-none flex items-center justify-end w-3 h-3 mx-2 my-auto;
|
|
123
|
+
}
|
|
133
124
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
125
|
+
.ss-main .ss-arrow path {
|
|
126
|
+
@apply fill-none stroke-gray-700 transition-transform duration-200 dark:stroke-white;
|
|
127
|
+
stroke-width: 18;
|
|
128
|
+
stroke-linecap: round;
|
|
129
|
+
stroke-linejoin: round;
|
|
130
|
+
}
|
|
140
131
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
132
|
+
/* Content container - Updated to match shadow and borders */
|
|
133
|
+
.ss-content {
|
|
134
|
+
@apply absolute flex h-auto flex-col w-auto max-h-72 border border-gray-300 bg-white shadow-sm transition-all duration-200 opacity-0 z-[10000] overflow-hidden dark:bg-gray-700 dark:border-gray-600;
|
|
135
|
+
transform: scaleY(0);
|
|
136
|
+
transform-origin: top;
|
|
137
|
+
}
|
|
144
138
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
stroke-linecap: round;
|
|
149
|
-
stroke-linejoin: round;
|
|
150
|
-
}
|
|
139
|
+
.ss-content.ss-relative {
|
|
140
|
+
@apply relative h-full;
|
|
141
|
+
}
|
|
151
142
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
transform-origin: top;
|
|
156
|
-
}
|
|
143
|
+
.ss-content.ss-fixed {
|
|
144
|
+
@apply fixed;
|
|
145
|
+
}
|
|
157
146
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
147
|
+
.ss-content.ss-open-above {
|
|
148
|
+
@apply flex-col-reverse opacity-100 rounded-t-md;
|
|
149
|
+
transform: scaleY(1);
|
|
150
|
+
transform-origin: bottom;
|
|
151
|
+
}
|
|
161
152
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
153
|
+
.ss-content.ss-open-below {
|
|
154
|
+
@apply opacity-100 rounded-b-md;
|
|
155
|
+
transform: scaleY(1);
|
|
156
|
+
transform-origin: top;
|
|
157
|
+
}
|
|
165
158
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
}
|
|
159
|
+
/* Search - Updated to match form input styling */
|
|
160
|
+
.ss-content .ss-search {
|
|
161
|
+
@apply flex-none flex flex-row p-2;
|
|
162
|
+
}
|
|
171
163
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
164
|
+
.ss-content .ss-search input {
|
|
165
|
+
@apply inline-flex flex-auto w-full min-w-0 p-2 m-0 border border-gray-300 rounded-md shadow-sm font-medium text-sm bg-white outline-none text-left placeholder:text-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
|
|
166
|
+
box-sizing: border-box;
|
|
167
|
+
font-size: inherit;
|
|
168
|
+
line-height: inherit;
|
|
169
|
+
}
|
|
177
170
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
171
|
+
.ss-content .ss-search .ss-addable {
|
|
172
|
+
@apply inline-flex justify-center items-center cursor-pointer flex-none h-auto ml-2 border border-gray-300 rounded-md shadow-sm dark:border-gray-600;
|
|
173
|
+
}
|
|
181
174
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
175
|
+
.ss-content .ss-search .ss-addable svg {
|
|
176
|
+
@apply flex items-center justify-end flex-none w-3 h-3 mx-2 my-auto;
|
|
177
|
+
}
|
|
185
178
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
179
|
+
.ss-content .ss-search .ss-addable svg path {
|
|
180
|
+
@apply fill-none stroke-gray-700 dark:stroke-white;
|
|
181
|
+
stroke-width: 18;
|
|
182
|
+
stroke-linecap: round;
|
|
183
|
+
stroke-linejoin: round;
|
|
184
|
+
}
|
|
189
185
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
186
|
+
/* List */
|
|
187
|
+
.ss-content .ss-list {
|
|
188
|
+
@apply flex-auto h-auto overflow-x-hidden overflow-y-auto;
|
|
189
|
+
}
|
|
193
190
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
stroke-linecap: round;
|
|
198
|
-
stroke-linejoin: round;
|
|
199
|
-
}
|
|
191
|
+
.ss-content .ss-list .ss-error {
|
|
192
|
+
@apply text-red-500 p-2 dark:text-red-400;
|
|
193
|
+
}
|
|
200
194
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
195
|
+
.ss-content .ss-list .ss-searching {
|
|
196
|
+
@apply text-gray-700 p-2 dark:text-white;
|
|
197
|
+
}
|
|
204
198
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
199
|
+
.ss-content .ss-list .ss-optgroup.ss-close .ss-option {
|
|
200
|
+
@apply !hidden;
|
|
201
|
+
}
|
|
208
202
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
203
|
+
/* Option groups - Updated colors */
|
|
204
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label {
|
|
205
|
+
@apply flex flex-row items-center justify-between p-2 bg-gray-50 dark:bg-gray-600;
|
|
206
|
+
}
|
|
212
207
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
208
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text {
|
|
209
|
+
@apply flex-auto font-bold text-gray-700 dark:text-white;
|
|
210
|
+
}
|
|
216
211
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
}
|
|
212
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow) {
|
|
213
|
+
@apply cursor-pointer;
|
|
214
|
+
}
|
|
221
215
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
}
|
|
216
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions {
|
|
217
|
+
@apply flex-none flex flex-row items-center justify-center gap-1;
|
|
218
|
+
}
|
|
226
219
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
220
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall {
|
|
221
|
+
@apply flex-none flex flex-row cursor-pointer hover:opacity-50;
|
|
222
|
+
}
|
|
230
223
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
224
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path {
|
|
225
|
+
@apply stroke-red-500 dark:stroke-red-400;
|
|
226
|
+
}
|
|
234
227
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
228
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span {
|
|
229
|
+
@apply flex-none flex items-center justify-center text-[60%] text-center pr-1;
|
|
230
|
+
}
|
|
238
231
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
232
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg {
|
|
233
|
+
@apply flex-none w-3 h-3;
|
|
234
|
+
}
|
|
242
235
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
236
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path {
|
|
237
|
+
@apply fill-none stroke-green-500 dark:stroke-green-400;
|
|
238
|
+
stroke-linecap: round;
|
|
239
|
+
stroke-linejoin: round;
|
|
240
|
+
}
|
|
246
241
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
242
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child {
|
|
243
|
+
stroke-width: 5;
|
|
244
|
+
}
|
|
250
245
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
246
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child {
|
|
247
|
+
stroke-width: 11;
|
|
248
|
+
}
|
|
254
249
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
250
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable {
|
|
251
|
+
@apply flex-none flex flex-row cursor-pointer;
|
|
252
|
+
}
|
|
258
253
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
stroke-linejoin: round;
|
|
263
|
-
}
|
|
254
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow {
|
|
255
|
+
@apply flex-auto w-2.5 h-2.5;
|
|
256
|
+
}
|
|
264
257
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
258
|
+
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path {
|
|
259
|
+
@apply fill-none stroke-gray-700 transition-transform duration-200 dark:stroke-white;
|
|
260
|
+
stroke-width: 18;
|
|
261
|
+
stroke-linecap: round;
|
|
262
|
+
stroke-linejoin: round;
|
|
263
|
+
}
|
|
268
264
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
265
|
+
.ss-content .ss-list .ss-optgroup .ss-option {
|
|
266
|
+
@apply p-1 pl-6;
|
|
267
|
+
}
|
|
272
268
|
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
269
|
+
/* Options - Updated text colors to match theme */
|
|
270
|
+
.ss-content .ss-list .ss-option {
|
|
271
|
+
@apply block p-2 whitespace-normal text-gray-700 cursor-pointer select-none hover:bg-primary-500 hover:text-white dark:text-white dark:hover:bg-primary-500 dark:hover:text-white;
|
|
272
|
+
min-height: 0;
|
|
273
|
+
}
|
|
276
274
|
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
275
|
+
.ss-content .ss-list .ss-option:empty {
|
|
276
|
+
@apply hidden p-0 m-0;
|
|
277
|
+
}
|
|
280
278
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
stroke-linejoin: round;
|
|
286
|
-
}
|
|
279
|
+
.ss-content .ss-list .ss-option.ss-highlighted,
|
|
280
|
+
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
|
|
281
|
+
@apply text-white bg-primary-500;
|
|
282
|
+
}
|
|
287
283
|
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
284
|
+
.ss-content .ss-list .ss-option.ss-disabled {
|
|
285
|
+
@apply cursor-not-allowed bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400;
|
|
286
|
+
}
|
|
291
287
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
}
|
|
288
|
+
.ss-content .ss-list .ss-option.ss-disabled:hover {
|
|
289
|
+
@apply text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-800;
|
|
290
|
+
}
|
|
296
291
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
292
|
+
.ss-content .ss-list .ss-option .ss-search-highlight {
|
|
293
|
+
@apply inline-block bg-yellow-200 dark:bg-yellow-300;
|
|
294
|
+
}
|
|
300
295
|
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
296
|
+
/* Additional state classes to match form validation states */
|
|
297
|
+
.ss-main.ss-invalid {
|
|
298
|
+
@apply bg-red-50 border-red-500 dark:border-red-500 text-red-900 dark:text-red-500 focus:ring-red-500 focus:border-red-500;
|
|
299
|
+
}
|
|
305
300
|
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
301
|
+
.ss-main.ss-invalid .ss-values .ss-placeholder {
|
|
302
|
+
@apply text-red-700 dark:text-red-500;
|
|
303
|
+
}
|
|
309
304
|
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
305
|
+
.ss-main.ss-valid {
|
|
306
|
+
@apply bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 focus:ring-green-500 focus:border-green-500;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.ss-main.ss-valid .ss-values .ss-placeholder {
|
|
310
|
+
@apply text-green-700 dark:text-green-500;
|
|
313
311
|
}
|