forked from M3-Academy/m3-academy-template-checkout
Merge branch 'feature/checkout' into develop
This commit is contained in:
commit
837bf900e7
@ -19,13 +19,18 @@ export default class Footer {
|
||||
//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.cartTitulo = await waitElement("#cart-title");
|
||||
this.titleSlick = await waitElement(".transactions-container");
|
||||
|
||||
this.list = await waitElement(".footerCheckout__prateleira", {
|
||||
timeout: 5000,
|
||||
interval: 1000,
|
||||
});
|
||||
|
||||
this.payments = await waitElement(".footerCheckout__payments");
|
||||
this.vtexpci = await waitElement(".footerCheckout__vtexpci");
|
||||
this.devIncons = await waitElement(".footerCheckout__developedBy");
|
||||
this.cartTitle = await waitElement("#cart-title");
|
||||
}
|
||||
|
||||
fetchApiData() {
|
||||
@ -47,7 +52,6 @@ export default class Footer {
|
||||
data.map((item) => {
|
||||
let colors = "";
|
||||
for (let i = 0; i < item.items.length; i++) {
|
||||
console.log(colors);
|
||||
colors += `<p>${item.items[i].name}</p>`;
|
||||
}
|
||||
const li = document.createElement("li");
|
||||
@ -186,10 +190,14 @@ 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
|
||||
let target = this.checkoutVazio;
|
||||
let lista = this.list;
|
||||
let cartTitle = this.cartTitulo;
|
||||
let slickTitle = this.titleSlick;
|
||||
|
||||
if (target.style.display == "none" && window.location.hash == "#/cart") {
|
||||
lista.style.display = "block";
|
||||
this.fetchApiData();
|
||||
} else {
|
||||
this.cartTitulo.style.display = "none";
|
||||
lista.style.display = "none";
|
||||
}
|
||||
let config = { childList: true, attributes: true };
|
||||
@ -200,7 +208,11 @@ export default class Footer {
|
||||
mutations.forEach(function (mutation) {
|
||||
if (target.style.display != "none") {
|
||||
lista.style.display = "none";
|
||||
} else lista.style.display = "block";
|
||||
cartTitle.style.display = "none";
|
||||
} else {
|
||||
cartTitle.style.display = "block";
|
||||
lista.style.display = "block";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ export default class Header {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
this.progressBar.innerHTML = `
|
||||
<ul>
|
||||
<li><div class="containerLi"><div><p class="progress-bar-text">Meu Carinho</p><p id="progress-bar-circle-1" class="progress-bar-circle-1"></p><p class="progress-bar-line-1"></p></div></div></li>
|
||||
<li><div class="containerLi"><div><p class="progress-bar-text">Meu Carrinho</p><p id="progress-bar-circle-1" class="progress-bar-circle-1"></p><p class="progress-bar-line-1"></p></div></div></li>
|
||||
|
||||
<li class="central"><div class="containerLi"><div><p class="progress-bar-text">Dados Pessoais</p><p id="progress-bar-circle-2" class="progress-bar-circle-2"></p></div></div></li>
|
||||
|
||||
@ -37,7 +37,7 @@ export default class Header {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
const progressBarLista = document.querySelectorAll("#progressBar ul li");
|
||||
progressBarLista.forEach((li) => {
|
||||
if (window.location.href === "http://m3academy.myvtex.com/checkout/#/cart") {
|
||||
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") {
|
||||
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
|
||||
li.children[0].children[0].children["progress-bar-circle-1"].classList.add(
|
||||
"active"
|
||||
|
||||
@ -2,4 +2,5 @@
|
||||
@import "./lib/slick";
|
||||
@import "./partials/header";
|
||||
@import "./partials/footer";
|
||||
@import "./partials/prateleira";
|
||||
@import "./checkout/checkout.scss";
|
||||
|
||||
@ -1,16 +1,23 @@
|
||||
.checkout-container {
|
||||
.client-pre-email {
|
||||
border-color: $color-gray3;
|
||||
border-color: $black;
|
||||
font-family: $font-family;
|
||||
padding-top: 8px;
|
||||
|
||||
.link-cart {
|
||||
a {
|
||||
color: $color-black;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $black;
|
||||
|
||||
&:hover {
|
||||
color: lighen($color-black, 10);
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -25,12 +32,27 @@
|
||||
margin-bottom: 16px;
|
||||
|
||||
span {
|
||||
color: #303030;
|
||||
font-size: 24px;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $black;
|
||||
}
|
||||
|
||||
small {
|
||||
color: $color-gray3;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -39,13 +61,21 @@
|
||||
margin: 0 0 16px;
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
height: 50px;
|
||||
box-shadow: none;
|
||||
color: $color-black;
|
||||
font-family: $font-family;
|
||||
padding: 0 16px;
|
||||
border: 2px solid $color-gray3;
|
||||
border: 1px solid $black;
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
width: auto;
|
||||
@ -53,12 +83,13 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $color-black;
|
||||
border-radius: 5px;
|
||||
background: $blue;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
border: none;
|
||||
font-family: $font-family;
|
||||
height: 54px;
|
||||
right: 0;
|
||||
color: $black;
|
||||
height: 50px;
|
||||
right: 64px;
|
||||
top: 0;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
@ -69,19 +100,27 @@
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.emailInfo {
|
||||
padding: 16px;
|
||||
padding-bottom: 23px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray3;
|
||||
border-radius: 0;
|
||||
border: 1px solid $black;
|
||||
border-radius: 5px;
|
||||
|
||||
h3 {
|
||||
color: #303030;
|
||||
margin: 0 0 8px 0;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -89,11 +128,17 @@
|
||||
|
||||
li {
|
||||
span {
|
||||
color: $color-black;
|
||||
color: $black;
|
||||
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: $color-black;
|
||||
color: $blue;
|
||||
font-size: 1rem;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -104,6 +149,7 @@
|
||||
color: $color-black;
|
||||
font-size: 6rem;
|
||||
opacity: 0.5;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -112,19 +158,50 @@
|
||||
.payment-data,
|
||||
.client-profile-data {
|
||||
.accordion-group {
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray3;
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
border: 1px solid $gray-100;
|
||||
font-family: $font-family;
|
||||
padding: 16px;
|
||||
|
||||
.accordion-heading {
|
||||
span {
|
||||
color: #303030;
|
||||
margin-bottom: 8px;
|
||||
margin: 4px 0 26px 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: 'Tenor Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: $black;
|
||||
|
||||
i::before {
|
||||
fill: #303030;
|
||||
background-image: url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
|
||||
background-size: 19.2px 18px;
|
||||
width: 19.2px;
|
||||
height: 18px;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
position: absolute;
|
||||
|
||||
fill: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
span[data-i18n="clientProfileData.identification"] {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
span[data-i18n="clientProfileData.identification"]::before {
|
||||
content: "Identificação";
|
||||
color: $black;
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -147,19 +224,26 @@
|
||||
|
||||
.client-notice {
|
||||
color: $color-black;
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
label {
|
||||
color: $color-black;
|
||||
font-weight: 500;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $color-gray2;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray3;
|
||||
border: 1px solid $color-gray6;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.help.error {
|
||||
@ -168,11 +252,13 @@
|
||||
}
|
||||
|
||||
.box-client-info-pj {
|
||||
display: none;
|
||||
.link a#is-corporate-client,
|
||||
.link a#not-corporate-client {
|
||||
color: $color-black;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -182,12 +268,21 @@
|
||||
|
||||
button.submit {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: $color-black;
|
||||
margin-top: 8px;
|
||||
border-radius: 8px;
|
||||
background: $blue;
|
||||
margin-top: 56px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
}
|
||||
@ -259,7 +354,7 @@
|
||||
|
||||
.shp-summary-group-price,
|
||||
.shp-summary-package {
|
||||
color: $color-gray3;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.shp-summary-group-price {
|
||||
@ -276,12 +371,46 @@
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
||||
background-color: #d8c8ac;
|
||||
border: 1px solid #d8c8ac;
|
||||
background-color: $white;
|
||||
border: 1px solid $gray-500;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionActive {
|
||||
text-shadow: 1.3px 1px lighten($color-black, 50);
|
||||
text-shadow: none;
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $gray-500;
|
||||
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionInactive {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $gray-125;
|
||||
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressFormPart1 {
|
||||
p.ship-country {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 94%;
|
||||
max-width: 94%;
|
||||
}
|
||||
|
||||
p.ship-postalCode {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,16 @@
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
font-family: $font-family;
|
||||
font-family: $font-family-secundary;
|
||||
|
||||
.cart-template-holder {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.empty-cart-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 0;
|
||||
}
|
||||
@ -13,10 +22,7 @@
|
||||
display: none;
|
||||
}
|
||||
.cart {
|
||||
border: 3px solid $color-gray3;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
padding: 0 0 19px 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin: 0px 0 25px 0;
|
||||
@ -30,13 +36,21 @@
|
||||
}
|
||||
.cart-fixed {
|
||||
font-family: $font-family;
|
||||
border: 1px solid $color-gray5;
|
||||
width: 100%;
|
||||
|
||||
h2 {
|
||||
background: $color-white;
|
||||
background: $white;
|
||||
border: none;
|
||||
font-family: 'Tenor Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
padding: 7px 0 34px 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item-unavailable {
|
||||
@ -48,7 +62,6 @@
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: 1px solid $color-gray4;
|
||||
|
||||
ul li {
|
||||
border-top: none;
|
||||
@ -63,6 +76,9 @@
|
||||
|
||||
.shipping-date,
|
||||
.price {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
}
|
||||
@ -70,7 +86,7 @@
|
||||
|
||||
.summary-template-holder {
|
||||
border-top: none;
|
||||
background: $color-white;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
#go-to-cart-button a {
|
||||
@ -85,24 +101,17 @@
|
||||
}
|
||||
|
||||
#payment-data-submit {
|
||||
background: $color-black;
|
||||
background: $black;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: $color-white;
|
||||
color: $white;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken($color-black, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lookatme {
|
||||
background-color: $color-white;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.cart-items {
|
||||
@ -111,10 +120,11 @@
|
||||
}
|
||||
|
||||
th {
|
||||
color: $color-black;
|
||||
// text-align: initial;
|
||||
color: $black;
|
||||
padding: 0 0 16px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@ -149,24 +159,26 @@
|
||||
|
||||
.product-name {
|
||||
padding-right: 0;
|
||||
font-family: 'Tenor Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
color: $black;
|
||||
|
||||
@include mq(lg, max) {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-blue;
|
||||
color: $black;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
transition: ease-in 0.22s all;
|
||||
|
||||
&:hover {
|
||||
color: darken($color-blue, 10);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
margin-left: 23px;
|
||||
}
|
||||
@ -176,10 +188,14 @@
|
||||
.seller {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
span[data-bind="text: quantityLabel"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
td.shipping-date {
|
||||
color: $color-gray2;
|
||||
color: $gray-150;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
@ -200,7 +216,7 @@
|
||||
}
|
||||
|
||||
span.list-price {
|
||||
color: $color-gray2;
|
||||
color: $gray-150;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-decoration-line: line-through;
|
||||
@ -218,7 +234,7 @@
|
||||
td.quantity {
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray3;
|
||||
border-radius: 0;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -233,8 +249,8 @@
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray3;
|
||||
background-color: $white;
|
||||
border: 1px solid $white;
|
||||
border-radius: 0;
|
||||
border-width: 0 1px;
|
||||
display: block;
|
||||
@ -242,7 +258,7 @@
|
||||
margin: 0 !important;
|
||||
padding: 8px 0;
|
||||
width: 38px;
|
||||
color: $color-gray2;
|
||||
color: $black;
|
||||
box-shadow: none;
|
||||
|
||||
@include mq(lg, max) {
|
||||
@ -253,7 +269,7 @@
|
||||
.icon-plus-sign,
|
||||
.icon-minus-sign {
|
||||
&::before {
|
||||
color: $color-black;
|
||||
color: $black;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
padding: 1px 12px;
|
||||
@ -262,14 +278,14 @@
|
||||
|
||||
.icon-minus-sign {
|
||||
&:before {
|
||||
content: "-";
|
||||
color: $blue;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-plus-sign {
|
||||
&:before {
|
||||
content: "+";
|
||||
color: $blue;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@ -297,10 +313,10 @@
|
||||
}
|
||||
span {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-black;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
@ -315,7 +331,7 @@
|
||||
top: 0;
|
||||
}
|
||||
.icon::before {
|
||||
color: $color-gray4;
|
||||
color: $gray-200;
|
||||
font-size: 15px;
|
||||
|
||||
@include mq(md, max) {
|
||||
@ -326,7 +342,7 @@
|
||||
|
||||
.item-unavailable-message {
|
||||
background-color: #d8c8ac;
|
||||
color: $color-white;
|
||||
color: $white;
|
||||
|
||||
.icon-warning-sign {
|
||||
color: #bb4f4f;
|
||||
@ -351,12 +367,13 @@
|
||||
}
|
||||
|
||||
.srp-main-title {
|
||||
margin: 32px 0 12px;
|
||||
margin: 0 0 11px 0;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $color-gray2;
|
||||
line-height: 33px;
|
||||
color: $black;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-top: 0;
|
||||
@ -364,32 +381,26 @@
|
||||
}
|
||||
|
||||
.srp-description {
|
||||
color: $color-gray2;
|
||||
color: $gray-150;
|
||||
font-family: "Open Sans";
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
button.shp-open-options {
|
||||
background-color: $color-gray5;
|
||||
background-color: $gray-50;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-gray2;
|
||||
color: $black;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: "Open Sans";
|
||||
line-height: 19px;
|
||||
font-weight: 500;
|
||||
outline: none;
|
||||
padding: 12px 40px;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-gray5, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-gray5, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -405,34 +416,28 @@
|
||||
}
|
||||
|
||||
.srp-pickup-my-location__button {
|
||||
background-color: $color-black;
|
||||
background-color: $blue;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
border-radius: 8px;
|
||||
color: $white;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 19px;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-black, 5);
|
||||
}
|
||||
padding: 11px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.srp-toggle {
|
||||
margin: 0 0 34px;
|
||||
margin: 0 0 20px;
|
||||
|
||||
&__wrapper {
|
||||
background-color: $color-white;
|
||||
background-color: $white;
|
||||
border-radius: 100px;
|
||||
width: 100%;
|
||||
font-family: $font-family;
|
||||
@ -444,12 +449,12 @@
|
||||
}
|
||||
|
||||
&__current {
|
||||
border: 1px solid $color-blue;
|
||||
border: 1px solid $black;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: $color-blue;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -469,12 +474,13 @@
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-black;
|
||||
margin-bottom: 12px;
|
||||
color: $black;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid $color-gray3;
|
||||
border: 1px solid $gray-125;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
color: $color-gray3;
|
||||
@ -485,38 +491,38 @@
|
||||
}
|
||||
|
||||
& ~ button {
|
||||
background-color: $color-black;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-shadow: none;
|
||||
|
||||
background-color: $blue;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
border-radius: 8px;
|
||||
color: $white;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
right: -150px;
|
||||
top: 36px;
|
||||
top: 88px;
|
||||
transition: all 0.2s linear;
|
||||
width: 96px;
|
||||
width: 100px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-black, 5);
|
||||
}
|
||||
}
|
||||
|
||||
small a {
|
||||
font-family: $font-family;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: $color-blue;
|
||||
color: $black;
|
||||
margin-top: 7px;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
@ -525,7 +531,7 @@
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
top: 17px;
|
||||
top: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -542,14 +548,10 @@
|
||||
color: #303030;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.srp-shipping-current-single {
|
||||
border: 1px solid $color-gray4;
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: 0;
|
||||
color: #303030;
|
||||
margin: 16px 0 0;
|
||||
@ -561,11 +563,11 @@
|
||||
}
|
||||
|
||||
.srp-delivery-select {
|
||||
border: 1px solid $color-gray4;
|
||||
border: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
.srp-delivery-select-container {
|
||||
border: 1px solid $color-gray4;
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: 0;
|
||||
|
||||
.srp-shipping-current-many {
|
||||
@ -583,7 +585,7 @@
|
||||
}
|
||||
|
||||
&__arrow svg {
|
||||
fill: $color-gray4;
|
||||
fill: $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -597,18 +599,14 @@
|
||||
.coupon-data {
|
||||
#cart-link-coupon-add {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-family: $font-family;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-blue;
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -630,19 +628,23 @@
|
||||
}
|
||||
|
||||
.coupon-label label {
|
||||
margin-bottom: 12px;
|
||||
font-family: $font-family;
|
||||
text-align: left;
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-gray2;
|
||||
cursor: none;
|
||||
|
||||
color: $gray-150;
|
||||
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.coupon-fields {
|
||||
margin-bottom: 32px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
@include mq(sm, max) {
|
||||
span {
|
||||
display: flex;
|
||||
@ -660,43 +662,47 @@
|
||||
border: 2px solid $color-gray3;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
color: $color-gray4;
|
||||
color: $gray-200;
|
||||
font-size: 12px;
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
max-width: 160px;
|
||||
width: 204.32px;
|
||||
|
||||
@include mq(sm, max) {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
&::placeholder {
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
color: $gray-125;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background: $color-black;
|
||||
background: $blue;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
color: $black;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
margin-left: 6px;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
width: 94px;
|
||||
width: 102px;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 138px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-black, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -716,7 +722,7 @@
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-black;
|
||||
color: $gray-500;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
@ -733,11 +739,12 @@
|
||||
tfoot {
|
||||
td.info,
|
||||
td.monetary {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: $color-black;
|
||||
line-height: 25px;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -771,39 +778,36 @@
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: $font-family;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-blue;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-place-order-wrapper {
|
||||
a {
|
||||
background: $color-green;
|
||||
background: $blue;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
transition: ease-in 0.22s all;
|
||||
padding: 12px 19px;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($color-green, 5);
|
||||
}
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: "finalizar compra";
|
||||
font-family: $font-family;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
color: $black;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 19px;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,38 +1,62 @@
|
||||
.empty-cart {
|
||||
font-family: $font-family;
|
||||
&-content {
|
||||
color: $color-black;
|
||||
text-align: center;
|
||||
font-family: $font-family;
|
||||
&-content {
|
||||
color: $white;
|
||||
text-align: center;
|
||||
margin-top: 170px;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
&-title {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
|
||||
&-links {
|
||||
.link-choose-products {
|
||||
background: $color-black;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
transition: ease-in 0.22s all;
|
||||
outline: none;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-links {
|
||||
a {
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: "Continuar comprando";
|
||||
color: $black;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.link-choose-products {
|
||||
width: 327px;
|
||||
|
||||
background: $white;
|
||||
border: 1px solid $black;
|
||||
border-radius: 0px;
|
||||
padding: 15px 0;
|
||||
transition: ease-in 0.22s all;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,14 +70,28 @@ body {
|
||||
color: $color-black !important;
|
||||
}
|
||||
|
||||
#cart-title {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: $black;
|
||||
}
|
||||
|
||||
#cart-title,
|
||||
#orderform-title {
|
||||
color: $gray-500;
|
||||
color: $black;
|
||||
font-family: $font-family;
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
margin: 40px 0 30px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
margin: 17px 0 28px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@ -128,88 +142,3 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout__prateleira {
|
||||
padding-bottom: 56px;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: $black;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.imgSlick {
|
||||
background: $gray-600;
|
||||
}
|
||||
|
||||
.nameSlick {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: $black;
|
||||
|
||||
text-align: center;
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
|
||||
.skuSlick {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
|
||||
p {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
padding: 5px;
|
||||
|
||||
color: $white;
|
||||
background: $blue;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.linkSlick {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
padding: 12px 0;
|
||||
width: 100%;
|
||||
|
||||
color: $white;
|
||||
background: $blue;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,7 +92,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: "Tenor Sans", sans-serif;
|
||||
font-family: $font-family-secundary, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
|
||||
@ -1 +1,85 @@
|
||||
/* _prateleira.scss */
|
||||
.footerCheckout__prateleira {
|
||||
padding-bottom: 56px;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: $black;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.imgSlick {
|
||||
background: $gray-600;
|
||||
}
|
||||
|
||||
.nameSlick {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: $black;
|
||||
|
||||
text-align: center;
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
|
||||
.skuSlick {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
|
||||
p {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
padding: 5px;
|
||||
|
||||
color: $white;
|
||||
background: $blue;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.linkSlick {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
padding: 12px 0;
|
||||
width: 100%;
|
||||
|
||||
color: $white;
|
||||
background: $blue;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ $font-family-secundary: "Tenor Sans", sans-serif;
|
||||
|
||||
/* Colors */
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$white: #FFFFFF;
|
||||
|
||||
$color-black: #292929;
|
||||
|
||||
@ -25,6 +25,7 @@ $color-gray2: #7d7d7d;
|
||||
$color-gray3: #f0f0f0;
|
||||
$color-gray4: #8d8d8d;
|
||||
$color-gray5: #e5e5e5;
|
||||
$color-gray6: #828282;
|
||||
|
||||
$blue: #00c8ff;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user