forked from M3-Academy/m3-academy-template-checkout
fix(responsividade): ajuste na responsividade mobile
This commit is contained in:
amanda almeida
parent
7dfcb68387
commit
c21562a08a
@ -7,29 +7,26 @@ export default class Cart {
|
||||
|
||||
async init() {
|
||||
await this.textButton();
|
||||
this.selectors();
|
||||
this.events();
|
||||
}
|
||||
|
||||
selectors() {
|
||||
this.addTextButton = $('.link-box-edit');
|
||||
}
|
||||
|
||||
|
||||
events() {
|
||||
this.addTextButton.click(this.textButton);
|
||||
}
|
||||
|
||||
|
||||
async textButton() {
|
||||
const textButtonCardVazio = await waitElement(".empty-cart-links a#cart-choose-products", {
|
||||
timeout: 30000,
|
||||
interval: 100,
|
||||
});
|
||||
const textCartItemsEntrega = await waitElement(".cart .cart-items thead tr .shipping-date", {
|
||||
timeout: 30000,
|
||||
interval: 100,
|
||||
});
|
||||
const textCartItemsPreço = await waitElement(".cart .cart-items thead tr .product-price", {
|
||||
timeout: 30000,
|
||||
interval: 100,
|
||||
});
|
||||
const pPagamento = await waitElement('.accordion-inner .notification', {
|
||||
timeout: 30000,
|
||||
interval: 100,
|
||||
})
|
||||
const dadosPessoais = await waitElement('.accordion-toggle span', {
|
||||
timeout: 30000,
|
||||
interval: 100,
|
||||
})
|
||||
const textButtonCardVazio = await waitElement(".empty-cart-links a#cart-choose-products");
|
||||
const textCartItemsEntrega = await waitElement(".cart .cart-items thead tr .shipping-date");
|
||||
const textCartItemsPreço = await waitElement(".cart .cart-items thead tr .product-price");
|
||||
const pPagamento = await waitElement('div.store-country-BRA.active .accordion-body .accordion-inner .notification')
|
||||
const dadosPessoais = await waitElement('.accordion-toggle span')
|
||||
|
||||
textButtonCardVazio.textContent = `Continuar comprando`;
|
||||
textCartItemsEntrega.textContent = `Frete`;
|
||||
|
||||
@ -169,10 +169,7 @@ export default class Footer {
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const products = await waitElement(".footerCheckout__products", {
|
||||
timeout: 30000,
|
||||
interval: 1000,
|
||||
});
|
||||
const products = await waitElement(".footerCheckout__products");
|
||||
$(products).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
|
||||
@ -155,6 +155,8 @@
|
||||
@include mq(md, max) {
|
||||
width: 87.2%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.focus-visible {
|
||||
@ -325,8 +327,10 @@
|
||||
}
|
||||
|
||||
.orderform-template-holder {
|
||||
width: 66.1132%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100% !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-fluid {
|
||||
@ -334,19 +338,16 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
align-items: center;
|
||||
right: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.client-profile-data {
|
||||
|
||||
#client-profile-data {
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-top: 11px;
|
||||
@ -362,7 +363,7 @@
|
||||
}
|
||||
|
||||
@include mq(reset4, max) {
|
||||
width: 90%;
|
||||
width: 91.5%;
|
||||
}
|
||||
|
||||
.box-client-info {
|
||||
@ -475,14 +476,10 @@
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
width: 49.6%;
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 47%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
@ -496,14 +493,11 @@
|
||||
.client-email,
|
||||
.client-first-name,
|
||||
.client-last-name {
|
||||
margin: 0;
|
||||
margin-bottom: 16px;
|
||||
|
||||
input {
|
||||
height: 42px;
|
||||
|
||||
@include mq(md, max) {
|
||||
max-width: 100% !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -514,39 +508,39 @@
|
||||
width: 96%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 98.9%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-first-name {
|
||||
|
||||
|
||||
input {
|
||||
margin-right: 14px;
|
||||
width: 91.3%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 96.3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-last-name,
|
||||
.client-phone {
|
||||
input {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.client-last-name,
|
||||
.client-phone,
|
||||
.client-document {
|
||||
.client-document,
|
||||
.client-first-name {
|
||||
margin: 0;
|
||||
width: 47%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 47.6%;
|
||||
}
|
||||
|
||||
@include mq(xs2, max) {
|
||||
width: 46.8%;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 91.3%;
|
||||
width: 94% !important;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 96.3%;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 94% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -563,7 +557,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
margin: 0;
|
||||
margin-bottom: 13px;
|
||||
|
||||
@include mq(md, max) {
|
||||
@ -573,13 +566,15 @@
|
||||
|
||||
.client-document {
|
||||
input {
|
||||
margin-right: 14px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.client-first-name,
|
||||
.client-document {
|
||||
margin-bottom: 16px;
|
||||
margin-right: 14px;
|
||||
|
||||
input,
|
||||
label {
|
||||
@ -588,12 +583,6 @@
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include mq(sm, max) {
|
||||
margin-right: 14px !important;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -652,8 +641,8 @@
|
||||
}
|
||||
|
||||
.btn-submit-wrapper {
|
||||
margin-top: 45px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 44px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
button.submit {
|
||||
background: $color-blue2;
|
||||
@ -669,6 +658,7 @@
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 61px;
|
||||
@ -685,6 +675,7 @@
|
||||
.box-info {
|
||||
position: relative;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
span {
|
||||
font-family: 'Open Sans';
|
||||
@ -728,16 +719,21 @@
|
||||
|
||||
}
|
||||
|
||||
#payment-data.pull-right {}
|
||||
|
||||
#payment-data,
|
||||
#shipping-data {
|
||||
margin: 0;
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100% !important;
|
||||
width: 100%;
|
||||
float: initial;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 91.4% !important;
|
||||
width: 91.5%;
|
||||
}
|
||||
|
||||
div.step {
|
||||
@ -906,7 +902,7 @@
|
||||
border-radius: 8px;
|
||||
|
||||
@include mq(md, max) {
|
||||
min-width: 98.8%;
|
||||
min-width: 95.5%;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
@ -1127,15 +1123,32 @@
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
input {
|
||||
.ship-number {
|
||||
input {
|
||||
@include mq(sm, max) {
|
||||
max-width: 97%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 94.2%;
|
||||
min-width: 94.2%;
|
||||
height: 35px;
|
||||
height: 33px;
|
||||
padding: 0;
|
||||
padding-left: 7px;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
min-width: 98.8%;
|
||||
width: 99%;
|
||||
min-width: 95.5%;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
@ -1148,6 +1161,13 @@
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
min-width: 95.5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1254,10 +1274,6 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.line1-delimiter {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1293,420 +1309,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mini-cart {
|
||||
border: 1px solid $color-gray5;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
max-height: 496px;
|
||||
margin-left: 16px;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100% !important;
|
||||
margin-bottom: 117px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 91.4% !important;
|
||||
}
|
||||
|
||||
.cart-fixed-transition {
|
||||
transition: initial;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.cart-fixed {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
|
||||
.cart-totalizers {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background: transparent;
|
||||
font-family: 'Tenor Sans';
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: $color-black-400;
|
||||
border: 0;
|
||||
padding: 24px 0 34px 17px;
|
||||
text-align: left;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart {
|
||||
padding: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
max-height: 242px;
|
||||
}
|
||||
|
||||
.cart-items {
|
||||
overflow-x: hidden;
|
||||
|
||||
.quantity,
|
||||
.shipping-date {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 0;
|
||||
margin-bottom: 19px;
|
||||
padding: 0 17px;
|
||||
border: 0;
|
||||
width: 90%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 96.8%;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 92.8%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 116px;
|
||||
height: 116px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-family: 'Tenor Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-black;
|
||||
width: 115px;
|
||||
height: 60px;
|
||||
margin-left: 7px;
|
||||
text-overflow: initial;
|
||||
white-space: initial;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
width: 215px;
|
||||
height: 116px;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
color: $color-black-400;
|
||||
margin: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
margin: 0;
|
||||
margin-right: 17px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
small a {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
text-decoration-line: underline;
|
||||
color: $color-black;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary-template-holder {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
tbody tr {
|
||||
td {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray2;
|
||||
padding: 25px 17px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: 1px solid $color-gray10;
|
||||
|
||||
td {
|
||||
font-family: 'Open Sans';
|
||||
width: 68%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 81%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tfoot tr td {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: $color-black-400;
|
||||
padding: 30px 17px 22px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 36px;
|
||||
line-height: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.monetary {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-submit-wrap {
|
||||
#payment-data-submit {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
border-radius: 8px;
|
||||
height: 42px;
|
||||
background: $color-green1;
|
||||
border-radius: 8px;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 61px;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#payment-data {
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.step {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.link-gift-card,
|
||||
.pg-transferencia-bancaria,
|
||||
#payment-group-creditControlPaymentGroup,
|
||||
#payment-group-promissoryPaymentGroup,
|
||||
.pg-money,
|
||||
#payment-group-creditDirectSalePaymentGroup,
|
||||
#payment-group-instantPaymentPaymentGroup,
|
||||
#payment-group-PSEPaymentGroup,
|
||||
#payment-group-customPrivate_502PaymentGroup,
|
||||
#payment-group-custom201PaymentGroupPaymentGroup,
|
||||
#payment-group-MercadoPagoPaymentGroup,
|
||||
#payment-group-SPEIPaymentGroup {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.notification {
|
||||
display: block !important;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: -0.01em;
|
||||
color: $color-gray2;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div.store-country-BRA.active {
|
||||
width: 94.6% !important;
|
||||
margin-bottom: 102px;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 96.4% !important;
|
||||
float: initial;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include mq(reset3, max) {
|
||||
width: 94.4% !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 92.4% !important;
|
||||
}
|
||||
|
||||
.accordion-toggle {
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(reset4, max) {
|
||||
width: 87% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-group {
|
||||
margin: 0;
|
||||
width: 38.1%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-list-btn {
|
||||
margin: 0;
|
||||
margin-right: 40px;
|
||||
width: 83.9%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
margin: 0;
|
||||
background: $color-gray3;
|
||||
mix-blend-mode: normal;
|
||||
opacity: 0.3;
|
||||
border: 1px solid $color-black;
|
||||
border-radius: 6px;
|
||||
width: 99%;
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: rgba(220, 221, 227, 0.3);
|
||||
border: 1px solid #F15A31;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&-item-text {
|
||||
background: initial;
|
||||
padding: 0;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
letter-spacing: -0.01em;
|
||||
color: #58595B;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: #F15A31;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.help {
|
||||
color: $color-red
|
||||
}
|
||||
@ -1721,23 +1323,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps-view {
|
||||
width: 56%;
|
||||
border-radius: 5px;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 97.1%;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
p.PaymentCardHolderDocument {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1,11 +1,455 @@
|
||||
body .container-main.container-order-form .orderform-template.active {
|
||||
.mini-cart {
|
||||
width: 32.3242%;
|
||||
margin-left: unset;
|
||||
margin-right: 0;
|
||||
margin: 0;
|
||||
float: right;
|
||||
border: 1px solid $color-gray5;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
max-height: 496px;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
margin-bottom: 117px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 91.4%;
|
||||
}
|
||||
|
||||
.cart-fixed-transition {
|
||||
transition: initial;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.cart-fixed {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
|
||||
.cart-totalizers {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background: transparent;
|
||||
font-family: 'Tenor Sans';
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: $color-black-400;
|
||||
border: 0;
|
||||
padding: 24px 0 34px 17px;
|
||||
text-align: left;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart {
|
||||
padding: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
max-height: 242px;
|
||||
}
|
||||
|
||||
.cart-items {
|
||||
overflow-x: hidden;
|
||||
|
||||
.quantity,
|
||||
.shipping-date {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 0;
|
||||
margin-bottom: 19px;
|
||||
padding: 0 17px;
|
||||
border: 0;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 96.8%;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 90%;
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 116px;
|
||||
height: 116px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-family: 'Tenor Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-black;
|
||||
width: 44%;
|
||||
height: 60px;
|
||||
text-overflow: initial;
|
||||
white-space: initial;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
width: 215px;
|
||||
height: 116px;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
color: $color-black-400;
|
||||
margin: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
margin: 0;
|
||||
margin-right: 17px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
small a {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
text-decoration-line: underline;
|
||||
color: $color-black;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary-template-holder {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
tbody tr {
|
||||
td {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray2;
|
||||
padding: 25px 17px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: 1px solid $color-gray10;
|
||||
|
||||
td {
|
||||
font-family: 'Open Sans';
|
||||
width: 68%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 81%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tfoot tr td {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: $color-black-400;
|
||||
padding: 30px 17px 22px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 36px;
|
||||
line-height: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.monetary {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-submit-wrap {
|
||||
#payment-data-submit {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
border-radius: 8px;
|
||||
height: 42px;
|
||||
background: $color-green1;
|
||||
border-radius: 8px;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: $color-white;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 61px;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderform-template-holder {
|
||||
width: 66.1132%;
|
||||
|
||||
#payment-data {
|
||||
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.link-gift-card,
|
||||
.pg-transferencia-bancaria,
|
||||
#payment-group-creditControlPaymentGroup,
|
||||
#payment-group-promissoryPaymentGroup,
|
||||
.pg-money,
|
||||
#payment-group-creditDirectSalePaymentGroup,
|
||||
#payment-group-instantPaymentPaymentGroup,
|
||||
#payment-group-PSEPaymentGroup,
|
||||
#payment-group-customPrivate_502PaymentGroup,
|
||||
#payment-group-custom201PaymentGroupPaymentGroup,
|
||||
#payment-group-MercadoPagoPaymentGroup,
|
||||
#payment-group-SPEIPaymentGroup {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.notification {
|
||||
display: block !important;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: -0.01em;
|
||||
color: $color-gray2;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div.store-country-BRA.active {
|
||||
width: 94.6% !important;
|
||||
margin: 0;
|
||||
margin-bottom: 102px;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 96.4% !important;
|
||||
float: initial;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include mq(reset3, max) {
|
||||
width: 94.4% !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 92.4% !important;
|
||||
}
|
||||
|
||||
.accordion-toggle {
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(reset4, max) {
|
||||
width: 87% !important;
|
||||
}
|
||||
|
||||
.notification {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-group {
|
||||
margin: 0;
|
||||
width: 38.1%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-list-btn {
|
||||
margin: 0;
|
||||
margin-right: 40px;
|
||||
width: 83.9%;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: rgba($color-gray3, 0.3);
|
||||
border: 1px solid $color-orange;
|
||||
|
||||
.payment-group-item-text {
|
||||
color: $color-orange;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
margin: 0;
|
||||
background-color: rgba($color-gray3, 0.3);
|
||||
mix-blend-mode: normal;
|
||||
border: 1px solid rgba($color-black, 0.3);
|
||||
border-radius: 6px;
|
||||
width: 99%;
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: rgba($color-gray3, 0.3);
|
||||
border: 1px solid $color-orange;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.payment-group-item-text {
|
||||
background: initial;
|
||||
padding: 0;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.01em;
|
||||
color: $color-gray13;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 28px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $color-orange;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.steps-view {
|
||||
width: 56%;
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 97.1%;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
p.PaymentCardHolderDocument {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@ $color-gray9: #EDEDED;
|
||||
$color-gray10: #E0E0E0;
|
||||
$color-gray11: #808080;
|
||||
$calor-gray12: #828282;
|
||||
$color-gray13: #58595B;
|
||||
|
||||
|
||||
|
||||
@ -30,12 +31,14 @@ $color-blue2: #00C8FF;
|
||||
$color-green: #4caf50;
|
||||
$color-green1: #298541;
|
||||
$color-red: #FF0000;
|
||||
$color-orange: #F15A31;
|
||||
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
xss: 295px,
|
||||
xs: 320px,
|
||||
xs1: 345px,
|
||||
xs2: 356px,
|
||||
sm: 601px,
|
||||
reset4: 421px,
|
||||
sm2: 456px,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user