Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- box-sizing: border-box;
- }
- body {
- background: #efefef;
- }
- // Centralizando o container
- .container{
- margin: 2% auto;
- //min-width: 1200px;
- padding: 1.5em;
- }
- // Fonte e tamanho do texto "Cadastro Transporte Universitário"
- h1,h2,h3,h4{
- font-family: Catamaran,Helvetica,Arial,sans-serif;
- font-weight: 200;
- letter-spacing: 1px;
- }
- h4{
- text-align: center;
- margin-top: -10px;
- margin-bottom: 25px;
- }
- // Formulário do transporte universitário
- .form-control {
- display: block;
- width: 100%;
- padding: .375rem .75rem;
- font-size: 1rem;
- line-height: 1.5;
- color: #495057;
- background-color: #fff;
- background-clip: padding-box;
- border: 1px solid #ced4da;
- border-radius: .25rem;
- transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
- }
- /*********************** Card *************************/
- .card{
- border : none;
- }
- .card label {
- font-size: 14px;
- font-weight: 400;
- color: #4d4848;
- margin-bottom: 5px;
- text-transform: uppercase;
- }
- .card-header{
- background-color:#18638c;
- height: 50px;
- text-transform: uppercase;
- color: white;
- text-align: center;
- }
- .table{
- font-size: 14px;
- td , #periodosOnibus{
- text-align: center;
- }
- .form-check-input{
- width: 15px;
- height: 15px;
- }
- }
- ul {
- list-style-type: none;
- overflow: hidden;
- margin: 0;
- padding: 0;
- }
- p, li, a{
- font-size: 16px;
- }
- button{
- border-radius: 5%;
- }
- hr.header{
- border : 0;
- height: 1px;
- background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
- }
- /******** Barra de progresso (Dados/Endereço/Dados da instituição/Importação de documentos/Salvar) ***********/
- .divStepIndication{
- margin-bottom: 1%;
- }
- .rvt-steps {
- list-style: none;
- counter-reset: step;
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- margin: 0;
- padding: 0;
- position: relative;
- &__label {
- margin-top: .5rem;
- display: inline-block;
- }
- li {
- text-align: center;
- flex-grow: 1;
- position: relative;
- z-index: 2;
- //cor barra li complete
- &.is-complete:after{
- background-color: green;
- }
- // cor barra li has error
- &.has-error:after{
- background-color: #df3603;
- }
- &:after {
- content: " ";
- display: block;
- height: .2rem; // largura da barra
- background-color: #eee;
- position: relative;
- /**
- * NOTE:
- *
- * Setting a specific position like this seems fragile.
- * I wonder if there's a better way to do this?
- */
- // posição da barra
- top: -3.0rem;
- z-index: 0;
- }
- &:first-child:after {
- width: 50%;
- left: 50%;
- }
- &:last-child:after {
- width: 50%;
- }
- &:before {
- z-index: 999;
- position: relative;
- counter-increment: step;
- content: counter(step);
- display: block;
- width: 2rem;
- height: 2rem;
- text-align: center;
- border-radius: 50%;
- border: 2px solid #aaa;
- background-color: #eeeeee;
- margin-right: auto;
- margin-left: auto;
- }
- a {
- color: #333;
- text-decoration: none;
- &:hover span {
- text-decoration: underline;
- }
- }
- }
- .is-complete {
- &:before {
- border-color: #008a28;
- color: #fff;
- //content: " ";
- //background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxwYXRoIGZpbGw9IiMwMDhhMjgiIGQ9Ik02LjcyLDEzbC0uNDgtLjM2LTMtM0ExLDEsMCwwLDEsNC43MSw4LjI5bDIuMTEsMi4xMiw0LjMzLTYuOTRhMSwxLDAsMCwxLDEuNywxLjA2TDcuNjQsMTIuODdaIi8+Cjwvc3ZnPgo=");
- background-color: #008a28;
- background-repeat: no-repeat;
- background-position: 50% 50%;
- background-size: 20px 20px;
- }
- }
- .has-error {
- &:before {
- color: #fff;
- border-color: #df3603;
- // content: " ";
- //background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDx0aXRsZT5FeGNsYW1hdGlvbiBpY29uPC90aXRsZT4KICAgIDxnIGZpbGw9IiNkZjM2MDMiPgogICAgICAgIDxwYXRoIGQ9Ik04LDExYTEsMSwwLDAsMS0xLTFWM0ExLDEsMCwwLDEsOSwzdjdBMSwxLDAsMCwxLDgsMTFaIi8+CiAgICAgICAgPGNpcmNsZSBjeD0iOCIgY3k9IjEzIiByPSIxIi8+CiAgICA8L2c+Cjwvc3ZnPgo=");
- // background-color: #fdeee8;
- background-color: #df3603;
- background-repeat: no-repeat;
- background-position: 50% 50%;
- background-size: 20px 20px;
- }
- }
- .is-current {
- // box-shadow: inset 0 0 0 3px #6a3;
- font-weight: 700;
- &:before {
- border: 2.5px solid #006298;
- background-color: #006298;
- color: #fff;
- }
- }
- }
- html, body {
- height: 100%;
- }
- body {
- font-family: 'Open Sans', sans-serif;
- background: #1D1F20;
- color: cadetblue;
- }
- .wrapper {
- max-width: 800px;
- margin: 30px auto;
- }
- .photo_submit-container {
- display: flex;
- max-width: 800px;
- margin: 0 auto;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- padding: 0;
- }
- .photo_submit {
- position: relative;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 300px;
- height: 150px;
- background: #dae0e5;
- border-radius: 8px;
- &:hover {
- cursor: pointer;
- background: darken(#f8f8f8, 5%);
- }
- &:nth-child(2),
- &:nth-child(4){
- margin-left: 1rem;
- }
- &:nth-child(3),
- &:nth-child(4){
- margin-top: 1rem;
- }
- background-repeat: no-repeat;
- background-size: 50%;
- background-position: center;
- }
- .photo_submit-input {
- display: none;
- }
- .photo_submit-plus {
- position: relative;
- width: 45px;
- height: 45px;
- border-radius: 50%;
- background: cadetblue;
- pointer-events: none;
- &:after {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-46%, -52%);
- content: '+';
- font-size: 36px;
- color: #fff;
- }
- .photo_submit--image & {
- display: none;
- }
- }
- .photo_submit-uploadLabel {
- margin-top: 1rem;
- font-size: 21px;
- color: cadetblue;
- letter-spacing: 0.03em;
- pointer-events: none;
- text-align: center;
- .photo_submit--image & {
- display: none;
- }
- }
- .photo_submit-delete {
- display: none;
- position: absolute;
- top: 20px;
- right: 20px;
- width: 24px;
- height: 24px;
- background: #f8f8f8;
- border-radius: 50%;
- text-indent: -9999px;
- cursor: pointer;
- &:before,
- &:after {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 2px;
- height: 12px;
- background-color: cadetblue;
- content: '';
- }
- &:before {
- transform: translate(-50%, -50%) rotate(45deg);
- }
- &:after {
- transform: translate(-50%, -50%) rotate(-45deg);
- }
- &:hover {
- background: #ccc;
- }
- .photo_submit--image & {
- display: inline-block;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement