ManuelaLuanaSchumackerTavares/m3-academy-template-checkout-manuela-luana-schumacker-tavares
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(carrinho): Concerta botão de quantidade de itens e reformula layout para ficar compativel com o figma #15

Merged
ManuelaLuanaSchumackerTavares merged 1 commits from hotfix/carrinho-ajuste-tela-1024 into main 2022-12-20 18:59:34 +00:00
Conversation 0 Commits 1 Files Changed 2 +63 -29
2 changed files with 63 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,13 @@
.container {
@include mq(md, max) {
width: 100%;
// .container {
// @include mq(pg, max) {
// width: 100%;
// }
// }
body .container-order-form,
body .container-cart {
@include mq(pg, max) {
width: 100% !important;
}
}
@ -18,7 +25,7 @@
border-radius: 5px;
padding: 16px;
@include mq(md, max) {
@include mq(pg, max) {
margin: 0px 0 25px 0;
border-left: none;
border-right: none;
@ -132,6 +139,10 @@
font-size: 14px;
line-height: 16px;
@include mq(pg, max) {
display: none;
}
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
@ -191,7 +202,7 @@
max-width: 100%;
width: auto;
@include mq(sm, max) {
@include mq(pg, max) {
height: 72px;
width: auto;
}
@ -201,8 +212,8 @@
.product-name {
padding-right: 0;
@include mq(lg, max) {
width: 250px;
@include mq(pg, max) {
padding: 0 0 10px !important;
}
a {
@ -219,6 +230,12 @@
text-decoration: none;
}
@include mq(pg, max) {
position: absolute;
top: 25px;
padding: 0 16px;
}
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
@ -245,7 +262,7 @@
line-height: 33px;
}
@include mq(md, max) {
@include mq(pg, max) {
display: none;
}
}
@ -257,6 +274,13 @@
@include mq(md, max) {
min-width: 78px;
}
@include mq(pg, max) {
position: absolute;
top: 50px;
right: 0;
}
@media (max-width: 490px) {
position: absolute;
bottom: 0;
@ -306,8 +330,12 @@
padding: 0;
width: max-content !important;
@media (max-width: 490px) {
@media (max-width: 1024px) {
margin-left: 84px !important;
// width: 24px !important;
position: absolute !important;
left: 0 !important;
top: 50px !important;
}
input {
@ -322,10 +350,6 @@
width: 38px;
color: $color-gray2;
box-shadow: none;
@include mq(lg, max) {
width: 24px !important;
}
}
.icon-plus-sign,
@ -358,12 +382,12 @@
.item-quantity-change {
@media (max-width: 979px) and (min-width: 768px) {
position: inherit;
bottom: inherit;
left: inherit;
height: inherit;
width: inherit;
top: inherit;
position: relative;
bottom: 0;
left: 0;
height: auto;
width: auto;
top: 0;
}
@media (max-width: 490px) {
@ -402,14 +426,18 @@
font-size: 28px;
line-height: 38px;
}
@include mq(md, max) {
@include mq(pg, max) {
display: none;
}
}
.item-remove {
@media (max-width: 490px) {
top: 0;
@media (max-width: 1024px) {
position: absolute;
top: 2px;
right: 0;
width: 24px;
padding: 4px 0;
}
.icon::before {
color: $color-gray4;
@ -443,7 +471,7 @@
.srp-container {
padding: 0 0 0 10px;
@include mq(md, max) {
@include mq(pg, max) {
padding: 0 16px;
}
@ -741,6 +769,11 @@
padding: 0;
width: 346px;
@include mq(pg, max) {
width: 100% !important;
padding: 0 16px;
}
.coupon-data {
#cart-link-coupon-add {
text-decoration: none;
@ -899,7 +932,7 @@
flex-direction: column;
width: 343px;
@include mq(md, max) {
@include mq(pg, max) {
padding: 0 16px;
width: calc(100% - 32px);
float: none;

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

@ -68,13 +68,14 @@ body {
#cart-title,
#orderform-title {
color: $color-gray2;
padding: 0 16px;
color: $color-black;
font-family: $font-family;
font-weight: 500;
font-size: 36px;
line-height: 42px;
font-weight: 700;
font-size: 24px;
line-height: 33px;
margin: 40px 0 30px;
letter-spacing: 0.1em;
letter-spacing: 0.05em;
text-transform: uppercase;
@include mq(md, max) {