forked from M3-Academy/m3-academy-template-checkout
feat(header): created initial styles for large,medium,small devices
This commit is contained in:
parent
8bcb85876b
commit
17dd48ebb2
@ -62,7 +62,8 @@ function styles() {
|
|||||||
)
|
)
|
||||||
.pipe(
|
.pipe(
|
||||||
autoprefixer({
|
autoprefixer({
|
||||||
cascade: false,
|
cascade: true,
|
||||||
|
add: true,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
.pipe(
|
.pipe(
|
||||||
|
|||||||
@ -3,21 +3,6 @@
|
|||||||
@import "./checkout-pagamento";
|
@import "./checkout-pagamento";
|
||||||
@import "./checkout-autenticacao";
|
@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 {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@ -1,36 +1,103 @@
|
|||||||
/* _header.scss */
|
/* _header.scss */
|
||||||
|
@function fluid($width, $design-width) {
|
||||||
|
$width: calc($width / $design-width * 100);
|
||||||
|
|
||||||
|
$width: quote($width + "%");
|
||||||
|
|
||||||
|
@return unquote($width);
|
||||||
|
}
|
||||||
|
|
||||||
.headerCheckout {
|
.headerCheckout {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: auto !important;
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
&__wrapper {
|
|
||||||
align-items: center;
|
&__wrapper,
|
||||||
|
&__safeBuy {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
width: 100%;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__logo {
|
&__safeBuy {
|
||||||
|
width: fluid(119px, 343px);
|
||||||
|
max-width: 119px;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 52px;
|
width: 12px;
|
||||||
width: auto;
|
height: 13px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__safeBuy {
|
&__logo {
|
||||||
|
width: fluid(155.58px, 343px);
|
||||||
|
max-width: 155.58px;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font: normal normal 12px / 14px $font-family-100;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-family: $font-family-100;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 14px;
|
|
||||||
color: $clr-gray-500;
|
color: $clr-gray-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
img {
|
||||||
margin-right: 8px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +1,50 @@
|
|||||||
<!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente,
|
<!-- 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. -->
|
MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
|
||||||
|
|
||||||
<header class="headerCheckout">
|
<header class="headerCheckout w-100 h-auto">
|
||||||
<div class="container">
|
<div class="container w-100 h-auto">
|
||||||
<div class="headerCheckout__wrapper">
|
<div class="headerCheckout__wrapper d-flex align-items-center jus-between">
|
||||||
<div class="headerCheckout__logo">
|
<div class="headerCheckout__logo w-PERCENT">
|
||||||
<a href="/">
|
<a class="w-100 h-100" href="/">
|
||||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
|
<img
|
||||||
</a>
|
class="w-100 h-100"
|
||||||
</div>
|
src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
|
||||||
<div id="progressBar" class="progress-bar"> Aqui entra a barra de progresso
|
alt="M3 Academy"
|
||||||
</div>
|
/>
|
||||||
<div class="headerCheckout__safeBuy">
|
</a>
|
||||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
|
</div>
|
||||||
<span>Compra segura</span>
|
|
||||||
</div>
|
<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>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
</header>
|
</div>
|
||||||
|
</header>
|
||||||
|
|||||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -45,6 +45,7 @@
|
|||||||
"jquery": "^3.6.0",
|
"jquery": "^3.6.0",
|
||||||
"m3-utils": "^0.1.0",
|
"m3-utils": "^0.1.0",
|
||||||
"sass": "^1.38.1",
|
"sass": "^1.38.1",
|
||||||
|
"slick-carousel": "^1.8.1",
|
||||||
"terser-webpack-plugin": "^5.1.4"
|
"terser-webpack-plugin": "^5.1.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -19345,6 +19346,7 @@
|
|||||||
"m3-utils": "^0.1.0",
|
"m3-utils": "^0.1.0",
|
||||||
"prettier": "^2.3.2",
|
"prettier": "^2.3.2",
|
||||||
"sass": "^1.38.1",
|
"sass": "^1.38.1",
|
||||||
|
"slick-carousel": "^1.8.1",
|
||||||
"terser-webpack-plugin": "^5.1.4",
|
"terser-webpack-plugin": "^5.1.4",
|
||||||
"webpack": "^5.51.1",
|
"webpack": "^5.51.1",
|
||||||
"webpack-merge": "^5.8.0"
|
"webpack-merge": "^5.8.0"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user