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

feat: Versão tablet/Mobile 1024 feito para cart vazio

Browse Source
This commit is contained in:
José Carlos Lins 2022-12-13 19:16:25 -03:00
parent 3e18dc6937
commit cffddb1ead
4 changed files with 85 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -15,7 +15,7 @@
margin: 0;
line-height: 0;
&::before {
content: "Seu carrinho está vazio";
content: "Seu carrinho está vazio.";
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
@ -23,6 +23,13 @@
line-height: 33px;
text-transform: uppercase;
}
@media (max-width: 1024px) {
&::before {
font-size: 18px;
line-height: 25px;
}
}
}
&-links {
@ -33,10 +40,9 @@
transition: ease-in 0.22s all;
border-radius: 0;
box-sizing: border-box;
width: 34.4936%;
height: 48px;
margin: 32px 0 0 0;
padding-top: 15px;
padding: 16px 64px;
&::before {
content: "Continuar comprando";
font-family: "Tenor Sans";
@ -52,6 +58,12 @@
&:hover {
background: $color-white;
}
@media (max-width: 1024px) {
width: max-content;
padding: 16px 26px;
margin-top: 22px;
}
}
}
}
@ -68,3 +80,10 @@
.elementInvisible {
display: none !important;
}
@media screen and (max-width: 1024px) {
.link-choose-products .link-choose-products {
padding: 16px 26px;
width: max-content;
}
}

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

@ -3,6 +3,12 @@
@import "./checkout-pagamento";
@import "./checkout-autenticacao";
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
min-height: 100%;

28
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -20,6 +20,16 @@
&::after {
display: none;
}
@media (max-width: 1024px) {
display: grid;
grid-template-areas:
"stamps"
"address"
"develop";
width: 100%;
gap: 16px;
}
}
}
@ -33,9 +43,9 @@
text-transform: capitalize;
max-width: 40%;
@include mq(md, max) {
margin-bottom: 24px;
@media (max-width: 1024px) {
max-width: 100%;
margin-left: 16px;
}
}
@ -45,9 +55,9 @@
justify-self: center;
list-style: none;
@include mq(md, max) {
align-self: center;
margin-bottom: 12px;
@media (max-width: 1024px) {
grid-area: stamps;
margin: 0 0 0 8px;
}
&__divider {
@ -108,6 +118,14 @@
width: 28.66px;
height: 15.65px;
}
@media (max-width: 1024px) {
margin-left: 16px;
li:last-child {
margin-left: 11px;
}
}
}
&__prateleira {

58
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -37,30 +37,6 @@
// @media (min-width: 1140px) {
// width: 82%;
// }
// @media (min-width: 1270px) {
// width: 84%;
// }
// @media (min-width: 1440px) {
// width: 87%;
// }
// @media (min-width: 1810px) {
// width: 89%;
// }
// @media (min-width: 2160px) {
// width: 91%;
// }
// @media (min-width: 2880px) {
// width: 93%;
// }
// @media (min-width: 3510px) {
// width: 95%;
// }
}
.ProgressBar-step {
list-style: none;
@ -140,3 +116,37 @@
}
}
}
@media screen and (max-width: 1024px) {
.headerCheckout {
box-sizing: border-box;
.container {
width: 100%;
padding: 0 16px !important;
box-sizing: border-box;
}
.headerCheckout__safeBuy {
white-space: nowrap;
img {
width: 12px;
height: 13.33px;
}
}
&__wrapper {
padding: 16px 0;
#progressBar {
display: none;
}
}
&__logo {
width: 155.58px;
img {
width: 100%;
}
}
}
}