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

feat(carrinho-vazio): layout em tamanhos maiores que 2500px

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-12-16 19:41:43 -03:00
parent cf6515f4c9
commit 42f1070d86
2 changed files with 81 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,6 @@
&-title { &-title {
font-family: $font-family; font-family: $font-family;
font-size: 20px;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
@ -25,9 +24,67 @@
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
margin-top: 170px; margin-top: 170px;
@include mq(sm, max) {
font-size: 18px;
line-height: 25px;
}
@include mq(tv, min) {
font-size: 48px;
line-height: 65px;
}
} }
&-links { &-links {
a {
position: relative;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
color: transparent;
@include mq(tv, min) {
width: 25%;
}
}
a::after {
content: "Continuar comprando";
color: $black;
font-family: $font-family-secundary;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
position: absolute;
left: 0;
right: 0;
@include mq(Gf, max) {
top: 25%;
}
@include mq(sm, max) {
font-size: 14px;
line-height: 16px;
}
@include mq(tv, min) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
top: 13%;
}
}
.link-choose-products { .link-choose-products {
background: $white; background: $white;
border: 1px solid $black; border: 1px solid $black;
@ -40,28 +97,16 @@
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
letter-spacing: 0.05em; letter-spacing: 0.05em;
padding: 15px 65px; padding: 16px 65px;
color: $black; color: $white;
text-transform: uppercase; text-transform: uppercase;
a { @include mq(sm, max) {
font-family: "Tenor Sans"; padding: 16px 26px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
color: transparent;
} }
a::after { @include mq(Gf, max) {
content: "Continuar comprando"; padding: 0 26px;
color: $black;
position: absolute;
left: 0;
right: 0;
} }
&:hover { &:hover {

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

@ -5,16 +5,16 @@
&__wrapper { &__wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-around;
padding: 16px; padding: 16px;
border-bottom: 1px solid $black; border-bottom: 1px solid $black;
@media (min-width: 1025px) { @media (min-width: 1025px) {
padding: 33.5px 130px; padding: 33.5px 0;
} }
@media (min-width: 2500px) { @media (min-width: 2500px) {
padding: 33.5px 256px; padding: 33.5px 0;
} }
} }
.progress-bar { .progress-bar {
@ -120,13 +120,22 @@
} }
} }
@media (min-width: 2500px) { @media (min-width: 2500px) {
width: 17.059%; width: 19.22%;
} }
} }
&__safeBuy { &__safeBuy {
justify-content: end;
display: flex; display: flex;
position: relative; align-items: center;
@media (min-width: 1025px) {
width: 14%;
}
@media (min-width: 2500px) {
width: 19%;
}
span { span {
min-width: fit-content; min-width: fit-content;
@ -149,15 +158,11 @@
} }
img { img {
position: absolute; width: 4.5%;
width: 11.25%; min-width: 12px;
top: -11%;
left: -11px;
@media (min-width: 2500px) { @media (min-width: 2500px) {
width: 14.34%; width: 6.1%;
top: -15%;
left: -27px;
} }
} }
} }