/* ============================================================================ * primefaces-compat.css — preserva a aparencia do PrimeFaces 6.0 sobre o 14.0.12 * ============================================================================ * * POR QUE ISSO EXISTE * O projeto continua usando os temas ThemeRoller legados (aristo no portal, * bootstrap no admin), servidos pelo mesmo mecanismo em qualquer versao do PF. * O que mudou de 6.0 para 14.0.12 foi o components.css (CSS estrutural) e um * punhado de classes acrescentadas ao DOM. Este arquivo desfaz exatamente * essas diferencas — nada mais. * * Cada bloco cita a regra do PF 14 neutralizada e o valor equivalente do PF 6. * Como e carregado depois do CSS do projeto, vence a cascata sem !important. * * COMO CONFERIR / MANTER * O harness compara pixel a pixel PF6 x PF14 sobre o DOM real dos componentes * usados no licenciamento. `node build.js && node shot.js` deve fechar todos * os blocos dentro do limite. Ao mexer aqui, rodar de novo. * * QUANDO APAGAR * Isto e uma ponte. No dia em que o projeto adotar um tema PrimeOne * (saga/nova/...) e reescrever o CSS proprio para ele, o arquivo sai inteiro. * ========================================================================== */ /* --------------------------------------------------------------------------- * 1. Alinhamento vertical de checkbox e radio * * PF14: .ui-chkbox { position: relative; vertical-align: middle } * .ui-radiobutton { position: relative; vertical-align: middle } * PF6 : nenhuma das duas propriedades (ou seja, static / baseline) * * O vertical-align:middle muda a altura da line-box do inline-block e faz * crescer toda celula que contem checkbox: o cabecalho da dataTable com coluna * de selecao ia de 67px para 72px. * * O position:relative fica de proposito — e o ancestral posicionado do wrapper * .ui-helper-hidden-accessible (absolute, 1x1px, clip-path) e nao tem efeito * visual. Tirar so o vertical-align resolve a geometria. * ------------------------------------------------------------------------- */ .ui-chkbox, .ui-radiobutton { vertical-align: baseline; } /* --------------------------------------------------------------------------- * 2. Filtro de coluna da dataTable * * PF14: .ui-datatable .ui-column-filter { width: 100%; margin: .5rem auto auto auto; * box-sizing: border-box } * PF6 : .ui-datatable .ui-column-filter { width: 100px; margin: auto } * * So width e margin sao repostos. O box-sizing: border-box do PF14 coincide com * o que o PF6 ja herdava do reset global do Bootstrap (* { box-sizing: border-box }), * entao nao deve ser mexido — forcar content-box aqui deixava o campo 110x20 * no lugar de 100x30. * * Sem isto o campo de filtro passa a ocupar a largura toda da coluna e ganha * 8px de margem no topo, aumentando a altura do cabecalho. * As telas que querem o filtro largo (parametrizacaoClassificacaoRisco) passam * filterStyle="width:100%" no proprio p:column — style inline, continua vencendo. * ------------------------------------------------------------------------- */ .ui-datatable .ui-column-filter { width: 100px; margin: auto; } /* --------------------------------------------------------------------------- * 3. selectOneRadio com layout="responsive" * (parametrizacaoClassificacaoRisco.xhtml, 2 grupos) * * 3a) PF14 acrescentou padding nas celulas do grid: * .ui-selectoneradio.ui-grid-responsive .ui-grid-row > div { padding: .5em } * PF6 nao tinha — cada linha do radio crescia 15.4px. * * 3b) O label mudou de regra: * PF6 .ui-selectoneradio label { display: block; margin-top: 4px } * .ui-selectoneradio.ui-grid label { display: inline-block; margin-left: 4px; * vertical-align: top } * (efetivo: inline-block, margin-top 4px, margin-left 4px) * PF14 .ui-selectoneradio label { display: inline-block; cursor: pointer; * margin: 0 16px 0 -8px; padding-left: 16px; * vertical-align: middle } * .ui-selectoneradio.ui-grid-responsive label { display: inline } * * O margin-bottom de 5px vem da regra generica de `label` do Bootstrap. * No PF6 ela valia; no PF14 o shorthand `margin: 0 16px 0 -8px` zerou o * bottom, encurtando cada linha do radio em 5px. Por isso ele e reposto * aqui explicitamente (mesmo valor do bootstrap.min.css do projeto). * ------------------------------------------------------------------------- */ .ui-selectoneradio.ui-grid-responsive .ui-grid-row > div { padding: 0; } .ui-selectoneradio label, .ui-selectoneradio.ui-grid-responsive label { display: inline-block; margin-top: 4px; margin-right: 0; margin-bottom: 5px; margin-left: 4px; padding-left: 0; vertical-align: top; } /* --------------------------------------------------------------------------- * 4. Painel do selectCheckboxMenu * (representanteAutorizado.xhtml e pesquisarLicenciamentoOrgao.xhtml) * * PF14 acrescentou "ui-widget" ao PANEL_CLASS: * PF6 : ui-selectcheckboxmenu-panel ui-widget-content ui-corner-all ui-helper-hidden * PF14: ui-selectcheckboxmenu-panel ui-widget ui-widget-content ui-corner-all * ui-helper-hidden ui-input-overlay * * O tema legado traz o par: * .ui-widget { font-family: ; font-size: 1.1em } * .ui-widget .ui-widget { font-size: 1em } * * Como o painel e anexado ao body (appendTo), ele nao cai no reset de aninhado. * Consequencias no PF14, ambas corrigidas abaixo: * - o painel inteiro pulava de 14px para 15.4px e trocava de familia; * - todo .ui-widget dentro dele passou a ser "aninhado" e caiu para 1em * (o .ui-chkbox de cada item ia de 15.4px para 14px). * * A segunda regra devolve o 1.1em so ao .ui-chkbox do cabecalho do painel — * o unico .ui-widget de dentro do painel que no PF6 nao tinha ancestral * .ui-widget. Os demais descendentes se resolvem sozinhos e nao devem ser * tocados: * - ul.ui-selectcheckboxmenu-items tem ui-helper-reset (font-size: 100%); * - o .ui-chkbox de cada item esta dentro desse ul (que e .ui-widget), logo * cai no reset .ui-widget .ui-widget { font-size: 1em }; * - .ui-chkbox-box cai no mesmo reset; * - o input do filtro cai em .ui-widget input { font-size: 1em }. * ------------------------------------------------------------------------- */ .ui-selectcheckboxmenu-panel.ui-widget { font-family: inherit; font-size: inherit; } .ui-selectcheckboxmenu-panel.ui-widget .ui-selectcheckboxmenu-header .ui-chkbox { font-size: 1.1em; } /* --------------------------------------------------------------------------- * 5. Clearfix * * PF6 : .ui-helper-clearfix:after { content: "."; display: block; height: 0; * clear: both; visibility: hidden } * PF14: .ui-helper-clearfix:before { content: ""; display: table; border-collapse: collapse } * .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; * clear: both } * * Duas diferencas somadas: o PF14 introduziu um :before (que colapsa margem) e * trocou o content de "." para "". O ponto do PF6, mesmo com visibility:hidden, * ocupa largura e entra no calculo da largura intrinseca do container. * Efeito medido: o .ui-picklist (shrink-to-fit) ficava 4.28px mais estreito. * Nada e pintado nesses 4px, mas a largura do container muda e pode deslocar * conteudo vizinho — por isso volta ao comportamento do PF6. * Afeta tambem .ui-dialog-titlebar, o header do selectCheckboxMenu e o tabView. * ------------------------------------------------------------------------- */ .ui-helper-clearfix:before { content: none; display: none; } .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* --------------------------------------------------------------------------- * 6. selectOneMenu * (pesquisarLicenciamentoOrgao.xhtml, 1 uso) * * PF14: .ui-selectonemenu { padding-right: 22px; vertical-align: top } * PF6 : .ui-selectonemenu { padding-right: 2em; zoom: 1 } * -> com a fonte do tema (15.4px), 2em = 30.8px. O componente encurtava de * 36px para 32px de altura e o label esticava de 187.2px para 196px. * * PF14: .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon * { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto } * PF6 : mesma regra com { margin-top: 3px } e position static * -> centralizacao absoluta no lugar do deslocamento fixo de 3px. * * O :not(.form-control) e de proposito. O margin-top de 3px so faz sentido no * widget de ~26px de altura que existia no PF6 (o filtro de grau de risco da * tabela de CNAEs). Os p:selectOneMenu com form-control (40px de altura) sao * novos, nunca existiram no PF6, e com o deslocamento fixo o icone ficava 8px * acima do centro e vazando 2px da borda direita. Para eles vale a * centralizacao absoluta do proprio PF14, que cai a 0,5px de onde o Chromium * desenha a seta do