feat: Cria tela de shipping e payment desktop
This commit is contained in:
parent
bbf520a5ec
commit
a0740e8e2f
@ -5,10 +5,12 @@ import Header from "./components/Header";
|
||||
import Footer from "./components/Footer";
|
||||
import Cart from "./components/Cart";
|
||||
import Email from "./components/Email";
|
||||
import Shipping from "./components/Shipping";
|
||||
import Payment from "./components/Payment";
|
||||
|
||||
const m3Checkout = new Container({
|
||||
appName: "m3-checkout",
|
||||
components: [CheckoutUI, Header, Footer, Cart, Email],
|
||||
components: [CheckoutUI, Header, Footer, Cart, Email, Shipping, Payment],
|
||||
});
|
||||
|
||||
m3Checkout.start();
|
||||
|
||||
@ -17,7 +17,7 @@ export default class Email {
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
this.checkoutContainer = await waitElement(".checkout-container");
|
||||
this.clientProfileData = await waitElement("#client-profile-data");
|
||||
this.orderFormTitle = await waitElement("#orderform-title");
|
||||
this.cartTemplate = await waitElement(".cart-template.mini-cart.span4");
|
||||
this.accordionGroup = await waitElement(".step.accordion-group.client-profile-data.active");
|
||||
@ -25,7 +25,7 @@ export default class Email {
|
||||
|
||||
addClasses() {
|
||||
this.addBorderToTitle();
|
||||
this.addClassToCheckoutContainer();
|
||||
this.addClassToclientProfileData();
|
||||
this.addDisplayNone();
|
||||
}
|
||||
|
||||
@ -48,10 +48,10 @@ export default class Email {
|
||||
this.orderFormTitle.classList.remove("border");
|
||||
}
|
||||
|
||||
addClassToCheckoutContainer() {
|
||||
addClassToclientProfileData() {
|
||||
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/email")
|
||||
this.checkoutContainer.classList.add("email-active");
|
||||
else if (this.checkoutContainer.classList.contains("email-active"))
|
||||
this.checkoutContainer.classList.remove("email-active");
|
||||
this.clientProfileData.classList.add("email-active");
|
||||
else if (this.clientProfileData.classList.contains("email-active"))
|
||||
this.clientProfileData.classList.remove("email-active");
|
||||
}
|
||||
}
|
||||
|
||||
29
checkout/src/arquivos/js/components/Shipping.js
Normal file
29
checkout/src/arquivos/js/components/Shipping.js
Normal file
@ -0,0 +1,29 @@
|
||||
// import waitForEl from "../helpers/waitForEl";
|
||||
import { waitElement } from "m3-utils";
|
||||
|
||||
export default class Shipping {
|
||||
constructor() {
|
||||
this.init();
|
||||
this.events();
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.addShippingClass();
|
||||
}
|
||||
|
||||
events() {
|
||||
window.addEventListener("hashchange", this.addShippingClass.bind(this));
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
this.paymentData = await waitElement("#payment-data");
|
||||
}
|
||||
|
||||
addShippingClass() {
|
||||
if (window.location.href === "https://m3academy.myvtex.com/checkout/#/shipping")
|
||||
this.paymentData.classList.add("shipping");
|
||||
else if (this.paymentData.classList.contains("shipping"))
|
||||
this.paymentData.classList.remove("shipping");
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,4 @@
|
||||
.checkout-container {
|
||||
&.email-active {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.client-pre-email {
|
||||
border-color: #8d8d8d;
|
||||
font-family: $font-family;
|
||||
@ -10,11 +6,11 @@
|
||||
|
||||
.link-cart {
|
||||
a {
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
color: lighen(#292929, 10);
|
||||
color: lighen($black-400, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -44,10 +40,10 @@
|
||||
|
||||
input {
|
||||
box-shadow: none;
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
font-family: $font-family;
|
||||
padding: 0 16px;
|
||||
border: 2px solid #f0f0f0;
|
||||
border: 2px solid $gray-300;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
|
||||
@ -57,7 +53,7 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #292929;
|
||||
background-color: $black-400;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
font-family: $font-family;
|
||||
@ -73,7 +69,7 @@
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
color: red;
|
||||
color: $red-500;
|
||||
}
|
||||
}
|
||||
|
||||
@ -93,11 +89,11 @@
|
||||
|
||||
li {
|
||||
span {
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
font-size: 1rem;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -105,7 +101,7 @@
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
font-size: 6rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -150,12 +146,12 @@
|
||||
/* General configurations */
|
||||
|
||||
.client-notice {
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
}
|
||||
|
||||
p {
|
||||
label {
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -167,14 +163,14 @@
|
||||
}
|
||||
|
||||
.help.error {
|
||||
color: red;
|
||||
color: $red-500;
|
||||
}
|
||||
}
|
||||
|
||||
.box-client-info-pj {
|
||||
.link a#is-corporate-client,
|
||||
.link a#not-corporate-client {
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -271,7 +267,7 @@
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryOptionActive {
|
||||
text-shadow: 1.3px 1px lighten(#292929, 50);
|
||||
text-shadow: 1.3px 1px lighten($black-400, 50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
display: none;
|
||||
}
|
||||
.cart {
|
||||
border: 3px solid #f0f0f0;
|
||||
border: 3px solid $gray-300;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
@ -25,9 +25,6 @@
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.cart-fixed.affix {
|
||||
position: relative !important;
|
||||
}
|
||||
.cart-fixed {
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
@ -58,12 +55,12 @@
|
||||
&:not(:first-child) {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
border-top: 1px solid $gray-300;
|
||||
}
|
||||
|
||||
.shipping-date,
|
||||
.price {
|
||||
color: #7d7d7d;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -85,18 +82,18 @@
|
||||
}
|
||||
|
||||
#payment-data-submit {
|
||||
background: #292929;
|
||||
background: $black-400;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: $white-500;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
&:hover {
|
||||
background: lighten(#292929, 5);
|
||||
background: lighten($black-400, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken(#292929, 5);
|
||||
background: darken($black-400, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -111,7 +108,7 @@
|
||||
}
|
||||
|
||||
th {
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
padding: 0 0 16px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
@ -179,7 +176,7 @@
|
||||
}
|
||||
|
||||
td.shipping-date {
|
||||
color: #7d7d7d;
|
||||
color: $gray-600;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
@ -200,7 +197,7 @@
|
||||
}
|
||||
|
||||
span.list-price {
|
||||
color: #7d7d7d;
|
||||
color: $gray-600;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-decoration-line: line-through;
|
||||
@ -217,7 +214,7 @@
|
||||
|
||||
td.quantity {
|
||||
align-items: center;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
@ -234,7 +231,7 @@
|
||||
|
||||
input {
|
||||
background-color: $white-500;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 0;
|
||||
border-width: 0 1px;
|
||||
display: block;
|
||||
@ -242,7 +239,7 @@
|
||||
margin: 0 !important;
|
||||
padding: 8px 0;
|
||||
width: 38px;
|
||||
color: #7d7d7d;
|
||||
color: $gray-600;
|
||||
box-shadow: none;
|
||||
|
||||
@include mq(lg, max) {
|
||||
@ -253,7 +250,7 @@
|
||||
.icon-plus-sign,
|
||||
.icon-minus-sign {
|
||||
&::before {
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
padding: 1px 12px;
|
||||
@ -300,7 +297,7 @@
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
}
|
||||
}
|
||||
|
||||
@ -356,7 +353,7 @@
|
||||
font-weight: normal;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: #7d7d7d;
|
||||
color: $gray-600;
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-top: 0;
|
||||
@ -364,17 +361,17 @@
|
||||
}
|
||||
|
||||
.srp-description {
|
||||
color: #7d7d7d;
|
||||
color: $gray-600;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
button.shp-open-options {
|
||||
background-color: #e5e5e5;
|
||||
background-color: $gray-300;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: #7d7d7d;
|
||||
color: $gray-600;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 19px;
|
||||
@ -384,11 +381,11 @@
|
||||
transition: all 0.2s linear;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#e5e5e5, 5);
|
||||
background-color: lighten($gray-300, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(#e5e5e5, 5);
|
||||
background-color: darken($gray-300, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -405,7 +402,7 @@
|
||||
}
|
||||
|
||||
.srp-pickup-my-location__button {
|
||||
background-color: #292929;
|
||||
background-color: $black-400;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $white-500;
|
||||
@ -419,11 +416,11 @@
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#292929, 5);
|
||||
background-color: lighten($black-400, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(#292929, 5);
|
||||
background-color: darken($black-400, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -444,19 +441,19 @@
|
||||
}
|
||||
|
||||
&__current {
|
||||
border: 1px solid #4267b2;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #4267b2;
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 50%;
|
||||
|
||||
&:active {
|
||||
background-color: #f0f0f0;
|
||||
background-color: $gray-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -469,15 +466,15 @@
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
color: #f0f0f0;
|
||||
color: $gray-300;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
padding: 12px 8px;
|
||||
@ -485,7 +482,7 @@
|
||||
}
|
||||
|
||||
& ~ button {
|
||||
background-color: #292929;
|
||||
background-color: $black-400;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $white-500;
|
||||
@ -501,11 +498,11 @@
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#292929, 5);
|
||||
background-color: lighten($black-400, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(#292929, 5);
|
||||
background-color: darken($black-400, 5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -520,7 +517,7 @@
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
color: red;
|
||||
color: $red-500;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -574,11 +571,11 @@
|
||||
}
|
||||
|
||||
&__sla {
|
||||
color: #7d7d7d;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
&__price {
|
||||
color: #7d7d7d;
|
||||
color: $gray-600;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -636,7 +633,7 @@
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #7d7d7d;
|
||||
color: $gray-600;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
@ -657,7 +654,7 @@
|
||||
}
|
||||
|
||||
input {
|
||||
border: 2px solid #f0f0f0;
|
||||
border: 2px solid $gray-300;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
color: #8d8d8d;
|
||||
@ -673,7 +670,7 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background: #292929;
|
||||
background: $black-400;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $white-500;
|
||||
@ -691,11 +688,11 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#292929, 5);
|
||||
background-color: lighten($black-400, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(#292929, 5);
|
||||
background-color: darken($black-400, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -703,7 +700,7 @@
|
||||
|
||||
.accordion-group {
|
||||
tr {
|
||||
border-color: #e5e5e5;
|
||||
border-color: $gray-300;
|
||||
|
||||
td {
|
||||
&.empty {
|
||||
@ -716,7 +713,7 @@
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
@ -737,7 +734,7 @@
|
||||
font-weight: normal;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,584 @@
|
||||
body .container-main.container-order-form .orderform-template.active {
|
||||
.mini-cart {
|
||||
width: 32.3242%;
|
||||
margin-left: unset;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
.checkout-container {
|
||||
.orderform-template {
|
||||
.orderform-template-holder {
|
||||
width: 66%;
|
||||
|
||||
.row-fluid {
|
||||
position: relative;
|
||||
|
||||
.client-profile-data {
|
||||
.client-profile-data.filled {
|
||||
max-width: 331px;
|
||||
|
||||
.accordion-heading {
|
||||
.accordion-toggle {
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.icon-user {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
border-radius: 0;
|
||||
position: static;
|
||||
height: 20px;
|
||||
background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png");
|
||||
background-size: contain;
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0;
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
content: "Indentificação";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
.client-profile-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.client-profile-email {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.client-profile-email,
|
||||
.client-profile-summary {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payment-data {
|
||||
position: static;
|
||||
|
||||
.accordion-group {
|
||||
&.active {
|
||||
padding: 24px 17px 36px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
|
||||
.box-step {
|
||||
padding-top: 64px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
max-width: 662px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.01em;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-heading {
|
||||
.accordion-toggle {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.icon-credit-card {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
.form-step {
|
||||
display: flex;
|
||||
|
||||
.link-gift-card {
|
||||
display: none;
|
||||
|
||||
#show-gift-card-group {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-group {
|
||||
width: 30%;
|
||||
margin: 0;
|
||||
position: static;
|
||||
|
||||
.payment-group-list-btn {
|
||||
width: 100%;
|
||||
|
||||
.payment-group-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#payment-group-creditCardPaymentGroup,
|
||||
#payment-group-bankInvoicePaymentGroup,
|
||||
#payment-group-custom204PaymentGroupPaymentGroup,
|
||||
#payment-group-MercadoPagoPaymentGroup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f0f0f0;
|
||||
justify-content: center;
|
||||
padding: 13px 0;
|
||||
opacity: 0.3;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 6px;
|
||||
margin: 0;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@include mq(mobile, min) {
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border: 1px solid #f15a31;
|
||||
border-radius: 6px;
|
||||
background-color: rgba(220, 221, 227, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.payment-group-item-text {
|
||||
background-image: none !important;
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.01em;
|
||||
color: #58595b;
|
||||
background: none;
|
||||
text-decoration: none;
|
||||
|
||||
@include mq(mobile, min) {
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: #f15a31;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
|
||||
@include mq(mobile, min) {
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: #f15a31;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#payment-group-custom204PaymentGroupPaymentGroup {
|
||||
span {
|
||||
font-size: 0 !important;
|
||||
|
||||
&::before {
|
||||
content: "Cartão de Débito";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#payment-group-bankInvoicePaymentGroup {
|
||||
span {
|
||||
font-size: 0 !important;
|
||||
|
||||
&::before {
|
||||
content: "Boleto à Vista";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#payment-group-MercadoPagoPaymentGroup {
|
||||
span {
|
||||
font-size: 0 !important;
|
||||
|
||||
&::before {
|
||||
content: "Boleto Faturado";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps-view {
|
||||
flex: 1;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.shipping {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: -17px;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-data {
|
||||
.shipping-data.active {
|
||||
.accordion-heading {
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-400;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-container {
|
||||
.vtex-omnishipping-1-x-deliveryChannelsWrapper {
|
||||
border: 1px solid #f5f5f5;
|
||||
box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
|
||||
border-radius: 100px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryChannelsToggle {
|
||||
background: #ffffff;
|
||||
border: 1px solid #292929;
|
||||
box-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
#shipping-option-delivery {
|
||||
.shp-method-option-text {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
#shipping-option-pickup-in-point {
|
||||
.shp-method-option-text {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressFormPart1 {
|
||||
.ship-country {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ship-postalCode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0;
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
max-width: -webkit-fill-available;
|
||||
padding: 11px 8px 12px;
|
||||
border: 1px solid #c4c4c4;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
small {
|
||||
margin: 10px 0 0 0;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #292929;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-deliveryGroup {
|
||||
margin-top: 25px;
|
||||
|
||||
.vtex-omnishipping-1-x-shippingSectionTitle {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #7d7d7d;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingGroupList {
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingOption {
|
||||
padding: 14px 12px 12px;
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingIcon {
|
||||
margin-right: 8px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid #c4c4c4;
|
||||
border-radius: 3px;
|
||||
|
||||
svg {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
background: #00c8ff;
|
||||
border-radius: 3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingText {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #7d7d7d;
|
||||
|
||||
.vtex-omnishipping-1-x-leanShippingTextLabel {
|
||||
letter-spacing: 0.05em;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-optionPrice {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressForm {
|
||||
.vtex-omnishipping-1-x-shippingSectionTitle {
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
color: #7d7d7d;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressSummary {
|
||||
.address-summary {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #7d7d7d;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.vtex-omnishipping-1-x-linkEdit {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #00c8ff;
|
||||
text-decoration: none;
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-address {
|
||||
margin-bottom: 15px;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
margin: 0 0 15px 0;
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
max-width: -webkit-fill-available;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-submitPaymentButton {
|
||||
.btn-go-to-payment {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #00c8ff;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.payment-confirmation-wrap {
|
||||
position: absolute;
|
||||
top: calc(100% + 20px);
|
||||
|
||||
#payment-data-submit {
|
||||
margin: 0;
|
||||
background: #298541;
|
||||
border-radius: 8px;
|
||||
padding: 12px 0 11px;
|
||||
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderform-template-holder {
|
||||
width: 66.1132%;
|
||||
|
||||
.shipping-summary-placeholder {
|
||||
.vtex-omnishipping-1-x-SummaryItemGroup {
|
||||
margin-bottom: 8px;
|
||||
padding: 11px 0 0;
|
||||
|
||||
.vtex-omnishipping-1-x-SummaryItemContent {
|
||||
position: relative;
|
||||
padding: 0 0 0 3px;
|
||||
|
||||
.vtex-omnishipping-1-x-SummaryItemInfo {
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
||||
.vtex-omnishipping-1-x-SummaryItemAddress {
|
||||
margin: 0;
|
||||
|
||||
.address-summary {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
|
||||
.neighborhood {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.neighborhood-delimiter-after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.postalCode {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(100% + 2px);
|
||||
width: max-content;
|
||||
|
||||
&::before {
|
||||
content: " - ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-summaryPackage {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-SummaryItemPrice {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
left: 111px;
|
||||
|
||||
&::before {
|
||||
content: " - ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-summaryChange {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.empty-cart {
|
||||
font-family: $font-family;
|
||||
&-content {
|
||||
color: #292929;
|
||||
color: $black-400;
|
||||
text-align: center;
|
||||
|
||||
@include mq(md, max) {
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
&-links {
|
||||
.link-choose-products {
|
||||
background: #292929;
|
||||
background: $black-400;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
|
||||
@ -26,7 +26,7 @@ body {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
background: #7d7d7d;
|
||||
background: $gray-600;
|
||||
display: block;
|
||||
float: right;
|
||||
height: 2px;
|
||||
|
||||
@ -6,10 +6,17 @@
|
||||
}
|
||||
|
||||
.client-profile-data {
|
||||
height: 392px;
|
||||
height: auto;
|
||||
|
||||
&.filled {
|
||||
height: auto;
|
||||
border: 1px solid $gray-100;
|
||||
border-radius: 8px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.email-active {
|
||||
height: auto;
|
||||
height: 392px;
|
||||
}
|
||||
|
||||
.step.active.display-none {
|
||||
@ -47,6 +54,7 @@
|
||||
.row-fluid.orderform-template {
|
||||
display: flex;
|
||||
padding: 0 121px;
|
||||
margin-bottom: 125px;
|
||||
|
||||
.form-page.client-pre-email.anim-death.anim-current {
|
||||
position: absolute;
|
||||
@ -63,7 +71,7 @@
|
||||
border: none;
|
||||
|
||||
.link-cart {
|
||||
margin: 14px 130px 0 0;
|
||||
margin: 14px 8px 0 0;
|
||||
|
||||
small a {
|
||||
font-family: $font-family-secundary;
|
||||
@ -180,15 +188,27 @@
|
||||
}
|
||||
|
||||
.step.accordion-group.client-profile-data.active {
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $gray-300;
|
||||
padding: 24px 17px 44px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0;
|
||||
height: auto;
|
||||
|
||||
.accordion-heading {
|
||||
span {
|
||||
.accordion-toggle {
|
||||
margin-bottom: 36px;
|
||||
|
||||
span {
|
||||
font-size: 0;
|
||||
|
||||
&::before {
|
||||
content: "Identificação";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: $black-400;
|
||||
}
|
||||
}
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
@ -205,6 +225,13 @@
|
||||
&.client-document {
|
||||
margin: 0;
|
||||
width: 46%;
|
||||
|
||||
&::placeholder {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $gray-450;
|
||||
}
|
||||
}
|
||||
|
||||
&.client-first-name,
|
||||
@ -229,11 +256,11 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: #7d7d7d;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid #e0e0e0;
|
||||
border: 1px solid $gray-250;
|
||||
border-radius: 5px;
|
||||
height: 15px;
|
||||
font-weight: 400;
|
||||
@ -250,6 +277,10 @@
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
|
||||
.client-notice {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 46%;
|
||||
}
|
||||
@ -262,12 +293,19 @@
|
||||
.newsletter {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 44px;
|
||||
|
||||
.newsletter-text {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox.newsletter-label {
|
||||
input {
|
||||
width: 12px;
|
||||
border: 1px solid #828282;
|
||||
border: 1px solid $gray-800;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@ -283,7 +321,7 @@
|
||||
|
||||
button {
|
||||
display: block;
|
||||
background: #00c8ff;
|
||||
background: $blue-500;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-weight: 700;
|
||||
@ -300,19 +338,25 @@
|
||||
|
||||
.span6.pull-right.shipping-data {
|
||||
margin-left: 0;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 17px;
|
||||
padding: 24px 17px 28px;
|
||||
|
||||
.step.accordion-group.shipping-data {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.accordion-toggle.collapsed {
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-400;
|
||||
|
||||
i {
|
||||
display: none;
|
||||
@ -328,16 +372,28 @@
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-summary-info {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-family: $font-family;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.span6.pull-right.payment-data {
|
||||
margin-left: 0;
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 17px;
|
||||
padding: 24px 17px 28px;
|
||||
|
||||
.accordion-group {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.accordion-toggle.collapsed {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
@ -348,6 +404,14 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
font-family: $font-family-secundary;
|
||||
color: $black-400;
|
||||
}
|
||||
|
||||
.payment-edit-link {
|
||||
display: block !important;
|
||||
|
||||
@ -366,15 +430,29 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
font-family: $font-family;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-template.mini-cart.span4 {
|
||||
margin-left: 16px;
|
||||
border: 1px solid #e5e5e5;
|
||||
min-width: 250px;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 8px;
|
||||
height: 427px;
|
||||
|
||||
@include mq(1100, min) {
|
||||
min-width: 331px;
|
||||
}
|
||||
|
||||
.cart-fixed.cart-fixed-transition {
|
||||
position: static !important;
|
||||
height: auto !important;
|
||||
padding: 24px 0px 22px;
|
||||
|
||||
@ -408,6 +486,14 @@
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $black-500;
|
||||
font-family: $font-family-secundary;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
max-width: 115px;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
@ -415,8 +501,13 @@
|
||||
}
|
||||
|
||||
.description {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
min-width: max-content;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $black-400;
|
||||
|
||||
.shipping-date {
|
||||
display: none;
|
||||
@ -435,6 +526,7 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-decoration: none;
|
||||
color: $black-500;
|
||||
}
|
||||
}
|
||||
|
||||
@ -443,8 +535,8 @@
|
||||
|
||||
.totalizers-list {
|
||||
tr {
|
||||
border-top: 1px solid #e0e0e0;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
border-top: 1px solid $gray-250;
|
||||
border-bottom: 1px solid $gray-250;
|
||||
|
||||
.info {
|
||||
float: inherit;
|
||||
@ -455,6 +547,14 @@
|
||||
padding: 25px 17px 25px 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.info,
|
||||
.monetary {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -468,6 +568,14 @@
|
||||
float: right;
|
||||
padding: 30px 17px 0 0;
|
||||
}
|
||||
|
||||
.info,
|
||||
.monetary {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: $black-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -210,7 +210,7 @@
|
||||
padding: 0 11px;
|
||||
margin: 0;
|
||||
transform: translateY(30%);
|
||||
border: 1px solid #f0f0f0;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 8px;
|
||||
|
||||
.item-quantity-change {
|
||||
|
||||
@ -11,10 +11,14 @@ $black-500: #000;
|
||||
|
||||
$gray-100: #f0f0f0;
|
||||
$gray-200: #ededed;
|
||||
$gray-250: #e0e0e0;
|
||||
$gray-300: #e5e5e5;
|
||||
$gray-400: #c4c4c4;
|
||||
$gray-450: #bdbdbd;
|
||||
$gray-500: #989898;
|
||||
$gray-600: #7d7d7d;
|
||||
$gray-700: #808080;
|
||||
$gray-800: #828282;
|
||||
|
||||
$blue-500: #00c8ff;
|
||||
$blue-600: #20b2db;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user