56 lines
2.3 KiB
CSS
56 lines
2.3 KiB
CSS
/* Detalhe - Não é mencionado que todas as declarações CSS seguem esse padrão, onde a linha de classes declaradas segue a ordem das tags, indo da mais externa ("Quem inicia a linha") para a mais interna ("Quem dá o fim para a linha"). Seguindo esse modelo de declaração de classes, todos os elementos se tornam extremamente únicos, minimizando as chances de existirem conflitos de classes. */
|
|
|
|
/* ========================================= Estrutura de decisão, para qual grupo de relatórios apresentar OFF, ON, ERRO =============================================== */
|
|
|
|
/* Este caminho de classes aponta para a classe .painel_Cap, onde é determinada a estilização principal do painel. Além disso, ele alinha todos os elementos dentro dele e define um scroll vertical (overflow-y: auto), permitindo que, caso os elementos ultrapassem a altura do painel, um deslocamento seja criado para que o usuário consiga visualizar os itens além da altura do painel, sem sair da área do painel. */
|
|
|
|
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap {
|
|
width: 90%;
|
|
height: 40vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
align-items: center;
|
|
align-content: center;
|
|
|
|
gap: 1vw;
|
|
overflow-y: auto;
|
|
|
|
padding: 2vh;
|
|
background-color: var(--Cor_Segundaria_5_1);
|
|
}
|
|
|
|
/* Esta linha de classe aponta para a classe .coluna_1, onde ela é usada somente para alinhar os elementos dentro dela. */
|
|
|
|
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap .coluna_1 {
|
|
width: 100%;
|
|
margin-bottom: 2vh;
|
|
}
|
|
|
|
/* Esta linha de classe aponta para a tag button, com estilizações detalhadas para ela. */
|
|
|
|
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap .coluna_1 button {
|
|
outline: none;
|
|
background: none;
|
|
border: none;
|
|
|
|
width: 32.33%;
|
|
height: 6vh;
|
|
|
|
font-family: var(--font_titulo);
|
|
font-size: 1vw;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ========================================= Fechamento da estrutura de decisão =============================================== */
|
|
|
|
/* Esta linha de classe aponta para a classe .coluna_2, onde ela é utilizada apenas para definir o alinhamento dos itens dentro dela, sendo os painéis de relatórios de cada um dos casos de escolha. */
|
|
|
|
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap .coluna_2 {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
} |