forked from M3-Academy/m3-academy-template-checkout
feat: Aplica css mobile
This commit is contained in:
parent
b669698bdf
commit
a6e8552951
@ -286,7 +286,7 @@
|
|||||||
padding: 12px 17px;
|
padding: 12px 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 490px) {
|
@media (max-width: 490px) {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -713,7 +713,7 @@
|
|||||||
color: #303030;
|
color: #303030;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
background-position: 8px 9px;
|
background-position: 8px 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -12,7 +12,7 @@
|
|||||||
color: $color-black;
|
color: $color-black;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
@include mq(md, max) {
|
@include mq(md, max) {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user