forked from M3-Academy/m3-academy-template-checkout
feat: Finaliza layout tablet
This commit is contained in:
parent
0a300c74d5
commit
c5b7a30187
@ -2,7 +2,7 @@ Stack trace:
|
||||
Frame Function Args
|
||||
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
|
||||
000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
|
||||
000FFFFCD30 002100484A2 (000007F0000, 000007F0101, 00000000001, F6F414F9291F)
|
||||
000FFFFCD30 002100484A2 (000000E0000, 000000E0101, 00000000001, 94FEDA51F366)
|
||||
000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
|
||||
000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
|
||||
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)
|
||||
|
@ -88,23 +88,21 @@ export default class Footer {
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 });
|
||||
const prateleira = await waitElement(".carrosel-items", { timeout: 5000, interval: 500 });
|
||||
|
||||
if (window.screen.width > 102) {
|
||||
if (window.screen.width > 1024) {
|
||||
$(prateleira).slick({
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
});
|
||||
} else if (window.screen.width <= 1024) {
|
||||
$(prateleira).slick({
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -5,9 +5,17 @@ h1#orderform-title {
|
||||
line-height: 33px;
|
||||
color: $color-black-500;
|
||||
margin: 17px 0;
|
||||
|
||||
@include mq(tablet, max) {
|
||||
margin: 17px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-container {
|
||||
.link.link-cart.pull-right {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.client-pre-email {
|
||||
border-color: $color-black-500;
|
||||
font-family: $font-family;
|
||||
@ -88,6 +96,7 @@ h1#orderform-title {
|
||||
@include mq(tablet, max) {
|
||||
width: 100%;
|
||||
text-align: initial;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -137,7 +146,7 @@ h1#orderform-title {
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(tablet, max) {
|
||||
right: 0;
|
||||
right: 1.7%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -231,6 +240,7 @@ h1#orderform-title {
|
||||
//DIV PAI DEIXAR TUDO FLEX COLLUM MOBILE
|
||||
.row-fluid.orderform-template {
|
||||
@include mq(tablet, max) {
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -249,6 +259,7 @@ h1#orderform-title {
|
||||
|
||||
//IDENTIFICAÇÃO
|
||||
.span6.client-profile-data {
|
||||
box-sizing: border-box;
|
||||
@include mq(tablet, max) {
|
||||
width: 100%;
|
||||
}
|
||||
@ -257,19 +268,19 @@ h1#orderform-title {
|
||||
.client-last-name,
|
||||
.client-document,
|
||||
.client-phone {
|
||||
width: 47.4%;
|
||||
@include mq(tablet, max) {
|
||||
width: 49.4%;
|
||||
}
|
||||
|
||||
input {
|
||||
@include mq(tablet, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-first-name,
|
||||
.client-document {
|
||||
margin-right: 5.14%;
|
||||
@include mq(tablet, max) {
|
||||
margin-right: 1.2%;
|
||||
}
|
||||
@ -630,7 +641,30 @@ h1#orderform-title {
|
||||
}
|
||||
|
||||
/*IDENTIFICAÇÃO*/
|
||||
|
||||
.client-profile-data {
|
||||
//INDENTIFICACAO INPUTS PORCENTAGEM
|
||||
/*.span6.client-profile-data {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.client-first-name,
|
||||
.client-last-name,
|
||||
.client-document,
|
||||
.client-phone {
|
||||
width: 49.4%;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.client-first-name,
|
||||
.client-document {
|
||||
margin-right: 1.2%;
|
||||
}
|
||||
}*/
|
||||
|
||||
.accordion-group {
|
||||
padding: 24px 17px;
|
||||
|
||||
@ -1144,6 +1178,12 @@ h1#orderform-title {
|
||||
}
|
||||
|
||||
//RESUMO DO PEDIDO (MINI CART CARRINHO)
|
||||
/*.summary-cart-template-holder {
|
||||
@include mq(tablet, max) {
|
||||
height: unset;
|
||||
}
|
||||
} TESTE */
|
||||
|
||||
.cart-fixed.cart-fixed-transition {
|
||||
height: auto !important; //TESTAR DEPOIS SE NAO TA QUEBRANDO ALGO
|
||||
|
||||
@ -1247,6 +1287,10 @@ h1#orderform-title {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-right: 17px;
|
||||
|
||||
@include mq(tablet, max) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1276,10 +1320,17 @@ h1#orderform-title {
|
||||
|
||||
&.info {
|
||||
margin-left: 17px;
|
||||
|
||||
@include mq(tablet, max) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.monetary {
|
||||
margin-right: 17px;
|
||||
@include mq(tablet, max) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -10,13 +10,10 @@
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-black;
|
||||
margin: 17px 0 16px;
|
||||
}
|
||||
|
||||
.cart-template .cart-items th {
|
||||
font-family: $font-family-secundary;
|
||||
font-weight: 400;
|
||||
padding: 0 0 17px;
|
||||
text-align: start;
|
||||
@include mq(tablet, max) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -189,6 +186,47 @@
|
||||
}
|
||||
}
|
||||
|
||||
//CART TABLET MOBILE
|
||||
.cart-template-holder {
|
||||
@include mq(tablet, max) {
|
||||
}
|
||||
|
||||
.cart {
|
||||
@include mq(tablet, max) {
|
||||
padding: 16px;
|
||||
margin: 16px 0;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
/*.product-image {
|
||||
@include mq(tablet, max) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
.quantity {
|
||||
@include mq(tablet, max) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary-template-holder {
|
||||
@include mq(tablet, max) {
|
||||
margin: 0 16px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-links-bottom {
|
||||
span {
|
||||
@include mq(tablet, max) {
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lookatme {
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
@ -60,7 +60,7 @@ body {
|
||||
|
||||
@include mq(tablet, max) {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
padding: 0; /*APLICAR EM OUTROS ELEMENTOS 16px*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user