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

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

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

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

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

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

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