FilipeQuintanilha/m3-academy-template-checkout-Filipe-Quintanilha
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): Ajusta o header em todos os tamanhos de tela

Browse Source
This commit is contained in:
Filipe Quintanilha Evangelista 2022-12-12 14:45:32 -03:00
parent 343b799e01
commit ea1d26afc1
3 changed files with 125 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
checkout/src/arquivos/js/components/Header.js
View File

@ -43,7 +43,7 @@ export default class Header {
<li class="central"> <li class="central">
<div class="containerLi"> <div class="containerLi">
<div> <div>
<p class="progress-bar-text">Dados Pesssoais</p> <p class="progress-bar-text">Dados Pessoais</p>
<p id="progressbar-circle-2" class="progressbar-circle-2"></p> <p id="progressbar-circle-2" class="progressbar-circle-2"></p>
</div> </div>
</div> </div>

116
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -1,17 +1,32 @@
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
width: 100%; width: 100%;
border-bottom: 2px solid gray; border-bottom: 1px solid black;
@include mq(xl, min) {
height: 149px;
}
.container { .container {
width: 79.53125% !important; width: 79.53125% !important;
@include mq(md, max) {
width: 100% !important;
}
.progress-bar { .progress-bar {
@include mq(xl, min) {
width: 1083.86px;
}
ul { ul {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
margin: 0; margin: 0;
gap: 107px; gap: 107px;
@include mq(xl, min) {
gap: 303px;
}
li { li {
.containerLi { .containerLi {
width: 100%; width: 100%;
@ -26,6 +41,13 @@
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@include mq(xl, min) {
margin-bottom: 15px;
font-size: 24px;
line-height: 28px;
font-weight: 400;
}
} }
.progressbar-circle-1 { .progressbar-circle-1 {
@ -36,6 +58,11 @@
border: 1px solid black; border: 1px solid black;
border-radius: 50%; border-radius: 50%;
margin: 0; margin: 0;
@include mq(xl, min) {
width: 14%;
height: 22px;
}
} }
.progress-bar-line-1 { .progress-bar-line-1 {
@ -46,6 +73,12 @@
width: 227%; width: 227%;
height: 1px; height: 1px;
border-top: 1px solid #000; border-top: 1px solid #000;
@include mq(xl, min) {
transform: translateY(-6px);
left: 56%;
width: 284%;
}
} }
.progressbar-circle-2 { .progressbar-circle-2 {
@ -57,6 +90,11 @@
border: 1px solid black; border: 1px solid black;
border-radius: 50%; border-radius: 50%;
margin: 0; margin: 0;
@include mq(xl, min) {
width: 12%;
height: 22px;
}
} }
.progressbar-circle-3 { .progressbar-circle-3 {
@ -68,6 +106,11 @@
border: 1px solid black; border: 1px solid black;
border-radius: 50%; border-radius: 50%;
margin: 0; margin: 0;
@include mq(xl, min) {
width: 18%;
height: 22px;
}
} }
.progress-bar-line-2 { .progress-bar-line-2 {
@ -75,9 +118,15 @@
right: 31%; right: 31%;
transform: translate(-10%); transform: translate(-10%);
bottom: -2px; bottom: -2px;
width: 279%; width: 274%;
height: 1px; height: 1px;
border-top: 1px solid #000; border-top: 1px solid #000;
@include mq(xl, min) {
transform: translateY(-6px);
right: 58%;
width: 345%;
}
} }
.active { .active {
@ -93,14 +142,55 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 29px 0; padding: 29px 0;
height: 37px;
@include mq(xl, min) {
height: 91px;
}
@include mq(md, max) {
padding: 16px;
height: 32px;
}
} }
&__logo { &__logo {
display: flex;
align-items: center;
width: 15.3%; width: 15.3%;
img { height: 100%;
height: 37px;
@include mq(xl, min) {
width: 19.25%;
}
@include mq(md, max) {
width: 15.7%;
}
@include mq(sm, max) {
width: 45.3%;
}
a {
width: 100%; width: 100%;
} }
img {
width: 100%;
@include mq(xl, min) {
width: 382px;
}
@include mq(md, max) {
height: 32px;
}
@include mq(sm, max) {
height: 33px;
}
}
} }
&__safeBuy { &__safeBuy {
@ -116,11 +206,29 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray; color: $color-gray;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
@include mq(md, max) {
line-height: 16px;
}
} }
img { img {
width: 12px; width: 12px;
height: 15px; height: 15px;
@include mq(xl, min) {
width: 29px;
height: 41px;
}
@include mq(md, max) {
height: 13px;
}
} }
i { i {

24
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -2,7 +2,7 @@
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
$font-family: "Open Sans", sans-serif; $font-family: "Open Sans", sans-serif;
$font-family-secundary:"Tenor Sans", sans-serif; $font-family-secundary: "Tenor Sans", sans-serif;
/* Colors */ /* Colors */
$color-black: #292929; $color-black: #292929;
@ -21,18 +21,18 @@ $color-green: #4caf50;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
cstm: 400, cstm: 400,
sm: 576px, sm: 376px,
md: 768px, md: 1025px,
lg: 992px, lg: 1280px,
xl: 1200px xl: 2500px,
) !default; ) !default;
$z-index: ( $z-index: (
level1: 5, level1: 5,
level2: 10, level2: 10,
level3: 15, level3: 15,
level4: 20, level4: 20,
level5: 25 level5: 25,
) !default; ) !default;