Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- :root{
- /* BORDAS >> */
- --bordaPadrao: 3px;
- --bordasDuplas: calc(2 * var(--bordaPadrao));
- /* BORDAS << */
- /* LARGURAS >> */
- --larguraLateral: 0vw;
- --larguraAmpla: calc(100vw - var(--bordasDuplas));
- --larguraPrincipal: calc(100vw - var(--larguraLateral) - var(--bordasDuplas));
- --larguraCabecalho: var(--larguraAmpla);
- --larguraNav: var(--larguraAmpla);
- --larguraBotaoNav: 10vw;
- --larguraRodape: var(--larguraAmpla);
- --larguraFormulario: calc(var(--larguraPrincipal) / 100 * 60);
- --larguraLabel: 12vw;
- --larguraInput: 30vw;
- --larguraBotaoAdd: 1.5vw;
- /* LARGURAS << */
- /* ALTURAS >> */
- --alturaPrincipal: calc(100vh - var(--alturaCabecalho) - var(--alturaNav) - var(--alturaRodape));
- --alturaCabecalho: 0vh;
- --alturaNav: 0vh;
- --alturaBotaoNav: var(--alturaNav);
- --alturaRodape: 0vh;
- --alturaLateral: calc(var(--alturaPrincipal) - 1vh);
- --alturaTituloFormulario: 0vh;
- --alturaFormulario: calc(var(--alturaPrincipal) - var(--alturaTituloFormulario));
- --alturaBotaoAdd: var(--larguraBotaoAdd);
- --alturaInput: 1.5vh;
- --entreInputs: 0.2vh;;
- /* ALTURAS << */
- /* POSIÇÕES >> */
- --cabecalhoVertical: 0;
- --cabecalhoHorizontal: 0;
- --navVertical: calc(var(--alturaCabecalho) + var(--bordasDuplas));
- --navHorizontal: 0;
- --secaoVertical: calc(var(--alturaCabecalho) + var(--alturaNav) + var(--bordasDuplas));
- --secaoHorizontal: 0;
- --rodapeVertical: calc(var(--alturaCabecalho) + var(--alturaNav) + var(--alturaPrincipal) + var(--bordasDuplas));
- --rodapeHorizontal: 0;
- --lateralVertical: var(--secaoVertical);
- --lateralHorizontal: calc(var(--larguraPrincipal) + var(--bordasDuplas));
- --botaoNavVertical: var(--navVertical);
- --botaoNavHorizontal: 0;
- --fomularioVertical: calc(var(--secaoVertical) + var(--alturaTituloFormulario));
- --formularioHorizontal: calc((var(--larguraPrincipal) / 2) - (var(--larguraFormulario) / 2));
- /* Posicao horizontal dos botões de navegação, todos têm mesma altura
- o valor multiplicador é o indice sequêncial começando em 0*/
- --cadTerHorizontal: calc(var(--larguraBotaoNav) * 0);
- --acTerHorizontal: calc(var(--larguraBotaoNav) * 1);
- --movCobHorizontal: calc(var(--larguraBotaoNav) * 2);
- --conChaHorizontal: calc(var(--larguraBotaoNav) * 3);
- --conLeGuaHorizontal: calc(var(--larguraBotaoNav) * 4);
- --conLacHorizontal: calc(var(--larguraBotaoNav) * 5);
- --conCorHorizontal: calc(var(--larguraBotaoNav) * 6);
- --conMalHorizontal: calc(var(--larguraBotaoNav) * 7);
- --cadObHorizontal: calc(var(--larguraBotaoNav) * 8);
- --conObHorizontal: calc(var(--larguraBotaoNav) * 9);
- /* Posicao horizontal dos botões de navegação, todos têm mesma posição horizontal quando presentes no mesmo formulário.
- o valor multiplicador é o indice sequêncial representando o input, começando em 1*/
- --botaoAddEmpresaCadTerVertical: calc(((2 * 4) * var(--alturaInput)) + (6 * var(--entreInputs)));
- --botaoAddEmpresaCadTerHorizontal: 2vw;
- --botaoAddCargoCadTerVertical: calc(((2 * 5) * var(--alturaInput)) + (10 * var(--entreInputs)));
- --botaoAddCargoCadTerHorizontal: var(--botaoAddEmpresaCadTerHorizontal);
- --botaoAddTipoConCorVertical: calc(((1 * 1) * var(--alturaInput)) + (2 * var(--entreInputs)));
- --botaoAddTipoConCorHorizontal: 2vw;
- --botaoAddAcondicionamentoConCorVertical: calc(((1 * 3) * var(--alturaInput)) + (24 * var(--entreInputs)));
- --botaoAddAcondicionamentoConCorHorizontal: var(--botaoAddTipoConCorHorizontal);
- --botaoAddRemetenteConCorVertical: calc(((1 * 4) * var(--alturaInput)) + (34 * var(--entreInputs)));
- --botaoAddRemetenteConCorHorizontal: var(--botaoAddTipoConCorHorizontal);
- --botaoAddDestinatarioConCorVertical: calc(((1 * 5) * var(--alturaInput)) + (44 * var(--entreInputs)));
- --botaoAddDestinatarioConCorHorizontal: var(--botaoAddTipoConCorHorizontal);
- --botaoAddTipoCadObVertical: calc(((2 * 1) * var(--alturaInput)) + (12 * var(--entreInputs)));
- --botaoAddTipoCadObHorizontal: 2vw;
- --botaoPesquisaObjetoVertical: 7vh;
- --botaoPesquisaObjetoHorizontal: 1vw;
- /* --botaoLogoutVertical: 88vh;
- --botaoLogoutHorizontal: 83vw; */
- --botaoOcorrenciaVertical: 88vh;
- --botaoOcorrenciaHorizontal: 83vw;
- /* POSIÇÕES << */
- }
- * {
- position: fixed;
- margin: 0;
- padding: 0;
- }
- body {
- background-color: #0B6787;
- padding: 1.5rem;
- }
- /* GERAIS << */
- /* DIVS >> */
- section {
- background-color: #0B6787;
- /*border-style: ridge;
- border-color: #34515e;
- border-width: var(--bordaPadrao);*/
- margin: 0;
- padding: 0;
- width: var(--larguraPrincipal);
- height: var(--alturaPrincipal);
- left: var(--secaoHorizontal);
- top: var(--secaoVertical);
- }
- form {
- position: absolute;
- overflow:auto;
- height:100%;
- width: 100%;
- }
- .divTitulo {
- width: calc(var(--larguraFormulario) + var(--bordasDuplas));
- height: var(--alturaTituloFormulario);
- left: 28vw;
- }
- #tituloInicial {
- margin-top: 8vh;
- margin-left: 15vw;
- margin-bottom: 0vh;
- line-height: 0rem;
- }
- .areaFuncional {
- background-color: #0B6787;
- /*border-style: inset;
- border-color: #34515e;
- border-width: var(--bordaPadrao);*/
- padding: 0;
- width: var(--larguraFormulario);
- height: var(--alturaFormulario);
- left: var(--formularioHorizontal);
- top: var(--fomularioVertical);
- }
- /* DIVS << */
- /* FORM >> */
- .elementoFormulario {
- position:static;
- font-size: 0.8rem;
- border-radius: 3px;
- margin-top: 0.5vh;
- }
- label.elementoFormulario {
- display: inline-block;
- margin-left: 8.1vw;
- width: var(--larguraLabel);
- color: white;
- background-color: #3DABC9;
- text-align: center;
- font-family: 'Poppins', sans-serif;
- font-weight: 500;
- font-style: normal;
- /*border-style: solid;
- border-color: #000000;
- border-width: var(--bordaPadrao);*/
- }
- input.elementoFormulario {
- display: inline-block;
- margin-left: 0;
- width: var(--larguraInput);
- text-align: left;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- }
- select.elementoFormulario{
- display: inline-block;
- margin-left: 0;
- width: var(--larguraInput);
- text-align: left;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- }
- input[type=file].elementoFormulario {
- margin-right: 0.3vw;
- }
- textarea.elementoFormulario{
- margin: var(--entreInputs);
- margin-left: 0;
- width: calc(var(--larguraInput) + 12vw);
- text-align: center;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- }
- #finalizarConfirmaT1 , #finalizarConfirmaT2 {
- width: calc(var(--larguraInput) - 28vw);
- margin-left: calc(var(--larguraLabel) + 18vw);
- }
- #funcoesEquipamentoPropio {
- vertical-align: middle;
- margin-left: 0;
- width: var(--larguraInput);
- text-align: left;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- }
- #funcoesAdicionadas {
- vertical-align: middle;
- margin-left: 0;
- width: var(--larguraInput);
- text-align: left;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- }
- #funcoesSoftwares {
- vertical-align: middle;
- margin-left: 0;
- width: var(--larguraInput);
- text-align: left;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- }
- #funcoesEquipamentoPropioLabel {
- margin-left: 8.1vw;
- padding-top: 1vh;
- padding-bottom: 1vh;
- vertical-align: middle;
- word-wrap: break-word;
- display: inline-block;
- width: var(--larguraLabel);
- background-color: #3DABC9;
- text-align: center;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- }
- #funcoesAdicionadasLabel {
- margin-left: 8.1vw;
- padding-top: 1vh;
- padding-bottom: 1vh;
- vertical-align: middle;
- word-wrap: break-word;
- display: inline-block;
- width: var(--larguraLabel);
- background-color: #3DABC9;
- text-align: center;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- }
- #funcoesSoftwaresLabel {
- margin-left: 8.1vw;
- padding-top: 1vh;
- padding-bottom: 1vh;
- vertical-align: middle;
- word-wrap: break-word;
- display: inline-block;
- width: var(--larguraLabel);
- background-color: #3DABC9;
- text-align: center;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- }
- .button {
- text-align: center;
- font-family: 'Poppins', sans-serif;
- font-weight: 700;
- font-style: normal;
- padding: 0.5vw 0.5vh;
- text-align: center;
- cursor: pointer;
- outline: none;
- color: #0B6787;
- background-color: white;
- border: none;
- border-radius: 0.5vw;
- box-shadow: 0 0.8vh #3DABC9;
- }
- .button:hover {background-color: #A9A9A9}
- .button:active {
- background-color: white;
- box-shadow: 0 3px #3DABC9;
- transform: translateY(4px);
- }
- input:read-only {
- background-color: gray;
- }
- textarea:read-only {
- background-color: gray;
- }
- input:not(:focus):not(:placeholder-shown):invalid {
- /* background-color: #D34F6C; */
- }
- textarea:not(:focus):not(:placeholder-shown):invalid {
- /* background-color: #D34F6C; */
- }
- .botaoSalvar {
- display: inline-block;
- margin-left: 71%;
- margin-top: 3%;
- }
- .botaoFormAnterior {
- display: inline-block;
- margin-left: 65%;
- margin-top: 3%;
- }
- .botaoFormProximo {
- display: inline-block;
- margin-left: 3%;
- margin-top: 3%;
- }
- .botaoFormProximoIsolado {
- display: inline-block;
- margin-left: 76%;
- margin-top: 5%;
- }
- .botaoFormEspecial {
- position: absolute;
- }
- /* FORM << */
- /* TEXTOS >> */
- /* Padrão liquido https://www.smashingmagazine.com/2016/05/fluid-typography/ */
- /* Older browsers */
- html { font-size: 5px; }
- /* Modern browsers only need this one */
- @media screen and (min-width: 25em){
- html { font-size: calc( 5px + (24 - 5) * (100vw - 320px) / (1920 - 320)) ); }
- }
- /* Safari <8 and IE <11 */
- @media screen and (min-width: 25em){
- html { font-size: calc( 5px + (24 - 5) * (100vw - 320px) / (1920 - 320) ); }
- }
- @media screen and (min-width: 50em){
- html { font-size: calc( 5px + (24 - 5) * (100vw - 320px) / (1920 - 320) ); }
- }
- /* Padrão liquido https://www.smashingmagazine.com/2016/05/fluid-typography/ */
- h1 {
- font-family: 'Poppins', sans-serif;
- color: black;
- /*text-align: center;*/
- left: 25vw;
- font-size: 1rem;
- line-height: 2rem;
- margin-top: calc((1.5rem - 2rem) + 1.5rem);
- margin-bottom: 1.5rem;
- }
- h2 {
- position:static;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- font-size: 1.5rem;
- color: white;
- color: white;
- margin-left: 8vw;
- margin-bottom: 2vh;
- line-height: 2rem;
- }
- h3 {
- position:static;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- font-size: 1rem;
- color: white;
- /*text-align: center;*/
- /*left: 25vw;*/
- line-height: 2rem;
- margin-top: calc((1.5rem - 2rem) + 1.5rem);
- margin-bottom: 1.5rem;
- }
- h4 {
- position:static;
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- font-size: 1.2rem;
- color: white;
- margin-left: 8vw;
- line-height: 2rem;
- }
- p {
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- font-size: 0.8rem;
- color: white;
- line-height: 0.8rem;
- margin-bottom: 0.8rem;
- }
- .erro {
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- font-size: 0.6rem;
- margin-left: 8vw;
- color: #f1807e;
- line-height: 0.6rem;
- margin-bottom: 0.5rem;
- }
- .descricao {
- font-family: 'Poppins', sans-serif;
- font-weight: 400;
- font-style: normal;
- font-size: 0.5rem;
- margin-left: 4vw;
- color: white;
- line-height: 0.5rem;
- margin-bottom: 0
- }
- #tituloInicio {
- font-family: 'Poppins', sans-serif;
- color: white;
- /*text-align: center;*/
- left: 37vw;
- font-size: 1rem;
- }
- #proximoInicio {
- position:static;
- margin-left: 20vw;
- margin-top: 40vh;
- width: 15vw;
- font-size: 1rem;
- }
- /* TEXTOS << */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement