feature/header #1

Merged
HenriqueSantosSantana merged 2 commits from feature/header into develop 2022-12-13 23:41:51 +00:00
5 changed files with 131 additions and 46 deletions
Showing only changes of commit 17dd48ebb2 - Show all commits

View File

@ -62,7 +62,8 @@ function styles() {
)
.pipe(
autoprefixer({
cascade: false,
cascade: true,
add: true,
})
)
.pipe(

View File

@ -3,21 +3,6 @@
@import "./checkout-pagamento";
@import "./checkout-autenticacao";
html {
height: 100%;
min-height: 100%;
}
footer .footerCheckout__wrapper {
width: 94.9734%;
margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,
header {
width: 79.53125%;
margin: 0 auto;
}
body {
display: flex;
flex-direction: column;

View File

@ -1,36 +1,103 @@
/* _header.scss */
.headerCheckout {
.container {
width: auto !important;
@function fluid($width, $design-width) {
$width: calc($width / $design-width * 100);
$width: quote($width + "%");
@return unquote($width);
}
&__wrapper {
align-items: center;
.headerCheckout {
padding: 16px;
.container {
width: 100%;
height: auto;
}
&__wrapper,
&__safeBuy {
display: flex;
align-items: center;
}
&__wrapper {
width: 100%;
justify-content: space-between;
}
&__logo {
&__safeBuy {
width: fluid(119px, 343px);
max-width: 119px;
gap: 8px;
img {
height: 52px;
width: auto;
width: 12px;
height: 13px;
}
}
&__safeBuy {
&__logo {
width: fluid(155.58px, 343px);
max-width: 155.58px;
height: auto;
span {
align-items: center;
display: flex;
align-items: center;
font: normal normal 12px / 14px $font-family-100;
text-transform: uppercase;
font-family: $font-family-100;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $clr-gray-500;
}
i {
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.progress-bar {
display: none;
}
}
.headerCheckout {
@media screen and (min-width: 1025px) {
padding: 29px 0;
&__wrapper {
width: fluid(992px, 1024px);
margin: 0 auto;
}
.progress-bar {
display: flex;
}
}
@media screen and (min-width: 1280px) {
&__wrapper {
width: fluid(1018px, 1280px);
}
}
@media screen and (min-width: 2500px) {
&__wrapper {
width: fluid(1988.28px, 2500px);
}
&__logo {
width: fluid(382.07px, 1988.28px);
max-width: none;
height: auto;
span {
display: flex;
align-items: center;
font: normal normal 24px / auto $font-family-100;
text-transform: uppercase;
color: $clr-gray-500;
}
}
}
}

View File

@ -1,19 +1,49 @@
<!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente,
MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
<header class="headerCheckout">
<div class="container">
<div class="headerCheckout__wrapper">
<div class="headerCheckout__logo">
<a href="/">
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
<header class="headerCheckout w-100 h-auto">
<div class="container w-100 h-auto">
<div class="headerCheckout__wrapper d-flex align-items-center jus-between">
<div class="headerCheckout__logo w-PERCENT">
<a class="w-100 h-100" href="/">
<img
class="w-100 h-100"
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 w-DEFINE-FIXED" class="progress-bar">
<ul class="progress-list w-100 pos-relative d-flex jus-between">
<div class="bar pos-absolute">
<div class="bar-fill"></div>
</div>
<div class="headerCheckout__safeBuy">
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
<span>Compra segura</span>
<li class="progress-item">
<p class="progress-title"></p>
<span class="progress-bullet pos-relative"></span>
</li>
<li class="progress-item">
<p class="progress-title"></p>
<span class="progress-bullet pos-relative"></span>
</li>
<li class="progress-item">
<p class="progress-title"></p>
<span class="progress-bullet pos-relative"></span>
</li>
</ul>
</div>
<div class="headerCheckout__safeBuy w-PERCENT">
<img
class="w-100 h-100"
src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
alt="Cadeado"
/>
<span class="fz-12">Compra segura</span>
</div>
</div>
</div>

2
package-lock.json generated
View File

@ -45,6 +45,7 @@
"jquery": "^3.6.0",
"m3-utils": "^0.1.0",
"sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4"
},
"devDependencies": {
@ -19345,6 +19346,7 @@
"m3-utils": "^0.1.0",
"prettier": "^2.3.2",
"sass": "^1.38.1",
"slick-carousel": "^1.8.1",
"terser-webpack-plugin": "^5.1.4",
"webpack": "^5.51.1",
"webpack-merge": "^5.8.0"