lesli_shield 1.1.6 → 1.1.7

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.
Files changed (56) hide show
  1. checksums.yaml +4 -4
  2. data/Rakefile +3 -0
  3. data/app/assets/stylesheets/lesli_shield/application.css +140 -1
  4. data/app/assets/stylesheets/lesli_shield/confirmations.css +917 -18
  5. data/app/assets/stylesheets/lesli_shield/confirmations.tailwind.css +918 -0
  6. data/app/assets/stylesheets/lesli_shield/passwords.css +872 -18
  7. data/app/assets/stylesheets/lesli_shield/passwords.tailwind.css +873 -0
  8. data/app/assets/stylesheets/lesli_shield/registrations.css +904 -832
  9. data/app/assets/stylesheets/lesli_shield/registrations.tailwind.css +908 -0
  10. data/app/assets/stylesheets/lesli_shield/sessions.css +984 -32
  11. data/app/assets/stylesheets/lesli_shield/sessions.tailwind.css +983 -1
  12. data/app/controllers/lesli_shield/profile/passwords_controller.rb +119 -0
  13. data/app/controllers/lesli_shield/profiles_controller.rb +63 -0
  14. data/app/controllers/lesli_shield/sessions_controller.rb +1 -2
  15. data/app/controllers/users/confirmations_controller.rb +162 -49
  16. data/app/controllers/users/passwords_controller.rb +211 -28
  17. data/app/controllers/users/registrations_controller.rb +108 -83
  18. data/app/controllers/users/sessions_controller.rb +122 -84
  19. data/app/interfaces/lesli_shield/authorization_interface.rb +2 -2
  20. data/app/mailers/lesli_shield/devise_mailer.rb +73 -17
  21. data/app/models/concerns/lesli_shield/user_authentication.rb +54 -0
  22. data/app/models/lesli_shield/account.rb +4 -1
  23. data/app/models/lesli_shield/invite.rb +1 -1
  24. data/app/models/lesli_shield/user/role.rb +1 -1
  25. data/app/models/lesli_shield/user.rb +5 -2
  26. data/app/services/lesli_shield/profile/password_service.rb +47 -0
  27. data/app/services/lesli_shield/profile_service.rb +24 -0
  28. data/app/services/lesli_shield/user_registration_service.rb +41 -74
  29. data/app/services/lesli_shield/user_session_service.rb +1 -1
  30. data/app/services/lesli_shield/user_validator_service.rb +30 -32
  31. data/app/views/devise/confirmations/new.html.erb +58 -12
  32. data/app/views/devise/confirmations/show.html.erb +27 -60
  33. data/app/views/devise/passwords/edit.html.erb +59 -25
  34. data/app/views/devise/passwords/new.html.erb +61 -26
  35. data/app/views/devise/registrations/new.html.erb +80 -53
  36. data/app/views/devise/sessions/new.html.erb +53 -36
  37. data/app/views/devise/shared/_application-devise-simple.erb +18 -19
  38. data/app/views/devise/shared/_demo.html.erb +8 -6
  39. data/app/views/devise/shared/_error_messages.html.erb +45 -10
  40. data/app/views/devise/shared/_links.html.erb +6 -13
  41. data/app/views/lesli_shield/invites/_form.html.erb +1 -1
  42. data/app/views/lesli_shield/invites/index.html.erb +3 -2
  43. data/app/views/lesli_shield/profiles/_password-form.html.erb +68 -0
  44. data/app/views/lesli_shield/profiles/show.html.erb +29 -0
  45. data/app/views/lesli_shield/users/_information-form.html.erb +9 -1
  46. data/config/initializers/devise.rb +52 -328
  47. data/config/locales/translations.en.yml +65 -2
  48. data/config/locales/translations.es.yml +65 -2
  49. data/config/routes.rb +4 -0
  50. data/lib/lesli_shield/engine.rb +38 -4
  51. data/lib/lesli_shield/router.rb +52 -18
  52. data/lib/lesli_shield/version.rb +2 -2
  53. data/readme.md +4 -2
  54. metadata +30 -5
  55. data/app/assets/config/lesli_shield_manifest.js +0 -48
  56. data/app/assets/stylesheets/lesli_shield/application.tailwind.css +0 -2
