/** * Componente TomSelect - Design System Locamais Portal (BASE) * @version 2.0.0 * * RESPONSABILIDADE: Definir a APARÊNCIA padrão do TomSelect, agnóstico de layout. * - Controla cores, fontes, bordas, sombras e o estilo do dropdown. * - Usa a opção `dropdownParent: 'body'` do JS para resolver problemas de z-index. */ /* ========================================================== 1. CONTROLE PRINCIPAL (O INPUT) ========================================================== */ .ts-wrapper .ts-control { background: var(--lm-lighter, #F3F4F6) !important; border: 1px solid var(--lm-border, #E5E7EB) !important; border-radius: var(--lm-border-radius, 0.375rem) !important; padding: 3px 8px !important; min-height: 40px !important; box-shadow: none !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 4px !important; transition: all 0.2s ease; } .ts-wrapper.focus .ts-control { border-color: var(--lm-primary-dark, #2563EB) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important; background: var(--lm-background-main, #FFFFFF) !important; } /* ========================================================== 2. DROPDOWN DE OPÇÕES (Renderizado no ) ========================================================== */ .ts-dropdown { background: var(--lm-background-main, #FFFFFF) !important; border: 1px solid var(--lm-border, #E5E7EB) !important; border-radius: var(--lm-border-radius-lg, 0.5rem) !important; box-shadow: var(--lm-shadow-md) !important; z-index: 10050 !important; /* Z-index alto para ficar sobre qualquer modal */ } .ts-dropdown .ts-dropdown-content { max-height: 250px !important; } .ts-dropdown .option { padding: 10px 14px !important; font-size: 0.875rem !important; border-bottom: 1px solid var(--lm-border-light, #E2E8F0) !important; transition: all 0.15s ease !important; } .ts-dropdown .option:last-child { border-bottom: none !important; } .ts-dropdown .option:hover, .ts-dropdown .option.active { background-color: var(--lm-primary-light, #eff6ff) !important; color: var(--lm-primary-dark, #2563EB) !important; } /* ========================================================== 3. ESTILO PARA MÚLTIPLAS SELEÇÕES (PILLS) ========================================================== */ .ts-wrapper.multi .ts-control > .item { background-color: var(--lm-primary-light, #eff6ff) !important; color: var(--lm-primary-dark, #2563eb) !important; border: 1px solid #d1e0ff !important; border-radius: var(--lm-border-radius, 0.375rem) !important; padding: 0.2rem 0.6rem !important; font-size: 0.8rem !important; font-weight: 500 !important; margin: 3px !important; display: inline-flex !important; align-items: center !important; } .ts-wrapper.multi .ts-control .item .remove-button { color: var(--lm-primary-dark, #2563eb) !important; opacity: 0.7; margin-left: 0.5rem; transition: all 0.2s ease; } .ts-wrapper.multi .ts-control .item .remove-button:hover { opacity: 1; background-color: var(--lm-primary-dark, #2563eb) !important; color: white !important; }