Gustavo_Rallenson_Goncalves_Da_Silva/m3-academy-template-checkout-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:slick mobile

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2022-12-18 23:49:20 -03:00
parent 4bdb116c8b
commit 59d940e3fd
5 changed files with 93 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -40,6 +40,14 @@
} }
.cart-template { .cart-template {
font-family: $font-family; font-family: $font-family;
.summary-template-holder{
div{
border: 0 !important;
@include mq(xll, max) {
width: 100%;
}
}
}
@include mq(md, max) { @include mq(md, max) {
padding: 0 0; padding: 0 0;
} }
@ -59,6 +67,9 @@
border-right: none; border-right: none;
border-radius: 0; border-radius: 0;
} }
@include mq(xll, max) {
margin: 30px 0 25px 0;
}
} }
.cart-fixed.affix { .cart-fixed.affix {
position: relative !important; position: relative !important;
@ -804,8 +815,6 @@
color: $color-black; color: $color-black;
} }
button{ button{
border: 0;
right: 0;
top: 121px; top: 121px;
width: 140%; width: 140%;
height: 42px; height: 42px;
@ -817,6 +826,11 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
font-family:$font-family; font-family:$font-family;
margin-bottom: 44px; margin-bottom: 44px;
border: 0;
@include mq(xll, max) {
height: 48px;
white-space: nowrap;
}
} }
.flex{ .flex{
display: flex; display: flex;

2
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -185,8 +185,6 @@ body .container-main.container-order-form .orderform-template.active {
} }
.steps-view{ .steps-view{
position: absolute; position: absolute;
// width: 394px;
// height: 292px;
right: 0; right: 0;
top: -2px; top: -2px;
} }

10
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -5,6 +5,10 @@
display: grid; display: grid;
align-content: center; align-content: center;
padding: 0 0 0 0; padding: 0 0 0 0;
@include mq(xll, max) {
width: 250px;
height: 48px;
}
} }
.empty-cart { .empty-cart {
font-family: $font-family; font-family: $font-family;
@ -22,6 +26,7 @@
p{ p{
display: none; display: none;
} }
} }
@ -30,6 +35,11 @@
line-height: 33px; line-height: 33px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
@include mq(xll, max) {
font-size: 18px;
line-height: 25px;
white-space: nowrap;
}
} }
&-links { &-links {

5
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -103,6 +103,11 @@ body {
top: 0; top: 0;
left: 0; left: 0;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@include mq(xll, max) {
font-size: 24px;
line-height: 33px;
white-space: nowrap;
}
} }
.dropdown { .dropdown {

62
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -57,6 +57,13 @@
top: 0; top: 0;
margin: 16px 0 0 16px !important; margin: 16px 0 0 16px !important;
} }
span{
@include mq(IVK, min) {
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
}
} }
&__stamps { &__stamps {
@ -98,10 +105,19 @@
.VtexM3{ .VtexM3{
width: 44px; width: 44px;
height: 16px; height: 16px;
@include mq(IVK, min) {
width: 88px;
height: 30px;
}
} }
.VtexM3_2{ .VtexM3_2{
width: 28px; width: 28px;
height: 16px; height: 16px;
@include mq(IVK, min) {
width: 56px;
height: 32px;
}
} }
li:last-child { li:last-child {
margin-left: 16px; margin-left: 16px;
@ -119,7 +135,13 @@
text-decoration: none; text-decoration: none;
span { span {
color: $color-black;
margin-right: 8px; margin-right: 8px;
@include mq(IVK, min) {
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
} }
} }
} }
@ -142,12 +164,20 @@
.SLick_title{ .SLick_title{
font-family: 'Tenor Sans', sans-serif; font-family: 'Tenor Sans', sans-serif;
color: $color-black; color: $color-black;
margin-bottom: 20px;
@include mq(xll, max) {
font-size: 14px;
line-height: 28px;
}
} }
.Fakebutton-Prev{ .Fakebutton-Prev{
left: 161px; left: 161px;
top: 227px; top: 227px;
z-index: map-get($map:$z-index, $key: level5); z-index: map-get($map:$z-index, $key: level5);
position: absolute; position: absolute;
@include mq(xll, max) {
left: 29px;
}
} }
.Fakebutton-Next{ .Fakebutton-Next{
position: absolute; position: absolute;
@ -155,6 +185,9 @@
right: 161px; right: 161px;
z-index: map-get($map:$z-index, $key: level5); z-index: map-get($map:$z-index, $key: level5);
top: 227px; top: 227px;
@include mq(xll, max) {
right: 22px;
}
} }
.quadrado{ .quadrado{
display: flex !important; display: flex !important;
@ -178,10 +211,19 @@
text-align: center; text-align: center;
width: 26px; width: 26px;
height: 28px; height: 28px;
@include mq(xll, max) {
width: 16px ;
height: 18px;
border-radius: 4px;
}
} }
.cor{ .cor{
width: 54px !important; width: 54px !important;
height: 28px !important; height: 28px !important;
@include mq(xll, max) {
width: 46px ;
height: 28px;
}
} }
.verde{ .verde{
width: 54px !important; width: 54px !important;
@ -195,6 +237,10 @@
width: 112px !important; width: 112px !important;
height: 28px !important; height: 28px !important;
white-space: nowrap; white-space: nowrap;
@include mq(xll, max) {
width: 164px ;
height: 42px;
}
} }
} }
.Ver__produto{ .Ver__produto{
@ -204,13 +250,28 @@
border-radius: 8px; border-radius: 8px;
border: 0; border: 0;
background-color: $color-blue-100; background-color: $color-blue-100;
@include mq(xll, max) {
width: 106px;
height: 42px;
}
} }
.imago{ .imago{
background: #eeeeee; background: #eeeeee;
} }
@include mq(xll, max) {
width: 112px !important;
height: 394px !important;
}
} }
.slick-slide{ .slick-slide{
position: relative; position: relative;
@include mq(xll, max) {
img{
width: 164px;
height: 164px;
}
}
} }
.slick-list { .slick-list {
// width: 1016px; // width: 1016px;
@ -222,4 +283,5 @@
height: 466px !important; height: 466px !important;
} }
} }
} }