feat:Cria tela de email desktop telas menores que 2500px
This commit is contained in:
parent
7ad6680f27
commit
64cfe65180
@ -4,10 +4,11 @@ import "slick-carousel";
|
||||
import Header from "./components/Header";
|
||||
import Footer from "./components/Footer";
|
||||
import Cart from "./components/Cart";
|
||||
import Email from "./components/Email";
|
||||
|
||||
const m3Checkout = new Container({
|
||||
appName: "m3-checkout",
|
||||
components: [CheckoutUI, Header, Footer, Cart],
|
||||
components: [CheckoutUI, Header, Footer, Cart, Email],
|
||||
});
|
||||
|
||||
m3Checkout.start();
|
||||
|
||||
29
checkout/src/arquivos/js/components/Email.js
Normal file
29
checkout/src/arquivos/js/components/Email.js
Normal file
@ -0,0 +1,29 @@
|
||||
// import waitForEl from "../helpers/waitForEl";
|
||||
import { waitElement } from "m3-utils";
|
||||
|
||||
export default class Email {
|
||||
constructor() {
|
||||
this.init();
|
||||
this.events();
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.addClassToCheckoutContainer();
|
||||
}
|
||||
|
||||
events() {
|
||||
window.addEventListener("hashchange", this.addClassToCheckoutContainer.bind(this));
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
this.checkoutContainer = await waitElement(".checkout-container");
|
||||
}
|
||||
|
||||
addClassToCheckoutContainer() {
|
||||
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");
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
@import "./utils/all";
|
||||
@import "./lib/slick";
|
||||
@import "./checkout/checkout.scss";
|
||||
@import "./partials/header";
|
||||
@import "./partials/footer";
|
||||
@import "./partials/menu";
|
||||
@import "./checkout/checkout.scss";
|
||||
@import "./partials/autenticacao";
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
.checkout-container {
|
||||
&.email-active {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.client-pre-email {
|
||||
border-color: #8d8d8d;
|
||||
font-family: $font-family;
|
||||
padding-top: 8px;
|
||||
height: auto;
|
||||
|
||||
.link-cart {
|
||||
a {
|
||||
@ -76,7 +80,7 @@
|
||||
.emailInfo {
|
||||
padding: 16px;
|
||||
background-color: $white-500;
|
||||
border: 1px solid #8d8d8d;
|
||||
|
||||
border-radius: 0;
|
||||
|
||||
h3 {
|
||||
@ -113,7 +117,7 @@
|
||||
.client-profile-data {
|
||||
.accordion-group {
|
||||
border-radius: 0;
|
||||
border: 1px solid #8d8d8d;
|
||||
|
||||
font-family: $font-family;
|
||||
padding: 16px;
|
||||
|
||||
@ -158,7 +162,7 @@
|
||||
select,
|
||||
input {
|
||||
border-radius: 0;
|
||||
border: 1px solid #8d8d8d;
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@ -213,7 +217,6 @@
|
||||
}
|
||||
|
||||
.shp-lean {
|
||||
border: 1px solid #8d8d8d;
|
||||
border-radius: 0;
|
||||
|
||||
label {
|
||||
|
||||
144
checkout/src/arquivos/sass/partials/_autenticacao.scss
Normal file
144
checkout/src/arquivos/sass/partials/_autenticacao.scss
Normal file
@ -0,0 +1,144 @@
|
||||
.container-main {
|
||||
.step {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#orderform-title {
|
||||
width: 100%;
|
||||
max-width: -webkit-fill-available;
|
||||
margin: 0 130px;
|
||||
padding: 17px 0;
|
||||
border-bottom: 1px solid $black-500;
|
||||
text-transform: uppercase;
|
||||
color: $black-500;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.checkout-container {
|
||||
.row-fluid.orderform-template {
|
||||
position: absolute;
|
||||
|
||||
.client-pre-email {
|
||||
border: none;
|
||||
|
||||
.link-cart {
|
||||
margin: 14px 130px 0 0;
|
||||
|
||||
small a {
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $black-500;
|
||||
}
|
||||
}
|
||||
|
||||
.pre-email {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.client-pre-email-h {
|
||||
margin: 65px 0 21px;
|
||||
|
||||
label {
|
||||
margin: 0;
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
small {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-transform: uppercase;
|
||||
color: $black-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-email.input.text.required.span8.offset2 {
|
||||
width: 562px;
|
||||
margin-bottom: 24px;
|
||||
margin-left: 0;
|
||||
|
||||
.input-block-level {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 15px 14px;
|
||||
color: $black-500;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 5px 8px 8px 5px;
|
||||
}
|
||||
|
||||
.btn.btn-success {
|
||||
padding: 12px 14px;
|
||||
background: $blue-500;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
|
||||
&:hover {
|
||||
background-color: $blue-600;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $blue-500;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
color: $black-500;
|
||||
}
|
||||
}
|
||||
|
||||
.help.error {
|
||||
margin-top: 3px;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $red-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emailInfo {
|
||||
width: 400px;
|
||||
border: 1px solid $black-500;
|
||||
border-radius: 5px;
|
||||
padding: 16px 16px 26px;
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $black-500;
|
||||
}
|
||||
|
||||
.unstyled {
|
||||
li {
|
||||
.icon-ok::before {
|
||||
color: $blue-500;
|
||||
}
|
||||
span {
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: $black-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -19,6 +19,8 @@ $gray-600: #7d7d7d;
|
||||
$blue-500: #00c8ff;
|
||||
$blue-600: #20b2db;
|
||||
|
||||
$red-500: #ff0000;
|
||||
|
||||
$white-500: #fff;
|
||||
|
||||
/* Grid breakpoints */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user