forked from M3-Academy/m3-academy-template-checkout
feat(checkout): Ajusta o checkout desktop
This commit is contained in:
parent
389be436ba
commit
baf5289fc5
@ -3,10 +3,11 @@ import { Container } from "m3-utils";
|
||||
import "slick-carousel";
|
||||
import Header from "./components/Header";
|
||||
import Footer from "./components/Footer";
|
||||
import Content from "./components/CheckoutContent";
|
||||
|
||||
const m3Checkout = new Container({
|
||||
appName: "m3-checkout",
|
||||
components: [CheckoutUI, Header, Footer],
|
||||
components: [CheckoutUI, Header, Footer, Content],
|
||||
});
|
||||
|
||||
m3Checkout.start();
|
||||
|
||||
61
checkout/src/arquivos/js/components/CheckoutContent.js
Normal file
61
checkout/src/arquivos/js/components/CheckoutContent.js
Normal file
@ -0,0 +1,61 @@
|
||||
// import waitForEl from "../helpers/waitForEl";
|
||||
import { waitElement } from "m3-utils";
|
||||
|
||||
export default class Content {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.events();
|
||||
// this.CriaSpan();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
this.option = await waitElement(".shp-lean ", {
|
||||
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
|
||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||
});
|
||||
|
||||
this.btn = await waitElement(".btn-go-to-payment", {
|
||||
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
|
||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||
});
|
||||
console.log(this.btn);
|
||||
|
||||
this.sumario = await waitElement(".shp-summary-package-time", {
|
||||
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
|
||||
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
|
||||
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
|
||||
});
|
||||
console.log(this.sumario);
|
||||
}
|
||||
|
||||
events() {
|
||||
this.btn.addEventListener("click", this.AdicionaSpan());
|
||||
}
|
||||
|
||||
// CriaSpan() {
|
||||
// this.sumario.innerHTML += `
|
||||
// <span class="forma-entrega"></span>
|
||||
// `;
|
||||
// console.log("criou");
|
||||
// }
|
||||
|
||||
AdicionaSpan() {
|
||||
if (this.option.children[0].classList.contains("shp-lean-option-active")) {
|
||||
const span = document.createElement("span");
|
||||
span.classList.add("forma-entrega");
|
||||
span.innerHTML = this.option.children[0].children[2].children[0].textContent;
|
||||
this.sumario.appendChild(span);
|
||||
} else if (this.option.children[1].classList.contains("shp-lean-option-active")) {
|
||||
const span = document.createElement("span");
|
||||
span.classList.add("forma-entrega");
|
||||
span.innerHTML = this.option.children[1].children[2].children[0].textContent;
|
||||
this.sumario.appendChild(span);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -18,15 +18,21 @@ export default class Footer {
|
||||
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
|
||||
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
|
||||
console.log(this.checkoutVazio);
|
||||
|
||||
this.titulo = await waitElement("#cart-title");
|
||||
|
||||
this.payments = await waitElement(".footerCheckout__payments", {
|
||||
timeout: 5000,
|
||||
interval: 1000,
|
||||
});
|
||||
|
||||
this.vtexIcon = await waitElement(".footerCheckout__stamps", {
|
||||
timeout: 5000,
|
||||
interval: 1000,
|
||||
});
|
||||
|
||||
this.developed = await waitElement(".footerCheckout__developedBy", {
|
||||
timeout: 5000,
|
||||
interval: 1000,
|
||||
@ -41,7 +47,7 @@ export default class Footer {
|
||||
let config = { childList: true, attributes: true };
|
||||
let observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach(function (mutation) {
|
||||
console.log(mutation.type);
|
||||
console.log(mutation.attributeName);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -10,6 +10,7 @@ export default class Header {
|
||||
await this.selectors();
|
||||
this.progressBarHTML();
|
||||
await this.progressBarProgress();
|
||||
this.CriaSpan();
|
||||
// console.log(this.item);
|
||||
}
|
||||
|
||||
|
||||
@ -153,31 +153,56 @@
|
||||
.payment-data,
|
||||
.client-profile-data {
|
||||
.accordion-group {
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray4;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
font-family: $font-family;
|
||||
padding: 16px;
|
||||
padding: 24px 17px;
|
||||
|
||||
.accordion-heading {
|
||||
.link-box-edit {
|
||||
outline: 0 !important;
|
||||
border: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.icon-edit {
|
||||
width: 21px;
|
||||
height: 20px;
|
||||
background: no-repeat
|
||||
url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png);
|
||||
background-size: 20px 20px;
|
||||
outline: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: #303030;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 25px;
|
||||
padding: 0;
|
||||
|
||||
font-family: $font-family-secundary;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #292929;
|
||||
|
||||
i::before {
|
||||
fill: #303030;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
background-color: #303030;
|
||||
background-color: transparent;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 6px 5px 6px 8px;
|
||||
padding: 9px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -188,18 +213,24 @@
|
||||
|
||||
.client-notice {
|
||||
color: $color-black;
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 16px;
|
||||
label {
|
||||
color: $color-black;
|
||||
font-weight: 500;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
border-radius: 0;
|
||||
border: 1px solid $color-gray4;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -211,6 +242,7 @@
|
||||
.box-client-info-pj {
|
||||
.link a#is-corporate-client,
|
||||
.link a#not-corporate-client {
|
||||
display: none;
|
||||
color: $color-black;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
@ -221,13 +253,22 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p.submit {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
button.submit {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: $color-black;
|
||||
margin-top: 8px;
|
||||
background: #00c8ff;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
@ -258,43 +299,162 @@
|
||||
border-radius: 0;
|
||||
|
||||
label {
|
||||
background-color: $color-white;
|
||||
box-shadow: none;
|
||||
color: #303030;
|
||||
color: #7d7d7d;
|
||||
padding: 8px 12px;
|
||||
|
||||
svg path {
|
||||
fill: #d8c8ac;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingOption {
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.shp-lean-option-active {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
.vtex-omnishipping-1-x-leanShippingTextLabel {
|
||||
color: #7d7d7d;
|
||||
font-family: $font-family;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delivery-address-title {
|
||||
color: #303030;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
color: #7d7d7d;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.shp-summary-group-info {
|
||||
border-color: $color-gray4;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressSummary {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
max-height: 63px;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.address-summary-BRA {
|
||||
padding: 15px 0 14px 40px;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
background: no-repeat
|
||||
url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png);
|
||||
background-size: 21px 20px;
|
||||
width: 21px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.home-icon {
|
||||
background: no-repeat
|
||||
url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png);
|
||||
background-size: 21px 20px;
|
||||
width: 21px;
|
||||
height: 20px;
|
||||
padding: 0 9px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.address-summary {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #7d7d7d;
|
||||
|
||||
background: none;
|
||||
border-color: $color-gray4;
|
||||
border-radius: 0;
|
||||
color: #303030;
|
||||
padding: 12px;
|
||||
border: 0px;
|
||||
padding: 0;
|
||||
|
||||
@include mq(md, max) {
|
||||
background-position: 8px 9px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #303030;
|
||||
color: #00c8ff;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
padding: 0 13px 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-address {
|
||||
margin-bottom: 0;
|
||||
.coluna-complementos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.input-mini,
|
||||
.input-large,
|
||||
.input-xlarge {
|
||||
width: 100%;
|
||||
max-width: 282px;
|
||||
}
|
||||
|
||||
.ship-number,
|
||||
.ship-complement,
|
||||
.ship-receiverName {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-submitPaymentButton {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingOption {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
background: $color-white;
|
||||
border: 1px solid #c4c4c4;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
background: #00c8ff;
|
||||
opacity: 0;
|
||||
transition: all 0.25s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingOptionActive {
|
||||
&::after {
|
||||
content: "";
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -317,14 +477,492 @@
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
||||
background-color: #d8c8ac;
|
||||
border: 1px solid #d8c8ac;
|
||||
background: #ffffff;
|
||||
border: 1px solid $color-black;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionActive {
|
||||
text-shadow: 1.3px 1px lighten($color-black, 50);
|
||||
color: #292929;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionInactive {
|
||||
color: #c4c4c4;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryChannelsOption {
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressFormPart1 {
|
||||
.ship-country {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ship-postalCode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 9px;
|
||||
|
||||
label {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 0;
|
||||
line-height: 16px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
label::after {
|
||||
content: "CEP:";
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.success {
|
||||
height: 35px;
|
||||
padding-right: 203px;
|
||||
border: 1px solid #c4c4c4;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
small {
|
||||
margin: 0;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryGroup {
|
||||
.vtex-omnishipping-1-x-shippingSectionTitle {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingGroupList {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-profile-data {
|
||||
.accordion-group {
|
||||
.accordion-heading {
|
||||
.accordion-toggle {
|
||||
margin-bottom: 25px;
|
||||
span {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
i::before {
|
||||
fill: #303030;
|
||||
display: none;
|
||||
}
|
||||
|
||||
span::before {
|
||||
content: "Identificação";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-step.box-info {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
span.email {
|
||||
position: absolute;
|
||||
top: 21px;
|
||||
}
|
||||
|
||||
p.client-profile-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
margin-top: -8px;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.box-client-info-pj {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shipping-data {
|
||||
position: relative;
|
||||
|
||||
.vtex-omnishipping-1-x-SummaryItemGroup {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
span.forma-entrega {
|
||||
left: 18px !important;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.shp-summary-group-info {
|
||||
border-right: 0;
|
||||
|
||||
.street::after {
|
||||
content: ", ";
|
||||
}
|
||||
|
||||
.number::after {
|
||||
content: " - ";
|
||||
}
|
||||
|
||||
.postalCode {
|
||||
position: absolute;
|
||||
top: 68px;
|
||||
left: 137px;
|
||||
}
|
||||
|
||||
.shp-summary-package-time {
|
||||
span {
|
||||
position: absolute;
|
||||
left: 112px;
|
||||
bottom: 61px;
|
||||
|
||||
&::before {
|
||||
content: " - ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shp-summary-group-price {
|
||||
position: absolute;
|
||||
bottom: 61px;
|
||||
left: 215px;
|
||||
|
||||
&::before {
|
||||
content: " - ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-gift-card {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.payment-group {
|
||||
margin: 0;
|
||||
|
||||
.payment-group-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background: #f0f0f0;
|
||||
mix-blend-mode: normal;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
color: #58595b;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 15px 0 8px;
|
||||
height: 48px;
|
||||
|
||||
&.active {
|
||||
background: rgba(220, 221, 227, 0.3);
|
||||
mix-blend-mode: normal;
|
||||
border: 1px solid #f15a31;
|
||||
border-radius: 6px;
|
||||
color: #f15a31;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-group-item-text {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.pg-deposito,
|
||||
.pg-transferencia-bancaria,
|
||||
#payment-group-creditDirectSalePaymentGroup,
|
||||
#payment-group-promissoryPaymentGroup,
|
||||
.pg-money,
|
||||
#payment-group-instantPaymentPaymentGroup,
|
||||
#payment-group-PSEPaymentGroup,
|
||||
.pg-desconto-em-folha,
|
||||
#payment-group-MercadoPagoPaymentGroup,
|
||||
#payment-group-SPEIPaymentGroup {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#payment-group-creditControlPaymentGroup {
|
||||
span {
|
||||
font-size: 0;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
&::before {
|
||||
content: "Cartão de Débito";
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#payment-group-creditCardPaymentGroup,
|
||||
#payment-group-bankInvoicePaymentGroup {
|
||||
span {
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
}
|
||||
|
||||
.pg-promisory---monica {
|
||||
span {
|
||||
font-size: 0;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
&::before {
|
||||
content: "Boleto Faturado";
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#payment-group-bankInvoicePaymentGroup {
|
||||
span {
|
||||
font-size: 0;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
&::before {
|
||||
content: "Boleto à Vista";
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a#payment-group-Bancolombia\ TransferPaymentGroup {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#payments-title {
|
||||
span.accordion-toggle.collapsed.accordion-toggle-active {
|
||||
margin-bottom: 76px;
|
||||
span {
|
||||
&::after {
|
||||
content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #7d7d7d;
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
.steps-view {
|
||||
width: 393px;
|
||||
}
|
||||
}
|
||||
|
||||
div.cart-template.mini-cart.span4 {
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 8px;
|
||||
max-height: 403px;
|
||||
|
||||
.cart-fixed {
|
||||
height: auto !important;
|
||||
h2 {
|
||||
text-align: left;
|
||||
padding: 24px 0 34px 17px;
|
||||
}
|
||||
|
||||
div {
|
||||
.cart {
|
||||
border: none;
|
||||
padding: 0 17px 19px 17px;
|
||||
margin: 0;
|
||||
|
||||
span.quantity.badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.shipping-date.pull-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
span {
|
||||
max-width: 115px;
|
||||
white-space: initial;
|
||||
font-family: $font-family-secundary;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
strong {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-family: $font-family;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #292929;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p#go-to-cart-button {
|
||||
margin: 0;
|
||||
max-height: 16px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
a#orderform-minicart-to-cart {
|
||||
font-family: $font-family;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: right;
|
||||
text-decoration-line: underline;
|
||||
color: #000000;
|
||||
padding: 0 17px 0 0;
|
||||
}
|
||||
|
||||
.summary-template-holder {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.accordion-inner {
|
||||
// border: 2px solid red;
|
||||
}
|
||||
|
||||
.totalizers-list {
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 8px;
|
||||
|
||||
tr.Items,
|
||||
tr.Discounts {
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
td.info {
|
||||
float: inherit;
|
||||
padding: 25px 0 25px 17px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
td.monetary {
|
||||
float: right;
|
||||
padding: 25px 17px 25px 0;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 8px;
|
||||
border-bottom: none;
|
||||
|
||||
td.info {
|
||||
padding: 30px 0 22px 17px;
|
||||
float: inherit;
|
||||
}
|
||||
|
||||
td.monetary {
|
||||
float: right;
|
||||
padding: 30px 17px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
#payment-data-submit {
|
||||
position: absolute;
|
||||
background: #298541;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a#open-shipping {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.address-summary.address-summary-BRA {
|
||||
max-height: 36px;
|
||||
margin-bottom: 77px;
|
||||
}
|
||||
|
||||
p.client-profile-summary {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
//Pagamento
|
||||
|
||||
label.FormFieldLabel,
|
||||
#holder-document-0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 27px;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin: 0px 0 25px 0;
|
||||
@ -58,7 +59,7 @@
|
||||
&:not(:first-child) {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
border-top: 1px solid $color-gray5;
|
||||
}
|
||||
|
||||
.shipping-date,
|
||||
@ -448,6 +449,7 @@
|
||||
.srp-data {
|
||||
margin-top: 10px;
|
||||
width: 280px;
|
||||
max-height: 104px;
|
||||
|
||||
@include mq(cstm, max) {
|
||||
width: calc(100vw - 32px);
|
||||
@ -655,9 +657,11 @@
|
||||
&-totalizers {
|
||||
padding: 0;
|
||||
width: 354px;
|
||||
margin: 0;
|
||||
|
||||
.coupon-data {
|
||||
margin-top: 33px;
|
||||
margin: 20px 0;
|
||||
display: block !important;
|
||||
#cart-link-coupon-add {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
@ -708,7 +712,7 @@
|
||||
}
|
||||
|
||||
.coupon-fields {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include mq(sm, max) {
|
||||
span {
|
||||
@ -773,7 +777,7 @@
|
||||
|
||||
.accordion-group {
|
||||
tr {
|
||||
border-color: #e5e5e5;
|
||||
border-color: $color-gray5;
|
||||
|
||||
td {
|
||||
&.empty {
|
||||
@ -819,6 +823,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 354px;
|
||||
margin-top: 7px !important;
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 0 16px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user