-
-
Save luisfelipe-dev/b4be1f591ab3a9ac2138695b45f1ea9a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * {box-sizing: border-box;} | |
| ::-webkit-input-placeholder {font-weight: normal;} | |
| ::-moz-placeholder {font-weight: normal;} | |
| :-ms-input-placeholder {font-weight: normal;} | |
| :-moz-placeholder {font-weight: normal;} | |
| body{margin: 0;font-family: sans-serif;} | |
| header{ | |
| height: 45px; | |
| background-color: #FFD400; | |
| width: 100%; | |
| position: fixed; | |
| top: 0; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| z-index: 9999999; | |
| padding: 1vh 5vw; | |
| } | |
| header a{flex:2} | |
| header img:last-child{flex:1} | |
| header img { | |
| height: 25px; | |
| margin: 0.5vh 0; | |
| } | |
| header img.logo { | |
| height: 30px; | |
| margin: 0; | |
| } | |
| .main-throbber{ | |
| width: 100%; | |
| height: 75vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .main-throbber img{width: 30%;} | |
| .checkout-wrapper { | |
| padding-top: 6vh; | |
| } | |
| .checkout-wrapper a, a:active, a:visited{color: #4f4f4f;font-size: 4vw;text-decoration: underline;} | |
| a.link-product{ | |
| text-decoration: none; | |
| } | |
| .checkout-wrapper p{margin:0;} | |
| .checkout-wrapper .flex-column{display: flex; flex-direction: column;} | |
| .checkout-wrapper .flex-center{display: flex; justify-content: center; align-items: center;} | |
| .checkout-wrapper input, .checkout-wrapper select{outline-color: transparent;} | |
| .checkout-wrapper .text-center{text-align: center;} | |
| .checkout-wrapper label{font-weight:initial;} | |
| .checkout-wrapper select{ | |
| border: none; | |
| background-color: transparent; | |
| border-bottom: 1px solid #AAAAAA; | |
| color: #AAAAAA; | |
| font-size: 3.8vw; | |
| width: 30%; | |
| text-align-last: right; | |
| padding-right: 2px; | |
| border-radius: 0px; | |
| } | |
| .checkout-wrapper input[type="text"], | |
| .checkout-wrapper input[type="password"]{ | |
| border: 1px solid #cccccc; | |
| border-top-left-radius: 5px; | |
| border-bottom-left-radius: 5px; | |
| height: 45px; | |
| padding: 10px; | |
| font-size: 16px; | |
| color: #4f4f4f; | |
| } | |
| .checkout-wrapper select, | |
| .checkout-wrapper input[type="tel"] { | |
| font-size: 16px; | |
| } | |
| .checkout-wrapper input[type="radio"].radio{display: none !important;} | |
| .checkout-wrapper input[type="radio"].radio + span{ | |
| position: relative; | |
| padding-left: 25px !important; | |
| display:flex; | |
| align-items: center; | |
| justify-content: center; | |
| display: -webkit-flex; | |
| -webkit-align-items: center; | |
| -webkit-justify-content: center; | |
| width: 100%; | |
| } | |
| .checkout-wrapper input[type="radio"].radio + span::before{ | |
| content: ""; | |
| width: 25px; | |
| height: 25px; | |
| border-radius: 50%; | |
| background-color: white; | |
| border: 1px solid #aaaaaa; | |
| font-size: 0; | |
| position: absolute; | |
| top: -6px; | |
| left: -7px; | |
| } | |
| .checkout-wrapper input[type="radio"]:checked.radio + span::before{border: 1px solid black;} | |
| .checkout-wrapper input[type="radio"]:checked.radio + span.pickupon::after{ | |
| content: ""; | |
| width: 15px; | |
| height: 15px; | |
| border-radius: 50%; | |
| background-color: black; | |
| font-size: 0; | |
| position: absolute; | |
| top: 0px; | |
| left: -1px; | |
| } | |
| .checkout-wrapper input[type="radio"].radio.radio-entrega + span{width: 15%;} | |
| .checkout-wrapper input[type="radio"].radio.radio-entrega + span::before{top: -13px;left: 5px;} | |
| /* .checkout-wrapper input[type="radio"].radio.radio-entrega + span.pickupon::before{top: -13px;left: 5px;} */ | |
| .checkout-wrapper input[type="radio"]:checked.radio.radio-entrega + span::before{border: 1px solid #17479E;} | |
| .checkout-wrapper input[type="radio"]:checked.radio.radio-entrega + span.pickupon::before{border: 1px solid #17479E; top: initial; | |
| left: initial;} | |
| /* .checkout-wrapper input[type="radio"]:checked.radio-entrega + span::after{top: -7px;left:11px;background-color: #17479E;} */ | |
| .checkout-wrapper input[type="radio"]:checked.radio-entrega + span.pickupon::after{top: -7px;left:11px;background-color:#17479E;} | |
| .checkout-wrapper input[type="radio"].radio + span.gender{text-align: right; width: 80%;} | |
| .checkout-wrapper input[type="radio"].radio + span.gender::before{top:-7px} | |
| .checkout-wrapper input[type="radio"].radio + span.gender::after{top:-1px} | |
| .checkout-wrapper input[type="radio"].radio + span.pickup{padding-left: 0 !important;} | |
| .checkout-wrapper input[type="radio"].radio + span.pickupon{padding-left: 0 !important;} | |
| .checkout-wrapper input[type="radio"].radio + span.pickup::before, | |
| .checkout-wrapper input[type="radio"]:checked.radio + span.pickup::after{top: initial;left:initial;} | |
| .checkout-wrapper input[type="radio"].radio + span.pickupon::before, | |
| .checkout-wrapper input[type="radio"]:checked.radio + span.pickupon::after{top: initial;left:initial;} | |
| .checkout-wrapper input[type="checkbox"].checkbox{display:none !important;} | |
| .checkout-wrapper input[type="checkbox"].checkbox + span { | |
| position: relative; | |
| padding-left: 20px; | |
| } | |
| .checkout-wrapper input[type="checkbox"].checkbox + span::before{ | |
| content: ""; | |
| width: 15px; | |
| height: 15px; | |
| background-color: white; | |
| border-radius: 5px; | |
| font-size: 0; | |
| position: absolute; | |
| top: -2px; | |
| left: 0px; | |
| border: 1px solid #aaaaaa; | |
| } | |
| .checkout-wrapper input[type="checkbox"]:checked.checkbox + span::before{ | |
| content: '\2713'; | |
| background-color: #17479e; | |
| border: 1px solid #17479e; | |
| color: white; | |
| text-align: center; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| .checkout-wrapper button { | |
| border: none; | |
| border-radius: 7px; | |
| box-shadow: 0px -5px #1a541b inset; | |
| background-color: #35A836; | |
| font-size: 18px; | |
| color: #ffffff; | |
| height: 54px; | |
| } | |
| .checkout-wrapper ::selection { | |
| background: transparent; | |
| } | |
| .checkout-wrapper input::selection, | |
| .checkout-wrapper footer ::selection{ | |
| background: initial; | |
| } | |
| .checkout-wrapper button:disabled{ | |
| background-color: #aaaaaa; | |
| box-shadow: 0px -5px #666666 inset; | |
| color: #333; | |
| } | |
| .checkout-wrapper input ~ button{ | |
| height: 45px; | |
| margin-left: -5px; | |
| background-color: #17479E; | |
| border: 1px solid #17479E; | |
| border-radius: initial; | |
| color: #ffffff; | |
| font-weight: bold; | |
| font-size: 14px; | |
| border-top-right-radius: 5px; | |
| border-bottom-right-radius: 5px; | |
| padding: 0 10px; | |
| } | |
| .checkout-wrapper input ~ button.bigger{width:90px;} | |
| .checkout-wrapper input[type="checkbox"], | |
| .checkout-wrapper input[type="radio"]{ | |
| position: initial; | |
| visibility: initial; | |
| } | |
| .checkout-wrapper .header, section{padding:5vw} | |
| .checkout-wrapper .header{ | |
| width: 100vw; | |
| height: 10vh; | |
| background-color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border: none; | |
| border-bottom: 2px #CCCCCC solid; | |
| } | |
| .checkout-wrapper .header h1{ | |
| font-size: 5vw; | |
| color: #17479E; | |
| margin: initial; | |
| font-weight: 700; | |
| } | |
| .checkout-wrapper section h3{ | |
| font-size: 4vw; | |
| color: #444444; | |
| font-weight: bold; | |
| } | |
| .checkout-wrapper section h3 span{font-size: 3.5vw;} | |
| .acompanhe-wrapper h3, | |
| .produto-wrapper h3{ | |
| color: #444444; | |
| } | |
| span {font-weight: normal;} | |
| .error.margin-error-fix { | |
| margin-bottom: 0px !important; | |
| } | |
| .error.generic-margin-fix { | |
| display: block; | |
| top: 10px; | |
| } | |
| .error.addressNumber, | |
| .error.city { | |
| top: -15px; | |
| } | |
| .error.state { | |
| top: -15px; | |
| left: 50%; | |
| } | |
| /* CSS CARRINHO */ | |
| .checkout-wrapper .produto-wrapper{ | |
| max-height: 450px; | |
| overflow-y: auto; | |
| } | |
| .checkout-wrapper .entrega-details{ | |
| margin-bottom: 4vh; | |
| } | |
| .checkout-wrapper .produto-item{ | |
| width: 100%; | |
| padding: 7px; | |
| border: 1px solid #cccccc; | |
| border-radius: 5px; | |
| margin-bottom: 15px; | |
| display: flex; | |
| } | |
| .checkout-wrapper .produto-item:last-child{margin-bottom: 0;} | |
| .checkout-wrapper .produto-item .produto-image-wrapper{flex:1} | |
| .checkout-wrapper .produto-item .produto-info-wrapper{ | |
| flex:3; | |
| margin-left: 10px; | |
| } | |
| .checkout-wrapper .produto-item .produto-image-wrapper .img{ | |
| height: 80%; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-top{display:flex; flex: 2;} | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-top p{ | |
| flex: 3.5; | |
| color: #17479E; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-top.cancelado p{ | |
| color: red; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-top a{flex: 0.5; text-decoration: none;} | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-top b{color: #444444;} | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-bottom{ | |
| display:flex; | |
| justify-content: space-between; | |
| flex: 1; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-bottom span{ | |
| align-self: flex-end; | |
| font-weight: bold; | |
| color: #17479E; | |
| font-size: 4.75vw; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-bottom .qtd-wrapper{ | |
| display: flex; | |
| justify-content: space-around; | |
| width: 28vw; | |
| align-items: flex-end; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-bottom .qtd-wrapper .qtd-increment, | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-bottom .qtd-wrapper .qtd{ | |
| width: 7.5vw; | |
| border-radius: 5px; | |
| height: 7.5vw; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-bottom .qtd-wrapper input.qtd{ | |
| width: 9.5vw; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-bottom .qtd-wrapper .qtd-increment{ | |
| background-color: #17479E; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-bottom .qtd-wrapper .qtd-increment:after{ | |
| content: '-'; | |
| color: #ffffff; | |
| font-size: 4vw; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-bottom .qtd-wrapper .qtd-increment.minus:after{ | |
| padding-bottom: 0.4vh; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-bottom .qtd-wrapper .qtd-increment.plus:after{ | |
| content: '+'; | |
| padding-bottom: 0.1vh; | |
| } | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-bottom .qtd-wrapper .qtd{ | |
| border: 1px solid #cccccc; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| .checkout-wrapper .produtos-section .cupom-vale{width: 100%; display: none; margin-bottom: 2.5vh;} | |
| .produtos-section .cupom-vale input{width: calc(100% - 90px);} | |
| .produtos-section h3.produtos{ | |
| color: #444444; | |
| } | |
| .checkout-wrapper .cart-info{ | |
| display:flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top: 1px solid #cccccc; | |
| height: 12vh; | |
| color: #505050; | |
| } | |
| .checkout-wrapper .cart-info.instrucao{ | |
| height: unset; | |
| } | |
| .checkout-wrapper .cart-info.subtotal span strong{ | |
| color: #444444; | |
| } | |
| .checkout-wrapper .cart-info div{width: 100%;} | |
| .checkout-wrapper .cart-info .flex-column > div{ | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .checkout-wrapper .cart-info.noline{border: none !important;} | |
| .checkout-wrapper .cart-info.column{ | |
| flex-direction: column; | |
| height: auto; | |
| } | |
| .checkout-wrapper .cart-info.instrucao .flex-column{ | |
| margin-top: 4vh; | |
| margin-bottom: 4vh; | |
| } | |
| .checkout-wrapper .cart-info .frete-wrapper{ | |
| display:flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 12vh; | |
| width: 100%; | |
| } | |
| .checkout-wrapper .cart-info .frete-wrapper span a{display: inline-block; font-weight: bold; color: #17479E;} | |
| .checkout-wrapper .cart-info .entregas-wrapper{ | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .checkout-wrapper .entrega-item{ | |
| width: 100%; | |
| border-radius: 5px; | |
| background-color: #F2F2F2; | |
| margin: 5px 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px; | |
| border: 1px #CCCCCC solid; | |
| } | |
| .checkout-wrapper .entrega-item.checked{ | |
| background-color: #17479E; | |
| border: none; | |
| } | |
| .checkout-wrapper .entrega-item.checked p, | |
| .checkout-wrapper .entrega-item.checked strong{ | |
| color: white; | |
| } | |
| .checkout-wrapper .entrega-item strong{ | |
| color: #17479E; | |
| } | |
| .checkout-wrapper .entrega-item input{ | |
| flex: 0.5; | |
| height: initial; | |
| visibility: initial; | |
| position: initial; | |
| } | |
| .checkout-wrapper .entrega-item div{flex: 3;} | |
| .checkout-wrapper .cart-info .cep-wrapper input{width: 28vw;height: 45px; font-weight: normal;} | |
| .checkout-wrapper .cart-info strong.cupomVale{color: #17479E; text-decoration: underline;} | |
| .checkout-wrapper .navbar-bottom-cart .cart-nav-info{ | |
| color: #4f4f4f; | |
| margin-right: 5vw; | |
| } | |
| .checkout-wrapper .navbar-bottom-cart .cart-nav-info strong{ | |
| font-size: 22px; | |
| color: #0075CC; | |
| } | |
| .checkout-wrapper .navbar-bottom-cart .cart-nav-info span, | |
| .checkout-wrapper .navbar-bottom-cart .cart-nav-info span strong{ | |
| font-size: 3.5vw; | |
| } | |
| .checkout-wrapper .navbar-bottom-cart .cart-nav-info span strong.parcelas{font-weight: bold; color: #444444;} | |
| .checkout-wrapper .navbar-bottom-cart .cart-nav-button button{width: 50vw;} | |
| .cart-info input[type="radio"] { | |
| height: 20px; | |
| } | |
| .cep-wrapper ::-webkit-input-placeholder { | |
| font-weight: normal; | |
| color: #CCCCCC; | |
| } | |
| .cep-wrapper ::-moz-placeholder { | |
| font-weight: normal; | |
| color: #CCCCCC; | |
| } | |
| .cep-wrapper :-ms-input-placeholder { | |
| font-weight: normal; | |
| color: #CCCCCC; | |
| } | |
| .cep-wrapper :-moz-placeholder { | |
| font-weight: normal; | |
| color: #CCCCCC; | |
| } | |
| .checkout-wrapper #cupom-toggle img{margin-right: 2vw;} | |
| .checkout-wrapper .entregas-wrapper{margin-top: -5px;} | |
| .info-wrapper { | |
| display: inline-flex; | |
| } | |
| .checkout-wrapper .blue-label { | |
| background-color: #00A1E4; | |
| padding-bottom: 1px; | |
| padding-top: 1px; | |
| text-align: center; | |
| color: white; | |
| width: 86vw; | |
| height: 16px; | |
| border-radius: 10px; | |
| font-size: 12px; | |
| box-shadow: none; | |
| margin-bottom: 3px; | |
| } | |
| /* FIM CSS CARRINHO */ | |
| /*CSS LOGIN*/ | |
| .checkout-wrapper form.login-form { | |
| color: #4f4f4f; | |
| margin-bottom: 0; | |
| } | |
| .checkout-wrapper form.login-form p, | |
| .checkout-wrapper form.convidado-form p, | |
| .checkout-wrapper form.cadastro-form p{ | |
| font-size: 4vw; | |
| font-weight: bold; | |
| } | |
| .checkout-wrapper form.cadastro-form div p{ | |
| font-size: 3vw; | |
| font-weight: bold; | |
| } | |
| .checkout-wrapper form.login-form label, | |
| .checkout-wrapper form.convidado-form label, | |
| .checkout-wrapper form.cadastro-form label, | |
| .checkout-wrapper form.cadastro-form div.label, | |
| .checkout-wrapper form.payment-form div.label, | |
| .checkout-wrapper form.payment-form label, | |
| .checkout-wrapper form.entrega-form label, | |
| .checkout-wrapper form.entrega-form label, | |
| .checkout-wrapper .modal-wrapper label, | |
| .checkout-wrapper .intervalo-assinatura{ | |
| padding: 2vw; | |
| margin: 4vw 0px; | |
| border-radius: 5px; | |
| border: 1px #CCCCCC solid; | |
| text-align: left; | |
| } | |
| .checkout-wrapper form.login-form label span, | |
| .checkout-wrapper form.convidado-form label span, | |
| .checkout-wrapper form.cadastro-form label span, | |
| .checkout-wrapper form.payment-form label span, | |
| .checkout-wrapper form.cadastro-form div.label span, | |
| .checkout-wrapper form.payment-form label span, | |
| .checkout-wrapper .modal-wrapper label span, | |
| .checkout-wrapper .intervalo-assinatura span{ | |
| font-size: 3vw; | |
| color: #444444; | |
| margin-bottom: 5px; | |
| text-align: left; | |
| } | |
| .checkout-wrapper form.login-form label input, | |
| .checkout-wrapper form.convidado-form input, | |
| .checkout-wrapper form.cadastro-form input, | |
| .checkout-wrapper form.payment-form input, | |
| .checkout-wrapper form.entrega-form input, | |
| .checkout-wrapper .modal-wrapper input, | |
| .checkout-wrapper .intervalo-assinatura input { | |
| height: initial; | |
| padding: initial; | |
| border: none; | |
| background-color: transparent; | |
| border-radius: 0; | |
| } | |
| .checkout-wrapper form.cadastro-form label.disabled, | |
| .checkout-wrapper form.cadastro-form div.label.disabled { | |
| background-color: #eeeeee; | |
| } | |
| .checkout-wrapper .login-form .flex-row input { | |
| width: 76vw; | |
| } | |
| .checkout-wrapper .login-form i{ | |
| display: none; | |
| } | |
| .checkout-wrapper form.error i { | |
| display: initial; | |
| } | |
| .checkout-wrapper label.error span, | |
| .checkout-wrapper label.error i, | |
| .checkout-wrapper label.error span, | |
| .checkout-wrapper div.error span, | |
| .checkout-wrapper div.error i, | |
| .checkout-wrapper div.error span { | |
| color: red !important; | |
| } | |
| .checkout-wrapper form.login-form label{ | |
| margin-bottom: 0; | |
| } | |
| .checkout-wrapper label.error, | |
| .checkout-wrapper div.error{ | |
| border: 2px red solid !important; | |
| position: relative !important; | |
| } | |
| .checkout-wrapper span.error{ | |
| color: red !important; | |
| position: relative !important; | |
| } | |
| .checkout-wrapper label.error i, | |
| .checkout-wrapper div.error i{ | |
| position: absolute !important; | |
| font-size: 25px !important; | |
| top: 15px !important; | |
| } | |
| .checkout-wrapper label.error ~ span, | |
| .checkout-wrapper div.error ~ span{ | |
| font-size: 14px !important; | |
| margin-top: 5px !important; | |
| } | |
| .checkout-wrapper .password-recover{ | |
| align-self: flex-end; | |
| margin-top: 5vw; | |
| } | |
| .checkout-wrapper p.separator{ | |
| text-align: center; | |
| font-weight: bold; | |
| margin: 1em 0; | |
| color: #505050; | |
| } | |
| .checkout-wrapper p.separator.wall{ | |
| position: relative; | |
| margin: 2em 0; | |
| } | |
| .checkout-wrapper p.separator.wall:after, | |
| .checkout-wrapper p.separator.wall:before{ | |
| content: ''; | |
| height: 1px; | |
| width: 24vw; | |
| border-bottom: 1px solid #CCCCCC; | |
| position: absolute; | |
| top: 8px; | |
| } | |
| .checkout-wrapper p.separator.wall:after{right: 0;} | |
| .checkout-wrapper p.separator.wall:before{left:0;} | |
| .checkout-wrapper .convidado-wrapper{margin-bottom: 15px;} | |
| .checkout-wrapper .convidado-wrapper p { | |
| font-size: 3.4vw; | |
| text-align: center; | |
| color: #505050; | |
| margin-top: 10px; | |
| } | |
| .checkout-wrapper button.white{ | |
| background-color: white; | |
| color: #35A836; | |
| border: 2px solid #35A836; | |
| box-shadow: none; | |
| } | |
| .checkout-wrapper .split-space{ | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 1vh; | |
| } | |
| .checkout-wrapper .split-space.space-around{ | |
| display: flex; | |
| justify-content: flex-start; | |
| margin-top: 1vh; | |
| } | |
| .checkout-wrapper .split-space .facebook { | |
| background-color: #3B5998; | |
| } | |
| .checkout-wrapper .split-space.together{justify-content: flex-start;} | |
| .checkout-wrapper .split-space button{ | |
| width: 45%; | |
| } | |
| .checkout-wrapper .cadastro-form .split-space label,.checkout-wrapper .cadastro-form .split-space div.label{width:45%} | |
| .checkout-wrapper .split-space div.half{width:45%} | |
| .checkout-wrapper .split-space label.label-input{border-radius: 20px !important;} | |
| .checkout-wrapper .split-space label.label-input span{font-size: 3.6vw; color: #AAAAAA;} | |
| .checkout-wrapper .split-space label.label-input.tipo-fisica, | |
| .checkout-wrapper .split-space label.label-input.tipo-juridica{ | |
| width: 45vw; | |
| text-align: center; | |
| margin-bottom: 0; | |
| height: 7vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .checkout-wrapper .split-space label.label-input.tipo-fisica input, | |
| .checkout-wrapper .split-space label.label-input.tipo-juridica input{ | |
| display: none; | |
| } | |
| .checkout-wrapper .split-space label.label-input.tipo-fisica{ | |
| border-top-left-radius: 8px !important; | |
| border-bottom-left-radius: 8px !important; | |
| border-top-right-radius: 0px !important; | |
| border-bottom-right-radius: 0px !important; | |
| border-right: 0px; | |
| } | |
| .checkout-wrapper .split-space label.label-input.tipo-juridica{ | |
| border-top-left-radius: 0px !important; | |
| border-bottom-left-radius: 0px !important; | |
| border-top-right-radius: 8px !important; | |
| border-bottom-right-radius: 8px !important; | |
| border-left: 0px; | |
| } | |
| .checkout-wrapper .split-space label.label-input.tipo-fisica span, | |
| .checkout-wrapper .split-space label.label-input.tipo-juridica span{ | |
| margin-bottom: 0px; | |
| font-size: 16px; | |
| } | |
| .checkout-wrapper .split-space label.label-input.selecionado{ | |
| background-color: #17479E; | |
| } | |
| .checkout-wrapper .split-space label.label-input.selecionado span{ | |
| color: white; | |
| } | |
| .checkout-wrapper .checkout-screen ::-webkit-input-placeholder { | |
| color: #AAAAAA; | |
| } | |
| .checkout-wrapper .checkout-screen ::-moz-placeholder { | |
| color: #AAAAAA; | |
| } | |
| .checkout-wrapper .checkout-screen :-ms-input-placeholder { | |
| color: #AAAAAA; | |
| } | |
| .checkout-wrapper .checkout-screen :-moz-placeholder { | |
| color: #AAAAAA; | |
| } | |
| .checkout-wrapper .passo-wrapper{ | |
| width: 200px; | |
| margin: auto; | |
| margin-bottom: 45px; | |
| margin-top: 5px; | |
| } | |
| .checkout-wrapper .passo-wrapper p{font-weight: bold;} | |
| .checkout-wrapper .passo-wrapper .progressBar{ | |
| list-style-type: none; | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0 20px; | |
| margin-top: 0px; | |
| margin-bottom: 5vh; | |
| } | |
| .checkout-wrapper .passo-wrapper .progressBar li{position: relative;} | |
| .checkout-wrapper .passo-wrapper .progressBar li:after{ | |
| content: ''; | |
| width: 75px; | |
| position: absolute; | |
| height: 1px; | |
| background-color: #AAAAAA; | |
| top: 15px; | |
| } | |
| .checkout-wrapper .passo-wrapper .progressBar.pickupstore li:after{ | |
| width: 25vw; | |
| } | |
| .checkout-wrapper .passo-wrapper .progressBar li:last-child:after{display: none;} | |
| .checkout-wrapper .passo-wrapper .progressBar li:before{ | |
| content: ''; | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| background-color: white; | |
| border-radius: 50%; | |
| top: 0; | |
| left: -19px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: #AAAAAA; | |
| z-index: 1; | |
| border: 1px solid #AAAAAA; | |
| } | |
| .checkout-wrapper .passo-wrapper .progressBar li.one:before{content: '1'} | |
| .checkout-wrapper .passo-wrapper .progressBar li.two:before{content: '2'} | |
| .checkout-wrapper .passo-wrapper .progressBar li.three:before{content: '3'} | |
| .checkout-wrapper .passo-wrapper .progressBar li.four:before{content: '4'} | |
| .checkout-wrapper .passo-wrapper .progressBar li.five:before{content: '5'} | |
| .checkout-wrapper .passo-wrapper .progressBar li.six:before{content: '6'} | |
| .checkout-wrapper .passo-wrapper .progressBar li span{ | |
| position: absolute; | |
| left: -13px; | |
| font-size: 3vw; | |
| width: 70px; | |
| color: #AAAAAA; | |
| } | |
| .checkout-wrapper .passo-wrapper .progressBar li span.top{top: -35px;} | |
| .checkout-wrapper .passo-wrapper .progressBar li span.bottom{top: 35px;} | |
| .checkout-wrapper .passo-wrapper .progressBar li span.end{ | |
| left: -65px; | |
| text-align: right; | |
| } | |
| .checkout-wrapper .passo-wrapper .progressBar li span.arrived{font-weight: bold;color: #00A1E4} | |
| .checkout-wrapper .passo-wrapper .progressBar li.arrived:before{background-color: #00A1E4; color: white; border: none;} | |
| .checkout-wrapper a.password-recover{color: #17479E;} | |
| .checkout-wrapper .registro-wrapper p{ | |
| font-size: 14px; | |
| text-align: center; | |
| color: #505050; | |
| margin-top: 10px; | |
| } | |
| .checkout-wrapper .registro-wrapper button.white { | |
| margin-bottom: 3vh; | |
| } | |
| .checkout-wrapper .cadastro-form div.genero label{ | |
| background-color: #EEEEEE; | |
| height: 31px; | |
| margin-top: 1vh; | |
| display: flex; | |
| padding: 1px; | |
| width: 29vw; | |
| } | |
| .checkout-wrapper .cadastro-form div.genero label input, | |
| .checkout-wrapper .cadastro-form div.genero label span{ | |
| vertical-align: top; | |
| color: #444444 !important; | |
| height: 4vw; | |
| margin: auto 0; | |
| width: 10vw; | |
| padding: 0; | |
| float: left; | |
| } | |
| .checkout-wrapper .cadastro-form div.genero label input{ | |
| margin-left: 0vh; | |
| width: 4vh; | |
| height: 4vh; | |
| } | |
| .checkout-wrapper .cadastro-form div.genero label span{ | |
| margin-left: 2vw; | |
| } | |
| .checkout-wrapper .cadastro-form label.contato, | |
| .checkout-wrapper .cadastro-form label.senha, | |
| .checkout-wrapper .cadastro-form label.cpf-cnpj | |
| { | |
| width: 42vw; | |
| margin-bottom: 0; | |
| margin-top: 0; | |
| } | |
| .checkout-wrapper .cadastro-form label.cpf-cnpj.cnpj | |
| { | |
| width: 100%; | |
| } | |
| .checkout-wrapper .cadastro-form label.inscricao-estadual | |
| { | |
| margin-bottom: 0; | |
| } | |
| .checkout-wrapper .cadastro-form p.section-title { | |
| margin-top: 2vh; | |
| } | |
| .checkout-wrapper .cadastro-form p.contato { | |
| margin-bottom: 2vw; | |
| } | |
| .passrecover-success{ | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| text-align: left; | |
| font-size: 14px; | |
| } | |
| .passrecover-success i { | |
| font-size: 40px; | |
| color: #35A836; | |
| margin-right: 10px; | |
| } | |
| /*FIM CSS LOGIN*/ | |
| /* CSS CONVIDADO*/ | |
| .checkout-wrapper .three-quarters-space{width:60vw !important;} | |
| .checkout-wrapper .half-space{width:45vw !important;} | |
| .checkout-wrapper .one-quarter-space{width: 25vw !important;} | |
| .checkout-wrapper label .split-space, | |
| .checkout-wrapper div .split-space{ | |
| margin-top: 0; | |
| } | |
| .checkout-wrapper .one-quarter-space select{width:100%} | |
| .checkout-wrapper form.convidado-form div p, | |
| .checkout-wrapper form.cadastro-form div p{ | |
| font-weight: normal; | |
| } | |
| .checkout-wrapper form button{ | |
| margin-top: 5vw; | |
| width: 100%; | |
| } | |
| /*FIM CSS CONVIDADO*/ | |
| /*CSS CADASTRO*/ | |
| .checkout-wrapper form label.post-title{ | |
| margin-top: 2vw; | |
| } | |
| .checkout-wrapper form label.transparent{ | |
| background-color: transparent !important; | |
| } | |
| .checkout-wrapper .padding{padding: 20px;} | |
| .checkout-wrapper .visible-none{visibility: hidden !important;} | |
| .checkout-wrapper .padding-vertical{padding: 20px 0px;} | |
| .checkout-wrapper .top-spacing{margin-top: 10px;} | |
| .checkout-wrapper form .no-padding{ | |
| padding: initial !important; | |
| } | |
| .checkout-wrapper a.a-cep{margin-left: 10px;align-self: center;} | |
| .checkout-wrapper .cadastro-form label.noBoardCheckbox { | |
| display: block; | |
| margin: 1vw 0; | |
| } | |
| .checkout-wrapper .cadastro-form label.noBoardCheckbox input{ | |
| vertical-align: middle; | |
| } | |
| /*FIM CSS CADASTRO*/ | |
| /*CSS PAGAMENTO*/ | |
| .checkout-wrapper .payment-wrapper:first-child{margin-left: 0px;} | |
| .checkout-wrapper .payment-wrapper{ | |
| width: 20vw; | |
| color: #888888; | |
| text-align: center; | |
| font-size: 3vw; | |
| margin-left: 10px; | |
| } | |
| .checkout-wrapper .payment-wrapper p { | |
| margin-top: 1vh; | |
| } | |
| .checkout-wrapper .squareblock { | |
| width: 20vw; | |
| height: 15vw; | |
| border-radius: 5px; | |
| border: 1px solid #cccccc; | |
| background-color: #FFFFFF; | |
| display:flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .checkout-wrapper .payment-wrapper.paymentActive .squareblock{ | |
| background-color: #17479E; | |
| } | |
| .checkout-wrapper .squareblock img { | |
| width: 10vw; | |
| } | |
| .checkout-wrapper .bandeiras-row .squareblock img { | |
| width: 15vw; | |
| } | |
| .checkout-wrapper .squareblock.visa img, | |
| .checkout-wrapper .squareblock.mastercard img { | |
| width: 12vw; | |
| } | |
| .checkout-wrapper .squareblock.masterpass { | |
| background-color: #000000; | |
| } | |
| .checkout-wrapper .squareblock.safetypay img { | |
| width: 18vw; | |
| } | |
| .checkout-wrapper .squareblock.vazio { | |
| background-color: transparent; | |
| border: none; | |
| } | |
| .checkout-wrapper .payment-wrapper.paymentActive { | |
| color: #17479E; | |
| font-weight: bold; | |
| } | |
| .checkout-wrapper .payment-wrapper.paymentActive squareblock{ | |
| background-color: #17479E; | |
| border: none; | |
| } | |
| .checkout-wrapper .payment-wrapper.paymentActive .payment-method{border: none;} | |
| .checkout-wrapper .bandeiras-row{ | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-top: -10px; | |
| } | |
| .checkout-wrapper .bandeiras-wrapper{ | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-around; | |
| } | |
| .checkout-wrapper .bandeiras-row .bandeiras-wrapper .bandeira{ | |
| margin-top: 10px; | |
| text-align: center; | |
| font-size: 3.5vw; | |
| } | |
| .checkout-wrapper .bandeira.active{border: 1px solid #888888;} | |
| .checkout-wrapper .payment-form{ | |
| margin-top: 24px; | |
| color:#505050; | |
| } | |
| .checkout-wrapper .payment-form p strong { | |
| color:#444444; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper{ | |
| display:flex; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .bandeira-indicator{ | |
| height: 50px; | |
| display: flex; | |
| align-items: center; | |
| background-color: #FFFFFF; | |
| padding: 15px 10px; | |
| border-top-left-radius: 5px; | |
| border-bottom-left-radius: 5px; | |
| border: 1px solid #CCCCCC; | |
| color: #ffffff; | |
| font-size: 3.5vw; | |
| border-right: none; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .bandeira-indicator span { | |
| height: 50px; | |
| display: flex; | |
| justify-content: center; | |
| flex-direction: column; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .bandeira-indicator span img{ | |
| width: 100%; | |
| max-height: 50px; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select{ | |
| position: relative; | |
| width: 100%; | |
| display: flex; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select ul li { | |
| position: relative; | |
| display: flex; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select .cartoes-select{ | |
| display: flex; | |
| align-items: center; | |
| width: 100%; | |
| height: 50px; | |
| background-color: #FFFFFF; | |
| border: 1px solid #CCCCCC; | |
| border-bottom-right-radius: 7px; | |
| border-top-right-radius: 7px; | |
| padding: 5px; | |
| font-size: 3.5vw; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select .cartoes-select:after{ | |
| content: ""; | |
| width: 0; | |
| height: 0; | |
| border: 7px solid transparent; | |
| border-color: #000 transparent transparent transparent; | |
| position: absolute; | |
| top: 20px; | |
| right: 10px; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select ul { | |
| padding: 0; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select ul li .cartoes-select { | |
| border-bottom: none; | |
| border-top: none; | |
| border-right: none; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select ul li .cartoes-select:after { | |
| display: none; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select .cartoes-select ~ ul{ | |
| display: none; | |
| background-color: #FFFFFF; | |
| list-style-type: none; | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| left: 0; | |
| z-index: 999; | |
| margin: 0; | |
| padding: 5px; | |
| border: 1px solid #CCCCCC; | |
| border-top: none; | |
| border-bottom-right-radius: 7px; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select .cartoes-select ~ ul li{ | |
| position: relative; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select .cartoes-select ~ ul li a{ | |
| position: absolute; | |
| right: 6px; | |
| bottom: 17px; | |
| text-decoration: none; | |
| font-weight: bold; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select .cartoes-select.active{ | |
| color: #AAAAAA; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select .cartoes-select.active ~ ul { | |
| display: block; | |
| padding: 0; | |
| } | |
| .checkout-wrapper .select-cartao-wrapper .div-select .cartoes-select.active{ | |
| border-bottom-right-radius : 0px; | |
| } | |
| .checkout-wrapper #cartão-credito-salvo select { | |
| width: 100%; | |
| color: #444444; | |
| border: none; | |
| font-weight: bold; | |
| } | |
| .checkout-wrapper .option-cartao .bandeira-indicator { | |
| border: 0px; | |
| } | |
| .checkout-wrapper #cartao-credito .space-around { | |
| justify-content: space-around; | |
| } | |
| .checkout-wrapper #cartao-credito .validade select { | |
| width: 15vw; | |
| } | |
| .checkout-wrapper #cartao-credito .cod-seguranca input { | |
| width: 20vw; | |
| } | |
| .checkout-wrapper #cartao-credito .cod-seguranca .flex-row { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .checkout-wrapper #cartao-credito .cod-seguranca img { | |
| width: 7vw; | |
| } | |
| .checkout-wrapper #cartao-credito .parcelas select, | |
| .checkout-wrapper .intervalo-assinatura select{ | |
| width: 85vw; | |
| border-bottom: none; | |
| color: #444444; | |
| text-align-last: left; | |
| } | |
| .checkout-wrapper .intervalo-assinatura{background-color: #FFFFFF; margin: 0px;margin-bottom: 15px;} | |
| .checkout-wrapper .assinante-periodo{margin-top: 4vw;} | |
| .checkout-wrapper .assinante-periodo a {color: #17479E} | |
| .checkout-wrapper .assinante-periodo .noBoardCheckbox span{font-size: 16px; padding-left: 30px;} | |
| .checkout-wrapper .assinante-periodo .noBoardCheckbox span:before{width: 20px; height: 20px;} | |
| .input-error{display: block; color: red; margin-top: 10px;} | |
| .assinante-periodo label.error ~ span.input-error {margin-top: -15px !important; margin-bottom: 10px;} | |
| .assinante-periodo label.error ~ span.input-error.radio-error{margin-top: 0px !important;} | |
| #paypal img { | |
| width: 60vw; | |
| } | |
| #paypal a { | |
| color: #17479E; | |
| text-decoration: underline; | |
| font-weight: bold; | |
| } | |
| .card-message-title{ | |
| color: #35A836; | |
| font-size: 15px; | |
| } | |
| .card-message{font-size: 15px;} | |
| a#novo-cartao{color:#0045a2;font-weight: bold;} | |
| .assinatura-info-wrapper{ | |
| background-color: #eeeeee; | |
| width: 100vw; | |
| margin: 4vw 0vw 4vw -5vw; | |
| padding: 5vw; | |
| } | |
| .assinatura-info-header{display:flex} | |
| .assinatura-info-header p { | |
| display: flex; | |
| flex-direction: column; | |
| margin-left: 15px; | |
| font-size: 16px; | |
| } | |
| .assinatura-info-wrapper strong{color: #0045a2 !important;} | |
| .assinatura-info-wrapper span{font-size:14px;} | |
| .assinatura-info-body{margin-top: 20px; display: flex; flex-direction: column; justify-content: space-between;} | |
| .assinatura-info-body button { | |
| background-color: #0045a2; | |
| height: 45px; | |
| border: none; | |
| font-size: 16px; | |
| border-radius: 5px; | |
| box-shadow: none; | |
| margin-top: 20px; | |
| } | |
| .popup-header strong{color: #0045a2;} | |
| .popup-header p{ | |
| text-align: left; | |
| margin-left: 10px; | |
| font-size: 18px; | |
| } | |
| .popup-header{display: flex; position: relative; margin-top: 16px;} | |
| .assinatura-popup.popup-header img{ | |
| height: 32px; | |
| width: 30px !important; | |
| } | |
| .assinatura-popup.popup-header p{ | |
| display:flex; | |
| flex-direction: column; | |
| text-align: left; | |
| flex: 5; | |
| margin-left: 10px; | |
| font-size: 18px; | |
| } | |
| .assinatura-popup.popup-body p{ | |
| color: black; | |
| font-weight: normal; | |
| text-align: left; | |
| font-size: 16px; | |
| margin-bottom: 15px; | |
| } | |
| .assinatura-popup.popup-footer{ | |
| display: flex; | |
| flex-direction: column; | |
| margin-top: 40px; | |
| margin-bottom: 20px; | |
| } | |
| .assinatura-popup.popup-footer .btn-transparent{ | |
| background-color: transparent; | |
| color: black; | |
| height: 45px; | |
| border: 2px solid black; | |
| margin-top: 15px; | |
| font-size: 16px; | |
| box-shadow: none; | |
| } | |
| .close-popup{ | |
| position: absolute; | |
| top: -53px; | |
| right: -30px; | |
| background-color: #0045a2; | |
| color: white; | |
| border-radius: 48%; | |
| width: 35px; | |
| height: 35px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| border: 2px solid white; | |
| box-shadow: -2px 3px 7px #969696; | |
| font-size: 14px; | |
| font-weight: bold; | |
| } | |
| .checkout-wrapper #boleto.payment-form p { | |
| margin-bottom: 2vw; | |
| font-size: 13px; | |
| } | |
| .checkout-wrapper .cod-seguranca, | |
| .checkout-wrapper .validade { | |
| min-height: 70px; | |
| } | |
| /*FIM CSS PAGAMENTO*/ | |
| /*CSS ENTREGA*/ | |
| .entrega-wrapper { | |
| padding: 20px 10px; | |
| font-size: 12px; | |
| text-align: center; | |
| color: #444; | |
| align-items: center; | |
| background-color: #eeeeee; | |
| border: 1px solid #CCCCCC; | |
| border-radius: 7px; | |
| height: 120px; | |
| width: 42vw; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-around; | |
| } | |
| .entrega-wrapper.entrega-disabled{ | |
| color: #666666; | |
| background-color: #cccccc; | |
| } | |
| .entrega-wrapper.entrega-active { | |
| background-color: #17479E; | |
| color: #FFFFFF; | |
| } | |
| .entrega-wrapper img { | |
| width: auto; | |
| height: 34px; | |
| margin-bottom: 3px | |
| } | |
| .entrega-wrapper div { | |
| margin-top: 2px; | |
| margin-bottom: 3px; | |
| } | |
| .checkout-wrapper form.entrega-form { | |
| display:none; | |
| margin-top: 20px; | |
| } | |
| .checkout-wrapper form.entrega-form.entrega-form-active{display:block;} | |
| .checkout-wrapper .fav-endereco{ | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px; | |
| border: 1px solid #CCCCCC; | |
| border-radius: 7px; | |
| margin: 10px 0px; | |
| background-color: #F2F2F2; | |
| } | |
| .checkout-wrapper .aviso-wrapper{ | |
| display: flex; | |
| justify-content: space-between; | |
| background-color: #EEEEEE; | |
| padding: 10px; | |
| border: 1px solid #17479E; | |
| border-radius: 7px; | |
| margin: 10px 0px; | |
| } | |
| .checkout-wrapper .aviso-wrapper strong{ | |
| color: #17479E; | |
| } | |
| .checkout-wrapper .fav-endereco input{ | |
| height: 100%; | |
| margin-right: 20px; | |
| flex: 0.2; | |
| margin-left: 2vw; | |
| margin-right: 2vw; | |
| } | |
| .checkout-wrapper .fav-endereco .fav-endereco-info { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 2; | |
| margin-left: 2vw; | |
| } | |
| .checkout-wrapper .fav-endereco .fav-endereco-info span{ | |
| color: #444444; | |
| font-size: 4vw; | |
| } | |
| .checkout-wrapper .fav-endereco .fav-endereco-info strong{ | |
| color: #17479E; | |
| } | |
| .checkout-wrapper .fav-endereco .fav-endereco-info p{ | |
| border-radius: 10px; | |
| background-color: #17479E; | |
| font-size: 3.5vw; | |
| padding: 3px 0px; | |
| color: #fff; | |
| text-align: center; | |
| width: 15vw; | |
| margin-right: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .checkout-wrapper .fav-endereco .fav-endereco-info div{ | |
| display: flex; | |
| margin-top: 2vw; | |
| } | |
| .checkout-wrapper .fav-endereco .fav-endereco-info div span{ | |
| font-size: 14px; | |
| align-self: center; | |
| } | |
| .checkout-wrapper .fav-endereco .fav-endereco-info div a{ | |
| font-weight: bold; | |
| color: #444444; | |
| text-decoration: underline; | |
| margin-right: -20px; | |
| /*sorry :( */ | |
| } | |
| .checkout-wrapper .fav-endereco .fav-endereco-actions{ | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| flex: 0.2; | |
| } | |
| .checkout-wrapper .fav-endereco .fav-endereco-actions a { | |
| color: #17479E; | |
| text-decoration: underline; | |
| font-weight: bold; | |
| } | |
| .checkout-wrapper .fav-endereco .fav-endereco-actions a.selected { | |
| color: #FFFFFF; | |
| } | |
| .checkout-wrapper .fav-endereco.selected { | |
| background-color: #17479E; | |
| border: none; | |
| } | |
| .checkout-wrapper .fav-endereco.selected .fav-endereco-info span, | |
| .checkout-wrapper .fav-endereco.selected .fav-endereco-info strong { | |
| color: #FFFFFF; | |
| } | |
| .checkout-wrapper .fav-action{ | |
| margin: initial; | |
| border: none; | |
| background: none; | |
| background-image: url(img/blank-star.svg); | |
| background-repeat: no-repeat; | |
| background-position: 100% 0%; | |
| background-size: 25px; | |
| outline-color: transparent; | |
| width: 40px; | |
| box-shadow: none; | |
| } | |
| .checkout-wrapper .address-add a{color: #17479E; font-weight: bold;} | |
| .checkout-wrapper .fav-endereco .fav-action, | |
| .checkout-wrapper .entrega-form .fav-endereco-actions .fav-action.favorite { | |
| background-image: url('/static/images/Star3.png'); | |
| width: auto; | |
| } | |
| .checkout-wrapper .fav-endereco .fav-action.favorite, | |
| .checkout-wrapper form.entrega-form .fav-endereco-actions .fav-action { | |
| background-image: url('/static/images/Star2.png'); | |
| } | |
| .checkout-wrapper form.entrega-form div a, | |
| .checkout-wrapper .fav-endereco .fav-endereco-actions div a { | |
| color: #17479E; | |
| font-weight: bold; | |
| } | |
| .fav-endereco-icon { width: 5vw; } | |
| .fav-icon img { width: 5vw;} | |
| .checkout-wrapper .pickup-nav{ | |
| background-color: #eeeeee; | |
| border-radius: 7px; | |
| margin-bottom: 20px; | |
| } | |
| .checkout-wrapper .pickup-nav .pickup-option { | |
| padding: 20px 14px; | |
| width: 50%; | |
| display: flex; | |
| justify-content: center; | |
| background-color: #FFFFFF; | |
| color: #AAAAAA; | |
| border: 1px #CCCCCC solid; | |
| line-height: 1vh; | |
| font-size: 4vw; | |
| } | |
| .checkout-wrapper .pickup-nav #all-pickupstores { | |
| border-top-left-radius: 5px; | |
| border-bottom-left-radius: 5px; | |
| border-bottom-right-radius: 0; | |
| border-top-right-radius: 0; | |
| } | |
| .checkout-wrapper .pickup-nav #round-the-clock-pickupstores { | |
| border-top-left-radius: 0; | |
| border-bottom-left-radius: 0; | |
| border-bottom-right-radius: 5px; | |
| border-top-right-radius: 5px; | |
| border-left: none; | |
| } | |
| .checkout-wrapper .pickup-nav .pickup-option.pickup-option-active { | |
| background-color: #17479E; | |
| border-color: #17479E; | |
| color: #ffffff; | |
| } | |
| .checkout-wrapper .entrega-form label input { | |
| height: 7vw; | |
| margin: auto; | |
| margin-left: 2vw; | |
| margin-right: 2vw; | |
| } | |
| .checkout-wrapper .entrega-form.entrega-form-active .fav-endereco.selected { | |
| background-color: #FFFFFF; | |
| border: 1PX #17479E solid; | |
| } | |
| .checkout-wrapper .entrega-form.entrega-form-active .fav-endereco.selected .fav-endereco-info span { | |
| color: #444444; | |
| line-height: 1.3; | |
| } | |
| .checkout-wrapper .entrega-form.entrega-form-active .fav-endereco.selected .fav-endereco-info strong { | |
| color: #17479E; | |
| font-weight: bold; | |
| } | |
| .checkout-wrapper .entrega-form.entrega-form-active .entrega-item { | |
| padding-top: 4vw; | |
| padding-bottom: 4vw; | |
| line-height: 1.2; | |
| } | |
| .checkout-wrapper .entrega-form.entrega-form-active .entrega-item.selected, | |
| .checkout-wrapper .entrega-form.entrega-form-active .entrega-item.selected strong { | |
| color: #FFFFFF; | |
| } | |
| .checkout-wrapper .entrega-form.entrega-form-active .entrega-item.selected { | |
| background-color: #17479E; | |
| } | |
| .checkout-wrapper .pickup-form.entrega-form-active .fav-endereco.selected { | |
| background-color: #17479E; | |
| border: none; | |
| } | |
| /*versão azul do botão pickup-store da loja, caso rollback é só remover isso*/ | |
| .checkout-wrapper .pickup-form.entrega-form-active .fav-endereco.selected .fav-endereco-info strong, | |
| .checkout-wrapper .pickup-form.entrega-form-active .fav-endereco.selected .fav-endereco-info span{color: #FFF;} | |
| .checkout-wrapper .pickup-form.entrega-form-active .fav-endereco.selected .fav-endereco-info p{background-color: #FFF; color: #444} | |
| #badgeRecomendado { | |
| background-color: #35A836; | |
| padding: 2px 16px; | |
| border-radius: 16px; | |
| font-size: 11px; | |
| color: white; | |
| margin-bottom: 0px; | |
| margin-top: 1px; | |
| } | |
| .entrega-active #badgeRecomendado { | |
| background-color: #FFD400 !important; | |
| color: #17479E !important; | |
| } | |
| /*FIM CSS ENTREGA*/ | |
| /*CSS COMPROVANTE*/ | |
| .checkout-wrapper .progressBar-wrapper{ | |
| margin-bottom: 5vh; | |
| border: 1px solid transparent; | |
| } | |
| .checkout-wrapper .info-top .fa.fa-trash{font-size:6.5vw;} | |
| .checkout-wrapper .voltar{color: #0045A2;} | |
| .checkout-wrapper .message-wrapper h3{font-size: 4.5vw;margin: 0.5em 0; color: #17479E;} | |
| .checkout-wrapper .message-wrapper span{font-size: 4vw;} | |
| .checkout-wrapper .message-wrapper span strong{color: #17479E;} | |
| .checkout-wrapper .comprovante-number-wrapper{ | |
| display: flex; | |
| padding: 5vw 20vw; | |
| flex-direction: column; | |
| text-align: center; | |
| margin-top: 20px; | |
| background-color: #17479E; | |
| color: white; | |
| border-radius: 7px; | |
| border: 1px solid #17479E; | |
| } | |
| .checkout-wrapper .comprovante-number-wrapper strong{font-size: 13vw;} | |
| .checkout-wrapper .comprovante-number-wrapper span{font-size: 4vw;} | |
| .checkout-wrapper .boleto-button{ | |
| width: 100%; | |
| height: auto; | |
| padding: 2vh; | |
| margin: 10px 0px; | |
| background-color: #35A836; | |
| border-color: #1A541B; | |
| } | |
| .checkout-wrapper .acompanhe-wrapper{margin: 4vh 0 12vh 0;} | |
| .checkout-wrapper .acompanhe-wrapper p{font-weight: bold;} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar{ | |
| list-style-type: none; | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0px 10px; | |
| margin-top: 40px; | |
| padding: 0 20px; | |
| } | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li{position: relative;} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li:after{ | |
| content: ''; | |
| width: 16vw; | |
| position: absolute; | |
| height: 1px; | |
| background-color: #AAAAAA; | |
| top: 15px; | |
| } | |
| .checkout-wrapper .acompanhe-wrapper .progressBar.pickupstore li:after{ | |
| width: 25vw; | |
| } | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li:last-child:after{display: none;} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li:before{ | |
| content: ''; | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| background-color: white; | |
| border-radius: 50%; | |
| top: 0; | |
| left: -19px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: #AAAAAA; | |
| z-index: 1; | |
| border: 1px solid #AAAAAA; | |
| } | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li.one:before{content: '1'} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li.two:before{content: '2'} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li.three:before{content: '3'} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li.four:before{content: '4'} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li.five:before{content: '5'} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li.six:before{content: '6'} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li span{ | |
| position: absolute; | |
| left: -13px; | |
| font-size: 3vw; | |
| width: 70px; | |
| color: #AAAAAA; | |
| } | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li span.top{top: -35px;} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li span.bottom{top: 35px;} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li span.end{ | |
| left: -65px; | |
| text-align: right; | |
| } | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li span.arrived{font-weight: bold;color: #00A1E4} | |
| .checkout-wrapper .acompanhe-wrapper .progressBar li.arrived:before{background-color: #00A1E4; color: white; border: none;} | |
| .checkout-wrapper .icone-endereco img{width:6vw} | |
| .checkout-wrapper strong.prazoFrete{color: #444444;} | |
| .checkout-wrapper .padding-vertical img{width: 5vw; margin-right: 2vw;} | |
| #bannerEbit {text-align: center;} | |
| /*FIM CSS COMPROVANTE */ | |
| /*Rods - INÍCIO*/ | |
| .checkout-wrapper .produto-image-wrapper img{width: 24vw;} | |
| .checkout-wrapper .produto-item .produto-info-wrapper .info-top a{font-size: 4vw;flex:3.5; line-height: 1.3;} | |
| .hide { | |
| display: none !important; | |
| } | |
| .show {display: block !important;} | |
| .cep-wrapper {display: flex;width: initial !important;} | |
| #cupom-toggle{color: #17479E; margin-top: -3vh;} | |
| input[type=radio]{margin: 0;} | |
| .checkout-wrapper .noBoardCheckbox { | |
| border: none !important; | |
| } | |
| .checkout-wrapper .cart-info strong.valor{ | |
| color: #0075CC; | |
| font-size: 4vw; | |
| } | |
| .checkout-wrapper .cart-info strong.desconto{ | |
| color: #35A836; | |
| font-size: 4vw; | |
| } | |
| .checkout-wrapper strong.valorFrete{ | |
| color: #17479E; | |
| text-decoration: underline; | |
| } | |
| .fav-action { | |
| background-image: none !important; | |
| } | |
| /*Rods - FIM*/ | |
| /*INÍCIO CSS FOOTER*/ | |
| .checkout-wrapper footer{ | |
| background-color: #eeeeee; | |
| color: #444444; | |
| } | |
| .checkout-wrapper footer div{text-align: f;} | |
| .checkout-wrapper footer .footer-info-top{margin-bottom: 3vh;display:flex;justify-content: center;} | |
| .checkout-wrapper footer .footer-info-top div:first-child{ | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end | |
| } | |
| .checkout-wrapper footer .footer-info-top div:last-child{ | |
| font-size: 14px; | |
| width: 35px; | |
| margin-left: 0px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .checkout-wrapper footer .footer-info-top img{ | |
| height: 3vh; | |
| } | |
| .checkout-wrapper footer div:first-child span{font-size: 15px;} | |
| .checkout-wrapper footer div:first-child .font-small{font-size: 12px;} | |
| .checkout-wrapper footer div:last-child{font-size: 3.5vw;text-align: center;} | |
| .checkout-wrapper .navbar-bottom-cart{ | |
| height: 80px; | |
| width: 100vw; | |
| position: sticky; | |
| position: -webkit-sticky; | |
| bottom: -1px; | |
| background-color: #ffffff; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: space-around; | |
| box-shadow: 0px -1px 7px rgba(0, 0, 0, 0.5); | |
| padding: 3px; | |
| } | |
| .checkout-wrapper .navbar-bottom-cart .cart-nav-info strong.cart-total{ | |
| transition: font-size 0.3s | |
| } | |
| .checkout-wrapper .navbar-bottom-cart .cart-nav-info strong.totalAnimation{ | |
| font-size: 25px | |
| } | |
| .checkout-wrapper footer i{ | |
| margin-bottom: -6px; | |
| margin-left: 3px; | |
| } | |
| footer{padding:5vw 3vw;} | |
| /*FIM CSS FOOTER*/ | |
| /*INÍCIO CSS MODAL*/ | |
| .modal-mask { | |
| position: fixed; | |
| z-index: 9998; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100vh; | |
| max-height: 100vh; | |
| background-color: rgba(0, 0, 0, .5); | |
| transition: opacity .3s ease; | |
| overflow-x: auto; | |
| } | |
| .modal-wrapper { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal-container { | |
| width: 86vw; | |
| margin: 30vw auto; | |
| padding: 20px 20px; | |
| background-color: #fff; | |
| border-radius: 10px; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, .33); | |
| transition: all .3s ease; | |
| } | |
| .modal-header { | |
| text-align: center; | |
| } | |
| .modal-header h3 { | |
| margin-top: 0; | |
| } | |
| .modal-header img { | |
| width: 20vw; | |
| } | |
| .modal-body { | |
| margin: 20px 0; | |
| color: #17479E; | |
| font-weight: bold; | |
| text-align: center; | |
| font-size: 18px; | |
| } | |
| .modal-footer { | |
| font-size: 14px; | |
| margin-bottom: 25px; | |
| text-align: left; | |
| } | |
| .modal-header.modal-error{ | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .modal-header.modal-error i { | |
| font-size: 40px; | |
| color: #ffae42; | |
| } | |
| .modal-header.modal-error .close-popup{top:-35px;} | |
| .modal-body.modal-error{ | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .modal-body.modal-error .error-message{ | |
| font-size: 14px; | |
| font-weight: normal; | |
| color: red; | |
| margin-top: 10px; | |
| text-align: left; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .modal-body.modal-error a { | |
| text-align: center; | |
| margin-top: 10px; | |
| font-size: 4vw; | |
| font-weight: bold; | |
| } | |
| .modal-footer button{width:100%;} | |
| .modal-default-button { | |
| float: right; | |
| } | |
| .exclusao-cartao .modal-title { | |
| color: #1B6DB0; | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: x-large; | |
| } | |
| .exclusao-cartao .modal-petz-btn.cancel { | |
| background: #eeeeee; | |
| box-shadow: 0px -5px #666666 inset; | |
| color: #000; | |
| } | |
| .exclusao-cartao .modal-body { | |
| padding-bottom: 10px !important; | |
| } | |
| .exclusao-cartao button.closeExclusao { | |
| float: right; | |
| margin-top: -13px; | |
| font-size: 34px; | |
| background: none; | |
| color: black; | |
| opacity: .2; | |
| box-shadow: none; | |
| font-weight: bold; | |
| margin-right: -4px; | |
| } | |
| .exclusao-cartao .botoes-exclusao { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-around; | |
| margin-top: 40px; | |
| } | |
| .exclusao-cartao .botoes-exclusao button { | |
| width: 30vw; | |
| } | |
| /* | |
| * The following styles are auto-applied to elements with | |
| * transition="modal" when their visibility is toggled | |
| * by Vue.js. | |
| * | |
| * You can easily play with the modal transition by editing | |
| * these styles. | |
| */ | |
| .modal-enter { | |
| opacity: 0; | |
| } | |
| .modal-leave-active { | |
| opacity: 0; | |
| } | |
| .modal-enter .modal-container, | |
| .modal-leave-active .modal-container { | |
| -webkit-transform: scale(1.1); | |
| transform: scale(1.1); | |
| } | |
| /* FIM CSS MODAL*/ | |
| /** DIV THROBBER **/ | |
| div.throbber{ | |
| width: 25px; | |
| height: 25px; | |
| border: 5px solid rgb(0, 0, 0, .1); | |
| animation: spin 1s linear infinite; | |
| border-left-color: #17479E; | |
| border-radius: 50%; | |
| margin: 0 auto; | |
| } | |
| .entrega-active div.throbber{border-left-color:#cccccc;} | |
| @keyframes spin{ | |
| to {transform: rotate(360deg);} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment