anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: correção de estilo para 1024px

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -339,20 +339,33 @@
margin-bottom: 8px;
padding: 0;
i::before {
fill: #303030;
}
// i::before {
// fill: #303030;
// }
}
a {
align-items: center;
background-color: #303030;
background-color: transparent;
border-radius: 8px;
border: none;
color: $color-white;
display: flex;
justify-content: center;
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;
}
p.input.ship-postalCode.required.text {
display: flex;
flex-direction: column;
@ -892,9 +903,9 @@ label#FASTEST {
background: $color-gray11 !important;
}
p.input.ship-neighborhood.required.text {
display: none;
}
// p.input.ship-neighborhood.required.text {
// display: none;
// }
.checkout-container .shipping-data .accordion-group .accordion-inner .address-summary {
border: 1px solid $color-gray10;
@ -960,7 +971,7 @@ a#force-shipping-fields {
.checkout-container .shipping-data .accordion-group .accordion-heading a {
background-color: transparent;
visibility: hidden;
// visibility: hidden;
}
a#show-gift-card-group,
@ -1051,7 +1062,7 @@ p.PaymentCardHolderDocument.input.text.required.mask {
line-height: 24px;
text-align: center;
letter-spacing: -0.01em;
color: transparent;
& span {
opacity: unset;
color: #58595b;
@ -1067,7 +1078,10 @@ a#edit-profile-data {
}
input#client-email {
width: 95%;
width: 96%;
@media (max-width: $checkout1024px) {
width: 99%;
}
}
.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 {
@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 {
@media (max-width: $checkout1024px) {
width: 95%;
width: 100%;
}
}
@ -1114,12 +1122,63 @@ p.input.ship-country.text {
width: 100%;
}
// área do carrinho
.row-fluid {
@media (max-width: $checkout1024px) {
display: flex;
flex-direction: column;
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
@ -1139,46 +1198,6 @@ i.icon-credit-card {
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 {
position: relative;
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;
}
display: none;
}

1
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

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

72
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -70,8 +70,52 @@ body {
body .container-order-form {
width: 81%;
// @media (max-width: $checkout1024px) {
// width: 96.87%;
// display: flex;
// flex-direction: column;
// justify-content: center;
// }
@media (max-width: $checkout1024px) {
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;
}
#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 {
&__content {
&--closed {

6
checkout/src/arquivos/sass/lib/_slick.scss
View File

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