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

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

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