forked from M3-Academy/m3-academy-template-checkout
Desafio 4 M3 Academy #1
@ -12,9 +12,8 @@ export default class Footer {
|
||||
this.createPrateleira();
|
||||
this.prateleira = await waitElement(".footerCheckout__carrossel-itens");
|
||||
this.itensPrateleira();
|
||||
|
||||
this.addCarrossel();
|
||||
|
||||
await this.displaySlick();
|
||||
this.creditCardIconsHTML();
|
||||
this.developedByIconsHTML();
|
||||
}
|
||||
@ -28,19 +27,40 @@ export default class Footer {
|
||||
this.developedByIcons = await waitElement(".footerCheckout__developedBy");
|
||||
}
|
||||
|
||||
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 config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(function (mutation) {
|
||||
console.log(mutation.type);
|
||||
});
|
||||
async displaySlick() {
|
||||
const orderForm = await window.vtexjs.checkout.getOrderForm();
|
||||
const items = orderForm.items.length;
|
||||
const _this = this;
|
||||
|
||||
$(window).on("orderFormUpdated.vtex", (evt, oF) => {
|
||||
if (oF.items.length <= 0) {
|
||||
_this.itensShelf.style.display = "none";
|
||||
} else {
|
||||
if (window.location.hash !== "#/shipping" && window.location.hash !== "#/payment") {
|
||||
_this.itensShelf.style.display = "block";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
window.addEventListener("hashchange", async () => {
|
||||
if (window.location.hash === "#/shipping" || window.location.hash === "#/payment") {
|
||||
_this.itensShelf.style.display = "none";
|
||||
} else {
|
||||
const orderForm = await window.vtexjs.checkout.getOrderForm();
|
||||
const items = orderForm.items.length;
|
||||
if (items > 0) {
|
||||
_this.itensShelf.style.display = "block";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (
|
||||
items === 0 ||
|
||||
window.location.hash === "#/shipping" ||
|
||||
window.location.hash === "#/payment"
|
||||
) {
|
||||
this.itensShelf.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
createPrateleira() {
|
||||
@ -62,7 +82,7 @@ export default class Footer {
|
||||
|
||||
structure += `
|
||||
<li class="slick">
|
||||
<figure class="container-img"><img src ="${response.img}"/></figure>
|
||||
<figure class="container-img"><img src ="${response.img}"/></figure>
|
||||
<figcaption class="name-picture">${response.name}</figcaption>
|
||||
<div><ul class= "number" >${sku.join("")}</ul></div>
|
||||
<button type="button"><a href="${response.link}">Ver Produto</a></button>
|
||||
@ -95,14 +115,34 @@ export default class Footer {
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
infinite: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1279,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 790,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
creditCardIconsHTML() {
|
||||
this.creditCardIcons.innerHTML = `
|
||||
<li><img class="master" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></li>
|
||||
<li><img class="visa" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt=""></li>
|
||||
<li><img class="amex" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express"></li>
|
||||
<li><img class="master" src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="Mastercard"></li>
|
||||
<li><img class="visa" src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt=""></li>
|
||||
<li><img class="amex" src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="American Express"></li>
|
||||
<li><img class="elo" src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo"></li>
|
||||
<li><img class="hiper" src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="Hipercard"></li>
|
||||
<li><img class="paypal" src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="PayPal"></li>
|
||||
@ -114,23 +154,37 @@ export default class Footer {
|
||||
|
||||
developedByIconsHTML() {
|
||||
this.developedByIcons.innerHTML = `
|
||||
<li>
|
||||
<div class="by-vtex">
|
||||
<li>
|
||||
<div class="by-vtex">
|
||||
<a href="https://vtex.com.br-pt/">
|
||||
<span>Powered By</span>
|
||||
<span>Powered By</span>
|
||||
</a>
|
||||
<img class="vtex-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" />
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="by-m3">
|
||||
<div class="by-m3">
|
||||
<a href="https://vtex.com.br-pt/">
|
||||
<span>Developed By</span>
|
||||
<span>Developed By</span>
|
||||
</a>
|
||||
<img class="m3-logo" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" />
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
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 config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(function (mutation) {
|
||||
console.log(mutation.type);
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ export default class Header {
|
||||
await this.selectors();
|
||||
this.progressBarHTML();
|
||||
this.progressBarProgress();
|
||||
// this.progressUpdate();
|
||||
this.progressUpdate();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
.checkout-container {
|
||||
.client-pre-email {
|
||||
border-color: $color-black1;
|
||||
border-color: $color-black-500;
|
||||
font-family: $font-family;
|
||||
padding-top: 8px;
|
||||
|
||||
.link-cart {
|
||||
a {
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
color: lighen($color-black, 10);
|
||||
color: lighen($color-black-100, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -30,9 +31,10 @@
|
||||
span {
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 23px;
|
||||
text-transform: uppercase;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
}
|
||||
|
||||
small {
|
||||
@ -40,7 +42,7 @@
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-transform: uppercase;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@ -55,13 +57,13 @@
|
||||
|
||||
input {
|
||||
box-shadow: none;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-family: $font-family;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 0 14px;
|
||||
height: 50px;
|
||||
border: 1px solid $color-black1;
|
||||
border: 1px solid $color-black-500;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px 0 0 5px;
|
||||
max-width: 443px;
|
||||
@ -72,7 +74,7 @@
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
}
|
||||
}
|
||||
|
||||
@ -84,7 +86,7 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-weight: 700;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
width: 126px;
|
||||
height: 50px;
|
||||
right: 0px;
|
||||
@ -109,15 +111,15 @@
|
||||
|
||||
.emailInfo {
|
||||
padding: 16px 16px 27px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-black1;
|
||||
background-color: $color-white-500;
|
||||
border: 1px solid $color-black-500;
|
||||
border-radius: 5px;
|
||||
max-width: 366px;
|
||||
width: 100%;
|
||||
|
||||
h3 {
|
||||
font-family: $font-family;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-weight: 700;
|
||||
@ -132,7 +134,7 @@
|
||||
font-family: $font-family;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@ -145,7 +147,7 @@
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
font-size: 6rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -160,7 +162,7 @@
|
||||
|
||||
&::after {
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
content: "Identificação";
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
@ -176,10 +178,10 @@
|
||||
.client-profile-data {
|
||||
.accordion-group {
|
||||
border-radius: 8px;
|
||||
border: 1px solid $color-gray5;
|
||||
border: 1px solid $color-gray3;
|
||||
font-family: $font-family;
|
||||
padding: 16px;
|
||||
width: 90.06%;
|
||||
// width: 90.06%;
|
||||
|
||||
.accordion-heading {
|
||||
.accordion-toggle-active {
|
||||
@ -192,7 +194,7 @@
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 25px;
|
||||
padding: 0;
|
||||
@ -221,7 +223,7 @@
|
||||
background-color: #303030;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
justify-content: center;
|
||||
padding: 6px 5px 6px 8px;
|
||||
}
|
||||
@ -230,6 +232,14 @@
|
||||
.accordion-inner {
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.box-step {
|
||||
.shipping-summary-info {
|
||||
font-family: $font-family;
|
||||
@ -243,6 +253,16 @@
|
||||
|
||||
.client-notice {
|
||||
display: none;
|
||||
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// content: "Identificação";
|
||||
// font-family: $font-family-secundary;
|
||||
// font-size: 16px;
|
||||
// line-height: 19px;
|
||||
// color: $color-black-500;
|
||||
// top: 0;
|
||||
// }
|
||||
}
|
||||
|
||||
.ship-country {
|
||||
@ -265,13 +285,13 @@
|
||||
border: 1px solid $color-gray8;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
max-width: 90%;
|
||||
max-width: 270px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-family: $font-family;
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration: underline;
|
||||
@ -288,6 +308,33 @@
|
||||
padding: 0;
|
||||
|
||||
label {
|
||||
// input {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// &.checkbox {
|
||||
// position: relative;
|
||||
// padding-left: 26px;
|
||||
|
||||
// .newsletter-text {
|
||||
// &::before {
|
||||
// position: absolute;
|
||||
// content: "";
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
// border: 1px solid $color-gray11;
|
||||
// border-radius: 3px;
|
||||
|
||||
// }
|
||||
|
||||
// .newsletter-text:checked + .newsletter-text::before {
|
||||
// // content: '';
|
||||
// background: $color-blue-100;
|
||||
// }
|
||||
// }
|
||||
|
||||
font-family: $font-family;
|
||||
color: $color-gray2;
|
||||
font-size: 14px;
|
||||
@ -303,12 +350,12 @@
|
||||
select,
|
||||
input {
|
||||
font-family: $font-family;
|
||||
color: $color-gray8;
|
||||
color: $color-black-100;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-weight: 400;
|
||||
border-radius: 5px;
|
||||
border: 1px solid $color-gray2;
|
||||
border: 1px solid $color-gray8;
|
||||
box-shadow: none;
|
||||
padding: 0 12px;
|
||||
}
|
||||
@ -352,29 +399,24 @@
|
||||
}
|
||||
|
||||
.input-xlarge {
|
||||
width: 91.24%;
|
||||
height: 40px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.input-small {
|
||||
max-width: 115px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#client-first-name,
|
||||
#client-document {
|
||||
p.client-first-name,
|
||||
p.client-document {
|
||||
width: calc(50% - 15px);
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid $color-gray;
|
||||
padding-right: 8px;
|
||||
margin-top: 0px;
|
||||
p.client-last-name,
|
||||
p.client-phone {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.help.error {
|
||||
@ -392,7 +434,7 @@
|
||||
.newsletter {
|
||||
.newsletter-text {
|
||||
font-family: $font-family;
|
||||
color: $color-gray8;
|
||||
color: $color-gray10;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
@ -403,7 +445,7 @@
|
||||
|
||||
.link a#is-corporate-client,
|
||||
.link a#not-corporate-client {
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -419,7 +461,7 @@
|
||||
|
||||
button.submit {
|
||||
font-family: $font-family;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
letter-spacing: 0.05px;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
@ -436,7 +478,7 @@
|
||||
/* Shipping configurations */
|
||||
|
||||
.ship-postalCode small a {
|
||||
color: $color-black;
|
||||
color: #303030;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -483,7 +525,7 @@
|
||||
.vtex-omnishipping-1-x-addressSummaryActive {
|
||||
.address-summary {
|
||||
background: none;
|
||||
border: 1px solid $color-gray2;
|
||||
border: 1px solid $color-gray8;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
|
||||
@ -530,7 +572,7 @@
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingText {
|
||||
border-right: 1px solid $color-gray2;
|
||||
border-right: 1px solid $color-gray8;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingTextLabel {
|
||||
@ -542,42 +584,43 @@
|
||||
letter-spacing: 0.05px;
|
||||
}
|
||||
|
||||
.shp-lean {
|
||||
.shp-lean-option {
|
||||
&::before {
|
||||
position: relative;
|
||||
content: "";
|
||||
border: 1px solid #828282;
|
||||
border-radius: 3px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.vtex-omnishipping-1-x-option:hover,
|
||||
.vtex-omnishipping-1-x-leanShippingOptionActive {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.shp-lean-option-active {
|
||||
&::after {
|
||||
content: "";
|
||||
width: 12px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 37.1%;
|
||||
border-radius: 3px;
|
||||
height: 12px;
|
||||
background-color: $color-blue-100;
|
||||
}
|
||||
}
|
||||
.shp-option-icon {
|
||||
position: relative;
|
||||
|
||||
.vtex-omnishipping-1-x-svg {
|
||||
svg {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border: 1px solid $color-gray8;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
border: 1px solid #828282;
|
||||
border-radius: 3px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shp-lean-option-active .shp-option-icon {
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 12px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 3px;
|
||||
height: 12px;
|
||||
background-color: $color-blue-100;
|
||||
}
|
||||
}
|
||||
|
||||
@ -601,7 +644,7 @@
|
||||
}
|
||||
|
||||
.input-large {
|
||||
border: 1px solid $color-gray2;
|
||||
border: 1px solid $color-gray8;
|
||||
border-radius: 8px;
|
||||
max-width: 294px;
|
||||
width: 100%;
|
||||
@ -618,8 +661,15 @@
|
||||
}
|
||||
|
||||
.btn-ask-for-geolocation-cta {
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
background: $color-blue-100;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-summaryChange {
|
||||
@ -628,24 +678,24 @@
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-warning {
|
||||
border-color: $color-gray2;
|
||||
border-color: $color-gray10;
|
||||
.onda-v1 {
|
||||
font-family: $font-family;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray5;
|
||||
background-color: $color-white-500;
|
||||
border: 1px solid $color-black-100;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionActive {
|
||||
font-family: $font-family;
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
@ -659,13 +709,9 @@
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
border-radius: 100px;
|
||||
// text-shadow: 1.3px 1px lighten($color-black, 50);
|
||||
// text-shadow: 1.3px 1px lighten($color-black-100, 50);
|
||||
}
|
||||
|
||||
// .vtex-omnishipping-1-x-addressFormPart1 {
|
||||
// display: ;
|
||||
// }
|
||||
|
||||
.ship-number {
|
||||
.input-mini {
|
||||
max-width: unset;
|
||||
@ -707,12 +753,11 @@
|
||||
max-width: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
@ -735,7 +780,7 @@
|
||||
|
||||
.input-mini {
|
||||
width: 100%;
|
||||
border: 1px solid $color-gray2;
|
||||
border: 1px solid $color-gray10;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
@ -35,9 +35,11 @@
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
height: 397px !important;
|
||||
padding: 24px 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
h2 {
|
||||
background: $color-white;
|
||||
background: $color-white-500;
|
||||
border: none;
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
@ -69,27 +71,21 @@
|
||||
.shipping-date {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
color: #292929;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary-template-holder {
|
||||
border-top: none;
|
||||
background: $color-white;
|
||||
background: $color-white-500;
|
||||
|
||||
.summary-totalizers {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
#go-to-cart-button a {
|
||||
font-family: $font-family;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration: underline;
|
||||
@ -103,26 +99,34 @@
|
||||
}
|
||||
|
||||
#payment-data-submit {
|
||||
background: $color-black;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
background: $color-green2;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-radius: 8px;
|
||||
color: $color-white;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
margin-top: 20%;
|
||||
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
background: lighten($color-green2, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken($color-black, 5);
|
||||
background: darken($color-green2, 5);
|
||||
}
|
||||
|
||||
.icon-lock {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lookatme {
|
||||
background-color: $color-white;
|
||||
background-color: $color-white-500;
|
||||
}
|
||||
|
||||
.cart-items {
|
||||
@ -132,7 +136,7 @@
|
||||
|
||||
th {
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
padding: 0 0 16px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -151,7 +155,7 @@
|
||||
&::after {
|
||||
content: "Frete";
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
@ -165,7 +169,7 @@
|
||||
&::after {
|
||||
content: "Unidade";
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
@ -188,28 +192,27 @@
|
||||
height: auto;
|
||||
padding: 0;
|
||||
width: 60px;
|
||||
background: none;
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 72px;
|
||||
a {
|
||||
@include mq(sm, max) {
|
||||
display: block;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 60px;
|
||||
max-width: 60px;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
width: 60px;
|
||||
transform: rotateY(180deg);
|
||||
object-fit: cover;
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 72px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
white-space: unset;
|
||||
@ -219,7 +222,7 @@
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-decoration: none;
|
||||
@ -229,8 +232,8 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
margin-left: 23px;
|
||||
@include mq(md, max) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -298,7 +301,7 @@
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
}
|
||||
}
|
||||
|
||||
@ -335,7 +338,7 @@
|
||||
|
||||
.item-unavailable-message {
|
||||
background-color: #d8c8ac;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
|
||||
.icon-warning-sign {
|
||||
color: #bb4f4f;
|
||||
@ -352,10 +355,49 @@
|
||||
}
|
||||
|
||||
td.quantity {
|
||||
padding-right: 90px;
|
||||
text-align: start;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 99px;
|
||||
padding: 9px 11px;
|
||||
height: 34px;
|
||||
margin-top: 13px;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 99px !important;
|
||||
// margin-left: calc(60px + 16px) !important;
|
||||
display: flex !important;
|
||||
padding: 9px 11px !important;
|
||||
}
|
||||
|
||||
.item-quantity-change {
|
||||
@include mq(lg, max) {
|
||||
position: unset !important;
|
||||
width: unset !important;
|
||||
height: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-minus-sign,
|
||||
.icon-plus-sign {
|
||||
color: $color-blue-100;
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
@ -374,7 +416,7 @@
|
||||
margin: 0 0 12px;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-family: $font-family;
|
||||
|
||||
@include mq(md, max) {
|
||||
@ -388,14 +430,15 @@
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
margin: 0 0 10px;
|
||||
max-width: 276px;
|
||||
}
|
||||
|
||||
button.shp-open-options {
|
||||
background-color: $color-gray9;
|
||||
background-color: $color-gray1;
|
||||
font-family: $font-family;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
@ -430,7 +473,7 @@
|
||||
background-color: $color-blue-100;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
|
||||
@ -446,7 +489,7 @@
|
||||
margin: 0 0 20px;
|
||||
|
||||
&__wrapper {
|
||||
background-color: $color-white;
|
||||
background-color: $color-white-500;
|
||||
border-radius: 100px;
|
||||
width: 100%;
|
||||
font-family: $font-family;
|
||||
@ -456,13 +499,13 @@
|
||||
}
|
||||
|
||||
&__current {
|
||||
border: 1px solid $color-black1;
|
||||
border: 1px solid $color-black-500;
|
||||
border-radius: 100px;
|
||||
box-shadow: 2px 2px 4px rgba($color-black1, 0.2);
|
||||
box-shadow: 2px 2px 4px rgba($color-black-500, 0.2);
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -486,7 +529,7 @@
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@ -494,7 +537,7 @@
|
||||
border: 1px solid $color-gray8;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
height: 36px;
|
||||
@ -508,7 +551,7 @@
|
||||
right: calc(-138px - 9px);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: $color-white;
|
||||
color: $color-white-500;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
outline: none;
|
||||
@ -528,12 +571,12 @@
|
||||
font-family: $font-family;
|
||||
font-size: 0px;
|
||||
line-height: 12px;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
|
||||
&::after {
|
||||
content: "Não sei meu código postal";
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-decoration: underline;
|
||||
@ -620,13 +663,20 @@
|
||||
max-width: 354px;
|
||||
width: 100%;
|
||||
|
||||
@include mq(md, max) {
|
||||
float: none;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.coupon-data {
|
||||
display: block !important;
|
||||
margin: 0 0 10px;
|
||||
|
||||
#cart-link-coupon-add {
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-decoration: none;
|
||||
@ -641,7 +691,7 @@
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -674,16 +724,19 @@
|
||||
.coupon-fields {
|
||||
margin-bottom: 20px;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
|
||||
i.loading-coupon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
span {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
i {
|
||||
position: absolute;
|
||||
right: 91px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -698,10 +751,8 @@
|
||||
max-width: 204px;
|
||||
width: 100%;
|
||||
float: left;
|
||||
|
||||
&::placeholder {
|
||||
padding: 0 16px;
|
||||
}
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include mq(sm, max) {
|
||||
max-width: 100%;
|
||||
@ -713,7 +764,7 @@
|
||||
background: $color-blue-100;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
height: 36px;
|
||||
@ -724,17 +775,18 @@
|
||||
max-width: 133px;
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 138px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 5);
|
||||
background-color: lighten($color-blue-100, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($color-black, 5);
|
||||
background-color: darken($color-blue-100, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -752,10 +804,11 @@
|
||||
&.info,
|
||||
&.monetary {
|
||||
font-family: $font-family;
|
||||
color: $color-gray2;
|
||||
color: $color-black-100;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
margin: 25px 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&.info {
|
||||
@ -773,17 +826,15 @@
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-weight: 700;
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
|
||||
td.info {
|
||||
font-family: $font-family;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-weight: 700;
|
||||
color: $color-black;
|
||||
padding: 0;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 0;
|
||||
color: $color-black-100;
|
||||
padding: 14px 0;
|
||||
}
|
||||
|
||||
td.monetary {
|
||||
@ -791,7 +842,8 @@
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
font-weight: 700;
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
padding: 14px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -809,6 +861,7 @@
|
||||
width: calc(100% - 32px);
|
||||
float: none;
|
||||
margin-bottom: 50px;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
@include mq(md, min) {
|
||||
@ -830,11 +883,10 @@
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -855,7 +907,7 @@
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-black1;
|
||||
color: $color-black-500;
|
||||
text-transform: uppercase;
|
||||
vertical-align: middle;
|
||||
line-height: 19px;
|
||||
|
||||
@ -1,167 +1,198 @@
|
||||
body .container-main.container-order-form .orderform-template.active {
|
||||
.mini-cart {
|
||||
border: 1px solid $color-gray5;
|
||||
border-radius: 8px;
|
||||
// padding: 25px 17px;
|
||||
height: 397px;
|
||||
width: 32.37%;
|
||||
width: 32.3242%;
|
||||
margin-left: unset;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
|
||||
.payment-confirmation-wrap {
|
||||
#payment-data-submit {
|
||||
font-family: $font-family;
|
||||
color: $color-white;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-weight: 700;
|
||||
background: $color-green;
|
||||
border-radius: 8px;
|
||||
}
|
||||
h2 {
|
||||
text-align: start;
|
||||
margin-bottom: 34px;
|
||||
padding: 0;
|
||||
font-family: "Tenor Sans, sans-serif";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.span4 {
|
||||
padding: 24px 17px 22px;
|
||||
}
|
||||
.cart-fixed {
|
||||
position: relative;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
max-height: 397px;
|
||||
padding: 24px 16px;
|
||||
|
||||
h2 {
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
text-align: initial;
|
||||
padding: 0;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
.summary-cart-template-holder {
|
||||
height: auto !important;
|
||||
|
||||
.ask-for-geolocation-title {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.description {
|
||||
margin: 0;
|
||||
.cart .cart-items .product-name {
|
||||
max-width: 115px;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: $font-family;
|
||||
color: $color-black;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin: 0;
|
||||
// padding-right: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.summary-template-holder {
|
||||
.totalizers-list {
|
||||
tr {
|
||||
position: relative;
|
||||
|
||||
tr {
|
||||
border-top: 1px solid $color-gray;
|
||||
}
|
||||
.orderform-template-holder {
|
||||
width: 66.1132%;
|
||||
}
|
||||
|
||||
.payment-data {
|
||||
.active {
|
||||
width: unset;
|
||||
padding: 14.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-gift-card {
|
||||
#show-gift-card-group {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-body {
|
||||
.accordion-inner {
|
||||
.box-step {
|
||||
display: flex;
|
||||
|
||||
.form-step {
|
||||
display: flex;
|
||||
|
||||
.payment-group {
|
||||
margin: 0;
|
||||
.payment-group-list-btn {
|
||||
width: unset;
|
||||
}
|
||||
.pg-deposito,
|
||||
.pg-transferencia-bancaria,
|
||||
.pg-money,
|
||||
.pg-promisory---monica,
|
||||
.pg-desconto-em-folha,
|
||||
#payment-group-creditControlPaymentGroup,
|
||||
#payment-group-creditDirectSalePaymentGroup,
|
||||
#payment-group-promissoryPaymentGroup,
|
||||
#payment-group-PSEPaymentGroup,
|
||||
#payment-group-SPEIPaymentGroup,
|
||||
[data-name="Bancolombia Transfer"] {
|
||||
display: none;
|
||||
&:first-of-type {
|
||||
&::before {
|
||||
content: "";
|
||||
width: calc(100% + 32px);
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: $color-gray8;
|
||||
top: 0;
|
||||
left: -16px;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-group-list-btn {
|
||||
span {
|
||||
background-image: none !important;
|
||||
font-family: $font-family;
|
||||
color: $color-black1;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
a {
|
||||
background: $color-gray3;
|
||||
border: 1px solid $color-white;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
padding: 0;
|
||||
width: 209px;
|
||||
text-decoration: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid $color-red;
|
||||
background: rgba(220, 221, 227, 0.3);
|
||||
margin-left: 0px;
|
||||
|
||||
span {
|
||||
color: $color-red;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
width: calc(100% + 32px);
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
background: $color-gray8;
|
||||
bottom: 0;
|
||||
left: -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps-view {
|
||||
// width: 363px;
|
||||
width: 100%;
|
||||
margin-left: 40px;
|
||||
td.info,
|
||||
td.monetary {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
td.info,
|
||||
td.monetary {
|
||||
margin: 0;
|
||||
padding: 30px 0 22px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-confirmation-wrap {
|
||||
position: absolute;
|
||||
top: calc(100% + 20px);
|
||||
left: 0;
|
||||
background: $color-green2;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto !important;
|
||||
|
||||
ul li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.description {
|
||||
margin-left: auto;
|
||||
margin-top: unset;
|
||||
font-size: 12px;
|
||||
color: $color-black-100;
|
||||
|
||||
.price {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.PaymentCardHolderDocument {
|
||||
display: none;
|
||||
}
|
||||
.payment-data.span12 {
|
||||
.accordion-heading {
|
||||
&::after {
|
||||
content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.01em;
|
||||
color: $color-gray2;
|
||||
display: block;
|
||||
margin: 12px 0 16px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.SecurityEnvironmentIcon {
|
||||
margin-bottom: 5px;
|
||||
.payment-data {
|
||||
.box-step form.form-step {
|
||||
display: flex;
|
||||
|
||||
.steps-view {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-group {
|
||||
margin-top: 0;
|
||||
width: 209px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
.payment-body {
|
||||
.link-gift-card {
|
||||
#show-gift-card-group {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pg-deposito,
|
||||
.pg-transferencia-bancaria,
|
||||
.pg-money,
|
||||
.pg-promisory---monica,
|
||||
.pg-desconto-em-folha,
|
||||
#payment-group-creditControlPaymentGroup,
|
||||
#payment-group-creditDirectSalePaymentGroup,
|
||||
#payment-group-promissoryPaymentGroup,
|
||||
#payment-group-PSEPaymentGroup,
|
||||
#payment-group-SPEIPaymentGroup,
|
||||
[data-name="Bancolombia Transfer"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.payment-group-list-btn {
|
||||
span {
|
||||
background-image: none !important;
|
||||
font-family: $font-family;
|
||||
color: $color-black-200;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
a {
|
||||
background: $color-gray3;
|
||||
border: 1px solid $color-black-500;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
padding: 0;
|
||||
width: 209px;
|
||||
text-decoration: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid $color-red-100;
|
||||
background: rgba(220, 221, 227, 0.3);
|
||||
margin-left: 0px;
|
||||
|
||||
span {
|
||||
color: $color-red-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderform-template-holder {
|
||||
width: 66.1132%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.empty-cart {
|
||||
font-family: $font-family;
|
||||
&-content {
|
||||
color: $color-black1;
|
||||
color: $color-black;
|
||||
text-align: center;
|
||||
|
||||
@include mq(md, max) {
|
||||
@ -27,7 +27,7 @@
|
||||
&-links {
|
||||
.link-choose-products {
|
||||
background: $color-white;
|
||||
border: 1px solid $color-black1;
|
||||
border: 1px solid $color-black;
|
||||
border-radius: 0;
|
||||
transition: ease-in-out 0.2s all;
|
||||
font-size: 0px;
|
||||
@ -41,7 +41,7 @@
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black1;
|
||||
color: $color-black;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,14 +8,9 @@ html {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
footer .footerCheckout__wrapper {
|
||||
width: 100%;
|
||||
margin: auto auto 0 auto;
|
||||
}
|
||||
footer .footerCheckout__prateleira,
|
||||
header {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -47,24 +42,20 @@ body {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.container-order-form,
|
||||
.container-cart {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: $color-black;
|
||||
background: $color-black-100;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.emailInfo h3 {
|
||||
color: $color-black !important;
|
||||
color: $color-black-100 !important;
|
||||
}
|
||||
|
||||
#cart-title,
|
||||
#orderform-title {
|
||||
color: $color-black;
|
||||
color: $color-black-100;
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
|
||||
@ -1,5 +1,122 @@
|
||||
/* Slider */
|
||||
|
||||
.footerCheckout__prateleira {
|
||||
margin-bottom: 56px;
|
||||
.footerCheckout__prateleira-title {
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
ul.footerCheckout__carrossel-itens {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
margin: 0 132px;
|
||||
|
||||
@include mq(xl, max) {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.container-img {
|
||||
margin: 0;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
figcaption.name-picture {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
li.slick {
|
||||
ul.number {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
text {
|
||||
display: none;
|
||||
}
|
||||
li {
|
||||
background: #00c8ff;
|
||||
border-radius: 8px;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
padding: 5px;
|
||||
margin: 0 2.5px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
height: 42px;
|
||||
width: 100%;
|
||||
background: #00c8ff;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
|
||||
a {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
content: "";
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg");
|
||||
display: block;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
height: 29.47px;
|
||||
width: 13px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
content: "";
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg");
|
||||
display: block;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
height: 29.47px;
|
||||
width: 13px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -18,7 +135,7 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0;
|
||||
margin: 0 -8px;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
@ -62,6 +179,7 @@
|
||||
}
|
||||
}
|
||||
.slick-slide {
|
||||
margin: 0 8px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
|
||||
@ -1,34 +1,18 @@
|
||||
/* _footer.scss */
|
||||
.footerCheckout {
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
border-top: none;
|
||||
color: $color-gray2;
|
||||
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-top: 1px solid #292929;
|
||||
}
|
||||
|
||||
&__adress {
|
||||
span {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
color: #292929;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
border-top: 1px solid $color-black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@ -54,20 +38,21 @@
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
|
||||
@include mq(md, max) {
|
||||
@include mq(xl, max) {
|
||||
margin-bottom: 24px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
@include mq(2xl, min) {
|
||||
font-family: $font-family;
|
||||
color: $color-black;
|
||||
// width: 537px;
|
||||
width: 537px;
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
@include mq(xl, max) {
|
||||
margin: 0px 0 16px 7px;
|
||||
font-family: $font-family;
|
||||
color: $color-black;
|
||||
@ -83,6 +68,7 @@
|
||||
align-items: center;
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
width: 404px;
|
||||
margin: 16px auto 16px auto;
|
||||
|
||||
@include mq(md, max) {
|
||||
@ -98,27 +84,12 @@
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.master,
|
||||
.visa,
|
||||
.amex,
|
||||
.elo,
|
||||
.hiper,
|
||||
.paypal,
|
||||
.boleto {
|
||||
height: 20px;
|
||||
@include mq(2xl, min) {
|
||||
width: 690px;
|
||||
}
|
||||
|
||||
.vtex {
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
@include mq(xl, min) {
|
||||
// width: 690px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
@include mq(xl, max) {
|
||||
width: 342px;
|
||||
margin: 16px 0 16px 0;
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
@ -127,38 +98,25 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
margin-bottom: 16px;
|
||||
list-style-type: none;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.vtex-rigth1 {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.vtex-rigth2 {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
.vtex-logo,
|
||||
.m3-logo {
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 9px;
|
||||
line-height: 12px;
|
||||
color: #292929;
|
||||
margin-right: 10px;
|
||||
.by-m3 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.by-vtex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list {
|
||||
@include mq(xl, min) {
|
||||
@include mq(2xl, min) {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
@ -167,7 +125,7 @@
|
||||
width: 388px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
@include mq(xl, max) {
|
||||
margin: 0 0 16px 7px;
|
||||
}
|
||||
}
|
||||
@ -186,118 +144,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footerCheckout__prateleira {
|
||||
margin-bottom: 56px;
|
||||
.footerCheckout__prateleira-title {
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
ul.footerCheckout__carrossel-itens {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
margin: 0 132px;
|
||||
|
||||
.container-img {
|
||||
margin: 0;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
height: 242px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
figcaption.name-picture {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
li.slick {
|
||||
width: 242px !important;
|
||||
|
||||
ul.number {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
text {
|
||||
display: none;
|
||||
}
|
||||
li {
|
||||
background: #00c8ff;
|
||||
border-radius: 8px;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
padding: 5px;
|
||||
margin: 0 2.5px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
height: 42px;
|
||||
max-width: 242px;
|
||||
width: 100%;
|
||||
background: #00c8ff;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
|
||||
a {
|
||||
font-family: "Open Sans";
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
content: "";
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg");
|
||||
display: block;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
height: 29.47px;
|
||||
width: 13px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
content: "";
|
||||
background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg");
|
||||
display: block;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
height: 29.47px;
|
||||
width: 13px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,28 +5,36 @@ $font-family: "Open Sans", sans-serif;
|
||||
$font-family-secundary: "Tenor Sans", sans-serif;
|
||||
|
||||
/* Colors */
|
||||
$color-black: #292929;
|
||||
$color-black1: #000000;
|
||||
$color-black: black;
|
||||
$color-black-500: black;
|
||||
$color-black-100: #292929;
|
||||
$color-black-200: #58595b;
|
||||
$color-black-1000: #000000;
|
||||
|
||||
$color-white: #fff;
|
||||
$color-red-100: #f15a31;
|
||||
|
||||
$color-white: white;
|
||||
$color-white-500: #fff;
|
||||
$color-white-1000: white;
|
||||
|
||||
$color-gray: #6c6c6c;
|
||||
$color-gray1: #c4c4c4;
|
||||
$color-gray1: #ededed;
|
||||
$color-gray2: #7d7d7d;
|
||||
$color-gray3: #f0f0f0;
|
||||
$color-gray4: #8d8d8d;
|
||||
$color-gray5: #e5e5e5;
|
||||
$color-gray6: #989898;
|
||||
$color-gray7: #e0e0e0;
|
||||
$color-gray8: #828282;
|
||||
$color-gray9: #ededed;
|
||||
$color-gray6: #c4c4c4;
|
||||
$color-gray7: #989898;
|
||||
$color-gray8: #e0e0e0;
|
||||
$color-gray9: #f2f2f2;
|
||||
$color-gray10: #808080;
|
||||
$color-gray12: grey;
|
||||
|
||||
$color-blue-100: #00c8ff;
|
||||
$color-blue: #4267b2;
|
||||
$color-blue-100: #00c8ff;
|
||||
|
||||
$color-green: #4caf50;
|
||||
|
||||
$color-red: #ff0000;
|
||||
$color-green2: #298541;
|
||||
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user