GuilhermeDeCamargoBarbosa/m3-academy-template-checkout-guilherme-de-camargo-barbosa
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: estilizacao da página de autenticacao

Browse Source
This commit is contained in:
Guilherme de Camargo Barbosa 2022-12-17 18:23:22 -03:00
parent 045de99933
commit c2574c7096
4 changed files with 129 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,13 +6,14 @@ export default class Footer {
} }
async init() { async init() {
await this.getProducts(this.createShelf)
await this.selectors(); await this.selectors();
this.getProducts(this.createShelf)
this.hideElementscart() this.hideElementscart()
this.changeTextBtnChooseProducts() this.changeTextBtnChooseProducts()
this.addCarrossel()
this.setImagesFooter() this.setImagesFooter()
this.onUpdate(); this.onUpdate();
this.addCarrossel() this.vericationStateToSetSlick()
} }
async selectors() { async selectors() {
@ -22,6 +23,8 @@ export default class Footer {
this.titleCart = await waitElement("#cart-title"); this.titleCart = await waitElement("#cart-title");
this.btnChooseProducts = await waitElement("#cart-choose-products"); this.btnChooseProducts = await waitElement("#cart-choose-products");
this.footer = await waitElement(".footerCheckout"); this.footer = await waitElement(".footerCheckout");
this.footerPrateleira = await waitElement(".footerCheckout__prateleira__container-Slick");
this.textPraleteira = await waitElement(".footerCheckout__prateleira__textYouLike");
this.footerStamps = await waitElement(".footerCheckout__stamps"); this.footerStamps = await waitElement(".footerCheckout__stamps");
this.footerDevelopment = await waitElement(".footerCheckout__developedBy"); this.footerDevelopment = await waitElement(".footerCheckout__developedBy");
} }
@ -32,13 +35,31 @@ export default class Footer {
// sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
let target = this.checkoutVazio; let target = this.checkoutVazio;
let title = this.titleCart let title = this.titleCart
let textPrateleira = this.textPraleteira
let prateleira = this.footerPrateleira
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
if(target.style.display == "block") {
prateleira.style.display = "none"
textPrateleira.style.display = "none"
} else {
textPrateleira.style.display = "flex"
prateleira.style.display = "block"
}
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
if(mutation.target.style.display == "block") { if(mutation.target.style.display == "block") {
title.style.display = "none"; title.style.display = "none";
prateleira.style.display = "none"
textPrateleira.style.display = "none"
} else { } else {
title.style.display = "block"; title.style.display = "block";
textPrateleira.style.display = "flex"
prateleira.style.display = "block"
$('.footerCheckout__prateleira__container-Slick').slick('unslick');
$(".footerCheckout__prateleira__container-Slick").slick({
slidesToShow: 4,
slidesToScroll: 1,
});
} }
//console.log(mutation.target.style.display); //console.log(mutation.target.style.display);
}); });
@ -180,4 +201,26 @@ export default class Footer {
containerSlick.append(cardProduct) containerSlick.append(cardProduct)
}) })
} }
vericationStateToSetSlick() {
const prateleira = document.querySelector('.footerCheckout__prateleira__container-Slick')
const textPrateleira = document.querySelector('.footerCheckout__prateleira__textYouLike')
const urlCart = "https://m3academy.myvtex.com/checkout/#/cart"
console.log(prateleira)
if (window.location.href != urlCart) {
textPrateleira.style.display = "none"
prateleira.style.display = "none"
}
window.addEventListener("hashchange", () => {
if (window.location.hash != "#/cart") {
textPrateleira.style.display = "none"
prateleira.style.display = "none"
} else {
textPrateleira.style.display = "flex"
prateleira.style.display = "block"
}
})
}
} }

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

