forked from M3-Academy/m3-academy-template-checkout
feat(header): Ajusta o header em todos os tamanhos de tela
This commit is contained in:
parent
343b799e01
commit
ea1d26afc1
@ -43,7 +43,7 @@ export default class Header {
|
||||
<li class="central">
|
||||
<div class="containerLi">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,17 +1,32 @@
|
||||
/* _header.scss */
|
||||
.headerCheckout {
|
||||
width: 100%;
|
||||
border-bottom: 2px solid gray;
|
||||
border-bottom: 1px solid black;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 149px;
|
||||
}
|
||||
.container {
|
||||
width: 79.53125% !important;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@include mq(xl, min) {
|
||||
width: 1083.86px;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
gap: 107px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
gap: 303px;
|
||||
}
|
||||
|
||||
li {
|
||||
.containerLi {
|
||||
width: 100%;
|
||||
@ -26,6 +41,13 @@
|
||||
font-family: $font-family-secundary;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
margin-bottom: 15px;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.progressbar-circle-1 {
|
||||
@ -36,6 +58,11 @@
|
||||
border: 1px solid black;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 14%;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar-line-1 {
|
||||
@ -46,6 +73,12 @@
|
||||
width: 227%;
|
||||
height: 1px;
|
||||
border-top: 1px solid #000;
|
||||
|
||||
@include mq(xl, min) {
|
||||
transform: translateY(-6px);
|
||||
left: 56%;
|
||||
width: 284%;
|
||||
}
|
||||
}
|
||||
|
||||
.progressbar-circle-2 {
|
||||
@ -57,6 +90,11 @@
|
||||
border: 1px solid black;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 12%;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.progressbar-circle-3 {
|
||||
@ -68,6 +106,11 @@
|
||||
border: 1px solid black;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 18%;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar-line-2 {
|
||||
@ -75,9 +118,15 @@
|
||||
right: 31%;
|
||||
transform: translate(-10%);
|
||||
bottom: -2px;
|
||||
width: 279%;
|
||||
width: 274%;
|
||||
height: 1px;
|
||||
border-top: 1px solid #000;
|
||||
|
||||
@include mq(xl, min) {
|
||||
transform: translateY(-6px);
|
||||
right: 58%;
|
||||
width: 345%;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
@ -93,14 +142,55 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 29px 0;
|
||||
height: 37px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
height: 91px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
padding: 16px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 15.3%;
|
||||
img {
|
||||
height: 37px;
|
||||
height: 100%;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 19.25%;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 15.7%;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 45.3%;
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 382px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__safeBuy {
|
||||
@ -116,11 +206,29 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-gray;
|
||||
|
||||
@include mq(xl, min) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 12px;
|
||||
height: 15px;
|
||||
|
||||
@include mq(xl, min) {
|
||||
width: 29px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
@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");
|
||||
$font-family: "Open Sans", sans-serif;
|
||||
$font-family-secundary:"Tenor Sans", sans-serif;
|
||||
$font-family-secundary: "Tenor Sans", sans-serif;
|
||||
|
||||
/* Colors */
|
||||
$color-black: #292929;
|
||||
@ -21,18 +21,18 @@ $color-green: #4caf50;
|
||||
|
||||
/* Grid breakpoints */
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
xs: 0,
|
||||
cstm: 400,
|
||||
sm: 376px,
|
||||
md: 1025px,
|
||||
lg: 1280px,
|
||||
xl: 2500px,
|
||||
) !default;
|
||||
|
||||
$z-index: (
|
||||
level1: 5,
|
||||
level2: 10,
|
||||
level3: 15,
|
||||
level4: 20,
|
||||
level5: 25
|
||||
level1: 5,
|
||||
level2: 10,
|
||||
level3: 15,
|
||||
level4: 20,
|
||||
level5: 25,
|
||||
) !default;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user