publico/vue-componentes
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bkp

Browse source
This commit is contained in:
Luiz Silva 2026-01-28 15:04:52 -03:00
parent 81dbb48685
commit 33fe5d6ecf
2 changed files with 28 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/eli/EliTabela/EliTabela.css
View file

@ -175,6 +175,17 @@
gap: 12px; gap: 12px;
margin-bottom: 12px; margin-bottom: 12px;
flex-wrap: wrap; flex-wrap: wrap;
/* Altura padrão para controles do cabeçalho (busca e botões)
* - Mantém alinhamento visual entre input de busca e ações
* - Pode ser sobrescrita via CSS no consumidor, se necessário
*/
--eli-tabela-cabecalho-controle-altura: 34px;
/* Borda dos controles do cabeçalho: menos "pílula", mais quadrado.
* Ajuste fino via CSS no consumidor, se necessário.
*/
--eli-tabela-cabecalho-controle-radius: 8px;
} }
.eli-tabela__acoes-cabecalho { .eli-tabela__acoes-cabecalho {
@ -187,13 +198,15 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 6px 14px; height: var(--eli-tabela-cabecalho-controle-altura);
border-radius: 9999px; padding: 0 14px;
border-radius: var(--eli-tabela-cabecalho-controle-radius);
border: none; border: none;
background: rgba(37, 99, 235, 0.12); background: rgba(37, 99, 235, 0.12);
color: rgba(37, 99, 235, 0.95); color: rgba(37, 99, 235, 0.95);
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
line-height: 1;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease; transition: background-color 0.2s ease, color 0.2s ease;
} }

15
src/components/eli/EliTabela/EliTabelaCaixaDeBusca.vue
View file

@ -79,20 +79,30 @@ export default defineComponent({
.eli-tabela__busca-input-wrapper { .eli-tabela__busca-input-wrapper {
display: inline-flex; display: inline-flex;
align-items: stretch; align-items: stretch;
border-radius: 9999px; border-radius: var(--eli-tabela-cabecalho-controle-radius, 8px);
border: 1px solid rgba(15, 23, 42, 0.15); border: 1px solid rgba(15, 23, 42, 0.15);
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
/* Herda do container do cabeçalho (.eli-tabela__cabecalho) quando presente. */
height: var(--eli-tabela-cabecalho-controle-altura, 34px);
} }
.eli-tabela__busca-input { .eli-tabela__busca-input {
padding: 6px 12px; /* Mantém o input com a mesma altura do botão e dos botões de ação do cabeçalho. */
height: 100%;
padding: 0 12px;
border: none; border: none;
outline: none; outline: none;
font-size: 0.875rem; font-size: 0.875rem;
color: rgba(15, 23, 42, 0.85); color: rgba(15, 23, 42, 0.85);
} }
.eli-tabela__busca-input::-webkit-search-cancel-button,
.eli-tabela__busca-input::-webkit-search-decoration {
-webkit-appearance: none;
}
.eli-tabela__busca-input::placeholder { .eli-tabela__busca-input::placeholder {
color: rgba(107, 114, 128, 0.85); color: rgba(107, 114, 128, 0.85);
} }
@ -104,6 +114,7 @@ export default defineComponent({
border: none; border: none;
background: rgba(37, 99, 235, 0.12); background: rgba(37, 99, 235, 0.12);
color: rgba(37, 99, 235, 0.95); color: rgba(37, 99, 235, 0.95);
height: 100%;
padding: 0 12px; padding: 0 12px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease; transition: background-color 0.2s ease, color 0.2s ease;