@@ -0,0 +1,908 @@
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ @layer theme, utilities;
4
+ @layer theme {
5
+ :root, :host {
6
+ --color-amber-50: oklch(98.7% 0.022 95.277);
7
+ --color-amber-200: oklch(92.4% 0.12 95.746);
8
+ --color-amber-500: oklch(76.9% 0.188 70.08);
9
+ --color-amber-600: oklch(66.6% 0.179 58.318);
10
+ --color-amber-700: oklch(55.5% 0.163 48.998);
11
+ --color-amber-950: oklch(27.9% 0.077 45.635);
12
+ --color-emerald-50: oklch(97.9% 0.021 166.113);
13
+ --color-emerald-200: oklch(90.5% 0.093 164.15);
14
+ --color-emerald-500: oklch(69.6% 0.17 162.48);
15
+ --color-emerald-600: oklch(59.6% 0.145 163.225);
16
+ --color-emerald-700: oklch(50.8% 0.118 165.612);
17
+ --color-sky-50: oklch(97.7% 0.013 236.62);
18
+ --color-sky-200: oklch(90.1% 0.058 230.902);
19
+ --color-sky-500: oklch(68.5% 0.169 237.323);
20
+ --color-sky-600: oklch(58.8% 0.158 241.966);
21
+ --color-sky-700: oklch(50% 0.134 242.749);
22
+ --color-sky-900: oklch(39.1% 0.09 240.876);
23
+ --color-rose-50: oklch(96.9% 0.015 12.422);
24
+ --color-rose-200: oklch(89.2% 0.058 10.001);
25
+ --color-rose-400: oklch(71.2% 0.194 13.428);
26
+ --color-rose-500: oklch(64.5% 0.246 16.439);
27
+ --color-rose-600: oklch(58.6% 0.253 17.585);
28
+ --color-rose-700: oklch(51.4% 0.222 16.935);
29
+ --color-slate-50: oklch(98.4% 0.003 247.858);
30
+ --color-slate-100: oklch(96.8% 0.007 247.896);
31
+ --color-slate-200: oklch(92.9% 0.013 255.508);
32
+ --color-slate-300: oklch(86.9% 0.022 252.894);
33
+ --color-slate-400: oklch(70.4% 0.04 256.788);
34
+ --color-slate-500: oklch(55.4% 0.046 257.417);
35
+ --color-slate-600: oklch(44.6% 0.043 257.281);
36
+ --color-slate-700: oklch(37.2% 0.044 257.287);
37
+ --color-slate-800: oklch(27.9% 0.041 260.031);
38
+ --color-slate-900: oklch(20.8% 0.042 265.755);
39
+ --color-slate-950: oklch(12.9% 0.042 264.695);
40
+ --color-white: #fff;
41
+ --spacing: 0.25rem;
42
+ --container-md: 28rem;
43
+ --container-lg: 32rem;
44
+ --text-xs: 0.75rem;
45
+ --text-xs--line-height: calc(1 / 0.75);
46
+ --text-sm: 0.875rem;
47
+ --text-sm--line-height: calc(1.25 / 0.875);
48
+ --text-lg: 1.125rem;
49
+ --text-lg--line-height: calc(1.75 / 1.125);
50
+ --text-xl: 1.25rem;
51
+ --text-xl--line-height: calc(1.75 / 1.25);
52
+ --text-3xl: 1.875rem;
53
+ --text-3xl--line-height: calc(2.25 / 1.875);
54
+ --font-weight-medium: 500;
55
+ --font-weight-semibold: 600;
56
+ --tracking-tight: -0.025em;
57
+ --leading-tight: 1.25;
58
+ --radius-sm: 0.25rem;
59
+ --radius-lg: 0.5rem;
60
+ --radius-xl: 0.75rem;
61
+ --radius-2xl: 1rem;
62
+ --default-transition-duration: 150ms;
63
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
64
+ }
65
+ }
66
+ @layer utilities {
67
+ .absolute {
68
+ position: absolute;
69
+ }
70
+ .relative {
71
+ position: relative;
72
+ }
73
+ .inset-0 {
74
+ inset: 0px;
75
+ }
76
+ .inset-x-0 {
77
+ inset-inline: 0px;
78
+ }
79
+ .bottom-0 {
80
+ bottom: 0px;
81
+ }
82
+ .mx-auto {
83
+ margin-inline: auto;
84
+ }
85
+ .mt-1 {
86
+ margin-top: var(--spacing);
87
+ }
88
+ .mb-4 {
89
+ margin-bottom: calc(var(--spacing) * 4);
90
+ }
91
+ .mb-6 {
92
+ margin-bottom: calc(var(--spacing) * 6);
93
+ }
94
+ .mb-8 {
95
+ margin-bottom: calc(var(--spacing) * 8);
96
+ }
97
+ .flex {
98
+ display: flex;
99
+ }
100
+ .hidden {
101
+ display: none;
102
+ }
103
+ .inline-flex {
104
+ display: inline-flex;
105
+ }
106
+ .h-5 {
107
+ height: calc(var(--spacing) * 5);
108
+ }
109
+ .h-auto {
110
+ height: auto;
111
+ }
112
+ .max-h-20 {
113
+ max-height: calc(var(--spacing) * 20);
114
+ }
115
+ .min-h-screen {
116
+ min-height: 100vh;
117
+ }
118
+ .w-5 {
119
+ width: calc(var(--spacing) * 5);
120
+ }
121
+ .w-auto {
122
+ width: auto;
123
+ }
124
+ .w-full {
125
+ width: 100%;
126
+ }
127
+ .max-w-\[220px\] {
128
+ max-width: 220px;
129
+ }
130
+ .max-w-lg {
131
+ max-width: var(--container-lg);
132
+ }
133
+ .max-w-md {
134
+ max-width: var(--container-md);
135
+ }
136
+ .flex-1 {
137
+ flex: 1;
138
+ }
139
+ .flex-col {
140
+ flex-direction: column;
141
+ }
142
+ .items-center {
143
+ align-items: center;
144
+ }
145
+ .justify-center {
146
+ justify-content: center;
147
+ }
148
+ .gap-2 {
149
+ gap: calc(var(--spacing) * 2);
150
+ }
151
+ .overflow-hidden {
152
+ overflow: hidden;
153
+ }
154
+ .rounded-lg {
155
+ border-radius: var(--radius-lg);
156
+ }
157
+ .bg-slate-50 {
158
+ background-color: var(--color-slate-50);
159
+ }
160
+ .bg-white {
161
+ background-color: var(--color-white);
162
+ }
163
+ .bg-gradient-to-t {
164
+ --tw-gradient-position: to top in oklab;
165
+ background-image: linear-gradient(var(--tw-gradient-stops));
166
+ }
167
+ .from-slate-950\/70 {
168
+ --tw-gradient-from: color-mix(in srgb, oklch(12.9% 0.042 264.695) 70%, transparent);
169
+ @supports (color: color-mix(in lab, red, red)) {
170
+ --tw-gradient-from: color-mix(in oklab, var(--color-slate-950) 70%, transparent);
171
+ }
172
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
173
+ }
174
+ .via-slate-900\/10 {
175
+ --tw-gradient-via: color-mix(in srgb, oklch(20.8% 0.042 265.755) 10%, transparent);
176
+ @supports (color: color-mix(in lab, red, red)) {
177
+ --tw-gradient-via: color-mix(in oklab, var(--color-slate-900) 10%, transparent);
178
+ }
179
+ --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
180
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
181
+ }
182
+ .to-transparent {
183
+ --tw-gradient-to: transparent;
184
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
185
+ }
186
+ .p-12 {
187
+ padding: calc(var(--spacing) * 12);
188
+ }
189
+ .px-6 {
190
+ padding-inline: calc(var(--spacing) * 6);
191
+ }
192
+ .py-10 {
193
+ padding-block: calc(var(--spacing) * 10);
194
+ }
195
+ .pt-6 {
196
+ padding-top: calc(var(--spacing) * 6);
197
+ }
198
+ .text-center {
199
+ text-align: center;
200
+ }
201
+ .text-left {
202
+ text-align: left;
203
+ }
204
+ .text-3xl {
205
+ font-size: var(--text-3xl);
206
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
207
+ }
208
+ .text-sm {
209
+ font-size: var(--text-sm);
210
+ line-height: var(--tw-leading, var(--text-sm--line-height));
211
+ }
212
+ .text-xs {
213
+ font-size: var(--text-xs);
214
+ line-height: var(--tw-leading, var(--text-xs--line-height));
215
+ }
216
+ .leading-5 {
217
+ --tw-leading: calc(var(--spacing) * 5);
218
+ line-height: calc(var(--spacing) * 5);
219
+ }
220
+ .leading-6 {
221
+ --tw-leading: calc(var(--spacing) * 6);
222
+ line-height: calc(var(--spacing) * 6);
223
+ }
224
+ .leading-tight {
225
+ --tw-leading: var(--leading-tight);
226
+ line-height: var(--leading-tight);
227
+ }
228
+ .font-medium {
229
+ --tw-font-weight: var(--font-weight-medium);
230
+ font-weight: var(--font-weight-medium);
231
+ }
232
+ .font-semibold {
233
+ --tw-font-weight: var(--font-weight-semibold);
234
+ font-weight: var(--font-weight-semibold);
235
+ }
236
+ .tracking-tight {
237
+ --tw-tracking: var(--tracking-tight);
238
+ letter-spacing: var(--tracking-tight);
239
+ }
240
+ .text-\[var\(--lesli-color-primary\)\] {
241
+ color: var(--lesli-color-primary);
242
+ }
243
+ .text-sky-700 {
244
+ color: var(--color-sky-700);
245
+ }
246
+ .text-slate-500 {
247
+ color: var(--color-slate-500);
248
+ }
249
+ .text-slate-600 {
250
+ color: var(--color-slate-600);
251
+ }
252
+ .text-slate-900 {
253
+ color: var(--color-slate-900);
254
+ }
255
+ .text-white {
256
+ color: var(--color-white);
257
+ }
258
+ .underline {
259
+ text-decoration-line: underline;
260
+ }
261
+ .underline-offset-2 {
262
+ text-underline-offset: 2px;
263
+ }
264
+ .transition {
265
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
266
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
267
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
268
+ }
269
+ @media (hover: hover) {
270
+ .hover\:text-sky-900:hover {
271
+ color: var(--color-sky-900);
272
+ }
273
+ .hover\:opacity-80:hover {
274
+ opacity: 80%;
275
+ }
276
+ }
277
+ .focus\:ring-2:focus {
278
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
279
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
280
+ }
281
+ .focus\:ring-sky-500\/30:focus {
282
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
283
+ @supports (color: color-mix(in lab, red, red)) {
284
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
285
+ }
286
+ }
287
+ .focus\:ring-offset-4:focus {
288
+ --tw-ring-offset-width: 4px;
289
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
290
+ }
291
+ .focus\:outline-none:focus {
292
+ --tw-outline-style: none;
293
+ outline-style: none;
294
+ }
295
+ .focus-visible\:rounded-sm:focus-visible {
296
+ border-radius: var(--radius-sm);
297
+ }
298
+ .focus-visible\:outline-2:focus-visible {
299
+ outline-style: var(--tw-outline-style);
300
+ outline-width: 2px;
301
+ }
302
+ .focus-visible\:outline-offset-2:focus-visible {
303
+ outline-offset: 2px;
304
+ }
305
+ .focus-visible\:outline-\[var\(--lesli-color-primary\)\]:focus-visible {
306
+ outline-color: var(--lesli-color-primary);
307
+ }
308
+ @media (width >= 40rem) {
309
+ .sm\:px-10 {
310
+ padding-inline: calc(var(--spacing) * 10);
311
+ }
312
+ .sm\:pt-8 {
313
+ padding-top: calc(var(--spacing) * 8);
314
+ }
315
+ }
316
+ @media (width >= 64rem) {
317
+ .lg\:col-span-2 {
318
+ grid-column: span 2 / span 2;
319
+ }
320
+ .lg\:block {
321
+ display: block;
322
+ }
323
+ .lg\:grid {
324
+ display: grid;
325
+ }
326
+ .lg\:grid-cols-3 {
327
+ grid-template-columns: repeat(3, minmax(0, 1fr));
328
+ }
329
+ .lg\:px-16 {
330
+ padding-inline: calc(var(--spacing) * 16);
331
+ }
332
+ }
333
+ }
334
+ @layer components {
335
+ .lesli-form-field {
336
+ margin-bottom: calc(var(--spacing) * 4);
337
+ }
338
+ .lesli-form-label-wrapper {
339
+ margin-bottom: calc(var(--spacing) * 2);
340
+ }
341
+ .lesli-form-label {
342
+ display: block;
343
+ font-size: var(--text-sm);
344
+ line-height: var(--tw-leading, var(--text-sm--line-height));
345
+ --tw-leading: calc(var(--spacing) * 5);
346
+ line-height: calc(var(--spacing) * 5);
347
+ --tw-font-weight: var(--font-weight-medium);
348
+ font-weight: var(--font-weight-medium);
349
+ color: var(--color-slate-700);
350
+ }
351
+ .lesli-form-field-body {
352
+ min-width: 0px;
353
+ }
354
+ .lesli-form-control {
355
+ position: relative;
356
+ }
357
+ .lesli-form-input, .lesli-form-select, .lesli-form-control textarea, .lesli-form-control trix-editor {
358
+ display: block;
359
+ width: 100%;
360
+ border-radius: var(--radius-xl);
361
+ border-style: var(--tw-border-style);
362
+ border-width: 1px;
363
+ border-color: var(--color-slate-300);
364
+ background-color: var(--color-white);
365
+ padding-inline: calc(var(--spacing) * 3.5);
366
+ padding-block: calc(var(--spacing) * 2.5);
367
+ font-size: var(--text-sm);
368
+ line-height: var(--tw-leading, var(--text-sm--line-height));
369
+ color: var(--color-slate-900);
370
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
371
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
372
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
373
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
374
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
375
+ --tw-outline-style: none;
376
+ outline-style: none;
377
+ &::placeholder {
378
+ color: var(--color-slate-400);
379
+ }
380
+ &:hover {
381
+ @media (hover: hover) {
382
+ border-color: var(--color-slate-400);
383
+ }
384
+ }
385
+ &:focus {
386
+ border-color: var(--color-sky-500);
387
+ }
388
+ &:focus {
389
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
390
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
391
+ }
392
+ &:focus {
393
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent);
394
+ @supports (color: color-mix(in lab, red, red)) {
395
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
396
+ }
397
+ }
398
+ &:disabled {
399
+ cursor: not-allowed;
400
+ }
401
+ &:disabled {
402
+ background-color: var(--color-slate-100);
403
+ }
404
+ &:disabled {
405
+ color: var(--color-slate-500);
406
+ }
407
+ &:disabled {
408
+ opacity: 75%;
409
+ }
410
+ }
411
+ .lesli-form-input, .lesli-form-select {
412
+ height: calc(var(--spacing) * 11);
413
+ }
414
+ .lesli-form-control textarea, .lesli-form-control trix-editor {
415
+ min-height: calc(var(--spacing) * 32);
416
+ resize: vertical;
417
+ }
418
+ .lesli-form-select-wrapper {
419
+ position: relative;
420
+ }
421
+ .lesli-form-select {
422
+ cursor: pointer;
423
+ appearance: none;
424
+ padding-right: calc(var(--spacing) * 10);
425
+ }
426
+ .lesli-form-select-wrapper::after {
427
+ pointer-events: none;
428
+ position: absolute;
429
+ top: calc(1 / 2 * 100%);
430
+ right: calc(var(--spacing) * 3.5);
431
+ height: calc(var(--spacing) * 2);
432
+ width: calc(var(--spacing) * 2);
433
+ --tw-translate-y: calc(var(--spacing) * -2);
434
+ translate: var(--tw-translate-x) var(--tw-translate-y);
435
+ rotate: 45deg;
436
+ border-right-style: var(--tw-border-style);
437
+ border-right-width: 2px;
438
+ border-bottom-style: var(--tw-border-style);
439
+ border-bottom-width: 2px;
440
+ border-color: var(--color-slate-400);
441
+ --tw-content: '';
442
+ content: var(--tw-content);
443
+ }
444
+ .lesli-form-checkbox {
445
+ height: calc(var(--spacing) * 4);
446
+ width: calc(var(--spacing) * 4);
447
+ cursor: pointer;
448
+ border-radius: 0.25rem;
449
+ border-color: var(--color-slate-300);
450
+ accent-color: var(--color-sky-600);
451
+ &:focus {
452
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
453
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
454
+ }
455
+ &:focus {
456
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
457
+ @supports (color: color-mix(in lab, red, red)) {
458
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
459
+ }
460
+ }
461
+ &:focus {
462
+ --tw-ring-offset-width: 2px;
463
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
464
+ }
465
+ &:disabled {
466
+ cursor: not-allowed;
467
+ }
468
+ &:disabled {
469
+ opacity: 50%;
470
+ }
471
+ }
472
+ .lesli-form-checkbox-label {
473
+ display: inline-flex;
474
+ cursor: pointer;
475
+ align-items: center;
476
+ gap: calc(var(--spacing) * 2.5);
477
+ font-size: var(--text-sm);
478
+ line-height: var(--tw-leading, var(--text-sm--line-height));
479
+ color: var(--color-slate-600);
480
+ }
481
+ .lesli-form-control.has-icon .lesli-form-input, .lesli-form-control.has-icon .lesli-form-select {
482
+ padding-left: calc(var(--spacing) * 11);
483
+ }
484
+ .lesli-form-icon {
485
+ pointer-events: none;
486
+ position: absolute;
487
+ top: calc(1 / 2 * 100%);
488
+ left: calc(var(--spacing) * 3.5);
489
+ display: inline-flex;
490
+ height: calc(var(--spacing) * 5);
491
+ width: calc(var(--spacing) * 5);
492
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
493
+ translate: var(--tw-translate-x) var(--tw-translate-y);
494
+ align-items: center;
495
+ justify-content: center;
496
+ color: var(--color-slate-400);
497
+ }
498
+ .lesli-form-icon .material-symbols-outlined {
499
+ font-size: var(--text-xl);
500
+ line-height: var(--tw-leading, var(--text-xl--line-height));
501
+ --tw-leading: 1;
502
+ line-height: 1;
503
+ }
504
+ .lesli-form-help {
505
+ margin-top: calc(var(--spacing) * 2);
506
+ font-size: var(--text-sm);
507
+ line-height: var(--tw-leading, var(--text-sm--line-height));
508
+ --tw-leading: calc(var(--spacing) * 5);
509
+ line-height: calc(var(--spacing) * 5);
510
+ color: var(--color-slate-500);
511
+ }
512
+ .lesli-form-field.is-danger .lesli-form-input, .lesli-form-field.is-danger .lesli-form-select, .lesli-form-field.is-danger textarea, .lesli-form-field.is-danger trix-editor {
513
+ border-color: var(--color-rose-400);
514
+ &:focus {
515
+ border-color: var(--color-rose-500);
516
+ }
517
+ &:focus {
518
+ --tw-ring-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 10%, transparent);
519
+ @supports (color: color-mix(in lab, red, red)) {
520
+ --tw-ring-color: color-mix(in oklab, var(--color-rose-500) 10%, transparent);
521
+ }
522
+ }
523
+ }
524
+ .lesli-form-help.is-danger {
525
+ color: var(--color-rose-700);
526
+ }
527
+ .lesli-form-help.is-warning {
528
+ color: var(--color-amber-700);
529
+ }
530
+ .lesli-form-help.is-success {
531
+ color: var(--color-emerald-700);
532
+ }
533
+ .lesli-form-help.is-info {
534
+ color: var(--color-sky-700);
535
+ }
536
+ .lesli-form-button {
537
+ display: inline-flex;
538
+ height: calc(var(--spacing) * 11);
539
+ cursor: pointer;
540
+ align-items: center;
541
+ justify-content: center;
542
+ gap: calc(var(--spacing) * 2);
543
+ border-radius: var(--radius-xl);
544
+ border-style: var(--tw-border-style);
545
+ border-width: 1px;
546
+ border-color: transparent;
547
+ padding-inline: calc(var(--spacing) * 4);
548
+ font-size: var(--text-sm);
549
+ line-height: var(--tw-leading, var(--text-sm--line-height));
550
+ --tw-font-weight: var(--font-weight-semibold);
551
+ font-weight: var(--font-weight-semibold);
552
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
553
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
554
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
555
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
556
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
557
+ &:focus {
558
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
559
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
560
+ }
561
+ &:focus {
562
+ --tw-outline-style: none;
563
+ outline-style: none;
564
+ }
565
+ &:disabled {
566
+ pointer-events: none;
567
+ }
568
+ &:disabled {
569
+ cursor: not-allowed;
570
+ }
571
+ &:disabled {
572
+ opacity: 50%;
573
+ }
574
+ }
575
+ .lesli-form-button.is-primary, .lesli-form-button.is-info {
576
+ background-color: var(--color-sky-600);
577
+ color: var(--color-white);
578
+ &:hover {
579
+ @media (hover: hover) {
580
+ background-color: var(--color-sky-700);
581
+ }
582
+ }
583
+ &:focus {
584
+ --tw-ring-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
585
+ @supports (color: color-mix(in lab, red, red)) {
586
+ --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
587
+ }
588
+ }
589
+ }
590
+ .lesli-form-button.is-success {
591
+ background-color: var(--color-emerald-600);
592
+ color: var(--color-white);
593
+ &:hover {
594
+ @media (hover: hover) {
595
+ background-color: var(--color-emerald-700);
596
+ }
597
+ }
598
+ &:focus {
599
+ --tw-ring-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
600
+ @supports (color: color-mix(in lab, red, red)) {
601
+ --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
602
+ }
603
+ }
604
+ }
605
+ .lesli-form-button.is-warning {
606
+ background-color: var(--color-amber-500);
607
+ color: var(--color-amber-950);
608
+ &:hover {
609
+ @media (hover: hover) {
610
+ background-color: var(--color-amber-600);
611
+ }
612
+ }
613
+ &:focus {
614
+ --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
615
+ @supports (color: color-mix(in lab, red, red)) {
616
+ --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
617
+ }
618
+ }
619
+ }
620
+ .lesli-form-button.is-danger {
621
+ background-color: var(--color-rose-600);
622
+ color: var(--color-white);
623
+ &:hover {
624
+ @media (hover: hover) {
625
+ background-color: var(--color-rose-700);
626
+ }
627
+ }
628
+ &:focus {
629
+ --tw-ring-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 20%, transparent);
630
+ @supports (color: color-mix(in lab, red, red)) {
631
+ --tw-ring-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
632
+ }
633
+ }
634
+ }
635
+ .lesli-form-button.is-fullwidth {
636
+ width: 100%;
637
+ }
638
+ .lesli-form-button-icon {
639
+ display: inline-flex;
640
+ height: calc(var(--spacing) * 5);
641
+ width: calc(var(--spacing) * 5);
642
+ align-items: center;
643
+ justify-content: center;
644
+ }
645
+ .lesli-form-button-icon .material-symbols {
646
+ font-size: var(--text-xl);
647
+ line-height: var(--tw-leading, var(--text-xl--line-height));
648
+ --tw-leading: 1;
649
+ line-height: 1;
650
+ }
651
+ .lesli-form-fieldset {
652
+ margin-bottom: calc(var(--spacing) * 6);
653
+ border-radius: var(--radius-2xl);
654
+ border-style: var(--tw-border-style);
655
+ border-width: 1px;
656
+ border-color: var(--color-slate-200);
657
+ background-color: var(--color-white);
658
+ padding: calc(var(--spacing) * 6);
659
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
660
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
661
+ }
662
+ .lesli-form-legend {
663
+ margin-bottom: calc(var(--spacing) * 5);
664
+ margin-left: calc(var(--spacing) * -1);
665
+ padding-inline: var(--spacing);
666
+ font-size: var(--text-lg);
667
+ line-height: var(--tw-leading, var(--text-lg--line-height));
668
+ --tw-font-weight: var(--font-weight-semibold);
669
+ font-weight: var(--font-weight-semibold);
670
+ color: var(--color-slate-800);
671
+ }
672
+ .lesli-form-fieldset.is-info {
673
+ border-color: var(--color-sky-200);
674
+ background-color: color-mix(in srgb, oklch(97.7% 0.013 236.62) 40%, transparent);
675
+ @supports (color: color-mix(in lab, red, red)) {
676
+ background-color: color-mix(in oklab, var(--color-sky-50) 40%, transparent);
677
+ }
678
+ }
679
+ .lesli-form-fieldset.is-success {
680
+ border-color: var(--color-emerald-200);
681
+ background-color: color-mix(in srgb, oklch(97.9% 0.021 166.113) 40%, transparent);
682
+ @supports (color: color-mix(in lab, red, red)) {
683
+ background-color: color-mix(in oklab, var(--color-emerald-50) 40%, transparent);
684
+ }
685
+ }
686
+ .lesli-form-fieldset.is-warning {
687
+ border-color: var(--color-amber-200);
688
+ background-color: color-mix(in srgb, oklch(98.7% 0.022 95.277) 50%, transparent);
689
+ @supports (color: color-mix(in lab, red, red)) {
690
+ background-color: color-mix(in oklab, var(--color-amber-50) 50%, transparent);
691
+ }
692
+ }
693
+ .lesli-form-fieldset.is-danger {
694
+ border-color: var(--color-rose-200);
695
+ background-color: color-mix(in srgb, oklch(96.9% 0.015 12.422) 40%, transparent);
696
+ @supports (color: color-mix(in lab, red, red)) {
697
+ background-color: color-mix(in oklab, var(--color-rose-50) 40%, transparent);
698
+ }
699
+ }
700
+ @media (min-width: 768px) {
701
+ .lesli-form-field.is-horizontal {
702
+ display: grid;
703
+ grid-template-columns: minmax(8rem,1fr) minmax(0,3fr);
704
+ align-items: flex-start;
705
+ gap: calc(var(--spacing) * 5);
706
+ }
707
+ .lesli-form-field.is-horizontal > .lesli-form-label-wrapper {
708
+ margin-bottom: 0px;
709
+ padding-top: calc(var(--spacing) * 2.5);
710
+ text-align: right;
711
+ }
712
+ .lesli-form-field.is-horizontal > .lesli-form-field-body {
713
+ grid-column-start: 2;
714
+ }
715
+ }
716
+ .lesli-auth-visual {
717
+ background: linear-gradient( 0deg, rgb(49 106 255 / 40%), rgb(49 106 255 / 40%) ), url("/lesli_shield/register-background.jpg");
718
+ background-position: center;
719
+ background-size: cover;
720
+ }
721
+ }
722
+ @property --tw-gradient-position {
723
+ syntax: "*";
724
+ inherits: false;
725
+ }
726
+ @property --tw-gradient-from {
727
+ syntax: "<color>";
728
+ inherits: false;
729
+ initial-value: #0000;
730
+ }
731
+ @property --tw-gradient-via {
732
+ syntax: "<color>";
733
+ inherits: false;
734
+ initial-value: #0000;
735
+ }
736
+ @property --tw-gradient-to {
737
+ syntax: "<color>";
738
+ inherits: false;
739
+ initial-value: #0000;
740
+ }
741
+ @property --tw-gradient-stops {
742
+ syntax: "*";
743
+ inherits: false;
744
+ }
745
+ @property --tw-gradient-via-stops {
746
+ syntax: "*";
747
+ inherits: false;
748
+ }
749
+ @property --tw-gradient-from-position {
750
+ syntax: "<length-percentage>";
751
+ inherits: false;
752
+ initial-value: 0%;
753
+ }
754
+ @property --tw-gradient-via-position {
755
+ syntax: "<length-percentage>";
756
+ inherits: false;
757
+ initial-value: 50%;
758
+ }
759
+ @property --tw-gradient-to-position {
760
+ syntax: "<length-percentage>";
761
+ inherits: false;
762
+ initial-value: 100%;
763
+ }
764
+ @property --tw-leading {
765
+ syntax: "*";
766
+ inherits: false;
767
+ }
768
+ @property --tw-font-weight {
769
+ syntax: "*";
770
+ inherits: false;
771
+ }
772
+ @property --tw-tracking {
773
+ syntax: "*";
774
+ inherits: false;
775
+ }
776
+ @property --tw-shadow {
777
+ syntax: "*";
778
+ inherits: false;
779
+ initial-value: 0 0 #0000;
780
+ }
781
+ @property --tw-shadow-color {
782
+ syntax: "*";
783
+ inherits: false;
784
+ }
785
+ @property --tw-shadow-alpha {
786
+ syntax: "<percentage>";
787
+ inherits: false;
788
+ initial-value: 100%;
789
+ }
790
+ @property --tw-inset-shadow {
791
+ syntax: "*";
792
+ inherits: false;
793
+ initial-value: 0 0 #0000;
794
+ }
795
+ @property --tw-inset-shadow-color {
796
+ syntax: "*";
797
+ inherits: false;
798
+ }
799
+ @property --tw-inset-shadow-alpha {
800
+ syntax: "<percentage>";
801
+ inherits: false;
802
+ initial-value: 100%;
803
+ }
804
+ @property --tw-ring-color {
805
+ syntax: "*";
806
+ inherits: false;
807
+ }
808
+ @property --tw-ring-shadow {
809
+ syntax: "*";
810
+ inherits: false;
811
+ initial-value: 0 0 #0000;
812
+ }
813
+ @property --tw-inset-ring-color {
814
+ syntax: "*";
815
+ inherits: false;
816
+ }
817
+ @property --tw-inset-ring-shadow {
818
+ syntax: "*";
819
+ inherits: false;
820
+ initial-value: 0 0 #0000;
821
+ }
822
+ @property --tw-ring-inset {
823
+ syntax: "*";
824
+ inherits: false;
825
+ }
826
+ @property --tw-ring-offset-width {
827
+ syntax: "<length>";
828
+ inherits: false;
829
+ initial-value: 0px;
830
+ }
831
+ @property --tw-ring-offset-color {
832
+ syntax: "*";
833
+ inherits: false;
834
+ initial-value: #fff;
835
+ }
836
+ @property --tw-ring-offset-shadow {
837
+ syntax: "*";
838
+ inherits: false;
839
+ initial-value: 0 0 #0000;
840
+ }
841
+ @property --tw-outline-style {
842
+ syntax: "*";
843
+ inherits: false;
844
+ initial-value: solid;
845
+ }
846
+ @property --tw-border-style {
847
+ syntax: "*";
848
+ inherits: false;
849
+ initial-value: solid;
850
+ }
851
+ @property --tw-translate-x {
852
+ syntax: "*";
853
+ inherits: false;
854
+ initial-value: 0;
855
+ }
856
+ @property --tw-translate-y {
857
+ syntax: "*";
858
+ inherits: false;
859
+ initial-value: 0;
860
+ }
861
+ @property --tw-translate-z {
862
+ syntax: "*";
863
+ inherits: false;
864
+ initial-value: 0;
865
+ }
866
+ @property --tw-content {
867
+ syntax: "*";
868
+ inherits: false;
869
+ initial-value: "";
870
+ }
871
+ @layer properties {
872
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
873
+ *, ::before, ::after, ::backdrop {
874
+ --tw-gradient-position: initial;
875
+ --tw-gradient-from: #0000;
876
+ --tw-gradient-via: #0000;
877
+ --tw-gradient-to: #0000;
878
+ --tw-gradient-stops: initial;
879
+ --tw-gradient-via-stops: initial;
880
+ --tw-gradient-from-position: 0%;
881
+ --tw-gradient-via-position: 50%;
882
+ --tw-gradient-to-position: 100%;
883
+ --tw-leading: initial;
884
+ --tw-font-weight: initial;
885
+ --tw-tracking: initial;
886
+ --tw-shadow: 0 0 #0000;
887
+ --tw-shadow-color: initial;
888
+ --tw-shadow-alpha: 100%;
889
+ --tw-inset-shadow: 0 0 #0000;
890
+ --tw-inset-shadow-color: initial;
891
+ --tw-inset-shadow-alpha: 100%;
892
+ --tw-ring-color: initial;
893
+ --tw-ring-shadow: 0 0 #0000;
894
+ --tw-inset-ring-color: initial;
895
+ --tw-inset-ring-shadow: 0 0 #0000;
896
+ --tw-ring-inset: initial;
897
+ --tw-ring-offset-width: 0px;
898
+ --tw-ring-offset-color: #fff;
899
+ --tw-ring-offset-shadow: 0 0 #0000;
900
+ --tw-outline-style: solid;
901
+ --tw-border-style: solid;
902
+ --tw-translate-x: 0;
903
+ --tw-translate-y: 0;
904
+ --tw-translate-z: 0;
905
+ --tw-content: "";
906
+ }
907
+ }
908
+ }