Gabriel_Ferraz_Nogueira/m3-academy-template-checkout-gabriel-ferraz
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(checkout) layout Dados pessoais, no desktop

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-12-18 00:14:06 -03:00
parent 42f1070d86
commit a8d3e1f344
7 changed files with 298 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,11 +17,14 @@ export default class Footer {
events() { events() {
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", () => {
this.onUpdate();
if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") { if (window.location.hash == "#/cart" && this.checkoutVazio.style.display == "none") {
this.listaPrateleira.style.display = "flex"; this.listaPrateleira.style.display = "flex";
this.titleSlick.style.display = "block";
} }
if (window.location.hash != "#/cart") { if (window.location.hash != "#/cart") {
this.listaPrateleira.style.display = "none"; this.listaPrateleira.style.display = "none";
this.titleSlick.style.display = "none";
} }
}); });
addEventListener("resize", () => { addEventListener("resize", () => {
@ -50,7 +53,9 @@ export default class Footer {
if (target.style.display == "none" && window.location.hash == "#/cart") { if (target.style.display == "none" && window.location.hash == "#/cart") {
list.style.display = "flex"; list.style.display = "flex";
list.style.display = "block"; list.style.display = "block";
if (!this.listaPrateleira.classList.contains("fetch")) {
this.fetchApi(); this.fetchApi();
}
} else { } else {
this.cartTitulo.style.display = "none"; this.cartTitulo.style.display = "none";
list.style.display = "none"; list.style.display = "none";
@ -70,6 +75,7 @@ export default class Footer {
} else { } else {
cartTitle.style.display = "block"; cartTitle.style.display = "block";
list.style.display = "flex"; list.style.display = "flex";
slickTitle.style.display = "block";
} }
}); });
}); });

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

@ -1,17 +1,30 @@
.checkout-container { .checkout-container {
padding-bottom: 90px;
.client-pre-email { .client-pre-email {
border-color: $gray-200; border-color: $black;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 14px;
.link-cart { .link-cart {
width: 100%;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
text-align: right;
text-decoration-line: underline;
padding: 19px 0 10px;
a { a {
color: $black; color: $black;
font-size: 14px; font-size: 14px;
font-family: $font-family-secundary;
&:hover { font-style: normal;
color: lighen($black, 10); font-weight: 400;
} line-height: 16px;
text-align: center;
text-transform: uppercase;
} }
} }
@ -25,41 +38,74 @@
margin-bottom: 16px; margin-bottom: 16px;
span { span {
color: #303030; font-family: $font-family-secundary;
font-size: 24px; font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: $black;
} }
small { small {
color: $gray-200; font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: $black;
} }
} }
} }
.client-email { .client-email {
margin: 0 0 16px; width: 57%;
margin: 0 0 47px;
input { input {
width: 83%;
box-shadow: none; box-shadow: none;
color: $black; color: $black;
font-family: $font-family; font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
padding: 0 16px; padding: 0 16px;
border: 2px solid $color-gray3; border: 1px solid $black;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px 0px 0px 5px;
&::placeholder {
color: $black;
}
@media (max-width: 490px) { @media (max-width: 490px) {
width: auto; width: auto;
} }
} }
button { button {
background-color: $black; background-color: $blue;
border-radius: 5px; border-radius: 0px 8px 8px 0px;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
height: 54px; height: 54px;
right: 0; right: 0;
top: 0; top: 0;
color: $black;
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px; height: 48px;
@ -70,17 +116,26 @@
span.help.error { span.help.error {
color: red; color: red;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
} }
} }
.emailInfo { .emailInfo {
padding: 16px; padding: 16px 16px 26px 16px;
background-color: $white; background-color: $white;
border: 1px solid $gray-200; border: 1px solid $black;
border-radius: 0; border-radius: 5px;
h3 { h3 {
color: #303030; color: $black;
margin: 0 0 8px 0; margin: 0 0 8px 0;
} }
@ -90,10 +145,14 @@
li { li {
span { span {
color: $black; color: $black;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 12px;
} }
i::before { i::before {
color: $black; color: $blue;
font-size: 1rem; font-size: 1rem;
opacity: 1; opacity: 1;
} }
@ -106,6 +165,9 @@
opacity: 0.5; opacity: 0.5;
} }
} }
.icon-lock {
bottom: -30px;
}
} }
.shipping-data, .shipping-data,
@ -113,53 +175,112 @@
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 0;
border: 1px solid $gray-200; border: 1px solid $gray-100;
font-family: $font-family; font-family: $font-family;
padding: 16px;
.accordion-heading { .accordion-heading {
span { span {
color: #303030;
margin-bottom: 8px; margin-bottom: 8px;
padding: 0; padding: 0;
color: $black;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
margin-bottom: 15px;
i {
position: absolute;
right: 0;
width: 19.2px;
height: 18px;
cursor: pointer;
}
i::before { i::before {
fill: #303030; background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
background-size: 19.2px 18px;
fill: transparent;
color: transparent;
width: 19.2px;
height: 18px;
cursor: pointer;
}
.icon-user {
display: none;
}
span[data-i18n="clientProfileData.identification"] {
color: $white;
margin: 0;
}
span[data-i18n="clientProfileData.identification"]::before {
content: "Identificação";
color: $black;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
margin: 0 0 0 17px;
}
span[data-i18n="paymentData.payment"]::before {
content: "";
height: 50px;
width: 50px;
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png;");
} }
} }
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: $white; color: $white;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 6px 5px 6px 8px; padding: 20px 15px 6px 8px;
} }
} }
.accordion-inner { .accordion-inner {
padding: 0; margin: 15px 0 0 8px;
/* General configurations */ /* General configurations */
.client-notice { .client-notice {
color: $black; height: 11px;
margin: 0;
color: $white;
} }
p { p {
label { label {
color: $black; color: $gray-600;
font-weight: 500; font-weight: 500;
#opt-in-newsletter {
margin-top: -6px;
}
} }
select, select,
input { input {
border-radius: 0; height: 32px;
border: 1px solid $gray-200; border-radius: 5px;
border: 1px solid $gray-25;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
box-shadow: none; box-shadow: none;
color: $gray-700;
} }
.help.error { .help.error {
@ -168,6 +289,7 @@
} }
.box-client-info-pj { .box-client-info-pj {
display: none;
.link a#is-corporate-client, .link a#is-corporate-client,
.link a#not-corporate-client { .link a#not-corporate-client {
color: $black; color: $black;
@ -181,20 +303,20 @@
} }
button.submit { button.submit {
width: 100%;
border: none; border: none;
border-radius: 5px; border-radius: 8px;
background: $black; background: $blue;
margin-top: 8px; margin-top: 42px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
cursor: pointer;
&:hover { font-family: $font-family;
background: lighten($black, 5); font-style: normal;
} font-weight: 700;
font-size: 14px;
&:active { line-height: 19px;
background: darken($black, 5); text-transform: uppercase;
}
} }
/* Shipping configurations */ /* Shipping configurations */
@ -213,17 +335,17 @@
} }
.shp-lean { .shp-lean {
border: 1px solid $gray-200; border: 1px solid $gray-25;
border-radius: 0; border-radius: 8px;
label { label {
background-color: $white; background-color: $white;
box-shadow: none; box-shadow: none;
color: #303030; color: $gray-800;
padding: 8px 12px; padding: 8px 12px;
svg path { svg path {
fill: #d8c8ac; fill: $blue;
} }
} }
} }
@ -272,16 +394,18 @@
.vtex-omnishipping-1-x-summaryChange { .vtex-omnishipping-1-x-summaryChange {
border-color: #303030; border-color: #303030;
color: #303030; color: $black;
} }
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac; background: $white;
border: 1px solid #d8c8ac; color: $black;
border: 1px solid $gray-500;
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($black, 50); color: $black;
// text-shadow: 1.3px 1px lighten($black, 50);
} }
} }
} }

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

