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(header): header tamanhos maiores que 2500px

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-12-12 12:17:13 -03:00
parent 6f8897c934
commit 78a933a392
3 changed files with 83 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
checkout/src/arquivos/js/components/Header.js
View File

@ -193,8 +193,10 @@ export default class Header {
"progress-bar-circle-1"
].classList.remove("active");
}
}
if (li.children[0].children[0].children["progress-bar-circle-2"]) {
console.log("teste 1");
li.children[0].children[0].children[
"progress-bar-circle-2"
].classList.add("active");
@ -210,7 +212,6 @@ export default class Header {
].classList.remove("active");
}
}
}
} else if (window.location.hash == "#/payment") {
if (li.children[0].children[0].children["progress-bar-circle-1"]) {
if (

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

@ -4,20 +4,29 @@
}
&__wrapper {
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid $black;
@media (min-width: 1025px) {
padding: 33.5px 130px;
}
@media (min-width: 2500px) {
padding: 33.5px 256px;
}
}
.progress-bar {
position: absolute;
display: flex;
flex-direction: column;
right: 31.5%;
top: 33%;
@media (min-width: 2500px) {
right: 41%;
}
.containerLi {
display: flex;
position: relative;
@ -35,40 +44,60 @@
}
&-text {
font-family: "Tenor Sans";
font-family: $font-family-secundary;
font-weight: 400;
font-size: 12px;
line-height: 14px;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
&-line-1,
&-line-2 {
position: absolute;
width: 181px;
top: 199%;
left: 50%;
width: 169px;
top: 82%;
left: 55%;
border: 1px solid $black;
@media (min-width: 2500px) {
width: 240px;
top: 79%;
left: 55%;
}
}
&-line-2 {
left: -240%;
width: 166px;
left: -223%;
@media (min-width: 2500px) {
width: 230px;
left: -143%;
}
}
&-circle-1,
&-circle-2,
&-circle-3 {
display: flex;
position: absolute;
height: 10px;
width: 10px;
align-self: center;
background-color: $white;
background: $white;
border: 1px solid $black;
border-radius: 50%;
margin-left: 40%;
margin-top: 9px;
padding: 0;
z-index: map-get($z-index, level2);
@media (min-width: 2500px) {
height: 22px;
width: 22px;
}
}
.active {
@ -78,18 +107,26 @@
&__logo {
width: 15.66%;
@media (min-width: 1025px) {
width: 15.28%;
img {
width: 100%;
}
}
@media (min-width: 2500px) {
width: 17.059%;
}
}
&__safeBuy {
display: flex;
position: relative;
span {
display: flex;
width: 100%;
align-items: center;
min-width: fit-content;
height: 50%;
text-transform: uppercase;
font-family: $font-family;
font-style: normal;
@ -98,11 +135,26 @@
line-height: 16px;
color: $color-gray;
margin-left: 8px;
@media (min-width: 2500px) {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 33px;
}
}
img {
width: 9.19%;
height: 13.3px;
position: absolute;
width: 11.25%;
top: -11%;
left: -11px;
@media (min-width: 2500px) {
width: 14.34%;
top: -15%;
left: -27px;
}
}
}
}

1
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -1,6 +1,7 @@
/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
$font-family: "Open Sans", sans-serif;
$font-family-secundary: "Tenor Sans", sans-serif;