@inchurch/matcha-theme 22.18.1 → 22.20.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.
|
@@ -416,6 +416,9 @@
|
|
|
416
416
|
|
|
417
417
|
.matcha-select-search {
|
|
418
418
|
position: relative;
|
|
419
|
+
display: flex;
|
|
420
|
+
align-items: center;
|
|
421
|
+
gap: var(--matcha-space-100, 8px);
|
|
419
422
|
padding: var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
|
|
420
423
|
border-bottom: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border-subtle, rgba(0,0,0,0.08));
|
|
421
424
|
transition: border-color var(--matcha-duration-instant, 80ms) ease;
|
|
@@ -425,6 +428,13 @@
|
|
|
425
428
|
}
|
|
426
429
|
}
|
|
427
430
|
|
|
431
|
+
// Lupa no lugar do placeholder textual "Buscar..." — ícone não precisa de i18n.
|
|
432
|
+
.matcha-select-search-icon {
|
|
433
|
+
flex-shrink: 0;
|
|
434
|
+
color: var(--matcha-color-text-placeholder);
|
|
435
|
+
pointer-events: none;
|
|
436
|
+
}
|
|
437
|
+
|
|
428
438
|
// Input plano: sem border/background próprios. O container `.matcha-select-search`
|
|
429
439
|
// faz o papel de "campo" via padding + divider bottom, e focus-within muda a cor
|
|
430
440
|
// do divider. Evita efeito "card dentro de card" dentro do panel.
|
|
@@ -477,6 +487,33 @@
|
|
|
477
487
|
font-style: italic;
|
|
478
488
|
}
|
|
479
489
|
|
|
490
|
+
// Loading do painel (backend search mode) — mesmo tom do empty state, com spinner.
|
|
491
|
+
.matcha-select-loading {
|
|
492
|
+
display: flex;
|
|
493
|
+
align-items: center;
|
|
494
|
+
justify-content: center;
|
|
495
|
+
gap: var(--matcha-space-100, 8px);
|
|
496
|
+
padding: var(--matcha-space-200, 16px);
|
|
497
|
+
color: var(--matcha-color-text-placeholder);
|
|
498
|
+
font-size: 13px;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.matcha-select-loading-spinner {
|
|
502
|
+
width: 14px;
|
|
503
|
+
height: 14px;
|
|
504
|
+
flex-shrink: 0;
|
|
505
|
+
// Mesma cor do spinner do trigger (.matcha-form-field-spinner) — um estado de
|
|
506
|
+
// loading, uma cor. Antes era accent e o campo mostrava azul + verde ao mesmo tempo.
|
|
507
|
+
border: 2px solid var(--matcha-color-surface-border);
|
|
508
|
+
border-top-color: var(--matcha-color-primary);
|
|
509
|
+
border-radius: 50%;
|
|
510
|
+
animation: matcha-select-loading-spin 0.7s linear infinite;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
@keyframes matcha-select-loading-spin {
|
|
514
|
+
to { transform: rotate(360deg); }
|
|
515
|
+
}
|
|
516
|
+
|
|
480
517
|
// ═══════════════════════════════════════════════════════════════════════
|
|
481
518
|
// Bottom-sheet (mobile) — aligned com Figma matcha/field/select/mobile-sheet
|
|
482
519
|
// Ativa automaticamente em <=768px (ou via [mode]="'sheet'"). Full-width bottom-anchored.
|