@jjlmoya/utils-babies 1.3.0 → 1.5.0

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.
@@ -1,557 +0,0 @@
1
- .fde-container {
2
- width: 100%;
3
- max-width: 1000px;
4
- margin: 0 auto;
5
- background: #fff;
6
- border-radius: 32px;
7
- box-shadow: 0 25px 70px rgba(0, 0, 0, 0.08);
8
- display: flex;
9
- flex-direction: column;
10
- overflow: hidden;
11
- color: #111827;
12
- border: 1px solid #e5e7eb;
13
- min-height: 600px;
14
- transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
15
- }
16
-
17
- /* Step indicator */
18
- .fde-step-indicator {
19
- padding: 1.5rem 2.5rem;
20
- background: #fdf2f8;
21
- border-bottom: 1px solid #fbcfe8;
22
- display: flex;
23
- justify-content: center;
24
- gap: 3rem;
25
- }
26
-
27
- .fde-step-item {
28
- display: flex;
29
- align-items: center;
30
- gap: 0.75rem;
31
- font-size: 0.9rem;
32
- font-weight: 700;
33
- color: #9d174d;
34
- opacity: 0.4;
35
- transition: opacity 0.3s ease;
36
- }
37
-
38
- .fde-step-item.fde-step-active {
39
- opacity: 1;
40
- }
41
-
42
- .fde-step-number {
43
- width: 28px;
44
- height: 28px;
45
- background: #db2777;
46
- color: white;
47
- border-radius: 50%;
48
- display: flex;
49
- align-items: center;
50
- justify-content: center;
51
- font-size: 0.75rem;
52
- }
53
-
54
- /* Step 1 */
55
- .fde-step-first {
56
- flex: 1;
57
- display: flex;
58
- flex-direction: column;
59
- align-items: center;
60
- justify-content: center;
61
- padding: 4rem 2rem;
62
- text-align: center;
63
- gap: 3rem;
64
- background: radial-gradient(circle at top right, #fff1f2, transparent),
65
- radial-gradient(circle at bottom left, #fdf2f8, transparent);
66
- transition: opacity 0.4s ease, transform 0.4s ease;
67
- }
68
-
69
- .fde-step-first.fde-hidden {
70
- display: none;
71
- }
72
-
73
- .fde-step-header h2 {
74
- font-size: 2.5rem;
75
- font-weight: 950;
76
- letter-spacing: -0.04em;
77
- color: #9d174d;
78
- margin-bottom: 0.75rem;
79
- line-height: 1;
80
- }
81
-
82
- .fde-step-header p {
83
- font-size: 1.15rem;
84
- color: #64748b;
85
- max-width: 400px;
86
- margin: 0 auto;
87
- }
88
-
89
- /* Calendar card (step 1) */
90
- .fde-calendar-card {
91
- max-width: 500px;
92
- width: 100%;
93
- background: #fff;
94
- padding: 2.5rem;
95
- border-radius: 32px;
96
- border: 1px solid rgba(251, 207, 232, 0.5);
97
- box-shadow: 0 30px 60px -12px rgba(219, 39, 119, 0.15),
98
- 0 18px 36px -18px rgba(0, 0, 0, 0.1);
99
- transform: translateY(0);
100
- transition: transform 0.3s ease;
101
- }
102
-
103
- .fde-calendar-card:hover {
104
- transform: translateY(-5px);
105
- }
106
-
107
- /* Pulse hint */
108
- .fde-pulse-hint {
109
- font-size: 0.95rem;
110
- font-weight: 800;
111
- color: #db2777;
112
- background: #fdf2f8;
113
- padding: 0.75rem 1.5rem;
114
- border-radius: 100px;
115
- border: 1px solid #fbcfe8;
116
- animation: fde-pulse 2s infinite;
117
- }
118
-
119
- @keyframes fde-pulse {
120
- 0% { opacity: 0.4; }
121
- 50% { opacity: 1; }
122
- 100% { opacity: 0.4; }
123
- }
124
-
125
- /* Step 2 layout */
126
- .fde-layout {
127
- display: none;
128
- grid-template-columns: 350px 1fr;
129
- flex: 1;
130
- opacity: 0;
131
- transition: opacity 0.5s ease;
132
- }
133
-
134
- .fde-layout.fde-active {
135
- display: grid;
136
- opacity: 1;
137
- }
138
-
139
- /* Sidebar */
140
- .fde-sidebar {
141
- background: #fdf2f8;
142
- padding: 2.5rem;
143
- display: flex;
144
- flex-direction: column;
145
- gap: 2.5rem;
146
- border-right: 1px solid #fbcfe8;
147
- }
148
-
149
- .fde-sidebar-header h2 {
150
- font-size: 1.5rem;
151
- font-weight: 800;
152
- color: #9d174d;
153
- margin: 0 0 0.5rem;
154
- }
155
-
156
- .fde-sidebar-header p {
157
- font-size: 0.85rem;
158
- color: #be123c;
159
- opacity: 0.8;
160
- margin: 0;
161
- }
162
-
163
- .fde-input-card {
164
- background: #fff;
165
- padding: 1.5rem;
166
- border-radius: 20px;
167
- border: 1px solid #fbcfe8;
168
- box-shadow: 0 4px 15px rgba(219, 39, 119, 0.05);
169
- }
170
-
171
- .fde-input-card label {
172
- display: flex;
173
- align-items: center;
174
- gap: 0.75rem;
175
- font-size: 0.9rem;
176
- font-weight: 700;
177
- color: #9d174d;
178
- margin-bottom: 1rem;
179
- }
180
-
181
- .fde-input-card label svg,
182
- .fde-input-card label [data-icon] {
183
- width: 1.25rem;
184
- height: 1.25rem;
185
- }
186
-
187
- .fde-range-control {
188
- display: flex;
189
- flex-direction: column;
190
- gap: 1rem;
191
- }
192
-
193
- .fde-range-control input[type='range'] {
194
- width: 100%;
195
- accent-color: #db2777;
196
- cursor: pointer;
197
- }
198
-
199
- .fde-range-value {
200
- text-align: center;
201
- font-size: 2rem;
202
- font-weight: 800;
203
- color: #db2777;
204
- }
205
-
206
- .fde-range-value span {
207
- font-size: 0.9rem;
208
- font-weight: 600;
209
- color: #be123c;
210
- }
211
-
212
- /* Results */
213
- .fde-results {
214
- display: flex;
215
- flex-direction: column;
216
- gap: 1rem;
217
- }
218
-
219
- .fde-stat {
220
- display: flex;
221
- align-items: center;
222
- gap: 1rem;
223
- padding: 1.25rem;
224
- background: #fff;
225
- border-radius: 16px;
226
- border: 1px solid #fce7f3;
227
- }
228
-
229
- .fde-stat svg,
230
- .fde-stat [data-icon] {
231
- width: 2rem;
232
- height: 2rem;
233
- border-radius: 10px;
234
- padding: 0.4rem;
235
- flex-shrink: 0;
236
- }
237
-
238
- .fde-stat-ovulation svg,
239
- .fde-stat-ovulation [data-icon] {
240
- background: #db2777;
241
- color: #fff;
242
- }
243
-
244
- .fde-stat-fertile svg,
245
- .fde-stat-fertile [data-icon] {
246
- background: #fdf2f8;
247
- color: #db2777;
248
- border: 1px solid #f9a8d4;
249
- }
250
-
251
- .fde-stat-period svg,
252
- .fde-stat-period [data-icon] {
253
- background: #ffe4e6;
254
- color: #be123c;
255
- border: 1px solid #fca5a5;
256
- }
257
-
258
- .fde-stat-info {
259
- display: flex;
260
- flex-direction: column;
261
- }
262
-
263
- .fde-stat-label {
264
- font-size: 0.75rem;
265
- font-weight: 700;
266
- text-transform: uppercase;
267
- color: #64748b;
268
- }
269
-
270
- .fde-stat-value {
271
- font-size: 1.1rem;
272
- font-weight: 900;
273
- color: #1e293b;
274
- }
275
-
276
- /* Main content */
277
- .fde-main {
278
- background: #fff;
279
- padding: 2.5rem;
280
- display: flex;
281
- flex-direction: column;
282
- gap: 2rem;
283
- }
284
-
285
- .fde-calendar-wrapper {
286
- background: #fff;
287
- }
288
-
289
- /* Shared calendar nav */
290
- .fde-cal-nav {
291
- display: flex;
292
- justify-content: space-between;
293
- align-items: center;
294
- margin-bottom: 2rem;
295
- }
296
-
297
- .fde-cal-nav h3 {
298
- font-size: 1.5rem;
299
- font-weight: 900;
300
- color: #111827;
301
- margin: 0;
302
- text-transform: capitalize;
303
- }
304
-
305
- .fde-nav-buttons {
306
- display: flex;
307
- gap: 0.5rem;
308
- }
309
-
310
- .fde-nav-btn {
311
- width: 40px;
312
- height: 40px;
313
- border-radius: 10px;
314
- border: 1px solid #e5e7eb;
315
- background: #fff;
316
- display: flex;
317
- align-items: center;
318
- justify-content: center;
319
- cursor: pointer;
320
- transition: 0.2s all ease;
321
- color: #374151;
322
- }
323
-
324
- .fde-nav-btn:hover {
325
- background: #f3f4f6;
326
- border-color: #d1d5db;
327
- }
328
-
329
- /* Calendar grid */
330
- .fde-grid {
331
- display: grid;
332
- grid-template-columns: repeat(7, 1fr);
333
- gap: 8px;
334
- }
335
-
336
- .fde-day-header {
337
- text-align: center;
338
- font-size: 0.8rem;
339
- font-weight: 800;
340
- color: #9ca3af;
341
- text-transform: uppercase;
342
- padding-bottom: 1rem;
343
- }
344
-
345
- .fde-day {
346
- aspect-ratio: 1;
347
- display: flex;
348
- align-items: center;
349
- justify-content: center;
350
- font-size: 1rem;
351
- font-weight: 700;
352
- border-radius: 14px;
353
- background: #fff;
354
- color: #374151;
355
- cursor: pointer;
356
- transition: 0.2s all ease;
357
- border: 1px solid #f3f4f6;
358
- }
359
-
360
- .fde-day:hover:not(.fde-day-empty) {
361
- border-color: #db2777;
362
- background: #fdf2f8;
363
- }
364
-
365
- .fde-day-empty {
366
- background: transparent;
367
- border: none;
368
- cursor: default;
369
- }
370
-
371
- .fde-day-selected {
372
- background: #be123c;
373
- color: #fff;
374
- border: none;
375
- box-shadow: 0 8px 20px rgba(190, 18, 60, 0.3);
376
- }
377
-
378
- .fde-day-period {
379
- background: #ffe4e6;
380
- color: #be123c;
381
- border: none;
382
- }
383
-
384
- .fde-day-fertile {
385
- background: #fdf2f8;
386
- color: #db2777;
387
- border: none;
388
- }
389
-
390
- .fde-day-ovulation {
391
- background: #db2777;
392
- color: #fff;
393
- box-shadow: 0 8px 20px rgba(219, 39, 119, 0.3);
394
- border: none;
395
- }
396
-
397
- .fde-day-today {
398
- border: 2px solid #111827;
399
- }
400
-
401
- /* Legend */
402
- .fde-legend {
403
- display: flex;
404
- justify-content: center;
405
- gap: 2rem;
406
- margin-top: 2rem;
407
- padding: 1.25rem;
408
- background: #f9fafb;
409
- border-radius: 20px;
410
- }
411
-
412
- .fde-legend-item {
413
- display: flex;
414
- align-items: center;
415
- gap: 0.5rem;
416
- font-size: 0.85rem;
417
- font-weight: 700;
418
- color: #4b5563;
419
- }
420
-
421
- .fde-legend-dot {
422
- width: 12px;
423
- height: 12px;
424
- border-radius: 4px;
425
- }
426
-
427
- .fde-dot-period { background: #ffe4e6; }
428
- .fde-dot-fertile { background: #fdf2f8; }
429
- .fde-dot-ovulation { background: #db2777; }
430
- .fde-dot-selected { background: #be123c; }
431
-
432
- /* Dark mode */
433
- .dark .fde-container {
434
- background: #18181b;
435
- border-color: #27272a;
436
- box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
437
- color: #fff;
438
- }
439
-
440
- .dark .fde-sidebar {
441
- background: #111113;
442
- border-right-color: #27272a;
443
- }
444
-
445
- .dark .fde-main { background: #18181b; }
446
-
447
- .dark .fde-sidebar-header h2 { color: #f472b6; }
448
- .dark .fde-sidebar-header p { color: #f9a8d4; }
449
-
450
- .dark .fde-input-card {
451
- background: #1e1e21;
452
- border-color: #27272a;
453
- }
454
-
455
- .dark .fde-stat {
456
- background: #1e1e21;
457
- border-color: #27272a;
458
- }
459
-
460
- .dark .fde-stat-value { color: #fff; }
461
- .dark .fde-cal-nav h3 { color: #fff; }
462
-
463
- .dark .fde-day {
464
- background: #1e1e21;
465
- border-color: #27272a;
466
- color: #e5e7eb;
467
- }
468
-
469
- .dark .fde-day:hover:not(.fde-day-empty) { background: #27272a; }
470
- .dark .fde-legend { background: #111113; }
471
- .dark .fde-legend-item { color: #9ca3af; }
472
-
473
- /* Responsive */
474
- @media (max-width: 900px) {
475
- .fde-layout { grid-template-columns: 1fr; }
476
- .fde-sidebar {
477
- border-right: none;
478
- border-bottom: 1px solid #fbcfe8;
479
- }
480
- }
481
-
482
- @media (max-width: 768px) {
483
- .fde-container { border-radius: 1.5rem; }
484
-
485
- .fde-step-indicator {
486
- padding: 1rem;
487
- gap: 1rem;
488
- flex-wrap: wrap;
489
- }
490
-
491
- .fde-step-first {
492
- padding: 2rem 1rem;
493
- gap: 1.5rem;
494
- }
495
-
496
- .fde-calendar-card {
497
- padding: 1rem;
498
- border-radius: 1.5rem;
499
- }
500
-
501
- .fde-step-header h2 { font-size: 1.75rem; }
502
- .fde-step-header p { font-size: 0.95rem; }
503
-
504
- .fde-sidebar {
505
- padding: 1.25rem;
506
- gap: 1.5rem;
507
- }
508
-
509
- .fde-sidebar-header h2 { font-size: 1.25rem; }
510
-
511
- .fde-main {
512
- padding: 1.25rem;
513
- gap: 1.25rem;
514
- }
515
-
516
- .fde-input-card {
517
- padding: 1rem;
518
- border-radius: 1rem;
519
- }
520
-
521
- .fde-cal-nav { margin-bottom: 1rem; }
522
- .fde-cal-nav h3 { font-size: 1.2rem; }
523
- .fde-nav-btn {
524
- width: 32px;
525
- height: 32px;
526
- }
527
-
528
- .fde-grid { gap: 4px; }
529
-
530
- .fde-day-header {
531
- padding-bottom: 0.5rem;
532
- font-size: 0.7rem;
533
- }
534
-
535
- .fde-day {
536
- font-size: 0.85rem;
537
- border-radius: 8px;
538
- }
539
-
540
- .fde-legend {
541
- flex-direction: column;
542
- gap: 0.75rem;
543
- padding: 1rem;
544
- align-items: flex-start;
545
- border-radius: 1rem;
546
- }
547
-
548
- .fde-stat {
549
- padding: 1rem;
550
- gap: 0.75rem;
551
- flex-direction: column;
552
- text-align: center;
553
- align-items: center;
554
- }
555
-
556
- .fde-stat-info { align-items: center; }
557
- }