NicollyVieira/m3-academy-template-checkout-nicolly-vieira
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: corrige estilos da pagina de autentificacao, carrinho e pagamento #6

Merged
NicollyVieira merged 1 commits from feature/correcoes into development 2022-12-20 17:50:17 +00:00
Conversation 0 Commits 1 Files Changed 5 +68 -35
5 changed files with 68 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
checkout/src/arquivos/js/components/Footer.js
View File

@ -46,7 +46,6 @@ export default class Footer {
tituloCheckoutVazio.style.display = "none"; tituloCheckoutVazio.style.display = "none";
} else if (changeAttrName.display == "none") { } else if (changeAttrName.display == "none") {
tituloCheckoutVazio.style.display = "block"; tituloCheckoutVazio.style.display = "block";
this.criaPrateleira(); this.criaPrateleira();
} }
@ -56,8 +55,11 @@ export default class Footer {
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", () => {
if (window.location.hash == "#/cart") { if (window.location.hash == "#/cart") {
this.prateleira.style.display = "block"; this.prateleira.style.display = "block";
tituloCheckoutVazio.style.display = "block";
} else { } else {
this.prateleira.style.display = "none"; this.prateleira.style.display = "none";
tituloCheckoutVazio.style.display = "none";
} }
}); });
@ -126,6 +128,9 @@ export default class Footer {
this.prateleira.innerHTML = ""; this.prateleira.innerHTML = "";
tituloCheckoutVazio.style.display = "none"; tituloCheckoutVazio.style.display = "none";
} }
if(window.location.href !== "https://m3academy.myvtex.com/checkout/#/cart") {
tituloCheckoutVazio.style.display = "none";
}
} }

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

@ -837,7 +837,7 @@
border-radius: 8px; border-radius: 8px;
background: none; background: none;
padding: 15px 13px 14px 11px; padding: 15px 13px 14px 11px;
&::before { &::before {
content: ""; content: "";
@ -848,7 +848,7 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
float: left; float: left;
margin: auto 8px auto 0; margin: 8px 8px 0 0;
@include mq(desktop4K, min) { @include mq(desktop4K, min) {
width: 40px; width: 40px;
@ -865,6 +865,8 @@
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
} }
} }
a { a {
font-family: "Open Sans"; font-family: "Open Sans";
@ -978,18 +980,23 @@
} }
.form-step { .form-step {
display: flex;
.steps-view { .steps-view {
width: 55%; flex: 1;
float: left; position: inherit;
left: 12px; height: fit-content;
margin-left: 40px;
@include mq(tablet, max) { @include mq(tablet, max) {
width: auto; width: auto;
position: inherit; position: inherit;
margin-left: 0;
} }
@include mq(desktop4K, min) { @include mq(desktop4K, min) {
left: 40.52px; // left: 40.52px;
margin-left: 40.52px;
li, li,
label, label,

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

@ -1,10 +1,7 @@
.row-fluid .full-cart.active { .row-fluid .full-cart.active {
margin: 0 0 43.42px; margin: 0 0 43.42px;
} }
.cart-template { .cart-template {
.cart { .cart {
border: 1px solid $gray-100; border: 1px solid $gray-100;
@ -55,6 +52,7 @@
display: flex; display: flex;
grid-area: quantity; grid-area: quantity;
margin: 11px 0 0 16px; margin: 11px 0 0 16px;
input { input {
margin: 0; margin: 0;
} }
@ -89,6 +87,13 @@
} }
.quantity { .quantity {
width: auto; width: auto;
margin: 0 0 0 16px !important;
}
}
@include mq(cstm, max) {
.quantity {
margin: 0 0 0 76px !important; margin: 0 0 0 76px !important;
} }
} }
@ -114,6 +119,23 @@
padding: 0; padding: 0;
text-align: start; text-align: start;
&.quantity {
text-align: start;
border: 1px solid #f0f0f0;
border-radius: 8px;
box-sizing: border-box;
display: flex;
align-items: center;
max-width: 99px;
padding: 9px 11px;
height: 34px;
margin-top: 13px;
input {
flex: 1;
}
}
&.product-image { &.product-image {
height: auto; height: auto;
padding: 0; padding: 0;
@ -548,18 +570,23 @@
a { a {
padding: 12.09px 0 12.72px; padding: 12.09px 0 12.72px;
font-family: "Open Sans";
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $black-500;
width: 100%; width: 100%;
background-color: $blue-500; background-color: $blue-500;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
font-size: 0;
&::before {
content: "Finalizar compra";
font-family: "Open Sans";
font-weight: 700;
font-size: 14px;
line-height: 19px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: $black-500;
}
@include mq(desktop4K, min) { @include mq(desktop4K, min) {
font-size: 24px; font-size: 24px;
@ -598,9 +625,6 @@
} }
tr { tr {
td { td {
font-family: "Tenor Sans"; font-family: "Tenor Sans";
font-weight: 400; font-weight: 400;

23
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -4,9 +4,6 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
border: 1px solid #e5e5e5;
padding: 24px 17px 0;
border-radius: 8px;
@include mq(tablet, max) { @include mq(tablet, max) {
margin: 17px 16px 0 16px; margin: 17px 16px 0 16px;
@ -15,10 +12,11 @@ body .container-main.container-order-form .orderform-template.active {
.cart-fixed { .cart-fixed {
box-sizing: border-box; box-sizing: border-box;
max-width: 331px; border: 1px solid #e5e5e5;
border-radius: 8px;
width: auto; width: auto;
position: inherit; position: inherit;
height: auto !important; max-height: 407px !important;
@include mq(tablet, max) { @include mq(tablet, max) {
max-width: none; max-width: none;
@ -39,14 +37,9 @@ body .container-main.container-order-form .orderform-template.active {
line-height: 19px; line-height: 19px;
color: $black-300; color: $black-300;
margin-bottom: 34px; margin: 24px 17px 34px 17px;
border: none; border: none;
h2 {
font-size: 32px;
line-height: 37px;
}
@include mq(desktop4K, min) { @include mq(desktop4K, min) {
font-size: 32px; font-size: 32px;
line-height: 37px; line-height: 37px;
@ -59,7 +52,8 @@ body .container-main.container-order-form .orderform-template.active {
margin: 0; margin: 0;
li { li {
padding: 0; box-sizing: border-box;
padding: 0 17px;
margin: 0; margin: 0;
border: none; border: none;
display: flex; display: flex;
@ -128,6 +122,7 @@ body .container-main.container-order-form .orderform-template.active {
line-height: 16px; line-height: 16px;
text-align: right; text-align: right;
text-decoration-line: underline; text-decoration-line: underline;
padding-right: 17px;
color: $black-500; color: $black-500;
@ -141,7 +136,8 @@ body .container-main.container-order-form .orderform-template.active {
.summary-template-holder { .summary-template-holder {
border: none; border: none;
background-color: transparent; background-color: transparent;
padding: 0; padding: 0 17px;
box-sizing: border-box;
.summary-totalizers { .summary-totalizers {
margin: 0; margin: 0;
@ -212,6 +208,7 @@ body .container-main.container-order-form .orderform-template.active {
text-transform: uppercase; text-transform: uppercase;
color: $white-500; color: $white-500;
border: none; border: none;
margin-top: 20px;
@include mq(desktop4K, min) { @include mq(desktop4K, min) {
font-size: 28px; font-size: 28px;

2
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -47,7 +47,7 @@ $gray-1000: #7d7d7d;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
cstm: 400, cstm: 491px,
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 992px,