UNPKG

@digix-ui/dialog

Version:

Stencil Component Starter

2,334 lines (2,073 loc) 144 kB
:root { --cor-primaria: #2C006A; --cor-secundaria: #0bc0d3; --cor-terciaria: #190342; } :root { --cor-sucesso: #08A30E; --cor-erro: #F10B0B; --cor-atencao: #F68500; --cor-info: #0363E7; } :root { --cor-sucesso-invertido: white; --cor-erro-invertido: white; --cor-atencao-invertido: white; --cor-info-invertido: white; } :root { --cor-texto-alerta: #F10B0B; } :root { --cor-primaria-invertida: white; --cor-secundaria-invertida: white; --cor-terciaria-invertida: white; } :root { --cor-branca: #FFF; --cor-preta: #000; --cor-cinza-90: #212121; --cor-cinza-80: #424242; --cor-cinza-70: #616161; --cor-cinza-60: #757575; --cor-cinza-50: #9E9E9E; --cor-cinza-40: #BDBDBD; --cor-cinza-30: #E0E0E0; --cor-cinza-20: #EEE; --cor-cinza-10: #F1F1F1; --cor-cinza-05: #FAFAFA; } :root { --cor-cinza-90-invertido: white; --cor-cinza-80-invertido: white; --cor-cinza-70-invertido: white; --cor-cinza-60-invertido: white; --cor-cinza-50-invertido: white; --cor-cinza-40-invertido: rgba(0, 0, 0, 0.7); --cor-cinza-30-invertido: rgba(0, 0, 0, 0.7); --cor-cinza-20-invertido: rgba(0, 0, 0, 0.7); --cor-cinza-10-invertido: rgba(0, 0, 0, 0.7); --cor-cinza-05-invertido: rgba(0, 0, 0, 0.7); } :root { --cor-botao-acao: #0363E7; --cor-botao-acao-invertida: white; } /* normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css - Editado para o Digix UI */ /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * 1. Correct the inheritance and scaling of font size in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /* Forms ========================================================================== */ /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in all browsers. */ summary { display: list-item; } @keyframes pula-para-cima { 0% { transform: translateY(0); } 100% { transform: translateY(-2px); } } /* latin */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; src: local("Open Sans SemiBold"), local("OpenSans-SemiBold"), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UNirkOUuhp.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; src: local("Open Sans Bold"), local("OpenSans-Bold"), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } * { box-sizing: border-box; } body, html { margin: 0; padding: 0; } @media print { body, html { height: 98%; } } body { font-family: "Open Sans", sans-serif; padding: 0; margin: 0; } @media print { body { -webkit-print-color-adjust: exact; color-adjust: exact; } } a { color: #0363E7; } strong { font-weight: 700; } hr { height: 1px; color: #E0E0E0; background-color: #E0E0E0; border: none; } .u-texto-negrito { font-weight: 700; } .u-texto-italico { font-style: italic; } .u-texto-riscado { text-decoration: line-through; } .u-texto-maiusculo { text-transform: uppercase !important; } .u-texto-capitalizado { text-transform: capitalize !important; } .u-texto-sup { vertical-align: super; font-size: smaller; } .u-texto-sub { vertical-align: sub; font-size: smaller; } .u-texto-alinhado-ao-centro { text-align: center !important; } .u-texto-alinhado-a-direita { text-align: right !important; } .u-texto-alinhado-a-esquerda { text-align: left !important; } .u-alinhamento-vertical-ao-topo { vertical-align: top; } .u-alinhamento-vertical-ao-centro { vertical-align: middle; } .u-alinhamento-vertical-a-base { vertical-align: bottom; } .u-esconder-acessivel { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .u-texto-truncado { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; } .u-margem-superior-mini { margin-top: 4px !important; } .u-margem-inferior-mini { margin-bottom: 4px !important; } .u-margem-esquerda-mini { margin-left: 4px !important; } .u-margem-direita-mini { margin-right: 4px !important; } .u-margem-mini { margin: 4px !important; } .u-padding-superior-mini { padding-top: 4px !important; } .u-padding-inferior-mini { padding-bottom: 4px !important; } .u-padding-esquerda-mini { padding-left: 4px !important; } .u-padding-direita-mini { padding-right: 4px !important; } .u-padding-mini { padding: 4px !important; } .u-margem-superior-pequena { margin-top: 8px !important; } .u-margem-inferior-pequena { margin-bottom: 8px !important; } .u-margem-esquerda-pequena { margin-left: 8px !important; } .u-margem-direita-pequena { margin-right: 8px !important; } .u-margem-pequena { margin: 8px !important; } .u-padding-superior-pequena { padding-top: 8px !important; } .u-padding-inferior-pequena { padding-bottom: 8px !important; } .u-padding-esquerda-pequena { padding-left: 8px !important; } .u-padding-direita-pequena { padding-right: 8px !important; } .u-padding-pequena { padding: 8px !important; } .u-margem-superior-media { margin-top: 16px !important; } .u-margem-inferior-media { margin-bottom: 16px !important; } .u-margem-esquerda-media { margin-left: 16px !important; } .u-margem-direita-media { margin-right: 16px !important; } .u-margem-media { margin: 16px !important; } .u-padding-superior-media { padding-top: 16px !important; } .u-padding-inferior-media { padding-bottom: 16px !important; } .u-padding-esquerda-media { padding-left: 16px !important; } .u-padding-direita-media { padding-right: 16px !important; } .u-padding-media { padding: 16px !important; } .u-margem-superior-grande { margin-top: 32px !important; } .u-margem-inferior-grande { margin-bottom: 32px !important; } .u-margem-esquerda-grande { margin-left: 32px !important; } .u-margem-direita-grande { margin-right: 32px !important; } .u-margem-grande { margin: 32px !important; } .u-padding-superior-grande { padding-top: 32px !important; } .u-padding-inferior-grande { padding-bottom: 32px !important; } .u-padding-esquerda-grande { padding-left: 32px !important; } .u-padding-direita-grande { padding-right: 32px !important; } .u-padding-grande { padding: 32px !important; } .u-margem-superior-gigante { margin-top: 64px !important; } .u-margem-inferior-gigante { margin-bottom: 64px !important; } .u-margem-esquerda-gigante { margin-left: 64px !important; } .u-margem-direita-gigante { margin-right: 64px !important; } .u-margem-gigante { margin: 64px !important; } .u-padding-superior-gigante { padding-top: 64px !important; } .u-padding-inferior-gigante { padding-bottom: 64px !important; } .u-padding-esquerda-gigante { padding-left: 64px !important; } .u-padding-direita-gigante { padding-right: 64px !important; } .u-padding-gigante { padding: 64px !important; } .u-sem-margem { margin: 0 !important; } .u-sem-margem-inferior { margin-bottom: 0 !important; } .u-sem-margem-esquerda { margin-left: 0 !important; } .u-sem-margem-direita { margin-right: 0 !important; } .u-sem-margem-superior { margin-top: 0 !important; } .u-sem-padding { padding: 0 !important; } .u-sem-padding-inferior { padding-bottom: 0 !important; } .u-sem-padding-esquerda { padding-left: 0 !important; } .u-sem-padding-direita { padding-right: 0 !important; } .u-sem-padding-superior { padding-top: 0 !important; } .u-escondido { display: none !important; } @media (max-width: 599px) { .u-escondido-somente-telefone { display: none !important; } } @media (min-width: 600px) { .u-escondido-maior-que-telefone { display: none !important; } } @media (min-width: 900px) { .u-escondido-maior-que-tablet { display: none !important; } } @media (max-width: 899px) { .u-escondido-menor-que-tablet { display: none !important; } } @media (min-width: 1200px) { .u-escondido-maior-que-desktop-pequeno { display: none !important; } } @media (max-width: 1199px) { .u-escondido-menor-que-desktop-pequeno { display: none !important; } } @media (min-width: 1800px) { .u-escondido-maior-que-desktop-grande { display: none !important; } } @media (max-width: 1799px) { .u-escondido-menor-que-desktop-grande { display: none !important; } } .u-invisivel { visibility: hidden !important; } .u-desabilitado { opacity: 0.5; pointer-events: none; } .u-sem-borda { border: 0 solid transparent !important; } .u-exibir-bloco { display: block !important; } .u-exibir-em-linha { display: inline !important; } .u-exibir-bloco-em-linha { display: inline-block !important; } .u-exibir-em-linha-flexivel { display: inline-flex !important; } @media screen { .u-apenas-impressao { display: none; } } @media print { .u-nao-imprimir { display: none; } } .tabela { background-color: #FFF; color: #212121; border-collapse: collapse; border-spacing: 8px; } .tabela td, .tabela th { border: 1px solid #F1F1F1; border-width: 0 0 1px; padding: 0.5em 0.75em; vertical-align: top; } .tabela td.is-cor-branca, .tabela th.is-cor-branca { background-color: #FFF; border-color: #FFF; color: #000; } .tabela td.is-cor-preta, .tabela th.is-cor-preta { background-color: #000; border-color: #000; color: #FFF; } .tabela td.is-cor-cinza-05, .tabela th.is-cor-cinza-05 { background-color: #FAFAFA; border-color: #FAFAFA; color: rgba(0, 0, 0, 0.7); } .tabela td.is-cor-cinza-10, .tabela th.is-cor-cinza-10 { background-color: #F1F1F1; border-color: #F1F1F1; color: rgba(0, 0, 0, 0.7); } .tabela td.is-cor-cinza-20, .tabela th.is-cor-cinza-20 { background-color: #EEE; border-color: #EEE; color: rgba(0, 0, 0, 0.7); } .tabela td.is-cor-cinza-30, .tabela th.is-cor-cinza-30 { background-color: #E0E0E0; border-color: #E0E0E0; color: rgba(0, 0, 0, 0.7); } .tabela td.is-cor-cinza-40, .tabela th.is-cor-cinza-40 { background-color: #BDBDBD; border-color: #BDBDBD; color: rgba(0, 0, 0, 0.7); } .tabela td.is-cor-cinza-50, .tabela th.is-cor-cinza-50 { background-color: #9E9E9E; border-color: #9E9E9E; color: white; } .tabela td.is-cor-cinza-60, .tabela th.is-cor-cinza-60 { background-color: #757575; border-color: #757575; color: white; } .tabela td.is-cor-cinza-70, .tabela th.is-cor-cinza-70 { background-color: #616161; border-color: #616161; color: white; } .tabela td.is-cor-cinza-80, .tabela th.is-cor-cinza-80 { background-color: #424242; border-color: #424242; color: white; } .tabela td.is-cor-cinza-90, .tabela th.is-cor-cinza-90 { background-color: #212121; border-color: #212121; color: white; } .tabela td.is-cor-primaria, .tabela th.is-cor-primaria { background-color: #2C006A; border-color: #2C006A; color: white; } .tabela td.is-cor-secundaria, .tabela th.is-cor-secundaria { background-color: #0bc0d3; border-color: #0bc0d3; color: white; } .tabela td.is-cor-terciaria, .tabela th.is-cor-terciaria { background-color: #190342; border-color: #190342; color: white; } .tabela td.is-cor-info, .tabela th.is-cor-info { background-color: #0363E7; border-color: #0363E7; color: white; } .tabela td.is-cor-sucesso, .tabela th.is-cor-sucesso { background-color: #08A30E; border-color: #08A30E; color: white; } .tabela td.is-cor-atencao, .tabela th.is-cor-atencao { background-color: #F68500; border-color: #F68500; color: white; } .tabela td.is-cor-erro, .tabela th.is-cor-erro { background-color: #F10B0B; border-color: #F10B0B; color: white; } .tabela td.tabela_estreita, .tabela th.tabela_estreita { white-space: nowrap; width: 1%; } .tabela td.linha-selecionada, .tabela th.linha-selecionada { background-color: var(--cor-primaria); color: #FFF; } .tabela td.linha-selecionada a, .tabela td.linha-selecionada strong, .tabela th.linha-selecionada a, .tabela th.linha-selecionada strong { color: currentColor; } .tabela th { color: var(--cor-primaria); text-align: left; } .tabela tr.linha-selecionada { background-color: var(--cor-primaria); color: #FFF; } .tabela tr.linha-selecionada a, .tabela tr.linha-selecionada strong { color: currentColor; } .tabela tr.linha-selecionada td, .tabela tr.linha-selecionada th { border-color: #FFF; color: currentColor; } .tabela thead td, .tabela thead th { border-width: 0 0 2px; color: var(--cor-primaria); } .tabela tfoot td, .tabela tfoot th { border-width: 2px 0 0; color: #212121; } .tabela tbody tr:last-child td, .tabela tbody tr:last-child th { border-bottom-width: 0; } .tabela.tabela_com-borda td, .tabela.tabela_com-borda th { border-width: 1px; } .tabela.tabela_com-borda tr:last-child td, .tabela.tabela_com-borda tr:last-child th { border-bottom-width: 1px; } .tabela.tabela_com-largura-total { width: 100%; } .tabela.tabela_com-hover-na-linha tbody tr:not(.linha-selecionada):hover { background-color: #F1F1F1; } .tabela.tabela_com-hover-na-linha.tabela_listrada tbody tr:not(.linha-selecionada):hover { background-color: #EEE; } .tabela.tabela_estreita td, .tabela.tabela_estreita th { padding: 0.25em 0.5em; } .tabela.tabela_listrada tbody tr:not(.linha-selecionada):nth-child(even) { background-color: #F1F1F1; } .formulario { width: 100%; } .formulario__datalist, .formulario__textarea, .formulario textarea, .formulario__select, .formulario select, .formulario__input, .formulario input[type=text], .formulario input[type=password], .formulario input[type=search], .formulario input[type=date], .formulario input[type=month], .formulario input[type=number], .formulario input[type=tel], .formulario input[type=time], .formulario input[type=url], .formulario input[type=file], .formulario input[type=week], .formulario input[type=email] { border-radius: 8px; transition: 0.2s all ease-in-out; width: 100%; font-family: "Open Sans", sans-serif; font-size: 16px; height: 40px; padding: 4px 8px; background-color: #FFF; border: 2px solid #E0E0E0; color: #424242; } .formulario__datalist:focus, .formulario__textarea:focus, .formulario textarea:focus, .formulario__select:focus, .formulario select:focus, .formulario__input:focus, .formulario input[type=text]:focus, .formulario input[type=password]:focus, .formulario input[type=search]:focus, .formulario input[type=date]:focus, .formulario input[type=month]:focus, .formulario input[type=number]:focus, .formulario input[type=tel]:focus, .formulario input[type=time]:focus, .formulario input[type=url]:focus, .formulario input[type=file]:focus, .formulario input[type=week]:focus, .formulario input[type=email]:focus { outline: 0; border-color: #0363E7; } .formulario__datalist:hover:not(:focus), .formulario__textarea:hover:not(:focus), .formulario textarea:hover:not(:focus), .formulario__select:hover:not(:focus), .formulario select:hover:not(:focus), .formulario__input:hover:not(:focus), .formulario input[type=text]:hover:not(:focus), .formulario input[type=password]:hover:not(:focus), .formulario input[type=search]:hover:not(:focus), .formulario input[type=date]:hover:not(:focus), .formulario input[type=month]:hover:not(:focus), .formulario input[type=number]:hover:not(:focus), .formulario input[type=tel]:hover:not(:focus), .formulario input[type=time]:hover:not(:focus), .formulario input[type=url]:hover:not(:focus), .formulario input[type=file]:hover:not(:focus), .formulario input[type=week]:hover:not(:focus), .formulario input[type=email]:hover:not(:focus) { border-color: rgba(3, 99, 231, 0.5); } .formulario__datalist::placeholder, .formulario__textarea::placeholder, .formulario textarea::placeholder, .formulario__select::placeholder, .formulario select::placeholder, .formulario__input::placeholder, .formulario input[type=text]::placeholder, .formulario input[type=password]::placeholder, .formulario input[type=search]::placeholder, .formulario input[type=date]::placeholder, .formulario input[type=month]::placeholder, .formulario input[type=number]::placeholder, .formulario input[type=tel]::placeholder, .formulario input[type=time]::placeholder, .formulario input[type=url]::placeholder, .formulario input[type=file]::placeholder, .formulario input[type=week]::placeholder, .formulario input[type=email]::placeholder { color: #757575; } .formulario__checkbox-container, .formulario__radio-container, label.formulario__checkbox-container, label.formulario__radio-container, legend.formulario__label, .formulario__label, .formulario label, .formulario__legend, .formulario legend { font-weight: 600; display: block; margin-bottom: 8px; font-size: 16px; color: #424242; } .formulario__input[type=file], .formulario input[type=file] { border: none; border-radius: 0; padding: 0; cursor: pointer; } .formulario__input[type=file]::-webkit-file-upload-button, .formulario input[type=file]::-webkit-file-upload-button { transition: 0.2s all ease-in-out; border-radius: 8px; font-weight: 700; background: #0363E7; height: 40px; border: 0; margin-right: 16px; padding: 0 16px; color: #FFF; } .formulario__input[type=file]::-ms-browse, .formulario input[type=file]::-ms-browse { transition: 0.2s all ease-in-out; border-radius: 8px; font-weight: 700; background: #0363E7; height: 40px; border: 0; margin-right: 16px; padding: 0 16px; color: #FFF; } .formulario__input[type=file]:hover::-webkit-file-upload-button, .formulario__input[type=file]:focus::-webkit-file-upload-button, .formulario input[type=file]:hover::-webkit-file-upload-button, .formulario input[type=file]:focus::-webkit-file-upload-button { background: #024db5; outline: 0; } .formulario__input[type=file]:hover::-ms-browse, .formulario__input[type=file]:focus::-ms-browse, .formulario input[type=file]:hover::-ms-browse, .formulario input[type=file]:focus::-ms-browse { background: #024db5; outline: 0; } .formulario__input[type=number], .formulario input[type=number] { -moz-appearance: textfield; } .formulario__input[type=month]::-webkit-inner-spin-button, .formulario__input[type=week]::-webkit-inner-spin-button, .formulario__input[type=date]::-webkit-inner-spin-button, .formulario input[type=month]::-webkit-inner-spin-button, .formulario input[type=week]::-webkit-inner-spin-button, .formulario input[type=date]::-webkit-inner-spin-button { display: none; } .formulario__checkbox-marcador, .formulario__radio-marcador, .formulario__checkbox-container input[type=checkbox], .formulario__checkbox-container input[type=radio], .formulario__radio-container input[type=checkbox], .formulario__radio-container input[type=radio] { -webkit-appearance: none; -moz-appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-print-color-adjust: exact; appearance: none; box-shadow: none; display: inline-block; height: 20px; width: 20px; vertical-align: middle; color: #0363E7; border: 2px solid #BDBDBD; border-radius: 5px; background-color: #FAFAFA; background-origin: border-box; user-select: none; color-adjust: exact; flex-shrink: 0; margin: 0 8px 0 0; padding: 0; cursor: pointer; } .formulario__checkbox-marcador:hover:not(:checked), .formulario__radio-marcador:hover:not(:checked), .formulario__checkbox-container input[type=checkbox]:hover:not(:checked), .formulario__checkbox-container input[type=radio]:hover:not(:checked), .formulario__radio-container input[type=checkbox]:hover:not(:checked), .formulario__radio-container input[type=radio]:hover:not(:checked) { border: 2px solid #0363E7; background: #F1F1F1; } .formulario__checkbox-marcador:focus, .formulario__radio-marcador:focus, .formulario__checkbox-container input[type=checkbox]:focus, .formulario__checkbox-container input[type=radio]:focus, .formulario__radio-container input[type=checkbox]:focus, .formulario__radio-container input[type=radio]:focus { border: 2px solid #0363E7; outline: none; } .formulario__checkbox-marcador:checked, .formulario__radio-marcador:checked, .formulario__checkbox-container input[type=checkbox]:checked, .formulario__checkbox-container input[type=radio]:checked, .formulario__radio-container input[type=checkbox]:checked, .formulario__radio-container input[type=radio]:checked { background-color: currentColor; border: 2px solid currentColor; background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'><path d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/></svg>"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .formulario__radio-marcador, .formulario__checkbox-container input[type=radio], .formulario__radio-container input[type=radio] { border-radius: 100%; } .formulario__radio-marcador:checked, .formulario__checkbox-container input[type=radio]:checked, .formulario__radio-container input[type=radio]:checked { background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='3'/></svg>"); } .formulario__checkbox-marcador ~ .formulario__label, .formulario__radio-marcador ~ .formulario__label, .formulario__checkbox-container label, .formulario__radio-container label { font-weight: 400; margin-bottom: 0; cursor: pointer; } .formulario__checkbox-container, .formulario__radio-container, label.formulario__checkbox-container, label.formulario__radio-container { font-weight: 400; display: flex; align-items: center; width: fit-content; cursor: pointer; } .formulario__checkbox-marcador ~ .formulario__label, .formulario__radio-marcador ~ .formulario__label { cursor: pointer; } .formulario__container-de-inputs { border-radius: 8px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-around; padding: 16px; border: 2px solid #F1F1F1; background-color: #FAFAFA; } .formulario__container-de-inputs > * { margin: 8px; } @media (min-width: 600px) { .formulario__container-de-inputs { height: 40px; flex-direction: row; align-items: center; padding: 0 16px; } } .formulario__container-de-inputs .u-exibir-em-linha-flexivel label { margin-bottom: 0; } .formulario__input-checkbox, .formulario__input-radio { display: flex !important; align-items: center; position: relative; margin-bottom: 8px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-weight: 500 !important; } .formulario__input-checkbox input, .formulario__input-radio input { position: absolute; top: 0; opacity: 0; cursor: pointer; width: 0px; height: 0px; } .formulario__input-checkbox .formulario__marcador, .formulario__input-radio .formulario__marcador { position: absolute; top: 0; left: 0; background-color: #FAFAFA; border: 2px solid #E0E0E0; } .formulario__input-checkbox .formulario__marcador:focus, .formulario__input-radio .formulario__marcador:focus { border: 2px solid #0363E7; } .formulario__input-checkbox .formulario__marcador:after, .formulario__input-radio .formulario__marcador:after { content: ""; position: absolute; display: none; height: 8px; box-sizing: content-box; } .formulario__input-checkbox input:focus ~ .formulario__marcador, .formulario__input-radio input:focus ~ .formulario__marcador { border: 2px solid #0363E7; } .formulario__input-checkbox:hover input ~ .formulario__marcador, .formulario__input-radio:hover input ~ .formulario__marcador { background-color: #EEE; } .formulario__input-checkbox input:checked ~ .formulario__marcador, .formulario__input-radio input:checked ~ .formulario__marcador { background-color: #EEE; } .formulario__input-checkbox input:checked ~ .formulario__marcador:after, .formulario__input-radio input:checked ~ .formulario__marcador:after { display: block; } .formulario__input-checkbox, .formulario .formulario__input-checkbox { margin-right: 10px; padding-left: 26px !important; } .formulario__input-checkbox .formulario__marcador, .formulario .formulario__input-checkbox .formulario__marcador { border-radius: 5px; height: 20px; width: 20px; top: 1px; } .formulario__input-checkbox .formulario__marcador:after, .formulario .formulario__input-checkbox .formulario__marcador:after { top: 1px; left: 5px; width: 4px; border: solid #0363E7; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .formulario__input-radio { width: auto; padding-left: 24px !important; margin-right: 12px; } .formulario__input-radio .formulario__marcador { border-radius: 50%; height: 18px; width: 18px; margin-top: 2px; } .formulario__input-radio .formulario__marcador:after { top: 3px; left: 3px; width: 8px; background: #0363E7; border-radius: 50%; } textarea.formulario__input, .formulario textarea, .formulario__textarea { padding: 8px; height: auto; } select.formulario__input, .formulario__datalist, .formulario select, .formulario__select, .formulario input[list], .formulario__input[list] { -webkit-appearance: none; -moz-appearance: none; cursor: pointer; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIxIiBoZWlnaHQ9IjE5MSIgdmlld0JveD0iMCAwIDMyMSAxOTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNTEuNTI1IDE4Ny4xMjVMMy41MjUgNDAuMzI1Qy0xLjE3NSAzNS42MjUgLTEuMTc1IDI4LjAyNSAzLjUyNSAyMy4zMjVMMjMuMzI1IDMuNTI1QzI4LjAyNSAtMS4xNzUgMzUuNjI1IC0xLjE3NSA0MC4zMjUgMy41MjVMMTYwLjAyNSAxMjIuMDI1TDI3OS43MjUgMy41MjVDMjg0LjQyNSAtMS4xNzUgMjkyLjAyNSAtMS4xNzUgMjk2LjcyNSAzLjUyNUwzMTYuNTI1IDIzLjMyNUMzMjEuMjI1IDI4LjAyNSAzMjEuMjI1IDM1LjYyNSAzMTYuNTI1IDQwLjMyNUwxNjguNTI1IDE4Ny4xMjVDMTYzLjgyNSAxOTEuODI1IDE1Ni4yMjUgMTkxLjgyNSAxNTEuNTI1IDE4Ny4xMjVaIiBmaWxsPSIjNjE2MTYxIi8+Cjwvc3ZnPgo=") #FFF no-repeat; background-position: right 13px bottom 50%; background-size: 14px; padding-right: 40px; } .formulario__datalist::-webkit-calendar-picker-indicator, .formulario input[list]::-webkit-calendar-picker-indicator, .formulario__input[list]::-webkit-calendar-picker-indicator { display: none; } .formulario__grupo-de-inputs, .formulario__fieldset, .formulario fieldset { margin: 0; padding: 0; border: 0; } .formulario__input_desabilitado, .formulario__datalist:disabled, .formulario__textarea:disabled, .formulario textarea:disabled, .formulario__select:disabled, .formulario select:disabled, .formulario__input:disabled, .formulario input:disabled, .formulario__checkbox-marcador:disabled, .formulario__checkbox-container_desabilitado input[type=checkbox]:disabled, .formulario__radio-marcador:disabled, .formulario__radio-container_desabilitado input[type=radio]:disabled { cursor: not-allowed; border-color: #E0E0E0 !important; background-color: #EEE !important; } .formulario__radio-marcador:checked:disabled, .formulario__radio-container_desabilitado input[type=radio]:checked:disabled { background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' style='fill: %23666' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='3'/></svg>"); } .formulario__checkbox-marcador:checked:disabled, .formulario__checkbox-container_desabilitado input[type=checkbox]:checked:disabled { background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23666' xmlns='http://www.w3.org/2000/svg'><path d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/></svg>"); } .formulario__radio-container_desabilitado { cursor: not-allowed; } .formulario__radio-container_desabilitado label { cursor: not-allowed; } .formulario__radio-marcador:disabled + label { cursor: not-allowed; } .formulario__checkbox-container_desabilitado { cursor: not-allowed; } .formulario__checkbox-container_desabilitado label { cursor: not-allowed; } .formulario__checkbox-marcador:disabled + label { cursor: not-allowed; } .formulario__input-radio_em-linha, .formulario__input-checkbox_em-linha, .formulario__radio-container_em-linha, .formulario__checkbox-container_em-linha { display: inline-flex !important; width: auto; margin-right: 16px; } .formulario__input-checkbox_desabilitado, .formulario__input-radio_desabilitado { color: #9E9E9E; } .formulario__input-checkbox_desabilitado input ~ .formulario__marcador, .formulario__input-radio_desabilitado input ~ .formulario__marcador { background-color: #EEE; } .formulario__input-checkbox_desabilitado:hover input ~ .formulario__marcador, .formulario__input-radio_desabilitado:hover input ~ .formulario__marcador { background-color: #EEE; } .formulario__input_erro { border-color: rgba(241, 11, 11, 0.5) !important; } .formulario__input_erro:focus { border-color: #f10b0b !important; } .formulario__mensagem { display: none; margin: 0; padding: 0; position: relative; bottom: 4px; font-size: 15px; margin-top: 8px; } .formulario__mensagem_erro { display: flex !important; color: #F10B0B; } .formulario__mensagem-icone { margin: 4px 8px 0 0; } .formulario__input_sucesso { border-color: rgba(8, 163, 14, 0.5) !important; } .formulario__input_sucesso:focus { border-color: #08a30e !important; } .formulario__mensagem { display: none; margin: 0; padding: 0; position: relative; bottom: 4px; font-size: 15px; margin-top: 8px; } .formulario__mensagem_sucesso { display: flex !important; color: #08A30E; } .formulario__mensagem-icone { margin: 4px 8px 0 0; } .formulario__input_atencao { border-color: rgba(246, 133, 0, 0.5) !important; } .formulario__input_atencao:focus { border-color: #f68500 !important; } .formulario__mensagem { display: none; margin: 0; padding: 0; position: relative; bottom: 4px; font-size: 15px; margin-top: 8px; } .formulario__mensagem_atencao { display: flex !important; color: #F68500; } .formulario__mensagem-icone { margin: 4px 8px 0 0; } .formulario__obrigatorio { color: #F10B0B; font-size: 8px; vertical-align: middle; margin-left: 2px; } .formulario input:-webkit-autofill, .formulario input:-webkit-autofill:hover, .formulario input:-webkit-autofill:focus input:-webkit-autofill, .formulario textarea:-webkit-autofill, .formulario textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, .formulario select:-webkit-autofill, .formulario select:-webkit-autofill:hover, .formulario select:-webkit-autofill:focus { -webkit-text-fill-color: #000; -webkit-box-shadow: 0 0 0px 1000px #FFF inset; } .formulario__input-com-icone-para-direita, .formulario__input-com-icone-para-esquerda { position: relative; } .formulario__input-com-icone-para-direita .formulario__icone-do-input, .formulario__input-com-icone-para-esquerda .formulario__icone-do-input { transition: 0.2s all ease-in-out; pointer-events: none; position: absolute; top: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: calc(100% - 4px); margin: 2px; font-size: 16px; color: var(--cor-secundaria); } .formulario__input-com-icone-para-esquerda input, .formulario__input-com-icone-para-esquerda select { padding-left: 40px !important; } .formulario__input-com-icone-para-esquerda .formulario__icone-do-input { left: 0; } .formulario__input-com-icone-para-direita input { padding-right: 40px !important; } .formulario__input-com-icone-para-direita .formulario__icone-do-input { right: 0; } .fa_cor-primaria { color: var(--cor-primaria); } .fa_cor-secundaria { color: var(--cor-secundaria); } .fa_cor-terciaria { color: var(--cor-terciaria); } .fa_cor-info { color: #0363E7; } .fa_cor-sucesso { color: #08A30E; } .fa_cor-erro { color: #F10B0B; } .fa_cor-atencao { color: #F68500; } .fa_cor-cinza { color: #9E9E9E; } .titulo { font-weight: 700; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; margin: 0; padding: 0; } .titulo_gigante { font-size: 32px; } .titulo_grande { font-size: 24px; } .titulo_medio { font-size: 20px; } .titulo_pequeno { font-size: 16px; } .titulo_mini { font-size: 14px; } .titulo_micro { font-size: 12px; } .titulo_cor-primaria { color: var(--cor-primaria); } .titulo_cor-secundaria { color: var(--cor-secundaria); } .titulo_cor-terciaria { color: var(--cor-terciaria); } .titulo_cor-erro { color: #F10B0B; } .titulo_cor-atencao { color: #F68500; } .titulo_cor-sucesso { color: #08A30E; } .titulo_cor-info { color: #0363E7; } .titulo_cor-cinza { color: #424242; } .grade { display: block; margin: 0 -8px; } .grade_sem-margem { margin: 0; } .grade_sem-margem .grade__coluna { margin: 0; padding: 0; } .grade_sem-margem .grade__linha:last-child { margin: 0; } .grade_sem-recuo { margin: 0; } .grade__linha { display: flex; flex-direction: column; flex-wrap: wrap; } .grade__linha:last-child { margin-bottom: 8px; } @media print { .grade__linha { flex-direction: inherit; flex-wrap: inherit; } } @media (min-width: 600px) { .grade__linha { flex-direction: row; } } .grade__linha_alinhar-horizontal-centro { justify-content: center; } .grade__linha_alinhar-horizontal-esquerda { justify-content: flex-start; } .grade__linha_alinhar-horizontal-direita { justify-content: flex-end; } .grade__linha_distribuir-horizontal-entre-elementos { justify-content: space-between; } .grade__linha_distribuir-horizontal-ao-redor { justify-content: space-around; } .grade__linha_distribuir-horizontal-uniforme { justify-content: space-evenly; } @media (min-width: 600px) { .grade__linha_alinhar-vertical-centro { align-items: center; } .grade__linha_alinhar-vertical-ao-topo { align-items: flex-start; } .grade__linha_alinhar-vertical-a-base { align-items: flex-end; } } .grade__coluna { display: block; flex-basis: 0; flex-grow: 1; padding: 8px; } @media (min-width: 600px) { .grade__coluna { width: auto; } } .grade__coluna_estreita { flex: none; } .grade__coluna_alinhar-vertical-centro { align-self: center; } .grade__coluna_alinhar-vertical-ao-topo { align-self: flex-start; } .grade__coluna_alinhar-vertical-a-base { align-self: flex-end; } .grade__coluna_1 { flex: none; width: 100%; } @media print { .grade__coluna_1 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_1 { width: 8.3333333333%; } } .grade__coluna_deslocar-1 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-1 { margin-left: 8.3333333333%; } } .grade__coluna_2 { flex: none; width: 100%; } @media print { .grade__coluna_2 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_2 { width: 16.6666666667%; } } .grade__coluna_deslocar-2 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-2 { margin-left: 16.6666666667%; } } .grade__coluna_3 { flex: none; width: 100%; } @media print { .grade__coluna_3 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_3 { width: 25%; } } .grade__coluna_deslocar-3 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-3 { margin-left: 25%; } } .grade__coluna_4 { flex: none; width: 100%; } @media print { .grade__coluna_4 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_4 { width: 33.3333333333%; } } .grade__coluna_deslocar-4 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-4 { margin-left: 33.3333333333%; } } .grade__coluna_5 { flex: none; width: 100%; } @media print { .grade__coluna_5 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_5 { width: 41.6666666667%; } } .grade__coluna_deslocar-5 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-5 { margin-left: 41.6666666667%; } } .grade__coluna_6 { flex: none; width: 100%; } @media print { .grade__coluna_6 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_6 { width: 50%; } } .grade__coluna_deslocar-6 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-6 { margin-left: 50%; } } .grade__coluna_7 { flex: none; width: 100%; } @media print { .grade__coluna_7 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_7 { width: 58.3333333333%; } } .grade__coluna_deslocar-7 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-7 { margin-left: 58.3333333333%; } } .grade__coluna_8 { flex: none; width: 100%; } @media print { .grade__coluna_8 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_8 { width: 66.6666666667%; } } .grade__coluna_deslocar-8 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-8 { margin-left: 66.6666666667%; } } .grade__coluna_9 { flex: none; width: 100%; } @media print { .grade__coluna_9 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_9 { width: 75%; } } .grade__coluna_deslocar-9 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-9 { margin-left: 75%; } } .grade__coluna_10 { flex: none; width: 100%; } @media print { .grade__coluna_10 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_10 { width: 83.3333333333%; } } .grade__coluna_deslocar-10 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-10 { margin-left: 83.3333333333%; } } .grade__coluna_11 { flex: none; width: 100%; } @media print { .grade__coluna_11 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_11 { width: 91.6666666667%; } } .grade__coluna_deslocar-11 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-11 { margin-left: 91.6666666667%; } } .grade__coluna_12 { flex: none; width: 100%; } @media print { .grade__coluna_12 { flex: inherit; } } @media (min-width: 600px) { .grade__coluna_12 { width: 100%; } } .grade__coluna_deslocar-12 { margin: 0; } @media (min-width: 600px) { .grade__coluna_deslocar-12 { margin-left: 100%; } } .cabecalho-sistema { background-color: var(--cor-terciaria); display: flex; justify-content: space-between; width: 100%; height: 48px; z-index: 4; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media print { .cabecalho-sistema { display: none; } } .cabecalho-sistema_fixo { position: sticky; top: 0; left: 0; } .cabecalho-sistema__container-secundario, .cabecalho-sistema__container-primario { display: flex; flex-grow: 1; align-items: center; height: 48px; } .cabecalho-sistema__container-secundario { flex-grow: 0; } .cabecalho-sistema__logo { height: 32px; display: flex; align-items: center; margin: 0 16px; } .cabecalho-sistema__menu, .cabecalho-sistema__lista-de-itens { display: flex; height: 100%; } .cabecalho-sistema__lista-de-itens { list-style-type: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-start: 0; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none; } .cabecalho-sistema__lista-de-itens .dropdown__lista { margin-left: 16px; } .cabecalho-sistema__lista-de-itens .dropdown_direita .dropdown__lista { margin-right: 16px; } .cabecalho-sistema__item-de-menu { transition: 0.2s all ease-in-out; font-weight: 600; font-family: "Open Sans", sans-serif; position: relative; display: flex; align-items: center; justify-content: center; height: 100%; margin: 0 16px; background-color: transparent; border: none; border-bottom: 4px solid transparent; border-top: 4px solid transparent; color: rgba(255, 255, 255, 0.75); font-size: 14px; text-decoration: none; white-space: nowrap; cursor: pointer; outline: 0; } .cabecalho-sistema__item-de-menu:hover, .cabecalho-sistema__item-de-menu:focus { color: #FFF; border-bottom-color: rgba(255, 255, 255, 0.5); } .cabecalho-sistema__item-de-menu.cabecalho-sistema__item-de-menu_ativo { font-weight: 600; color: #FFF; opacity: 1; border-bottom-color: var(--cor-secundaria); } .cabecalho-sistema__icone-do-usuario { border: 2px solid var(--cor-secundaria); color: #FFF; border-radius: 50%; margin-right: 8px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 12px; } .cabecalho-sistema__nome-do-usuario { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; max-width: 128px; } .rodape-sistema { width: 100%; display: flex; align-items: center; justify-content: flex-end; margin-bottom: 24px; } @media print { .rodape-sistema { display: none; } } .rodape-sistema__texto { font-size: 14px; color: #424242; } .rodape-sistema__logo { width: 48px; margin: 16px 48px 16px 16px; } .botao { border-radius: 8px; font-weight: 700; position: relative; display: inline-block; height: 40px; padding: 0 16px; background-color: #0363E7; font-family: "Open Sans", sans-serif; font-size: 16px; text-decoration: none; white-space: nowrap; color: white; border: 2px solid transparent; transition: 0.2s background-color, 0.2s border; cursor: pointer; } .botao:hover, .botao:focus { background-color: #024fb9; } .botao:focus { outline: none; } .botao:active { box-shadow: none !important; top: 2px; } .botao:not(.botao_contorno):not(.botao_sem-preenchimento) { box-shadow: 0 2px 2px rgba(3, 99, 231, 0.3); } a.botao { display: inline-flex; align-items: center; justify-content: center; } a.botao:hover { text-decoration: none; } .botao_contorno { border: 2px solid rgba(3, 99, 231, 0.5); color: #0363E7; background-color: transparent; } .botao_contorno:hover, .botao_contorno:focus { border: 2px solid #0363E7; background-color: transparent; } .botao_sem-preenchimento { color: #0363E7; background-color: transparent; border: 2px solid transparent; } .botao_sem-preenchimento:hover, .botao_sem-preenchimento:focus { background-color: rgba(3, 99, 231, 0.1); } .botao_sem-preenchimento:focus { border: 2px solid rgba(3, 99, 231, 0.5); } .botao_largura-total { width: 100%; } .botao_pequeno { height: 32px; padding: 0 8px; font-size: 14px; } .botao_pequeno.botao_icone { width: 32px; } .botao_medio { height: 40px; padding: 0 16px; font-size: 16px; } .botao_medio.botao_icone { width: 40px; } .botao_grande { height: 48px; padding: 0 24px; font-size: 18px; } .botao_grande.botao_icone { width: 48px; } .botao_icone { align-items: center; justify-content: center; padding: 0; } .botao_com-icone-para-esquerda [class*=fa-] { flex-shrink: 0; margin-right: 8px; } .botao_com-icone-para-direita [class*=fa-] { flex-shrink: 0; margin-left: 8px; } .botao_cor-branca { color: #FFF; background-color: #FFF; } .botao_cor-branca:not(.botao_contorno):not(.botao_sem-preenchimento) { box-shadow: 0 2px 2px rgba(255, 255, 255, 0.3); } .botao_cor-branca:hover, .botao_cor-branca:focus { background-color: #cccccc; } .botao_contorno.botao_cor-branca { color: #FFF; border: 2px solid rgba(255, 255, 255, 0.5); background-color: transparent; } .botao_contorno.botao_cor-branca:hover, .botao_contorno.botao_cor-branca:focus { border: 2px solid #FFF; } .botao_sem-preenchimento.botao_cor-branca { color: #FFF; background-color: transparent; } .botao_sem-preenchimento.botao_cor-branca:hover, .botao_sem-preenchimento.botao_cor-branca:focus { background-color: rgba(255, 255, 255, 0.1); } .botao_sem-preenchimento.botao_cor-branca:focus { border: 2px solid rgba(255, 255, 255, 0.1); } .botao_invertido.botao_cor-branca, .botao_com-fundo-branco:not(.botao_sem-preenchimento):not(.botao_contorno).botao_cor-branca { color: #FFF; background-color: #FFF; } .botao_invertido.botao_cor-branca:hover, .botao_invertido.botao_cor-branca:focus, .botao_com-fundo-branco:not(.botao_sem-preenchimento):not(.botao_contorno).botao_cor-branca:hover, .botao_com-fundo-branco:not(.botao_sem-preenchimento):not(.botao_contorno).botao_cor-branca:focus { background: rgba(255, 255, 255, 0.8); } .botao_cor-cinza { color: #FFF; background-color: #616161; } .botao_cor-cinza:not(.botao_contorno):not(.botao_sem-preenchimento) { box-shadow: 0 2px 2px rgba(97, 97, 97, 0.3); } .botao_cor-cinza:hover, .botao_cor-cinza:focus { background-color: #4e4e4e; } .botao_contorno.botao_cor-cinza { color: #616161; border: 2px solid rgba(97, 97, 97, 0.5); background-color: transparent; } .botao_contorno.botao_cor-cinza:hover, .botao_contorno.botao_cor-cinza:focus { border: 2px solid #616161; } .botao_sem-preenchimento.botao_cor-cinza { color: #616161; background-color: transparent; } .botao_sem-preenchimento.botao_cor-cinza:hover, .botao_sem-preenchimento.botao_cor-cinza:focus { background-color: rgba(97, 97, 97, 0.1); } .botao_sem-preenchimento.botao_cor-cinza:focus { border: 2px solid rgba(97, 97, 97, 0.1); } .botao_invertido.botao_cor-cinza, .botao_com-fundo-branco:not(.botao_sem-preenchimento):not(.botao_contorno).botao_cor-cinza { color: #616161; background-color: #FFF; } .botao_invertido.botao_cor-cinza:hover, .botao_invertido.botao_cor-cinza:focus, .botao_com-fundo-branco:not(.botao_sem-preenchimento):not(.botao_contorno).botao_cor-cinza:hover, .botao_com-fundo-branco:not(.botao_sem-preenchimento):not(.botao_contorno).botao_cor-cinza:focus { background: rgba(255, 255, 255, 0.8); } .botao_cor-primaria { color: #FFF; background-color: #2C006A; } .botao_cor-primaria:not(.botao_contorno):not(.botao_sem-preenchimento) { box-shadow: 0 2px 2px rgba(44, 0, 106, 0.3); } .botao_cor-primaria:hover, .botao_cor-primaria:focus { background-color: #230055; } .botao_contorno.botao_cor-primaria { color: #2C006A; border: 2px solid rgba(44, 0, 106, 0.5); background-color: transparent; } .botao_contorno.botao_cor-primaria:hover, .botao_contorno.botao_cor-primaria:focus { border: 2px solid #2C006A; } .botao_sem-preenchimento.botao_cor-primaria { color: #2C006A; background-color: transparent; } .botao_sem-preenchimento.botao_cor-primaria:hover, .botao_sem-preenchimento.botao_cor-primaria:focus { background-color: rgba(44, 0, 106, 0.1); } .botao_sem-preenchimento.botao_cor-primaria:focus { border: 2px solid rgba(44, 0, 106, 0.1); } .botao_invertido.botao_cor-primaria, .botao_com-fundo-branco:not(.botao_sem-preenchimento):not(.botao_contorno).botao_cor-primaria { color: #2C006A; background-color: #FFF; } .botao_invertido.botao_cor-primaria:hover, .botao_invertido.botao_cor-primaria:focus, .botao_com-fundo-branco:not(.botao_sem-preenchimento):not(.botao_contorno).botao_cor-primaria:hover, .botao_com-fundo-branco:not(.botao_sem-preenchimento):not(.botao_contorno).botao_cor-primaria:focus { background: rgba(255, 255, 255, 0.8); } .botao_cor-secundaria { color: #FFF; background-color: #0bc0d3; } .botao_cor-secundaria:not(.botao_contorno):not(.botao_sem-preenchimento) { box-shadow: 0 2px 2px rgba(11, 192, 211, 0.3); } .botao_cor-secundaria:hover, .botao_cor-secundaria:focus { background-color: #099aa9; } .botao_contorno.botao_cor-secundaria { color: #0bc0d3; border: 2px solid rgba(11, 192,