@ -20,10 +20,9 @@
} }
.cart { .cart {
border: 1px solid $gray-100;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 30px 17px 0px 17px;
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
@ -31,19 +30,37 @@
border-right: none; border-right: none;
border-radius: 0; border-radius: 0;
} }
@include mq(dt, max) {
padding: 16px 0 16px 16px;
}
} }
.cart-fixed.affix { .cart-fixed.affix {
position: relative !important; position: relative !important;
height: 397px !important;
} }
.cart-fixed { .cart-fixed {
border: 1px solid $gray-50;
border-radius: 8px;
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
height: 397px !important;
h2 { h2 {
padding: 17px 0 0 24px;
background: $white; background: $white;
border: none; border: none;
color: #303030; color: $gray-500;
font-size: 14px; font-family: $font-family-secundary;
font-weight: 500; font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
text-align: start;
}
span {
display: none;
} }
.item-unavailable { .item-unavailable {
@ -55,9 +72,8 @@
} }
.cart { .cart {
// border: 1px solid $gray-200;
ul li { ul li {
line-break: strict;
border-top: none; border-top: none;
margin-top: 0; margin-top: 0;
padding-top: 0; padding-top: 0;
@ -70,10 +86,10 @@
.shipping-date, .shipping-date,
.price { .price {
color: $black;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: #7d7d7d;
} }
} }
} }
@ -85,14 +101,43 @@
.row-fluid summary { .row-fluid summary {
margin-top: 48px; margin-top: 48px;
} }
.row-fluid summary ::after,
::before {
display: none;
content: none;
}
.row-fluid summary ::before,
::after {
display: none;
content: none;
}
} }
#go-to-cart-button a { #go-to-cart-button a {
color: #303030; width: 100%;
text-decoration: underline; padding-right: 17px;
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: black;
&:hover {
text-decoration: underline !important;
}
} }
.summary-totalizers { .summary-totalizers {
padding: 0 17px;
tr {
border-top: 1px solid $gray-25;
width: 100%;
padding: 25px 0;
}
td.info { td.info {
width: 100%; width: 100%;
} }
@ -113,12 +158,21 @@
} }
.cart-items { .cart-items {
.product-item { white-space: normal !important;
padding: 16px 0; justify-content: center;
align-items: center;
.fn product-name {
line-break: auto;
width: 117px;
white-space: normal;
} }
// .product-item {
// // padding: 16px 0;
// }
th { th {
// text-align: initial;
color: $black; color: $black;
padding: 0 0 16px; padding: 0 0 16px;
font-style: normal; font-style: normal;
@ -156,7 +210,14 @@
} }
.product-name { .product-name {
display: flex;
width: 115px;
line-break: normal;
padding-right: 0; padding-right: 0;
align-items: center;
padding-top: 6%;
white-space: normal !important;
color: $black;
@include mq(lg, max) { @include mq(lg, max) {
width: 250px; width: 250px;
@ -186,7 +247,7 @@
} }
td.shipping-date { td.shipping-date {
color: $gray-150; color: $black;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -207,7 +268,7 @@
} }
span.list-price { span.list-price {
color: $gray-150; color: $black;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
@ -336,7 +397,7 @@
color: $white; color: $white;
.icon-warning-sign { .icon-warning-sign {
color: #bb4f4f; color: #ff0000;
} }
.top-arrow { .top-arrow {
@ -351,7 +412,7 @@
width: max-content; width: max-content;
.srp-container { .srp-container {
padding: 0 0 0 10px; padding: 0 0 0 16px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
@ -485,7 +546,7 @@
border: 1px solid $gray-125; border: 1px solid $gray-125;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray3; color: $black;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
padding: 12px 8px; padding: 12px 8px;
@ -510,13 +571,15 @@
} }
small a { small a {
width: 10%;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;
color: $black; color: $black;
margin-top: 7px; margin-top: 7px;
cursor: pointer;
} }
small:hover { small:hover {
@ -724,8 +787,8 @@
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $gray-500; color: $gray-600;
padding: 12px 0; padding: 25px 0;
} }
&.info { &.info {

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

@ -16,7 +16,7 @@ footer .footerCheckout__wrapper {
margin: auto auto 0 auto; margin: auto auto 0 auto;
} }
footer .footerCheckout__prateleira { footer .footerCheckout__prateleira {
width: 100%; width: 97.5%;
margin: 0 auto 56px; margin: 0 auto 56px;
@include mq(dt, min) { @include mq(dt, min) {
@ -65,8 +65,12 @@ body {
} }
.container-order-form, .container-order-form,
.container-cart { .container-cart {
width: 100%;
@include mq(dt, min) {
width: 80%; width: 80%;
} }
}
} }
.btn-success { .btn-success {
@ -85,18 +89,22 @@ body {
#cart-title, #cart-title,
#orderform-title { #orderform-title {
font-family: $font-family; font-family: $font-family;
color: $gray-500; color: $black;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
line-height: 33px; line-height: 33px;
margin: 40px 0 30px; margin: 17px 0 17px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;
} }
@include mq(dt, max) {
margin-left: 16px;
}
} }
.dropdown { .dropdown {

4
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -130,11 +130,11 @@
align-items: center; align-items: center;
@media (min-width: 1025px) { @media (min-width: 1025px) {
width: 14%; width: 15.5%;
} }
@media (min-width: 2500px) { @media (min-width: 2500px) {
width: 19%; width: 20%;
} }
span { span {

20
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -21,12 +21,18 @@ footer .footerCheckout__prateleira {
width: 95.28% !important; width: 95.28% !important;
margin: 0; margin: 0;
@include mq(dt, max) {
width: 97% !important;
margin: 0 7.5px;
}
.img-container { .img-container {
margin: 0; margin: 0;
background: #ededed; background: #ededed;
} }
.itemtName { .itemtName {
height: 36px;
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -38,7 +44,7 @@ footer .footerCheckout__prateleira {
.itemSku { .itemSku {
display: flex; display: flex;
gap: 10px; gap: 5px;
list-style: none; list-style: none;
margin-bottom: 20px; margin-bottom: 20px;
@ -66,18 +72,26 @@ footer .footerCheckout__prateleira {
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 center; no-repeat center center;
z-index: 4; z-index: 4;
left: 22px;
top: 41%; top: 41%;
left: 14px;
border: none; border: none;
height: 30px; height: 30px;
@include mq(dt, min) {
left: 10px;
}
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
no-repeat center center; no-repeat center center;
z-index: 4; z-index: 4;
right: 20px;
top: 41%; top: 41%;
right: 9px;
border: none; border: none;
height: 30px; height: 30px;
@include mq(dt, min) {
right: 20px;
}
} }
} }

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

@ -10,12 +10,15 @@ $black: #000;
$white: #fff; $white: #fff;
$gray-50: #e5e5e5; $gray-50: #e5e5e5;
$gray-25: #e0e0e0;
$gray-100: #f0f0f0; $gray-100: #f0f0f0;
$gray-125: #c4c4c4; $gray-125: #c4c4c4;
$gray-150: #989898; $gray-150: #989898;
$gray-200: #8d8d8d; $gray-200: #8d8d8d;
$gray-500: #292929; $gray-500: #292929;
$gray-600: #7d7d7d; $gray-600: #7d7d7d;
$gray-700: #bdbdbd;
$gray-800: #828282;
$blue: #00c8ff; $blue: #00c8ff;