anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(_header.scss): adicionando estilo do header

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-10 11:25:34 -03:00
parent 9a6c8af4e4
commit 1e2ce77477
3 changed files with 9351 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,6 @@ export default class Header {
async init() { async init() {
await this.selectors(); await this.selectors();
console.log(this.item); console.log(this.item);
console.log(this.header);
this.progressBarHtml(); this.progressBarHtml();
await this.progressBarProgress(); await this.progressBarProgress();
} }
@ -28,26 +27,25 @@ export default class Header {
if (this.progressBar && window.innerWidth > 1024) { if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = ` this.progressBar.innerHTML = `
<ul> <ul>
<li> <li>
<div class="containerLi"> <div class="containerLi__first">
<div> <div>
<p class="progress-bar-text">Meu Carrinho</p> <p class="progress-bar-text">Meu carrinho</p>
<p id="progress-bar-circle-1" class="progress-bar-circle-1"></p> <p id="progress-bar-circle-1" class="progress-bar-circle-1"></p>
<p class="progress-bar-line-1"></p> <p class="progress-bar-line-1"></p>
</div> </div>
</div> </div>
</li> </li>
<li class="central"> <li class="central">
<div class="containerLi"> <div class="containerLi__second">
<div> <div>
<p class="progress-bar-text">Dados Pessoais</p> <p class="progress-bar-text">Dados Pessoais</p>
<p id="progress-bar-circle-2" class="progress-bar-circle-2"></p> <p id="progress-bar-circle-2" class="progress-bar-circle-2"></p>
<p class="progress-bar-line-2"></p>
</div> </div>
</div> </div>
</li> </li>
<li> <li>
<div class="containerLi"> <div class="containerLi__third">
<div> <div>
<p class="progress-bar-text">Pagamento</p> <p class="progress-bar-text">Pagamento</p>
<p id="progress-bar-circle-3" class="progress-bar-circle-3"></p> <p id="progress-bar-circle-3" class="progress-bar-circle-3"></p>
@ -55,6 +53,7 @@ export default class Header {
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
`; `;
} }

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

@ -1,22 +1,38 @@
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
border-bottom: 1px solid #000000;
width: 100%;
margin: 0;
.container { .container {
width: auto !important; width: auto !important;
margin: 0 131px;
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 30px 0;
} }
&__logo { &__logo {
img { a {
height: 52px; img {
width: auto; height: 37.14px;
width: auto;
}
} }
} }
&__safeBuy { &__safeBuy {
display: flex;
width: 119px;
justify-content: space-between;
img {
width: 12px;
height: 15px;
}
span { span {
align-items: center; align-items: center;
display: flex; display: flex;
@ -25,7 +41,8 @@
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 16px;
font-weight: 400;
color: $color-gray; color: $color-gray;
} }
@ -34,3 +51,131 @@
} }
} }
} }
// barra de progresso
.progress-bar {
font-family: "Tenor Sans", sans-serif;
width: 439px;
ul {
list-style-type: none;
display: flex;
justify-content: space-between;
margin: 0 !important;
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #000000;
width: 39.9103%;
.containerLi {
&__first {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
align-items: flex-start;
}
&__third {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
align-items: flex-end;
}
&__first,
&__second,
&__third {
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p {
margin-bottom: 9px;
}
.progress-bar-text {
white-space: nowrap;
}
.progress-bar-circle-1{
transform: translateX(-2px);
}
.progress-bar-circle-3{
transform: translateX(-5px);
}
.progress-bar-circle-1,
.progress-bar-circle-2,
.progress-bar-circle-3 {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-radius: 50%;
margin-bottom: 0px;
}
.active {
width: 12px;
height: 12px;
border: none;
border-radius: 50%;
background-color: #000;
}
.progress-bar-line-1 {
left: 25%;
}
.progress-bar-line-3 {
right: 25%;
}
.progress-bar-line-1,
.progress-bar-line-3 {
position: absolute;
transform: translateY(-50%);
bottom: 5px;
width: 100%;
height: 1px;
border-top: 1px solid #000;
margin-bottom: 0px;
}
}
}
}
}
.central {
width: auto;
.containerLi {
&__second {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
margin-right: 3px;
margin-left: 4px;
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
}
}
}
}
}

9196
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff