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
|
Frame Function Args
|
||||||
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
|
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
|
||||||
000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
|
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 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
|
||||||
000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
|
000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
|
||||||
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)
|
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)
|
||||||
|
@ -88,23 +88,21 @@ export default class Footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async addCarrossel() {
|
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({
|
$(prateleira).slick({
|
||||||
slidesToShow: 3,
|
slidesToShow: 3,
|
||||||
slidesToScroll: 1,
|
slidesToScroll: 1,
|
||||||
infinite: true,
|
infinite: true,
|
||||||
arrows: true,
|
arrows: true,
|
||||||
responsive: [
|
|
||||||
{
|
|
||||||
breakpoint: 1024,
|
|
||||||
settings: {
|
|
||||||
slidesToShow: 4,
|
|
||||||
slidesToScroll: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -5,9 +5,17 @@ h1#orderform-title {
|
|||||||
line-height: 33px;
|
line-height: 33px;
|
||||||
color: $color-black-500;
|
color: $color-black-500;
|
||||||
margin: 17px 0;
|
margin: 17px 0;
|
||||||
|
|
||||||
|
@include mq(tablet, max) {
|
||||||
|
margin: 17px 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkout-container {
|
.checkout-container {
|
||||||
|
.link.link-cart.pull-right {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.client-pre-email {
|
.client-pre-email {
|
||||||
border-color: $color-black-500;
|
border-color: $color-black-500;
|
||||||
font-family: $font-family;
|
font-family: $font-family;
|
||||||
@ -88,6 +96,7 @@ h1#orderform-title {
|
|||||||
@include mq(tablet, max) {
|
@include mq(tablet, max) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: initial;
|
text-align: initial;
|
||||||
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@ -137,7 +146,7 @@ h1#orderform-title {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
@include mq(tablet, max) {
|
@include mq(tablet, max) {
|
||||||
right: 0;
|
right: 1.7%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -231,6 +240,7 @@ h1#orderform-title {
|
|||||||
//DIV PAI DEIXAR TUDO FLEX COLLUM MOBILE
|
//DIV PAI DEIXAR TUDO FLEX COLLUM MOBILE
|
||||||
.row-fluid.orderform-template {
|
.row-fluid.orderform-template {
|
||||||
@include mq(tablet, max) {
|
@include mq(tablet, max) {
|
||||||
|
padding: 0 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
@ -249,6 +259,7 @@ h1#orderform-title {
|
|||||||
|
|
||||||
//IDENTIFICAÇÃO
|
//IDENTIFICAÇÃO
|
||||||
.span6.client-profile-data {
|
.span6.client-profile-data {
|
||||||
|
box-sizing: border-box;
|
||||||
@include mq(tablet, max) {
|
@include mq(tablet, max) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -257,19 +268,19 @@ h1#orderform-title {
|
|||||||
.client-last-name,
|
.client-last-name,
|
||||||
.client-document,
|
.client-document,
|
||||||
.client-phone {
|
.client-phone {
|
||||||
|
width: 47.4%;
|
||||||
@include mq(tablet, max) {
|
@include mq(tablet, max) {
|
||||||
width: 49.4%;
|
width: 49.4%;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
@include mq(tablet, max) {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.client-first-name,
|
.client-first-name,
|
||||||
.client-document {
|
.client-document {
|
||||||
|
margin-right: 5.14%;
|
||||||
@include mq(tablet, max) {
|
@include mq(tablet, max) {
|
||||||
margin-right: 1.2%;
|
margin-right: 1.2%;
|
||||||
}
|
}
|
||||||
@ -630,7 +641,30 @@ h1#orderform-title {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*IDENTIFICAÇÃO*/
|
/*IDENTIFICAÇÃO*/
|
||||||
|
|
||||||
.client-profile-data {
|
.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 {
|
.accordion-group {
|
||||||
padding: 24px 17px;
|
padding: 24px 17px;
|
||||||
|
|
||||||
@ -1144,6 +1178,12 @@ h1#orderform-title {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//RESUMO DO PEDIDO (MINI CART CARRINHO)
|
//RESUMO DO PEDIDO (MINI CART CARRINHO)
|
||||||
|
/*.summary-cart-template-holder {
|
||||||
|
@include mq(tablet, max) {
|
||||||
|
height: unset;
|
||||||
|
}
|
||||||
|
} TESTE */
|
||||||
|
|
||||||
.cart-fixed.cart-fixed-transition {
|
.cart-fixed.cart-fixed-transition {
|
||||||
height: auto !important; //TESTAR DEPOIS SE NAO TA QUEBRANDO ALGO
|
height: auto !important; //TESTAR DEPOIS SE NAO TA QUEBRANDO ALGO
|
||||||
|
|
||||||
@ -1247,6 +1287,10 @@ h1#orderform-title {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
margin-right: 17px;
|
margin-right: 17px;
|
||||||
|
|
||||||
|
@include mq(tablet, max) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1276,10 +1320,17 @@ h1#orderform-title {
|
|||||||
|
|
||||||
&.info {
|
&.info {
|
||||||
margin-left: 17px;
|
margin-left: 17px;
|
||||||
|
|
||||||
|
@include mq(tablet, max) {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.monetary {
|
&.monetary {
|
||||||
margin-right: 17px;
|
margin-right: 17px;
|
||||||
|
@include mq(tablet, max) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10,13 +10,10 @@
|
|||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
margin: 17px 0 16px;
|
margin: 17px 0 16px;
|
||||||
}
|
|
||||||
|
|
||||||
.cart-template .cart-items th {
|
@include mq(tablet, max) {
|
||||||
font-family: $font-family-secundary;
|
margin-left: 16px;
|
||||||
font-weight: 400;
|
}
|
||||||
padding: 0 0 17px;
|
|
||||||
text-align: start;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -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 {
|
.lookatme {
|
||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
}
|
}
|
||||||
|
@ -60,7 +60,7 @@ body {
|
|||||||
|
|
||||||
@include mq(tablet, max) {
|
@include mq(tablet, max) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 16px;
|
padding: 0; /*APLICAR EM OUTROS ELEMENTOS 16px*/
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user