@ -1,6 +1,6 @@
.checkout-container { .checkout-container {
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-top: 1px solid $color-black;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 8px;
@ -8,6 +8,8 @@
a { a {
color: $color-black; color: $color-black;
font-size: 14px; font-size: 14px;
font-family: $font-family-secundary;
text-transform: uppercase;
&:hover { &:hover {
color: lighen($color-black, 10); color: lighen($color-black, 10);
@ -25,12 +27,19 @@
margin-bottom: 16px; margin-bottom: 16px;
span { span {
color: #303030; font-family: $font-family-secundary;
font-size: 24px; text-transform: uppercase;
color: $color-black;
font-weight: 400;
font-size: 1.25rem;
} }
small { small {
color: $color-gray4; font-family: $font-family-secundary;
text-transform: uppercase;
color: $color-black;
font-weight: 400;
font-size: 1.25rem;
} }
} }
} }
@ -43,7 +52,7 @@
color: $color-black; color: $color-black;
font-family: $font-family; font-family: $font-family;
padding: 0 16px; padding: 0 16px;
border: 2px solid $color-gray3; border: 1px solid $color-black;
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
@ -53,13 +62,16 @@
} }
button { button {
background-color: $color-black; background-color: $color-blue2;
border-radius: 5px; border-radius: 5px;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
height: 54px; height: 54px;
right: 0; right: 0;
top: 0; top: 0;
color: $color-black;
text-transform: uppercase;
font-weight: 700;
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px; height: 48px;
@ -76,7 +88,7 @@
.emailInfo { .emailInfo {
padding: 16px; padding: 16px;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray4; border: 1px solid $color-black;
border-radius: 0; border-radius: 0;
h3 { h3 {
@ -113,7 +125,7 @@
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
border-radius: 0; border-radius: 0;
border: 1px solid $color-gray4; //border: 1px solid $color-gray4;
font-family: $font-family; font-family: $font-family;
padding: 16px; padding: 16px;
@ -213,7 +225,7 @@
} }
.shp-lean { .shp-lean {
border: 1px solid $color-gray4; //border: 1px solid $color-gray4;
border-radius: 0; border-radius: 0;
label { label {
@ -277,7 +289,7 @@
.vtex-omnishipping-1-x-deliveryChannelsToggle { .vtex-omnishipping-1-x-deliveryChannelsToggle {
background-color: #d8c8ac; background-color: #d8c8ac;
border: 1px solid #d8c8ac; //border: 1px solid #d8c8ac;
} }
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {

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

@ -375,11 +375,12 @@
.srp-main-title { .srp-main-title {
margin: 32px 0 12px; margin: 32px 0 12px;
font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
color: $color-gray2; color: $color-black;
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
@ -414,6 +415,10 @@
background-color: darken($color-gray5, 5); background-color: darken($color-gray5, 5);
} }
} }
.input.ship-country.text {
display: none;
}
} }
.srp-data { .srp-data {
@ -428,21 +433,23 @@
} }
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $color-black; background-color: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 0.5rem;
color: $color-white; color: $color-white;
outline: none; outline: none;
width: 100%; width: 100%;
font-family: $font-family-secundary;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
padding: 0.75rem 0;
&:hover { &:hover {
background-color: lighten($color-black, 5); opacity: 0.8;
} }
&:active { &:active {
@ -452,7 +459,7 @@
} }
.srp-toggle { .srp-toggle {
margin: 0 0 34px; margin: 0 0 1.25rem;
&__wrapper { &__wrapper {
background-color: $color-white; background-color: $color-white;
@ -467,12 +474,12 @@
} }
&__current { &__current {
border: 1px solid $color-blue; border: 1px solid $color-black;
border-radius: 100px; border-radius: 100px;
} }
.blue { .blue {
color: $color-blue; color: $color-black;
} }
label { label {
@ -497,7 +504,7 @@
} }
input { input {
border: 1px solid $color-gray3; border: 1px solid $color-gray6;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray3; color: $color-gray3;
@ -508,7 +515,7 @@
} }
& ~ button { & ~ button {
background-color: $color-black; background-color: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
color: $color-white; color: $color-white;
@ -524,7 +531,7 @@
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
background-color: lighten($color-black, 5); opacity: 0.8;
} }
&:active { &:active {
@ -533,12 +540,12 @@
} }
small a { small a {
font-family: $font-family; font-family: $font-family-secundary;
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: $color-blue; color: $color-black;
margin-top: 7px; margin-top: 7px;
} }
@ -655,6 +662,9 @@
text-decoration: underline; text-decoration: underline;
} }
.coupon-label {
display: flex;
.coupon-label label { .coupon-label label {
margin-bottom: 12px; margin-bottom: 12px;
font-family: $font-family; font-family: $font-family;
@ -665,11 +675,26 @@
color: $color-gray2; color: $color-gray2;
cursor: none; cursor: none;
} }
}
.coupon-fields { .coupon-fields {
margin-bottom: 32px; margin-bottom: 32px;
@include mq(sm, max) { span {
display: flex;
gap: 0.948rem;
i {
position: absolute;
right: 91px;
opacity: 1;
}
}
/* @include mq(sm, max) {
span { span {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -680,7 +705,7 @@
opacity: 1; opacity: 1;
} }
} }
} } */
input { input {
border: 2px solid $color-gray3; border: 2px solid $color-gray3;
@ -688,9 +713,10 @@
box-shadow: none; box-shadow: none;
color: $color-gray4; color: $color-gray4;
font-size: 12px; font-size: 12px;
height: 34px; height: 36px;
padding: 0 12px; padding: 0 12px;
max-width: 160px; //max-width: 160px;
flex: 2;
@include mq(sm, max) { @include mq(sm, max) {
max-width: 100%; max-width: 100%;
@ -699,22 +725,23 @@
} }
button { button {
background: $color-black; background: $color-blue2;
border: none; border: none;
border-radius: 5px; border-radius: 0.5rem;
color: $color-white; color: $color-black;
font-size: 12px; font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px; letter-spacing: 1px;
margin-left: 6px; margin-left: 6px;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 94px; //width: 94px;
flex: 1;
text-transform: uppercase; text-transform: uppercase;
@include mq(md, max) { /* @include mq(md, max) {
width: 138px; width: 138px;
} } */
&:hover { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-black, 5);

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

@ -14,6 +14,7 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0; $color-gray3: #f0f0f0;
$color-gray4: #8d8d8d; $color-gray4: #8d8d8d;
$color-gray5: #e5e5e5; $color-gray5: #e5e5e5;
$color-gray6: #c4c4c4;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-blue2: #00C8FF; $color-blue2: #00C8FF;