forked from M3-Academy/m3-academy-template-checkout
style: correção de estilo para 1024px
This commit is contained in:
parent
bbb5d85418
commit
3c9ddb4be9
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -524,6 +524,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.summary {
|
.summary {
|
||||||
|
// display: block;
|
||||||
.cart-more-options {
|
.cart-more-options {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user