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

feat/header: Cria esboço header desktop #1

Merged
ThiagoDutraSampaioLeite merged 1 commits from feature/criaHeader into main 2022-12-09 21:17:44 +00:00
Conversation 0 Commits 1 Files Changed 5 +245 -10907
5 changed files with 245 additions and 10907 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

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

@ -8,14 +8,58 @@ export default class Header {
async init() {
await this.selectors();
console.log(this.item);
this.progressBarDesktop();
}
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.progressBar = await waitElement("#progressBar");
// 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
// });
}
progressBarDesktop() {
if (this.progressBar && window.innerWidth > 1024) {
this.progressBar.innerHTML = `
<ul>
<li>
<div class="containerList">
<div class="containerList__div">
<p class="containerList__text">Meu carrinho</p>
<p class="containerList__circle"></p>
<p class="containerList__line"></p>
</div>
</div>
</li>
<li class="liMeio">
<div class="containerList">
<div class="containerList__div">
<p class="containerList__text">Dados Pessoais</p>
<p class="containerList__circle"></p>
</div>
</div>
</li>
<li>
<div class="containerList" >
<div class="containerList__div">
<p class="containerList__text">Pagamento </p>
<p class="containerList__circle"> </p>
<p class="containerList__line2"> </p>
<div/>
</div>
</li>
</ul>
`;
}
if (this.progressBar && window.innerWidth < 1024) {
this.progressBar.innerHTML = ``;
}
}
}

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

@ -3,3 +3,4 @@
@import "./partials/header";
@import "./partials/footer";
@import "./checkout/checkout.scss";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Tenor+Sans&display=swap");

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

@ -1,22 +1,30 @@
/* _header.scss */
.headerCheckout {
max-width: 100%;
width: 100%;
border-bottom: 1px solid $color-black;
.container {
width: auto !important;
width: 80% !important;
padding: 29px 0;
}
&__wrapper {
align-items: center;
display: flex;
align-items: center;
justify-content: space-between;
}
&__logo {
img {
height: 52px;
height: 37px;
width: auto;
}
}
&__safeBuy {
display: flex;
align-items: center;
justify-content: center;
span {
align-items: center;
display: flex;
@ -25,12 +33,94 @@
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
line-height: 16px;
color: $color-gray;
}
i {
img {
width: 12px;
height: 15px;
margin-right: 8px;
}
}
#progressBar {
width: 43%;
ul {
display: flex;
margin: 0;
list-style: none;
justify-content: space-between;
}
li {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-family: "Tenor Sans", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 14px;
width: 35%;
.containerList {
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
&__div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&__circle {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
height: 12px;
width: 12px;
background-color: $color-white;
border: 1px solid $color-black;
z-index: map-get($z-index, level1);
&.active {
background-color: $color-black;
}
}
&__line {
position: absolute;
left: 27%;
width: calc(100% + 25px);
bottom: 5px;
transform: translateY(-50%);
height: 1px;
border-top: 1px solid $color-black;
}
&__line2 {
position: absolute;
right: 21%;
width: calc(100% + 30px);
bottom: 5px;
transform: translateY(-50%);
height: 1px;
border-top: 1px solid $color-black;
}
}
}
li:last-child .containerList {
align-items: flex-end;
}
.liMeio {
width: 90px;
}
}
}

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

@ -2,10 +2,11 @@
@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;
$font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */
$color-black: #292929;
$color-black-500: #000;
$color-white: #fff;
@ -21,18 +22,18 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
$z-index: (
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25,
) !default;