forked from M3-Academy/m3-academy-template-checkout
feat: cria o estilo para as paginas restantes na versao desktop
This commit is contained in:
parent
be05de66b8
commit
3f081a8946
@ -7,38 +7,56 @@ export default class Footer {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.catalogoApi();
|
||||
await this.catalogoApi();
|
||||
this.footerBanner();
|
||||
this.footerDev();
|
||||
// this.onUpdate();
|
||||
this.onUpdate();
|
||||
}
|
||||
|
||||
async 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.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
this.footerPrateleira = document.querySelector(".footerCheckout__prateleira");
|
||||
this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
|
||||
this.checkoutPagamento = await waitElement(".cart-template");
|
||||
this.footerLogo = document.querySelector(".footerCheckout__stamps");
|
||||
this.paymentText = document.querySelector(".notification");
|
||||
this.footerDeveloped = document.querySelector(".footerCheckout__developedBy");
|
||||
}
|
||||
|
||||
footerBanner() {
|
||||
this.footerLogo.innerHTML = `
|
||||
<li>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png">
|
||||
this.paymentText.innerHTML = `
|
||||
Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados
|
||||
`;
|
||||
|
||||
this.footerLogo.innerHTML = `
|
||||
<li class="logo-footer-cards">
|
||||
<figure>
|
||||
|
||||
<img class="logo1" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" />
|
||||
|
||||
|
||||
<img class="logo2" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png">
|
||||
|
||||
|
||||
<img class="logo3" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" />
|
||||
|
||||
|
||||
<img class="logo4" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" />
|
||||
|
||||
|
||||
<img class="logo5" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" />
|
||||
|
||||
|
||||
<img class="logo6" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" />
|
||||
|
||||
<img class="logo7" src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" />
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<span class="footerCheckout__stamps__divider"></span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png">
|
||||
|
||||
<img class="logo8" src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png">
|
||||
</figure>
|
||||
|
||||
</li>
|
||||
|
||||
`;
|
||||
@ -49,22 +67,25 @@ export default class Footer {
|
||||
<li>
|
||||
<a href="https://vtex.com/br-pt/">
|
||||
<span>Powered By</span>
|
||||
@TODO: vtex icon
|
||||
<figure class="logo-vtex">
|
||||
<img class="logo-vtex" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" />
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://agenciam3.com/">
|
||||
<span>Developed By</span>
|
||||
@TODO: m3 icon
|
||||
<figure class="logo-m3">
|
||||
<img class="logo-m3" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" />
|
||||
</figure>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
catalogoApi() {
|
||||
this.addCarrossel();
|
||||
async catalogoApi() {
|
||||
this.footerPrateleira.innerHTML = `
|
||||
<h2 class="card-title">Você também pode gostar:</h2>
|
||||
<ul class="products-list"></ul>`;
|
||||
@ -76,14 +97,11 @@ export default class Footer {
|
||||
const novaUl = document.querySelector(".products-list");
|
||||
const name = product.productName;
|
||||
const link = product.link;
|
||||
for (let i = 0; i < product.items.length; i++) {
|
||||
product.items.name;
|
||||
}
|
||||
const image = product.items[0].images[0].imageUrl;
|
||||
novaUl.innerHTML += `
|
||||
<li class="product-cards">
|
||||
<figure>
|
||||
<img class="product-image" src ="${image}" />
|
||||
<img class="products-image" src ="${image}" />
|
||||
</figure>
|
||||
<h3 class ="product-name">${name}</h3>
|
||||
<ul class= "size-items">
|
||||
@ -101,9 +119,10 @@ export default class Footer {
|
||||
});
|
||||
});
|
||||
});
|
||||
this.addCarrossel();
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
/*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
|
||||
@ -111,17 +130,81 @@ export default class Footer {
|
||||
let config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(function (mutation) {
|
||||
console.log(mutation.type);
|
||||
if (carrinhoEstaVazio()) {
|
||||
target.style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement(".products-list");
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
}*/
|
||||
|
||||
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
|
||||
let target = this.checkoutVazio;
|
||||
let myCart = document.querySelector("#cart-title");
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(() => {
|
||||
if (target.style.display == "none") {
|
||||
this.footerPrateleira.classList.remove("desable");
|
||||
myCart.classList.remove("desable");
|
||||
this.catalogoApi();
|
||||
} else {
|
||||
this.footerPrateleira.classList.add("desable");
|
||||
myCart.classList.add("desable");
|
||||
this.footerPrateleira.innerHTML = "";
|
||||
}
|
||||
});
|
||||
/*window.addEventListener("hashchange", () => {
|
||||
if ((window.location.hash = "#/cart")) {
|
||||
if (target.style.display == "none") {
|
||||
this.footerPrateleira.classList.remove("desable");
|
||||
this.catalogoApi();
|
||||
}
|
||||
} else {
|
||||
this.footerPrateleira.classList.add("desable");
|
||||
}
|
||||
});*/
|
||||
});
|
||||
|
||||
observer.observe(this.checkoutVazio, {
|
||||
attributes: true,
|
||||
});
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement(".products-list");
|
||||
setTimeout(() => {
|
||||
$(elemento).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
breakpoint: 601,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}, 1500);
|
||||
|
||||
/* if (window.innerWidth <= 1024) {
|
||||
$(elemento).slick({
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
});
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,9 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
@media (max-width: 1024px) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: lighen($color-black, 10);
|
||||
@ -50,6 +53,9 @@
|
||||
|
||||
.client-email {
|
||||
margin: 0 0 16px;
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
box-shadow: none;
|
||||
@ -61,8 +67,16 @@
|
||||
border-radius: 5px 0 0 5px;
|
||||
width: 443px;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
width: auto;
|
||||
@media (max-width: 1024px) {
|
||||
width: 84.498% !important;
|
||||
display: flex;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 57.6% !important;
|
||||
display: flex;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,11 +95,17 @@
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
height: 48px;
|
||||
margin: 0;
|
||||
@media (max-width: 1024px) {
|
||||
margin-right: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
height: 52px;
|
||||
margin-right: 16px;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
@ -147,10 +167,27 @@
|
||||
padding: 16px;
|
||||
|
||||
.accordion-heading {
|
||||
.icon-user,
|
||||
.icon-home,
|
||||
.icon-credit-card {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #303030;
|
||||
color: $color-black;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
font-family: font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 37px;
|
||||
}
|
||||
|
||||
i::before {
|
||||
fill: #303030;
|
||||
@ -159,7 +196,7 @@
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
background-color: #303030;
|
||||
background-color: $color-blue2;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
@ -172,10 +209,28 @@
|
||||
.accordion-inner {
|
||||
padding: 0;
|
||||
|
||||
div.form-step.box-info {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
/* General configurations */
|
||||
|
||||
.client-notice {
|
||||
display: none;
|
||||
color: $color-black;
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@ -186,9 +241,10 @@
|
||||
|
||||
select,
|
||||
input {
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray4;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $color-gray6;
|
||||
box-shadow: none;
|
||||
width: 95.331%;
|
||||
}
|
||||
|
||||
.help.error {
|
||||
@ -199,6 +255,7 @@
|
||||
.box-client-info-pj {
|
||||
.link a#is-corporate-client,
|
||||
.link a#not-corporate-client {
|
||||
display: none;
|
||||
color: $color-black;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
@ -211,18 +268,20 @@
|
||||
|
||||
button.submit {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: $color-black;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
background: $color-blue2;
|
||||
color: $color-white;
|
||||
margin-top: 8px;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
background: $color-blue2;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken($color-black, 5);
|
||||
background: $color-blue2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -299,7 +358,50 @@
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-summaryChange {
|
||||
.vtex-omnishipping-1-x-addressFormPart1 {
|
||||
p.input.ship-postalCode.required.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
#ship-postalCode {
|
||||
padding-right: 67.612%;
|
||||
}
|
||||
}
|
||||
|
||||
.input.ship-country.text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input .ship-complement .text {
|
||||
display: inline-block;
|
||||
width: 95.331%;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-address {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
#ship-number {
|
||||
width: 98.67%;
|
||||
}
|
||||
|
||||
#ship-city {
|
||||
width: 98.67%;
|
||||
}
|
||||
|
||||
#ship-state {
|
||||
width: 98.712%;
|
||||
}
|
||||
|
||||
div {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.vtex-omnishipping-1-x-addressSummary .vtex-omnishipping-1-x-summaryChange {
|
||||
border-color: #303030;
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
@ -118,7 +118,7 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@include mq(md, max) {
|
||||
@media (max-width: 1024px) {
|
||||
&.quantity-price,
|
||||
&.shipping-date {
|
||||
display: none;
|
||||
@ -127,7 +127,7 @@
|
||||
}
|
||||
|
||||
.product-image {
|
||||
height: auto;
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
width: 60px;
|
||||
|
||||
@ -138,7 +138,7 @@
|
||||
img {
|
||||
height: 60px;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
width: 60px;
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 72px;
|
||||
@ -179,12 +179,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
th.shipping-date,
|
||||
th.quantity,
|
||||
th.product,
|
||||
th.product-price {
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
th.quantity-price {
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
td.shipping-date {
|
||||
color: $color-gray2;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
@include mq(md, max) {
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
td.quantity-price {
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -239,7 +260,7 @@
|
||||
|
||||
input {
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray3;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
border-width: 0 1px;
|
||||
display: block;
|
||||
@ -477,7 +498,7 @@
|
||||
}
|
||||
|
||||
.srp-postal-code {
|
||||
.ship-country {
|
||||
#ship-country {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -730,6 +751,11 @@
|
||||
.accordion-group {
|
||||
tr {
|
||||
border-color: #e5e5e5;
|
||||
th {
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
&.empty {
|
||||
@ -792,7 +818,7 @@
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@include mq(md, max) {
|
||||
@media (max-width: 1024px) {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
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;
|
||||
@ -6,6 +10,162 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
float: right;
|
||||
}
|
||||
.orderform-template-holder {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
width: 66.1132%;
|
||||
}
|
||||
|
||||
.row-fluid {
|
||||
.box-client-info-pf {
|
||||
label,
|
||||
input {
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
height: 51px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
.box-client-info-pj {
|
||||
display: none;
|
||||
}
|
||||
label.checkbox.newsletter-label {
|
||||
display: flex;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
#opt-in-newsletter {
|
||||
width: 6.53%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.span6 {
|
||||
@media (max-width: 1024px) {
|
||||
width: 100% !important;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.client-email {
|
||||
@media (max-width: 1024px) {
|
||||
margin: auto;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
#client-email {
|
||||
@media (max-width: 1024px) {
|
||||
width: 94.7792% !important;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.client-first-name {
|
||||
width: 42.933%;
|
||||
margin-right: 25px;
|
||||
@media (max-width: 1024px) {
|
||||
width: 45.603% !important;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 42.573%;
|
||||
margin-left: 30px;
|
||||
}
|
||||
#client-first-name {
|
||||
width: 100% !important;
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-last-name {
|
||||
width: 42.933%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 45.603%;
|
||||
margin-left: 14.5px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 42.573%;
|
||||
}
|
||||
#client-last-name {
|
||||
width: 100%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-document {
|
||||
width: 42.933%;
|
||||
margin-right: 25px;
|
||||
@media (max-width: 1024px) {
|
||||
width: 45.603%;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 42.573%;
|
||||
}
|
||||
#client-document {
|
||||
width: 100%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-phone {
|
||||
width: 42.933%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 45.603%;
|
||||
margin-left: 14.5px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 42.573%;
|
||||
}
|
||||
#client-phone {
|
||||
width: 100%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#holder-document-0,
|
||||
.FormFieldLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.PaymentCardNumber input {
|
||||
display: block;
|
||||
width: 223px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.steps-view {
|
||||
width: 393px;
|
||||
height: 292px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: 170px;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
@ -21,25 +22,45 @@
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
&-links {
|
||||
.link-choose-products {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $color-white;
|
||||
border: 1px solid #000000;
|
||||
border: 1px solid $color-black2;
|
||||
transition: ease-in 0.22s all;
|
||||
outline: none;
|
||||
border-radius: 0px;
|
||||
font-family: $font-family;
|
||||
font-family: $font-family-secundary;
|
||||
width: 287px;
|
||||
height: 24px;
|
||||
color: $color-black;
|
||||
color: $color-black2;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin: auto;
|
||||
margin-bottom: 264px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 638.67px;
|
||||
height: 66px;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-white;
|
||||
|
||||
@ -50,6 +50,10 @@ body {
|
||||
.container-order-form,
|
||||
.container-cart {
|
||||
width: 80%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,6 +70,10 @@ body {
|
||||
color: $color-black !important;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#cart-title,
|
||||
#orderform-title {
|
||||
color: $color-black;
|
||||
@ -77,8 +85,14 @@ body {
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-left: 30px;
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500) {
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
/* _footer.scss */
|
||||
.desable {
|
||||
display: none;
|
||||
}
|
||||
.footerCheckout {
|
||||
border-top: none;
|
||||
color: $color-gray2;
|
||||
@ -30,7 +33,7 @@
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
.products-image {
|
||||
width: 97.19%;
|
||||
}
|
||||
|
||||
@ -81,8 +84,13 @@
|
||||
border-top: 1px solid $color-black2;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -95,9 +103,13 @@
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
max-width: 40%;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@media (min-width: 2500px) {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
width: 537px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -108,8 +120,38 @@
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
|
||||
img {
|
||||
width: 35px;
|
||||
.logo-footer-cards {
|
||||
display: flex;
|
||||
|
||||
.logo1,
|
||||
.logo6,
|
||||
.logo7 {
|
||||
width: 35.65px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 69.63px;
|
||||
}
|
||||
}
|
||||
.logo2,
|
||||
.logo3,
|
||||
.logo5 {
|
||||
width: 34.78px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 67.93px;
|
||||
}
|
||||
}
|
||||
.logo4 {
|
||||
width: 36.52px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 71.33px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo8 {
|
||||
width: 53px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 103.52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
@ -132,6 +174,18 @@
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
||||
.logo-m3 {
|
||||
margin: 0;
|
||||
width: 28.66px;
|
||||
height: 15.65px;
|
||||
}
|
||||
|
||||
.logo-vtex {
|
||||
margin: 0;
|
||||
width: 44.92px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@ -1,10 +1,20 @@
|
||||
/* _header.scss */
|
||||
|
||||
.headerCheckout {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
border-bottom: 1px solid $color-black;
|
||||
.container {
|
||||
width: auto !important;
|
||||
width: 79.532% !important;
|
||||
.progress-bar {
|
||||
width: 446px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 790.7px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
@ -101,10 +111,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 100% !important;
|
||||
}
|
||||
@ -117,18 +123,26 @@
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
margin: 29px 16px 0 16px;
|
||||
@media (min-width: 2500px) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
width: 155.58px;
|
||||
height: 99.35%;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 382.07px;
|
||||
height: 91.2px;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__safeBuy {
|
||||
@ -151,5 +165,8 @@
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,12 +10,12 @@ $color-black2: #000000;
|
||||
|
||||
|
||||
$color-white: #fff;
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
$color-gray2: #7d7d7d;
|
||||
$color-gray3: #f0f0f0;
|
||||
$color-gray4: #8d8d8d;
|
||||
$color-gray5: #e5e5e5;
|
||||
$color-gray6: #E0E0E0;
|
||||
|
||||
$color-blue: #4267b2;
|
||||
$color-blue2: #00C8FF;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user