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

feat: Adiciona Css

Browse Source
This commit is contained in:
SamuelCondack 2022-12-16 20:19:52 -03:00
parent 16d16e3b18
commit ffd2acf8a1
7 changed files with 98 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,7 @@ export default class Footer {
this.vtexpci = await waitElement(".footerCheckout__vtexpci"); this.vtexpci = await waitElement(".footerCheckout__vtexpci");
this.devIncons = await waitElement(".footerCheckout__developedBy"); this.devIncons = await waitElement(".footerCheckout__developedBy");
this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); this.listaPrateleira = await waitElement(".footerCheckout__prateleira");
this.myCart = await waitElement("#cart-title") this.cartTitulo = await waitElement("#cart-title")
} }
async footerCheckoutInnerHTML(){ async footerCheckoutInnerHTML(){
this.footerCheckout.innerHTML = ` this.footerCheckout.innerHTML = `
@ -77,12 +77,16 @@ export default class Footer {
// vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
// 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 lista = this.list; let list = this.listaPrateleira;
let cartTitle = this.cartTitulo;
let slickTitle = this.titleSlick;
if (target.style.display == "none" && window.location.hash == "#/cart") { if (target.style.display == "none" && window.location.hash == "#/cart") {
lista.style.display = "block"; list.style.display = "flex";
list.style.display = "block";
this.fetchApiData(); this.fetchApiData();
} else { } else {
lista.style.display = "none"; this.cartTitulo.style.display = "none";
list.style.display = "none";
} }
let config = { childList: true, attributes: true }; let config = { childList: true, attributes: true };
let observer = new MutationObserver((mutations) => { let observer = new MutationObserver((mutations) => {
@ -91,8 +95,15 @@ export default class Footer {
} }
mutations.forEach(function (mutation) { mutations.forEach(function (mutation) {
if (target.style.display != "none") { if (target.style.display != "none") {
lista.style.display = "none"; list.style.display = "none";
} else lista.style.display = "block"; cartTitle.style.display == "none";
if (list.style.display == "none"){
slickTitle.style.display = "none";
}
} else {
cartTitle.style.display = "block";
list.style.display = "block";
}
}); });
}); });

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

@ -1,3 +1,25 @@
.client-pre-email-h{
.client-pre-email, span, small{
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: #000000;
}
small{
font-family: 'Tenor Sans';
font-style: normal;
font-weight: 400 !important;
font-size: 20px !important;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: #000000 !important;
}
}
.checkout-container { .checkout-container {
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-color: $color-gray4;
@ -107,10 +129,21 @@
} }
} }
} }
.payment-data{
.accordion-group{
@media (max-width: 1024px){
width: 100%;
}
}
}
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
@media (max-width: 1024px){
width: 100%;
margin: 0;
margin-top: 12px;
}
.accordion-group { .accordion-group {
border-radius: 8; border-radius: 8;
border: 1px solid #E0E0E0; border: 1px solid #E0E0E0;
@ -292,7 +325,20 @@
text-decoration: underline; text-decoration: underline;
} }
} }
.ship-complement{
input{
padding-right: 0px !important;
height: 35px;
width: 100%;
}
}
.ship-receiverName{
input{
padding-right: 0px !important;
height: 35px;
width: 100%;
}
}
.shp-summary-group-price, .shp-summary-group-price,
.shp-summary-package { .shp-summary-package {
color: $color-gray4; color: $color-gray4;
@ -346,6 +392,13 @@
display: none; display: none;
} }
.vtex-omnishipping-1-x-address{ .vtex-omnishipping-1-x-address{
.ship-street{
display: none;
}
div{
display: flex;
flex-direction: column;
}
.text{ .text{
#ship-number{ #ship-number{
width: 100%; width: 100%;
@ -354,10 +407,6 @@
} }
} }
} }
div{
display: flex;
flex-direction: column;
}
} }
.vtex-omnishipping-1-x-addressFormPart1, input{ .vtex-omnishipping-1-x-addressFormPart1, input{
max-width: none; max-width: none;

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

@ -5,7 +5,6 @@
} }
.cart-template { .cart-template {
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { @include mq(md, max) {
padding: 0 0; padding: 0 0;
@ -28,6 +27,9 @@
} }
.cart-fixed.affix { .cart-fixed.affix {
position: relative !important; position: relative !important;
@media (max-width: 1024px){
margin-bottom: 101px;
}
} }
.cart-fixed { .cart-fixed {
font-family: $font-family; font-family: $font-family;
@ -384,11 +386,7 @@
width: max-content; width: max-content;
.srp-container { .srp-container {
padding: 0 0 0 10px;
@include mq(md, max) {
padding: 0 16px;
}
.srp-main-title { .srp-main-title {
margin: 32px 0 12px; margin: 32px 0 12px;
@ -663,10 +661,6 @@
} }
} }
@include mq(md, max) {
padding: 0 16px;
width: 100%;
}
.coupon-column { .coupon-column {
.coupon { .coupon {

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

@ -1,9 +1,17 @@
body .container-main.container-order-form .orderform-template.active { body .container-main.container-order-form .orderform-template.active {
@media (max-width: 1024px){
display: flex;
flex-direction: column;
}
.mini-cart { .mini-cart {
width: 32.3242%; width: 32.3242%;
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
@media (max-width: 1024px){
margin-top: 10px;
width: 100%;
}
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;

2
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -12,6 +12,7 @@
} }
} }
&-title { &-title {
margin-top: 170px;
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
@ -35,7 +36,6 @@
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
background: none; background: none;
} }

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

@ -28,10 +28,10 @@ footer .footerCheckout__wrapper {
line-height: 38px; line-height: 38px;
color: #000000; color: #000000;
text-align: center; text-align: center;
padding-left: 50px;
} }
width: 79.53125%; width: 79.53125%;
margin: 0 auto;
.itemList{ .itemList{
display: flex !important; display: flex !important;
align-items: center; align-items: center;
@ -81,7 +81,7 @@ footer .footerCheckout__wrapper {
} }
.productLink{ .productLink{
height: 42px; height: 42px;
width: 242px; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -95,6 +95,7 @@ footer .footerCheckout__wrapper {
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
letter-spacing: 0.05em; letter-spacing: 0.05em;
padding: 0 5px;
text-transform: uppercase; text-transform: uppercase;
&:hover{ &:hover{
text-decoration: none; text-decoration: none;
@ -145,7 +146,6 @@ body {
width: 80%; width: 80%;
} }
} }
.btn-success { .btn-success {
background: $color-black; background: $color-black;
text-shadow: none; text-shadow: none;
@ -154,11 +154,13 @@ body {
background: lighten($color-black, 15%); background: lighten($color-black, 15%);
} }
} }
.emailInfo{
border: 1px solid #000000;
border-radius: 5px;
}
.emailInfo h3 { .emailInfo h3 {
color: $color-black !important; color: $color-black !important;
} }
#cart-title, #cart-title,
#orderform-title { #orderform-title {
color: #292929; color: #292929;

7
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -1,7 +1,14 @@
/* _footer.scss */ /* _footer.scss */
.footerCheckout { .footerCheckout {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-top: none; border-top: none;
color: $color-gray2; color: $color-gray2;
@media (max-width: 550px){
align-items: normal;
}
.footerCheckout__wrapper{ .footerCheckout__wrapper{
border-top: 1px solid black; border-top: 1px solid black;
margin: 0px; margin: 0px;