style: correção de estilo para 1024px

This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-20 15:24:08 -03:00
parent bbb5d85418
commit 3c9ddb4be9
4 changed files with 129 additions and 91 deletions

View File

@ -339,20 +339,33 @@
margin-bottom: 8px; margin-bottom: 8px;
padding: 0; padding: 0;
i::before { // i::before {
fill: #303030; // fill: #303030;
} // }
} }
a { a {
align-items: center; align-items: center;
background-color: #303030; background-color: transparent;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $color-white; color: $color-white;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 6px 5px 6px 8px;
&::before {
content: "";
width: 20.21px;
height: 20.89px;
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png") no-repeat
center center;
display: block;
background-size: 100%;
border: none;
cursor: pointer;
}
} }
} }
@ -791,8 +804,6 @@ button#shipping-option-pickup-in-point {
color: #c4c4c4; color: #c4c4c4;
} }
p.input.ship-postalCode.required.text { p.input.ship-postalCode.required.text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -892,9 +903,9 @@ label#FASTEST {
background: $color-gray11 !important; background: $color-gray11 !important;
} }
p.input.ship-neighborhood.required.text { // p.input.ship-neighborhood.required.text {
display: none; // display: none;
} // }
.checkout-container .shipping-data .accordion-group .accordion-inner .address-summary { .checkout-container .shipping-data .accordion-group .accordion-inner .address-summary {
border: 1px solid $color-gray10; border: 1px solid $color-gray10;
@ -960,7 +971,7 @@ a#force-shipping-fields {
.checkout-container .shipping-data .accordion-group .accordion-heading a { .checkout-container .shipping-data .accordion-group .accordion-heading a {
background-color: transparent; background-color: transparent;
visibility: hidden; // visibility: hidden;
} }
a#show-gift-card-group, a#show-gift-card-group,
@ -1051,7 +1062,7 @@ p.PaymentCardHolderDocument.input.text.required.mask {
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
letter-spacing: -0.01em; letter-spacing: -0.01em;
color: transparent;
& span { & span {
opacity: unset; opacity: unset;
color: #58595b; color: #58595b;
@ -1067,7 +1078,10 @@ a#edit-profile-data {
} }
input#client-email { input#client-email {
width: 95%; width: 96%;
@media (max-width: $checkout1024px) {
width: 99%;
}
} }
.client-pre-email .emailInfo .icon-lock { .client-pre-email .emailInfo .icon-lock {
@ -1076,15 +1090,9 @@ input#client-email {
} }
} }
div#shipping-data {
@media (max-width: $checkout1024px) {
width: 100%;
}
}
.step.accordion-group.client-profile-data.active { .step.accordion-group.client-profile-data.active {
@media (max-width: $checkout1024px) { @media (max-width: $checkout1024px) {
width: 100%; width: 96.36%;
} }
} }
@ -1102,7 +1110,7 @@ body .container-main.container-order-form .orderform-template.active .mini-cart
body .container-main.container-order-form .orderform-template.active .orderform-template-holder { body .container-main.container-order-form .orderform-template.active .orderform-template-holder {
@media (max-width: $checkout1024px) { @media (max-width: $checkout1024px) {
width: 95%; width: 100%;
} }
} }
@ -1114,12 +1122,63 @@ p.input.ship-country.text {
width: 100%; width: 100%;
} }
// área do carrinho
.row-fluid { .row-fluid {
@media (max-width: $checkout1024px) { @media (max-width: $checkout1024px) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
div#shipping-data {
@media (max-width: $checkout1024px) {
width: 100%;
margin-left: 0;
}
.step.accordion-group.shipping-data {
@media (max-width: $checkout1024px) {
margin-bottom: 17px;
}
& .accordion-heading {
// & span.accordion-toggle.collapsed {
// a#edit-shipping-data:before{
// content: "";
// background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
// background-repeat: no-repeat;
// background-size: 16px;
// background-position: 100% 50%;
// cursor: pointer;
// font-family: "Tenor Sans";
// font-style: normal;
// font-weight: 400;
// font-size: 16px;
// line-height: 19px;
// color: $color-black;
// }
// }
& a {
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
}
}
}
}
div#payment-data {
@media (max-width: $checkout1024px) {
width: 100%;
margin-left: 0;
}
.step.accordion-group.store-country-BRA.filled {
@media (max-width: $checkout1024px) {
margin-bottom: 17px;
}
}
}
} }
// ícones ou imagens // ícones ou imagens
@ -1139,46 +1198,6 @@ i.icon-credit-card {
display: none; display: none;
} }
.step.accordion-group.shipping-data {
& .accordion-heading {
& span.accordion-toggle.collapsed {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-repeat: no-repeat;
background-size: 16px;
background-position: 100% 50%;
cursor: pointer;
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: $color-black;
}
}
}
.payment-data {
& .accordion-group {
& .accordion-heading {
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-repeat: no-repeat;
background-size: 16px;
background-position: 100% 50%;
cursor: pointer;
}
}
}
i.icon-edit { i.icon-edit {
position: relative; display: none;
color: transparent;
&::before {
position: relative;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
background-repeat: no-repeat;
background-size: 16px;
background-position: 100% 50%;
width: 16px;
height: 16px;
}
} }

View File

@ -524,6 +524,7 @@
} }
.summary { .summary {
// display: block;
.cart-more-options { .cart-more-options {
margin: 0; margin: 0;
width: max-content; width: max-content;

View File

@ -70,8 +70,52 @@ body {
body .container-order-form { body .container-order-form {
width: 81%; width: 81%;
// @media (max-width: $checkout1024px) {
// width: 96.87%;
// display: flex;
// flex-direction: column;
// justify-content: center;
// }
@media (max-width: $checkout1024px) { @media (max-width: $checkout1024px) {
width: 100%; width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
}
#cart-title,
#orderform-title {
color: $color-black;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
letter-spacing: 0.05em;
text-transform: uppercase;
@media (min-width: $checkout2500px) {
font-weight: 700;
font-size: 48px;
line-height: 65px;
}
@include mq(md, max) {
margin-left: 30px;
@media (max-width: $checkout1024px) {
margin-left: 16px;
}
}
}
#cart-title {
@media (max-width: $checkout1024px) {
margin: 17px 16px;
}
}
h1#orderform-title {
@media (max-width: $checkout1024px) {
margin: 17px 16px;
} }
} }
@ -88,34 +132,6 @@ body .container-order-form {
color: $color-black !important; color: $color-black !important;
} }
#cart-title,
#orderform-title {
color: $color-black;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
letter-spacing: 0.05em;
margin: 17px 0 16px;
text-transform: uppercase;
@media (min-width: $checkout2500px) {
font-weight: 700;
font-size: 48px;
line-height: 65px;
}
@media (max-width: $checkout1024px) {
margin: 17px 16px 16px;
}
@include mq(md, max) {
margin-left: 30px;
@media (max-width: $checkout1024px) {
margin-left: 16px;
}
}
}
.dropdown { .dropdown {
&__content { &__content {
&--closed { &--closed {

View File

@ -101,14 +101,16 @@
position: absolute; position: absolute;
} }
.slick-prev { .slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center
no-repeat center center; center;
z-index: 4; z-index: 4;
left: 10px; left: 10px;
transform: translateY(-100%);
} }
.slick-next { .slick-next {
z-index: 4; z-index: 4;
right: 10px; right: 10px;
transform: translateY(-100%);
} }
.slick-arrow.slick-hidden { .slick-arrow.slick-hidden {
display: none; display: none;