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

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

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