/* * ╔══════════════════════════════════════════════════════════════════════════╗ * ║ Design System Sisabr — sisabr_ui.css ║ * ║ ║ * ║ Versão : 0.2.0-pilot ║ * ║ Status : Em validação ║ * ║ Telas : CcoGeraArquivoLcto · EprBaixaConsignadoCamara ║ * ║ ║ * ║ Carregamento: libraries_user.html de todos os temas, ║ * ║ após custom.css e antes de builder_user_custom_css.css. ║ * ║ ║ * ║ ATENÇÃO: Não editar via Editor de CSS do Mad Builder. ║ * ║ builder_user_custom_css.css é reservado para ajustes do editor. ║ * ╚══════════════════════════════════════════════════════════════════════════╝ */ /* ══════════════════════════════════════════════════════════════════════════ §02 — VARIÁVEIS ══════════════════════════════════════════════════════════════════════════ */ :root { /* Controles ----------------------------------------------------------- */ --sisabr-control-height: 26px; /* height padrão dos inputs */ --sisabr-control-height-sm: 24px; /* futuro — reservado */ --sisabr-control-height-md: 26px; /* alias semântico */ --sisabr-control-height-lg: 30px; /* futuro — reservado */ --sisabr-control-padding-x: 6px; /* padding horizontal dos inputs */ /* Linhas -------------------------------------------------------------- */ --sisabr-row-min-height: 28px; --sisabr-row-margin: 2px; /* margin-bottom entre linhas */ /* Panel / container --------------------------------------------------- */ --sisabr-panel-padding-x: 10px; /* futuro — reservado */ --sisabr-panel-padding-y: 6px; /* Fieldsets e legends ------------------------------------------------- */ --sisabr-fieldset-padding-x: 6px; --sisabr-fieldset-padding-top: 1px; --sisabr-fieldset-padding-bottom: 3px; --sisabr-fieldset-margin-y: 2px; /* margem vertical entre fieldsets */ --sisabr-legend-line-height: 14px; --sisabr-legend-margin-bottom: 2px; --sisabr-border-color: #aaa; --sisabr-border-radius: 4px; /* RadioGroups --------------------------------------------------------- */ --sisabr-radio-gap: 24px; /* mantido por compatibilidade */ --sisabr-radio-option-gap: 24px; /* nome semântico oficial (UI-012) */ --sisabr-radio-inner-gap: 4px; /* espaço radio → texto */ --sisabr-radio-row-gap: 8px; /* gap entre linhas em flex-wrap */ /* Labels e UX --------------------------------------------------------- */ --sisabr-label-control-gap: 2px; /* UI-013: label acima → campo */ --sisabr-actions-margin-top: 8px; /* UI-014: barra de ações */ } /* ══════════════════════════════════════════════════════════════════════════ §03 — ESCOPOS .sisabr-compact-pilot Fase piloto — telas em validação .sisabr-compact Aprovado — telas convertidas e validadas .sisabr-no-compact Exceção — telas incompatíveis (ver §22) Todas as regras de UI usam o prefixo: :is(.sisabr-compact-pilot, .sisabr-compact) para abranger ambos os escopos sem duplicar seletores. .sisabr-compact NÃO está aplicado a nenhuma tela nesta versão. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ §04 — FORMULÁRIOS Compactação do panel-body e das linhas de formulário. ══════════════════════════════════════════════════════════════════════════ */ /* UI-007 */ :is(.sisabr-compact-pilot, .sisabr-compact) .panel-body { padding-top: var(--sisabr-panel-padding-y); padding-bottom: var(--sisabr-panel-padding-y); } :is(.sisabr-compact-pilot, .sisabr-compact) .panel-body .tformrow { min-height: var(--sisabr-row-min-height); } :is(.sisabr-compact-pilot, .sisabr-compact) .fb-field-container { min-height: var(--sisabr-row-min-height); } :is(.sisabr-compact-pilot, .sisabr-compact) .form-group.tformrow { margin-bottom: var(--sisabr-row-margin); } /* ══════════════════════════════════════════════════════════════════════════ §05 — CAMPOS SIMPLES TEntry, TDBEntry, TPassword, TNumeric, TDate, TSeekButton (input). Não aplicar height a textarea — ver §07. ══════════════════════════════════════════════════════════════════════════ */ /* UI-002 */ :is(.sisabr-compact-pilot, .sisabr-compact) .tfield:not(textarea) { height: var(--sisabr-control-height); } /* UI-013: aproximação label → campo (label vertical acima do input) */ :is(.sisabr-compact-pilot, .sisabr-compact) .fb-field-container > label { margin-bottom: var(--sisabr-label-control-gap); } /* ══════════════════════════════════════════════════════════════════════════ §06 — CAMPOS COMPOSTOS TSeekButton externo, addons, input-group. Reservado para evolução. ══════════════════════════════════════════════════════════════════════════ */ /* reservado */ /* ══════════════════════════════════════════════════════════════════════════ §07 — TEXTAREAS TText, TMultiEntry e demais campos multilinha. A proteção :not(textarea) em §05 é suficiente. Seção reservada para ajustes futuros de padding/margin. ══════════════════════════════════════════════════════════════════════════ */ /* reservado */ /* ══════════════════════════════════════════════════════════════════════════ §08 — RADIOGROUPS ══════════════════════════════════════════════════════════════════════════ */ /* UI-001: layout horizontal com flex-wrap */ :is(.sisabr-compact-pilot, .sisabr-compact) .toggle-wrapper { display: flex; align-items: center; flex-wrap: wrap; row-gap: var(--sisabr-radio-row-gap); } /* UI-012: separação entre opções (irmão adjacente) */ :is(.sisabr-compact-pilot, .sisabr-compact) .toggle-wrapper > div + div { margin-left: var(--sisabr-radio-option-gap); } /* UI-012: espaço interno radio → texto */ :is(.sisabr-compact-pilot, .sisabr-compact) .toggle-wrapper label.tcheckgroup_label { margin-left: var(--sisabr-radio-inner-gap); } /* ══════════════════════════════════════════════════════════════════════════ §09 — CHECKGROUPS TCheckGroup vertical e horizontal. Reservado para evolução. ══════════════════════════════════════════════════════════════════════════ */ /* reservado */ /* ══════════════════════════════════════════════════════════════════════════ §10 — COMBOS E SELECT2 ══════════════════════════════════════════════════════════════════════════ */ /* UI-002 */ :is(.sisabr-compact-pilot, .sisabr-compact) select.tcombo:not([multiple]) { height: var(--sisabr-control-height); } :is(.sisabr-compact-pilot, .sisabr-compact) .select2-container--default .select2-selection--single { height: var(--sisabr-control-height); } /* ══════════════════════════════════════════════════════════════════════════ §11 — DATAS E CALENDÁRIOS ══════════════════════════════════════════════════════════════════════════ */ /* UI-002 */ :is(.sisabr-compact-pilot, .sisabr-compact) .ui-datepicker-trigger { height: var(--sisabr-control-height) !important; } /* ══════════════════════════════════════════════════════════════════════════ §12 — TGETFILE ══════════════════════════════════════════════════════════════════════════ */ /* UI-002 */ :is(.sisabr-compact-pilot, .sisabr-compact) input[widget="tfile"] { height: var(--sisabr-control-height); min-height: var(--sisabr-control-height); padding: 0; box-sizing: border-box; } :is(.sisabr-compact-pilot, .sisabr-compact) input[widget="tfile"]::file-selector-button { height: 100%; margin-top: 0; margin-bottom: 0; } /* ══════════════════════════════════════════════════════════════════════════ §13 — TSEEKBUTTON Botão de busca externo e botão-ícone acoplado ao campo. Reservado — validar altura e alinhamento. ══════════════════════════════════════════════════════════════════════════ */ /* reservado */ /* ══════════════════════════════════════════════════════════════════════════ §14 — FIELDSETS E LEGENDS Classe .sisabr-groupbox gerada pelo helper PHP groupBox(). ══════════════════════════════════════════════════════════════════════════ */ /* UI-003/UI-004 */ :is(.sisabr-compact-pilot, .sisabr-compact) fieldset.sisabr-groupbox { padding: var(--sisabr-fieldset-padding-top) var(--sisabr-fieldset-padding-x) var(--sisabr-fieldset-padding-bottom); margin: var(--sisabr-fieldset-margin-y) 0; } /* UI-005 */ :is(.sisabr-compact-pilot, .sisabr-compact) fieldset.sisabr-groupbox > legend { line-height: var(--sisabr-legend-line-height); margin-bottom: var(--sisabr-legend-margin-bottom); } /* ══════════════════════════════════════════════════════════════════════════ §15 — LINHAS E CONTAINERS Reservado — ajustes futuros de alinhamento interno e gap de containers. ══════════════════════════════════════════════════════════════════════════ */ /* reservado */ /* ══════════════════════════════════════════════════════════════════════════ §16 — BARRAS DE AÇÕES ══════════════════════════════════════════════════════════════════════════ */ /* UI-014 */ :is(.sisabr-compact-pilot, .sisabr-compact) .form-actions { margin-top: var(--sisabr-actions-margin-top); } /* ══════════════════════════════════════════════════════════════════════════ §17 — BOTÕES Cores e ícones preservados do Mad Builder. Reservado — documentar categorias, não redesenhar. ══════════════════════════════════════════════════════════════════════════ */ /* reservado */ /* ══════════════════════════════════════════════════════════════════════════ §18 — DATAGRIDS Reservado — altura de linha, cabeçalhos, alinhamento, hover, paginação. ══════════════════════════════════════════════════════════════════════════ */ /* reservado */ /* ══════════════════════════════════════════════════════════════════════════ §19 — MODAIS Reservado — padding, cabeçalho, rodapé, scroll interno. ══════════════════════════════════════════════════════════════════════════ */ /* reservado */ /* ══════════════════════════════════════════════════════════════════════════ §20 — TABS Reservado — altura, padding, aba ativa, overflow. ══════════════════════════════════════════════════════════════════════════ */ /* reservado */ /* ══════════════════════════════════════════════════════════════════════════ §21 — RESPONSIVIDADE Desktop: horizontal, compacto, máximo aproveitamento. Notebook: quebra controlada, sem sobreposição. Mobile: funcional, sem scroll horizontal, compactação não extrema. ══════════════════════════════════════════════════════════════════════════ */ /* reservado */ /* ══════════════════════════════════════════════════════════════════════════ §22 — EXCEÇÕES E RESET SELETIVO Classes de exclusão — aplicar ao container do componente ou da tela. Toda exceção deve ser registrada na tabela do GUIA_INTERFACE_SISABR.md. ══════════════════════════════════════════════════════════════════════════ */ /* Tela excluída do padrão compacto — todos os componentes */ .sisabr-no-compact { /* placeholder: futuras regras de reset global */ } /* Componente com altura padrão (input/select/tfile) */ :is(.sisabr-compact-pilot, .sisabr-compact) .sisabr-control-normal .tfield, :is(.sisabr-compact-pilot, .sisabr-compact) .sisabr-control-normal input[widget="tfile"] { height: revert; min-height: revert; } /* Textarea com reset explícito de altura */ :is(.sisabr-compact-pilot, .sisabr-compact) .sisabr-textarea-normal textarea { height: revert; } /* RadioGroup sem espaçamento compacto */ :is(.sisabr-compact-pilot, .sisabr-compact) .sisabr-radio-normal .toggle-wrapper { display: revert; row-gap: revert; } /* Barra de ações sem margem extra */ :is(.sisabr-compact-pilot, .sisabr-compact) .sisabr-actions-normal .form-actions { margin-top: revert; } /* ══════════════════════════════════════════════════════════════════════════ §23 — COMPATIBILIDADE ══════════════════════════════════════════════════════════════════════════ */ /* * :is() Chrome 88+, Firefox 78+, Safari 14+, Edge 88+. * Usado para agrupar seletores sem duplicar regras. * * ::file-selector-button Chrome 89+, Firefox 82+, Safari 14.1+. * Controla o botão "Procurar" do input[type=file]. * * revert Chrome 84+, Firefox 67+, Safari 9.1+. * Usado nas classes de exceção §22. * * CSS Custom Properties Suportadas em todos os navegadores modernos. */ /* ══════════════════════════════════════════════════════════════════════════ §24 — HISTÓRICO DE VERSÕES ══════════════════════════════════════════════════════════════════════════ */ /* * 0.1.0-pilot 2026-07 Etapa 1 — CcoGeraArquivoLcto * Primeira aplicação: compactação de campos, * RadioGroups, fieldsets, panel-body. * * 0.2.0-pilot 2026-07-30 Etapa 1+ — EprBaixaConsignadoCamara * Segunda tela piloto. Reorganização completa * em 24 seções. UI-013 e UI-014. Seletor :is() * para expansão futura. Classes de exceção. * Variáveis semânticas. display:flex nos * RadioGroups. row-gap via variável. */