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

feat(ProgressBar): Estiliza barra de progresso

Browse Source
This commit is contained in:
William Simão Cavalcante 2022-12-13 16:25:07 -03:00
parent 2dab582c69
commit 02b840deab
6 changed files with 178 additions and 10899 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10970
checkout/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@ -8,14 +8,37 @@ export default class Header {
async init() {
await this.selectors();
console.log(this.item);
this.progressBarHTML();
}
async selectors() {
this.item = await waitElement("#my-element", {
//#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
});
this.header - await waitElement('.headerCheckout');
this.progressBar = await waitElement('#progressBar');
}
}
progressBarHTML () {
if(window.screen.width > 1024) {
this.progressBar.innerHTML = `
<ul class="container-ul">
<li class="container-li">
<p class="text">Meu carrinho</p>
<p class="circle-1"></p>
<p class="linha-1"></p>
</li>
<li class="container-li">
<p class="text">Dados Pessoais</p>
<p class="circle-2"></p>
<p class="linha-2"></p>
</li>
<li class="container-li">
<p class="text">Pagamento</p>
<p class="circle-3"></p>
</li>
</ul>`;
}
if (window.screen.width <= 1024) {
this.progressBar.innerHTML = ``;
}
};
};

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

@ -13,10 +13,6 @@ footer .footerCheckout__wrapper {
margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,
header {
width: 79.53125%;
margin: 0 auto;
}
body {
display: flex;

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

@ -1,5 +1,7 @@
/* _header.scss */
.headerCheckout {
padding: 29px 131px;
border-bottom: 1px solid $color-black-500;
.container {
width: auto !important;
}
@ -11,26 +13,80 @@
&__logo {
img {
height: 52px;
height: 37.14px;
width: auto;
}
}
&__safeBuy {
display: flex;
gap: 8px;
img {
height: 15px;
}
span {
align-items: center;
display: flex;
text-transform: uppercase;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-gray;
line-height: 16px;
color: $color-black;
}
i {
margin-right: 8px;
}
}
#progressBar {
width: 439px;
.container-ul {
list-style: none;
display: flex;
justify-content: space-between;
position: relative;
margin: 0;
.container-li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
.circle-1, .circle-2, .circle-3{
width: 12px;
height: 12px;
border: 1px solid $color-black-500;
border-radius: 50%;
}
.linha-1 {
top: 64%;
left: 58%;
width: 173px;
border: 1px solid $color-black-500;
position: absolute;
}
.linha-2 {
top: 64%;
left: 58%;
width: 166px;
border: 1px solid $color-black-500;
position: absolute;
}
.active {
background-color: $color-black-500;
}
.text {
font-family: $font-family-secundary;
font-style: normal;
font-size: 12px;
font-weight: 400;
line-height: 14px;
color: $color-black-500;
}
}
}
}
}

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

@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
/* Colors */
$color-black: #292929;
$color-black-500: #000000;
$color-white: #fff;

1
checkout/src/template-checkout/checkout-footer.html
View File

@ -36,3 +36,4 @@
</ul>
</div>
</footer>