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