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 {
font-family: $font-family;
font-size: 20px;
font-style: normal;
font-weight: 700;
font-size: 24px;
@ -25,9 +24,67 @@
text-align: center;
text-transform: uppercase;
margin-top: 170px;
@include mq(sm, max) {
font-size: 18px;
line-height: 25px;
}
@include mq(tv, min) {
font-size: 48px;
line-height: 65px;
}
}
&-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 {
background: $white;
border: 1px solid $black;
@ -40,28 +97,16 @@
line-height: 16px;
text-align: center;
letter-spacing: 0.05em;
padding: 15px 65px;
color: $black;
padding: 16px 65px;
color: $white;
text-transform: uppercase;
a {
font-family: "Tenor Sans";
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(sm, max) {
padding: 16px 26px;
}
a::after {
content: "Continuar comprando";
color: $black;
position: absolute;
left: 0;
right: 0;
@include mq(Gf, max) {
padding: 0 26px;
}
&:hover {

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

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