forked from M3-Academy/m3-academy-template-checkout
feat(header): Aplica css no header mobiles
This commit is contained in:
parent
8365bff72b
commit
bc65d570b8
@ -56,9 +56,7 @@ export default class Header {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
`;
|
`;
|
||||||
}
|
} else if(this.progressBar && window.innerWidth <= 1024) {
|
||||||
|
|
||||||
if(this.progressBar && window.innerWidth <= 1024) {
|
|
||||||
this.progressBar.innerHTML = "";
|
this.progressBar.innerHTML = "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,17 @@
|
|||||||
/* _header.scss */
|
/* _header.scss */
|
||||||
.headerCheckout {
|
.headerCheckout {
|
||||||
.container {
|
.container {
|
||||||
width: 79.53125%;
|
width: 96.875%;
|
||||||
padding: 29px 0;
|
padding: 16px 0 !important;
|
||||||
|
|
||||||
|
@include mq(xm, min) {
|
||||||
|
width: 79.53125%;
|
||||||
|
padding: 29px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mq(xp, max) {
|
||||||
|
width: 91.4666%;
|
||||||
|
}
|
||||||
|
|
||||||
#progressBar {
|
#progressBar {
|
||||||
width: 440px;
|
width: 440px;
|
||||||
@ -131,19 +140,30 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: 2fr 1fr 2fr;
|
align-items: center;
|
||||||
align-items: center;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@include mq(xm, min) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr 2fr;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__logo {
|
&__logo {
|
||||||
display: block;
|
display: block;
|
||||||
width: 53.741%;
|
max-width: 155px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
@include mq(xg, min) {
|
@include mq(xg, min) {
|
||||||
width: 382px;
|
width: 382px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include mq(xpp, max) {
|
||||||
|
min-width: 45.2%;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -155,6 +175,11 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
min-width: 119px;
|
||||||
|
|
||||||
|
@include mq(xm, min) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -23,10 +23,13 @@ $color-green: #4caf50;
|
|||||||
/* Grid breakpoints */
|
/* Grid breakpoints */
|
||||||
$grid-breakpoints: (
|
$grid-breakpoints: (
|
||||||
xs: 0,
|
xs: 0,
|
||||||
cstm: 400,
|
xpp: 376px,
|
||||||
|
cstm: 400px,
|
||||||
sm: 576px,
|
sm: 576px,
|
||||||
|
xp: 599px,
|
||||||
md: 768px,
|
md: 768px,
|
||||||
lg: 992px,
|
lg: 992px,
|
||||||
|
xm: 1025px,
|
||||||
xl: 1200px,
|
xl: 1200px,
|
||||||
xg : 2500px
|
xg : 2500px
|
||||||
) !default;
|
) !default;
|
||||||
|
Loading…
Reference in New Issue
Block a user