forked from M3-Academy/m3-academy-template-checkout
development #2
@ -1,3 +1,4 @@
|
||||
import { timers } from "jquery";
|
||||
import { waitElement } from "m3-utils";
|
||||
|
||||
export default class Footer {
|
||||
@ -7,42 +8,85 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.replaceEmptyCartContent();
|
||||
this.renderPrateleira();
|
||||
this.stampsHTML();
|
||||
this.developedByHTML();
|
||||
this.onUpdate();
|
||||
await this.stampsHTML();
|
||||
await this.developedByHTML();
|
||||
await this.replaceEmptyCartContent();
|
||||
await this.renderPrateleira();
|
||||
await this.onUpdate();
|
||||
await this.replaceCartContent();
|
||||
await this.replaceSummaryContent();
|
||||
// await this.replaceProfileContent();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
console.log("iniciando selectors()")
|
||||
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
|
||||
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
|
||||
this.cartTitle = await waitElement("#cart-title");
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
this.emptyCartTitle = await waitElement(".empty-cart-title");
|
||||
this.continueShopping = await waitElement("#cart-choose-products");
|
||||
|
||||
this.cart = await waitElement(".cart");
|
||||
this.cartTitle = await waitElement("#cart-title");
|
||||
this.frete = await waitElement(".shipping-date");
|
||||
this.unidade = await waitElement(".product-price");
|
||||
this.iconMinus = await waitElement(".icon-minus-sign");
|
||||
this.iconPlus = await waitElement(".icon-plus-sign");
|
||||
|
||||
|
||||
this.prateleira = await waitElement(".footerCheckout__prateleira");
|
||||
this.naoSeiMeuCep = await waitElement(".ship-postalCode");
|
||||
|
||||
// this.prateleiraSlick = await waitElement(".prateleira__carousel")
|
||||
}
|
||||
|
||||
replaceEmptyCartContent() {
|
||||
async replaceEmptyCartContent() {
|
||||
if (this.checkoutVazio) {
|
||||
console.log("entrou no if do replaceContent()")
|
||||
console.log("entrou no if do replaceEmptyCart()")
|
||||
this.emptyCartTitle.textContent = "Seu Carrinho está vazio";
|
||||
console.log(this.emptyCartTitle)
|
||||
this.continueShopping.textContent = "Continuar comprando";
|
||||
this.frete.textContent = "Frete";
|
||||
this.unidade.textContent = "Unidade";
|
||||
this.naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal";
|
||||
|
||||
console.log(this.continueShopping)
|
||||
}
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
async replaceCartContent() {
|
||||
console.log("entrou no replaceCart")
|
||||
|
||||
if(this.cart) {
|
||||
console.log("entrou no if do replaceCart()")
|
||||
console.log(this.cart)
|
||||
this.frete.textContent = "Frete";
|
||||
console.log(this.frete)
|
||||
this.unidade.textContent = "Unidade";
|
||||
console.log(this.unidade)
|
||||
}
|
||||
}
|
||||
|
||||
async replaceSummaryContent() {
|
||||
console.log("entrou no replaceSummary()")
|
||||
|
||||
const naoSeiMeuCep = await waitElement(".ship-postalCode");
|
||||
|
||||
if(naoSeiMeuCep) {
|
||||
console.log("entrou no if naoSeiMeuCep")
|
||||
naoSeiMeuCep.children[2].children[0].textContent = "Não sei meu código postal";
|
||||
console.log(naoSeiMeuCep)
|
||||
}
|
||||
}
|
||||
|
||||
// async replaceProfileContent() {
|
||||
// if(this.identificacao) {
|
||||
|
||||
// }
|
||||
// const identificacao = await waitElement(".accordion-heading");
|
||||
// if(identificacao) {
|
||||
// console.log("entrou no if identificacao")
|
||||
|
||||
// identificacao.children[0].children[1].textContent = "Identificação";
|
||||
// console.log(identificacao)
|
||||
// }
|
||||
// }
|
||||
|
||||
async onUpdate() {
|
||||
console.log("chamada do onUpdate()")
|
||||
//Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
|
||||
// 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
|
||||
@ -53,19 +97,18 @@ export default class Footer {
|
||||
let config = { attributes: true };
|
||||
|
||||
// this.cartTitle.style.display = "none";
|
||||
// this.prateleira.style.display = "none";
|
||||
this.prateleira.style.display = "none";
|
||||
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(() => {
|
||||
|
||||
if(this.checkoutVazio.style.display == "block") {
|
||||
console.log("Carrinho está vazio")
|
||||
console.log("Carrinho está vazio ou não está no #/cart")
|
||||
this.cartTitle.style.display = "none";
|
||||
this.prateleira.style.display = "none";
|
||||
|
||||
} else {
|
||||
|
||||
console.log("Carrinho NÃO está vazio");
|
||||
console.log("Carrinho NÃO está vazio e está no #/cart");
|
||||
this.cartTitle.style.display = "block";
|
||||
this.prateleira.style.display = "block";
|
||||
}
|
||||
@ -73,12 +116,22 @@ export default class Footer {
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
|
||||
window.addEventListener("hashchange", () => {
|
||||
|
||||
if (window.location.hash == "#/cart") {
|
||||
this.prateleira.style.display = "block";
|
||||
} else {
|
||||
this.cartTitle.style.display = "block";
|
||||
this.prateleira.style.display = "none";
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async renderPrateleira() {
|
||||
|
||||
if (this.prateleira) {
|
||||
if (this.prateleira && window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
|
||||
|
||||
const prateleiraTitle = document.createElement("h2");
|
||||
const titleNode = document.createTextNode("Você também pode gostar:");
|
||||
@ -159,6 +212,8 @@ export default class Footer {
|
||||
}
|
||||
|
||||
async stampsHTML() {
|
||||
console.log("entrou no stamps")
|
||||
|
||||
const stamps = await waitElement('.footerCheckout__stamps');
|
||||
|
||||
// console.log(stamps.children[0], stamps.children[2]);
|
||||
@ -204,6 +259,8 @@ export default class Footer {
|
||||
}
|
||||
|
||||
async developedByHTML() {
|
||||
console.log("entrou no developedBy")
|
||||
|
||||
const developedBy = await waitElement('.footerCheckout__developedBy');
|
||||
|
||||
// console.log(developedBy.children[0].children[0]);
|
||||
|
||||
@ -182,16 +182,4 @@ export default class Header {
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// async progressBarMove() {
|
||||
// if (this.progressBar && window.innerWidth > 1024) {
|
||||
// const progressBarList = document.querySelectorAll(("#progressBar ul li"));
|
||||
// progressBarList.forEach((li) => {
|
||||
// console.log("Aqui vem seu código")
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -10,14 +10,21 @@
|
||||
|
||||
|
||||
.client-pre-email {
|
||||
border-color: $color-gray4;
|
||||
border: none;
|
||||
// border-color: $color-gray4;
|
||||
font-family: $font-family;
|
||||
padding-top: 8px;
|
||||
|
||||
.link-cart {
|
||||
a {
|
||||
color: $black-300;
|
||||
font-size: 14px;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: #000000;
|
||||
|
||||
&:hover {
|
||||
color: lighen($black-300, 10);
|
||||
@ -34,28 +41,43 @@
|
||||
h3 {
|
||||
margin-bottom: 16px;
|
||||
|
||||
span {
|
||||
color: #303030;
|
||||
font-size: 24px;
|
||||
span, small {
|
||||
line-height: 23px;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
small {
|
||||
color: $color-gray4;
|
||||
}
|
||||
// small {
|
||||
// color: $color-gray4;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.client-email {
|
||||
margin: 0 0 16px;
|
||||
margin: 0 0 24px;
|
||||
|
||||
input {
|
||||
box-shadow: none;
|
||||
color: $black-300;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
|
||||
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
color: $black-500;
|
||||
|
||||
box-shadow: none;
|
||||
padding: 0 16px;
|
||||
border: 2px solid $color-gray3;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
width: auto;
|
||||
@ -63,11 +85,23 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $black-300;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
height: 52px;
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
line-height: 19px;
|
||||
font-family: $font-family;
|
||||
height: 54px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: $black-500;
|
||||
background: $blue-300;
|
||||
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
@ -79,19 +113,36 @@
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
color: red;
|
||||
margin-top: 3px;
|
||||
line-height: 16px;
|
||||
font-family: $font-family;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
color: $red-300;
|
||||
}
|
||||
}
|
||||
|
||||
.emailInfo {
|
||||
padding: 16px;
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
padding: 16px 16px 24px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray4;
|
||||
border-radius: 0;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 5px;
|
||||
|
||||
h3 {
|
||||
color: #303030;
|
||||
margin: 0 0 8px 0;
|
||||
margin: 0 0 9px;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
||||
color: #000000;
|
||||
|
||||
// margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -99,11 +150,18 @@
|
||||
|
||||
li {
|
||||
span {
|
||||
color: $black-300;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
align-items: center;
|
||||
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: $black-300;
|
||||
color: $blue-300;
|
||||
font-size: 1rem;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -122,20 +180,48 @@
|
||||
.payment-data,
|
||||
.client-profile-data {
|
||||
.accordion-group {
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray4;
|
||||
border: 1px solid #F0F0F0;
|
||||
border-radius: 8px;
|
||||
|
||||
font-family: $font-family;
|
||||
padding: 16px;
|
||||
padding: 28px 17px;
|
||||
|
||||
.accordion-heading {
|
||||
span {
|
||||
color: #303030;
|
||||
margin-bottom: 8px;
|
||||
font-family: 'Tenor Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #292929;
|
||||
|
||||
margin-bottom: 15px;
|
||||
padding: 0;
|
||||
|
||||
i::before {
|
||||
fill: #303030;
|
||||
}
|
||||
i::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-user {
|
||||
~ span {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "Identificação";
|
||||
|
||||
line-height: 19px;
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: $black-300;
|
||||
|
||||
letter-spacing: 0.05em;
|
||||
text-shadow: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@ -147,28 +233,47 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 6px 5px 6px 8px;
|
||||
|
||||
// &::after {
|
||||
// content: "";
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-inner {
|
||||
padding: 0;
|
||||
|
||||
.box-client-info {
|
||||
margin-bottom: 44px;
|
||||
padding-top: 11px;
|
||||
}
|
||||
|
||||
/* General configurations */
|
||||
|
||||
.client-notice {
|
||||
color: $black-300;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 16px;
|
||||
|
||||
label {
|
||||
color: $black-300;
|
||||
font-weight: 500;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray4;
|
||||
padding: 12px;
|
||||
border: 1px solid #E0E0E0;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -178,6 +283,8 @@
|
||||
}
|
||||
|
||||
.box-client-info-pj {
|
||||
display: none;
|
||||
|
||||
.link a#is-corporate-client,
|
||||
.link a#not-corporate-client {
|
||||
color: $black-300;
|
||||
@ -191,19 +298,32 @@
|
||||
}
|
||||
|
||||
button.submit {
|
||||
width: 100%;
|
||||
background: #00C8FF;
|
||||
border-radius: 8px;
|
||||
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: #FFFFFF;
|
||||
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: $black-300;
|
||||
margin-top: 8px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
&:hover {
|
||||
background: lighten($black-300, 5);
|
||||
background: lighten($blue-300, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken($black-300, 5);
|
||||
background: darken($blue-300, 5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -51,14 +51,23 @@
|
||||
}
|
||||
|
||||
.cart-fixed {
|
||||
// border: 1px solid #E5E5E5;
|
||||
border-radius: 8px;
|
||||
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 34px;
|
||||
padding: 0;
|
||||
font-family: 'Tenor Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #292929;
|
||||
text-align: left;
|
||||
background: $color-white;
|
||||
border: none;
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.item-unavailable {
|
||||
@ -83,10 +92,41 @@
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transform: translateX(-1);
|
||||
}
|
||||
|
||||
span.badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shipping-date,
|
||||
.price {
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
span.product-name,
|
||||
span.shipping-date {
|
||||
font-family: 'Tenor Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
span.price {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
color: #292929;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -95,11 +135,22 @@
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
#go-to-cart-button a {
|
||||
color: #303030;
|
||||
text-decoration: underline;
|
||||
#go-to-cart-button {
|
||||
margin: 10px 0;
|
||||
|
||||
a {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
text-decoration-line: underline;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.summary-totalizers {
|
||||
td.info {
|
||||
width: 100%;
|
||||
@ -107,12 +158,29 @@
|
||||
}
|
||||
|
||||
#payment-data-submit {
|
||||
background: $black-300;
|
||||
background: #298541;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: $color-white;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
span {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.icon-lock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($black-300, 5);
|
||||
}
|
||||
@ -133,14 +201,14 @@
|
||||
// border-collapse: separate;
|
||||
// border-spacing: 16px;
|
||||
|
||||
.product-item {
|
||||
// height: 60px;
|
||||
// background: green;
|
||||
}
|
||||
// .product-item {
|
||||
// // height: 60px;
|
||||
// // background: green;
|
||||
// }
|
||||
|
||||
thead tr {
|
||||
// background: purple;
|
||||
}
|
||||
// thead tr {
|
||||
// // background: purple;
|
||||
// }
|
||||
|
||||
th {
|
||||
padding: 0;
|
||||
@ -911,6 +979,13 @@
|
||||
}
|
||||
|
||||
.accordion-group {
|
||||
|
||||
table {
|
||||
outline: 1px solid #E5E5E5;
|
||||
// border-radius: 0 0 8px 8px;
|
||||
// border-top: none;
|
||||
}
|
||||
|
||||
tr {
|
||||
padding: 10px 0;
|
||||
line-height: 16px;
|
||||
@ -930,12 +1005,18 @@
|
||||
|
||||
&.info,
|
||||
&.monetary {
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
box-shadow: none;
|
||||
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $black-300;
|
||||
padding: 10px 0;
|
||||
line-height: 19px;
|
||||
text-align: right;
|
||||
color: #7D7D7D;
|
||||
|
||||
padding: 25px 17px;
|
||||
}
|
||||
|
||||
&.info {
|
||||
@ -951,12 +1032,29 @@
|
||||
tfoot {
|
||||
td.info,
|
||||
td.monetary {
|
||||
padding: 30px 17px 22px;
|
||||
|
||||
line-height: 25px;
|
||||
font-family: $font-family;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: $black-300;
|
||||
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
td.info {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
td.monetary {
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,49 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.orderform-template-holder {
|
||||
width: 66.1132%;
|
||||
|
||||
.payment-data {
|
||||
background: red;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-gift-card {
|
||||
a {
|
||||
display: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.payment-group-list-btn {
|
||||
|
||||
// a {
|
||||
// color: yellow;
|
||||
|
||||
// &:nth-child(1),
|
||||
// &:nth-child(2),
|
||||
// &:nth-child(3),
|
||||
// &:nth-child(4),
|
||||
// {
|
||||
// }
|
||||
// }
|
||||
|
||||
a:nth-child(n+1):nth-child(-n+4),
|
||||
a:nth-child(n+6):nth-child(-n+9),
|
||||
a:nth-child(n+11):nth-child(-n+15)
|
||||
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
// a {
|
||||
// display: none;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -130,15 +130,12 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
|
||||
.slick-prev {
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
no-repeat center center;
|
||||
left: 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")
|
||||
no-repeat center center;
|
||||
|
||||
@ -73,9 +73,6 @@
|
||||
button {
|
||||
padding: 5px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
&--name {
|
||||
@ -89,16 +86,7 @@
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
&--options {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
list-style: none;
|
||||
|
||||
button {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&--link {
|
||||
button {
|
||||
@ -116,7 +104,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .slick-track {
|
||||
|
||||
|
||||
@ -17,6 +17,7 @@ $gray-100: #EDEDED;
|
||||
$gray-300: #989898;
|
||||
$blue-300: #00C8FF;
|
||||
$color-gray5: #e5e5e5;
|
||||
$red-300: #FF0000;
|
||||
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user