forked from M3-Academy/m3-academy-template-checkout
fix(header): corrige alinhamento da progressBar e ajusta responsividade do header
This commit is contained in:
parent
740079307e
commit
8864c52de5
@ -8,33 +8,39 @@ export default class Header {
|
||||
|
||||
async init() {
|
||||
await this.selectors();
|
||||
this.progressBarStructure();
|
||||
await this.progressBarStructure();
|
||||
await this.progressBarMove();
|
||||
}
|
||||
|
||||
async selectors() {
|
||||
// this.header = await waitElement(".headerCheckout");
|
||||
this.progressBar = await waitElement("#progressBar");
|
||||
}
|
||||
|
||||
progressBarStructure() {
|
||||
async progressBarStructure() {
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
this.progressBar.innerHTML = `
|
||||
<ul class="progress-bar__container">
|
||||
<li class="progress-bar__stage">
|
||||
<p class="progress-bar__stage--text">Meu carrinho</p>
|
||||
<div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
|
||||
</li>
|
||||
<div class="progress-bar__stage-wrapper">
|
||||
<li class="progress-bar__stage">
|
||||
<p class="progress-bar__stage--text">Meu carrinho</p>
|
||||
<div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<li class="progress-bar__stage">
|
||||
<p class="progress-bar__stage--text">Dados Pessoais</p>
|
||||
<div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
|
||||
</li>
|
||||
<div class="progress-bar__stage-wrapper">
|
||||
<li class="progress-bar__stage">
|
||||
<p class="progress-bar__stage--text">Dados Pessoais</p>
|
||||
<div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div class="progress-bar__stage-wrapper">
|
||||
<li class="progress-bar__stage">
|
||||
<p class="progress-bar__stage--text">Pagamento</p>
|
||||
<div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<li class="progress-bar__stage">
|
||||
<p class="progress-bar__stage--text">Pagamento</p>
|
||||
<div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
|
||||
</li>
|
||||
</ul>
|
||||
`
|
||||
}
|
||||
@ -48,7 +54,7 @@ export default class Header {
|
||||
|
||||
if (this.progressBar && window.innerWidth > 1024) {
|
||||
|
||||
const progressBarStages = document.querySelectorAll((".progress-bar__stage"));
|
||||
const progressBarStages = document.querySelectorAll(".progress-bar__stage");
|
||||
|
||||
progressBarStages.forEach((stage) => {
|
||||
|
||||
|
||||
@ -12,8 +12,7 @@ footer .footerCheckout__wrapper {
|
||||
width: 94.9734%;
|
||||
margin: auto auto 0 auto;
|
||||
}
|
||||
footer .footerCheckout__prateleira,
|
||||
header {
|
||||
footer .footerCheckout__prateleira {
|
||||
width: 79.53125%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -1,52 +1,136 @@
|
||||
/* _header.scss */
|
||||
.headerCheckout {
|
||||
// position: relative;
|
||||
margin: 0;
|
||||
padding: 30px 131px;
|
||||
padding: 29px 131px;
|
||||
border-bottom: 1px solid $black-500;
|
||||
|
||||
@include mq(xl, min) {
|
||||
padding: 29px 256px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
padding: 16px 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
grid-template-columns: 1fr 43.22% 1fr;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include mq(xl, min) {
|
||||
grid-template-columns: 1fr 54.22% 1fr;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
img {
|
||||
height: 37.14px;
|
||||
width: auto;
|
||||
width: 155.58px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 91.2px;
|
||||
width: 382.07px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
@include mq(xs, max) {
|
||||
width: 114px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
width: 440px;
|
||||
|
||||
&__container {
|
||||
// position:relative;
|
||||
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
&__stage {
|
||||
&__stage-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 6.5px;
|
||||
height: 1px;
|
||||
background: $black-500;
|
||||
|
||||
@include mq(xl, min) {
|
||||
bottom: 12.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
justify-content: flex-start;
|
||||
|
||||
&::after{
|
||||
width: calc(100% - 45.23px);//68.81%;
|
||||
right: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: calc(100% - 89.965px);//77.63%;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
&:nth-child(2) {
|
||||
justify-content: center;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
width: calc(50% - 7px);
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: calc(50% - 13px);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after{
|
||||
right: 0;
|
||||
}
|
||||
};
|
||||
|
||||
&:nth-child(3) {
|
||||
justify-content: flex-end;
|
||||
|
||||
&::before{
|
||||
width: calc(100% - 38.315px);//73.54%;
|
||||
left: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: calc(100% - 76.125px); //81.05%;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
&__stage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -58,6 +142,12 @@
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 12px;
|
||||
color: $black-500;
|
||||
|
||||
@include mq(xl, min) {
|
||||
margin-bottom: 15px;
|
||||
line-height: 28px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&--circle {
|
||||
@ -69,29 +159,11 @@
|
||||
&.active {
|
||||
background: $black-500;
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 6.5px;
|
||||
width: calc(50% - 7px);
|
||||
height: 1px;
|
||||
background: $black-500;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after{
|
||||
left: calc(50% + 7px);
|
||||
}
|
||||
|
||||
&:first-child::before,
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
@include mq(xl, min) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -105,6 +177,15 @@
|
||||
img {
|
||||
width: 12px;
|
||||
height: 15px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 29.47px;
|
||||
height: 41.46px;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
height: 13.33px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
@ -113,6 +194,11 @@
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: $black-300;
|
||||
|
||||
@include mq(xl, min) {
|
||||
line-height: 33px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,12 +22,12 @@ $color-green: #4caf50;
|
||||
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
xs: 375px,
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
lg: 1025px,
|
||||
xl: 2500px
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
|
||||
@ -9,7 +9,33 @@
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
|
||||
</a>
|
||||
</div>
|
||||
<div id="progressBar" class="progress-bar"> Aqui entra a barra de progresso
|
||||
<div id="progressBar" class="progress-bar">
|
||||
Aqui entra a barra de progresso
|
||||
|
||||
<ul class="progress-bar__container">
|
||||
<div class="progress-bar__stage-wrapper">
|
||||
<li class="progress-bar__stage">
|
||||
<p class="progress-bar__stage--text">Meu carrinho</p>
|
||||
<div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div class="progress-bar__stage-wrapper">
|
||||
<li class="progress-bar__stage">
|
||||
<p class="progress-bar__stage--text">Dados Pessoais</p>
|
||||
<div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
<div class="progress-bar__stage-wrapper">
|
||||
<li class="progress-bar__stage">
|
||||
<p class="progress-bar__stage--text">Pagamento</p>
|
||||
<div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
|
||||
</li>
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="headerCheckout__safeBuy">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user