SabrinaMiranda/m3-academy-template-checkout-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Aplica css mobile

Browse Source
This commit is contained in:
Sabrina Miranda 2022-12-26 11:20:19 -03:00
parent b669698bdf
commit a6e8552951
4 changed files with 135 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,12 +10,15 @@
.cart-template { .cart-template {
font-family: $font-family; font-family: $font-family;
@include mq(md, max) { @include mq(md, max) {
padding: 0; padding: 0;
} }
.item-unit-label { .item-unit-label {
display: none; display: none;
} }
.cart { .cart {
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
box-sizing: border-box; box-sizing: border-box;
@ -27,6 +30,10 @@
padding: 16px 31px; padding: 16px 31px;
} }
@media (max-width: 1024px) {
height: 91px;
}
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
border-left: none; border-left: none;
@ -34,6 +41,7 @@
border-radius: 0; border-radius: 0;
} }
} }
.cart-fixed.affix { .cart-fixed.affix {
position: relative !important; position: relative !important;
} }
@ -169,6 +177,11 @@
.cart-items { .cart-items {
.product-item { .product-item {
padding: 16px 0; padding: 16px 0;
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
}
} }
th { th {
@ -186,6 +199,10 @@
line-height: 33px; line-height: 33px;
} }
@media (max-width: 1024px) {
display: none;
}
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
&.shipping-date { &.shipping-date {
@ -229,6 +246,14 @@
height: 146px; height: 146px;
} }
@media (max-width: 1024px) {
margin-top: -17px;
}
@media (max-width: 490px) {
margin-top: -27px;
}
img { img {
height: 60px; height: 60px;
max-width: 60px; max-width: 60px;
@ -256,6 +281,7 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black2; color: $color-black2;
width: auto;
@include mq(xg, min) { @include mq(xg, min) {
width: 600px; width: 600px;
@ -283,16 +309,26 @@
margin-left: 31px; margin-left: 31px;
} }
&:hover { @media (max-width: 1024px) {
color: darken($color-blue, 10); display: flex;
text-decoration: none; margin-left: 76px;
margin-top: -60px;
} }
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 23px; margin-left: 23px;
} margin-top: -26px;
} }
@media (max-width: 310px) {
margin-left: 12px;
}
&:hover {
color: darken($color-blue, 10);
text-decoration: none;
}
}
.brand, .brand,
.seller { .seller {
display: none !important; display: none !important;
@ -312,6 +348,10 @@
line-height: 28px; line-height: 28px;
} }
@media (max-width: 1024px) {
display: none;
}
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
} }
@ -321,13 +361,18 @@
min-width: 100px; min-width: 100px;
text-align: left; text-align: left;
@media (max-width: 1024px) {
text-align: right;
bottom: 40px;
}
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@media (max-width: 490px) { @media (max-width: 490px) {
position: absolute; position: absolute;
bottom: 0; bottom: 5px;
right: 0; right: 0;
} }
@ -400,8 +445,19 @@
padding: 21px 62px; padding: 21px 62px;
} }
@media (max-width: 1024px) {
display: flex;
margin-left: 76px;
margin-top: -100px;
}
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 84px !important; margin-left: 84px !important;
margin-top: -10px;
}
@media (max-width: 310px) {
margin-left: 75px !important;
} }
input { input {
@ -490,6 +546,11 @@
} }
.quantity-price { .quantity-price {
@media (max-width: 1024px) {
display: none;
}
.total-selling-price { .total-selling-price {
font-family: $font-family; font-family: $font-family;
font-weight: 700; font-weight: 700;
@ -507,9 +568,17 @@
} }
.item-remove { .item-remove {
@media (max-width: 1024px) {
text-align: right;
margin-top: -92px;
width: auto;
}
@media (max-width: 490px) { @media (max-width: 490px) {
top: 0; top: 0;
margin-top: -25px;
} }
.icon::before { .icon::before {
color: $color-gray6; color: $color-gray6;
font-size: 15px; font-size: 15px;
@ -521,6 +590,11 @@
@include mq(md, max) { @include mq(md, max) {
font-size: 18px; font-size: 18px;
} }
@media (max-width: 490px) {
font-size: 13.5px;
}
} }
} }
@ -539,17 +613,26 @@
} }
.summary { .summary {
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
}
.cart-more-options { .cart-more-options {
margin: 0; margin: 0;
width: max-content; width: max-content;
@media (max-width: 1024px) {
margin-bottom: 48px;
}
.srp-container { .srp-container {
padding: 0 0 0 10px; padding: 0 0 0 10px;
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
} }
.srp-main-title { .srp-main-title {
margin: 0 0 11px 0; margin: 0 0 11px 0;
font-style: normal; font-style: normal;
@ -586,6 +669,10 @@
max-width: none; max-width: none;
margin-bottom: 11px; margin-bottom: 11px;
} }
@media (max-width: 310px) {
max-width: 17rem;
}
} }
button.shp-open-options { button.shp-open-options {
@ -941,6 +1028,10 @@
width: 692px; width: 692px;
} }
@media (max-width: 1024px) {
width: 100%;
}
.coupon-data { .coupon-data {
margin-bottom: 0 0 10px 0; margin-bottom: 0 0 10px 0;
@ -1024,6 +1115,10 @@
width: 398px; width: 398px;
} }
@media (max-width: 1024px) {
width: 100%;
}
&::placeholder { &::placeholder {
padding: 1px 1px; padding: 1px 1px;
} }
@ -1059,6 +1154,10 @@
padding: 8px 50px; padding: 8px 50px;
} }
@media (max-width: 1024px) {
margin-left: 5px;
}
&:hover { &:hover {
background-color: $color-blue3; background-color: $color-blue3;
} }
@ -1071,6 +1170,12 @@
} }
.accordion-group { .accordion-group {
@media (max-width: 767px) {
width: 96.8%;
margin: auto;
padding: 0 4px;
}
tr { tr {
border-color: #e5e5e5; border-color: #e5e5e5;
@ -1149,9 +1254,12 @@
width: 688px; width: 688px;
} }
@media (max-width: 1024px) {
width: 100%;
}
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
width: calc(100% - 32px);
float: none; float: none;
} }
@ -1202,6 +1310,14 @@
padding: 12px 175px; padding: 12px 175px;
} }
@media (max-width: 384px) {
padding: 12px 95px;
}
@media (max-width: 370px) {
padding: 12px 45px;
}
&:hover { &:hover {
background: $color-blue3; background: $color-blue3;
} }

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

@ -67,6 +67,10 @@ body {
@include mq(xpp, max) { @include mq(xpp, max) {
width: 91.4666%; width: 91.4666%;
} }
@media (max-width: 767px) {
width: 100%;
}
} }
} }
@ -103,6 +107,11 @@ body {
@include mq(xm, min) { @include mq(xm, min) {
margin: 17px 0 16px; margin: 17px 0 16px;
} }
@media (max-width: 767px) {
padding: 0 16px;
}
} }
#orderform-title { #orderform-title {