forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'feat: adiciona css checkout dados pessoais 1024px' (#24) from feature/adiciona-css-checkout-dados-pessoais-1024px into development
Reviewed-on: #24
This commit is contained in:
commit
5705b35d10
@ -8,17 +8,17 @@ export default class Footer {
|
||||
async init() {
|
||||
this.list = await this.fetchApiData();
|
||||
await this.selectors();
|
||||
this.events();
|
||||
this.cartTitle = await waitElement("#cart-title");
|
||||
if (window.location.hash === "#/cart") {
|
||||
await this.cartUpdate();
|
||||
}
|
||||
this.emptyButton = await waitElement(".link-choose-products");
|
||||
this.paymentsMethods = await waitElement(".footerCheckout__payments");
|
||||
this.certification = await waitElement(".footerCheckout__vtexpci");
|
||||
this.emptyCartButton();
|
||||
this.paymentsMethods = await waitElement(".footerCheckout__payments");
|
||||
this.addPaymentsMethodsIcons();
|
||||
this.certification = await waitElement(".footerCheckout__vtexpci");
|
||||
this.addCertificationIcon();
|
||||
this.events();
|
||||
this.items = await waitElement(".footerCheckout__prateleira-container");
|
||||
await this.renderItems();
|
||||
await this.addCarrossel();
|
||||
@ -39,7 +39,6 @@ export default class Footer {
|
||||
|
||||
events() {
|
||||
window.addEventListener("hashchange", this.outPrateleira.bind(this));
|
||||
window.addEventListener("resize", this.onRisize.bind(this));
|
||||
}
|
||||
|
||||
async cartUpdate() {
|
||||
@ -176,12 +175,6 @@ export default class Footer {
|
||||
`;
|
||||
}
|
||||
|
||||
async onRisize(e) {
|
||||
const windowSize = e.target.innerWidth;
|
||||
|
||||
console.log(windowSize);
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const elemento = await waitElement(".footerCheckout__prateleira-container");
|
||||
$(elemento).slick({
|
||||
@ -192,6 +185,14 @@ export default class Footer {
|
||||
"<button><img class='a-left control-c prev slick-prev' src='https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg' /></button>",
|
||||
nextArrow:
|
||||
"<button><img class='a-right control-c next slick-next' src='https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg' /></button>",
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1025,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,7 +80,7 @@
|
||||
width: 54.883%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 97% !important;
|
||||
width: 96.875% !important;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -128,6 +128,10 @@
|
||||
width: 12.762%;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
height: 48px;
|
||||
margin: 0;
|
||||
@ -149,7 +153,7 @@
|
||||
border: 1px solid $color-black;
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
width: 35.743%;
|
||||
width: 366px;
|
||||
|
||||
@media (min-width: 1025px) and (max-width: 1026px) {
|
||||
margin-top: 0;
|
||||
@ -157,7 +161,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 30.177%;
|
||||
width: 343px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -204,6 +208,16 @@
|
||||
border: 1px solid $color-gray3;
|
||||
font-family: $font-family;
|
||||
padding: 16px;
|
||||
width: 90.052%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 293.77%;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
width: 141.5%;
|
||||
}
|
||||
|
||||
// .accordion-heading {
|
||||
// span {
|
||||
@ -253,7 +267,7 @@
|
||||
color: $color-gray9;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
@ -74,6 +74,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $color-black;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 8px;
|
||||
@ -233,11 +235,8 @@
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
width: 250px;
|
||||
margin-left: 65px;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -379,6 +378,11 @@
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin: 28px 0 0 16px;
|
||||
width: 11% !important;
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
width: 15% !important;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
@ -396,9 +400,9 @@
|
||||
color: $color-gray2;
|
||||
box-shadow: none;
|
||||
|
||||
@include mq(lg, max) {
|
||||
width: 24px !important;
|
||||
}
|
||||
// @include mq(lg, max) {
|
||||
// width: 24px !important;
|
||||
// }
|
||||
}
|
||||
|
||||
.icon-plus-sign {
|
||||
@ -429,7 +433,7 @@
|
||||
|
||||
.item-quantity-change {
|
||||
@media (max-width: 979px) and (min-width: 768px) {
|
||||
position: inherit;
|
||||
position: relative;
|
||||
bottom: inherit;
|
||||
left: inherit;
|
||||
height: inherit;
|
||||
|
||||
@ -7,6 +7,11 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
border: 1px solid $color-gray5;
|
||||
border-radius: 8px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 98.413%;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 0 !important;
|
||||
width: 90px;
|
||||
@ -21,7 +26,7 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
|
||||
.url {
|
||||
height: 60px;
|
||||
width: 78.93px;
|
||||
width: 60px;
|
||||
margin-right: 7px;
|
||||
|
||||
img {
|
||||
@ -33,6 +38,117 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
.orderform-template-holder {
|
||||
width: 66.1132%;
|
||||
|
||||
.row-fluid {
|
||||
@media (max-width: 1024px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.client-email {
|
||||
@media (max-width: 767px) {
|
||||
width: 102%;
|
||||
}
|
||||
|
||||
#client-email {
|
||||
width: 95.67%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 98.54%;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
max-width: 100% !important;
|
||||
height: 42px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-first-name {
|
||||
width: 50%;
|
||||
margin: 0;
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
#client-first-name {
|
||||
width: 85.87%;
|
||||
@media (max-width: 1024px) {
|
||||
width: 95.512%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-last-name {
|
||||
width: 50%;
|
||||
|
||||
label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
#client-last-name {
|
||||
width: 85.87%;
|
||||
margin-left: 8px;
|
||||
@media (max-width: 1024px) {
|
||||
width: 95.512%;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-document {
|
||||
width: 50%;
|
||||
margin-right: 0;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#client-document {
|
||||
width: 86.585%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 95.512%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-phone {
|
||||
width: 50%;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#client-phone {
|
||||
width: 85.87%;
|
||||
margin-left: 8px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
width: 95.512%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#shipping-data {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#payment-data {
|
||||
margin: 0;
|
||||
.step {
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-profile-data {
|
||||
.accordion-group {
|
||||
.accordion-heading {
|
||||
@ -169,4 +285,10 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
color: $color-gray2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -132,6 +132,7 @@
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
left: 2.5%;
|
||||
top: 48%;
|
||||
}
|
||||
}
|
||||
.slick-next {
|
||||
@ -147,6 +148,7 @@
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
left: 96.5%;
|
||||
top: 48%;
|
||||
}
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
|
||||
@ -82,6 +82,10 @@
|
||||
@media (min-width: 1025px) and (max-width: 1107px) {
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 690px) {
|
||||
font-size: 10.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__sku {
|
||||
@ -113,6 +117,10 @@
|
||||
@media (min-width: 1025px) and (max-width: 1107px) {
|
||||
font-size: 9.7px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 714px) {
|
||||
font-size: 8.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user