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