forked from M3-Academy/m3-academy-template-checkout
feat: Adiciona Css
This commit is contained in:
parent
16d16e3b18
commit
ffd2acf8a1
@ -44,7 +44,7 @@ export default class Footer {
|
||||
this.vtexpci = await waitElement(".footerCheckout__vtexpci");
|
||||
this.devIncons = await waitElement(".footerCheckout__developedBy");
|
||||
this.listaPrateleira = await waitElement(".footerCheckout__prateleira");
|
||||
this.myCart = await waitElement("#cart-title")
|
||||
this.cartTitulo = await waitElement("#cart-title")
|
||||
}
|
||||
async footerCheckoutInnerHTML(){
|
||||
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
|
||||
// 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 lista = this.list;
|
||||
let list = this.listaPrateleira;
|
||||
let cartTitle = this.cartTitulo;
|
||||
let slickTitle = this.titleSlick;
|
||||
if (target.style.display == "none" && window.location.hash == "#/cart") {
|
||||
lista.style.display = "block";
|
||||
list.style.display = "flex";
|
||||
list.style.display = "block";
|
||||
this.fetchApiData();
|
||||
} else {
|
||||
lista.style.display = "none";
|
||||
this.cartTitulo.style.display = "none";
|
||||
list.style.display = "none";
|
||||
}
|
||||
let config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
@ -91,8 +95,15 @@ export default class Footer {
|
||||
}
|
||||
mutations.forEach(function (mutation) {
|
||||
if (target.style.display != "none") {
|
||||
lista.style.display = "none";
|
||||
} else lista.style.display = "block";
|
||||
list.style.display = "none";
|
||||
cartTitle.style.display == "none";
|
||||
if (list.style.display == "none"){
|
||||
slickTitle.style.display = "none";
|
||||
}
|
||||
} else {
|
||||
cartTitle.style.display = "block";
|
||||
list.style.display = "block";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -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 {
|
||||
.client-pre-email {
|
||||
border-color: $color-gray4;
|
||||
@ -107,10 +129,21 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-data{
|
||||
.accordion-group{
|
||||
@media (max-width: 1024px){
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shipping-data,
|
||||
.payment-data,
|
||||
.client-profile-data {
|
||||
@media (max-width: 1024px){
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.accordion-group {
|
||||
border-radius: 8;
|
||||
border: 1px solid #E0E0E0;
|
||||
@ -292,7 +325,20 @@
|
||||
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-package {
|
||||
color: $color-gray4;
|
||||
@ -346,6 +392,13 @@
|
||||
display: none;
|
||||
}
|
||||
.vtex-omnishipping-1-x-address{
|
||||
.ship-street{
|
||||
display: none;
|
||||
}
|
||||
div{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.text{
|
||||
#ship-number{
|
||||
width: 100%;
|
||||
@ -354,10 +407,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
div{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.vtex-omnishipping-1-x-addressFormPart1, input{
|
||||
max-width: none;
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
|
||||
font-family: $font-family;
|
||||
@include mq(md, max) {
|
||||
padding: 0 0;
|
||||
@ -28,6 +27,9 @@
|
||||
}
|
||||
.cart-fixed.affix {
|
||||
position: relative !important;
|
||||
@media (max-width: 1024px){
|
||||
margin-bottom: 101px;
|
||||
}
|
||||
}
|
||||
.cart-fixed {
|
||||
font-family: $font-family;
|
||||
@ -384,11 +386,7 @@
|
||||
width: max-content;
|
||||
|
||||
.srp-container {
|
||||
padding: 0 0 0 10px;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.srp-main-title {
|
||||
margin: 32px 0 12px;
|
||||
@ -663,10 +661,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.coupon-column {
|
||||
.coupon {
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
body .container-main.container-order-form .orderform-template.active {
|
||||
@media (max-width: 1024px){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.mini-cart {
|
||||
width: 32.3242%;
|
||||
margin-left: unset;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
@media (max-width: 1024px){
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.orderform-template-holder {
|
||||
width: 66.1132%;
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
margin-top: 170px;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
@ -35,7 +36,6 @@
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@ -28,10 +28,10 @@ footer .footerCheckout__wrapper {
|
||||
line-height: 38px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
width: 79.53125%;
|
||||
margin: 0 auto;
|
||||
.itemList{
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
@ -81,7 +81,7 @@ footer .footerCheckout__wrapper {
|
||||
}
|
||||
.productLink{
|
||||
height: 42px;
|
||||
width: 242px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -95,6 +95,7 @@ footer .footerCheckout__wrapper {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0 5px;
|
||||
text-transform: uppercase;
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
@ -145,7 +146,6 @@ body {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: $color-black;
|
||||
text-shadow: none;
|
||||
@ -154,11 +154,13 @@ body {
|
||||
background: lighten($color-black, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.emailInfo{
|
||||
border: 1px solid #000000;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.emailInfo h3 {
|
||||
color: $color-black !important;
|
||||
}
|
||||
|
||||
#cart-title,
|
||||
#orderform-title {
|
||||
color: #292929;
|
||||
|
||||
@ -1,7 +1,14 @@
|
||||
/* _footer.scss */
|
||||
.footerCheckout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border-top: none;
|
||||
color: $color-gray2;
|
||||
@media (max-width: 550px){
|
||||
align-items: normal;
|
||||
}
|
||||
.footerCheckout__wrapper{
|
||||
border-top: 1px solid black;
|
||||
margin: 0px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user