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(
|
||||
autoprefixer({
|
||||
cascade: false,
|
||||
cascade: true,
|
||||
add: true,
|
||||
})
|
||||
)
|
||||
.pipe(
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,36 +1,103 @@
|
||||
/* _header.scss */
|
||||
@function fluid($width, $design-width) {
|
||||
$width: calc($width / $design-width * 100);
|
||||
|
||||
$width: quote($width + "%");
|
||||
|
||||
@return unquote($width);
|
||||
}
|
||||
|
||||
.headerCheckout {
|
||||
padding: 16px;
|
||||
|
||||
.container {
|
||||
width: auto !important;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
&__wrapper {
|
||||
align-items: center;
|
||||
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,50 @@
|
||||
<!-- 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"/>
|
||||
</a>
|
||||
</div>
|
||||
<div id="progressBar" class="progress-bar"> Aqui entra a barra de progresso
|
||||
</div>
|
||||
<div class="headerCheckout__safeBuy">
|
||||
<img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
|
||||
<span>Compra segura</span>
|
||||
</div>
|
||||
<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 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>
|
||||
</header>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user