Compare commits

...

1 Commits

Author SHA1 Message Date
432016bd04 feat: Criação CSS do Header 2022-12-10 08:18:00 -03:00

View File

@ -1,22 +1,127 @@
/* _header.scss */ /* _header.scss */
.headerCheckout { .headerCheckout {
.container { .container {
width: auto !important; width: 79.53125%;
height: 96px;
display: flex;
align-items: center;
} }
&__wrapper { &__wrapper {
width: 100%;
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
#progressBar {
width: 43.1237%;
position: relative;
}
.ProgressBar {
width: 100%;
display: grid;
grid-template-columns: 1fr max-content 1fr;
margin: 0;
&::after {
content: "";
position: absolute;
width: 80%;
height: 1px;
background-color: #000000;
top: 29px;
left: 51%;
transform: translate(-50%, -50%);
z-index: -1;
@media (min-width: 1140px) {
width: 82%;
}
@media (min-width: 1270px) {
width: 84%;
}
@media (min-width: 1440px) {
width: 87%;
}
@media (min-width: 1810px) {
width: 89%;
}
@media (min-width: 2160px) {
width: 91%;
}
@media (min-width: 2880px) {
width: 93%;
}
@media (min-width: 3510px) {
width: 95%;
}
}
.ProgressBar-step {
list-style: none;
position: relative;
&:first-child::after {
content: none;
}
span {
display: grid;
grid-template-areas:
"texto"
"dot";
width: max-content;
white-space: nowrap;
font-family: "Tenor Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
&::before {
grid-area: dot;
justify-self: center;
content: "";
width: 12px;
height: 12px;
border: 1px solid #000000;
border-radius: 100%;
display: block;
background-color: #ffffff;
margin-top: 9px;
box-sizing: border-box;
}
}
.active {
&::before {
background-color: #000000;
}
}
}
.stepThree {
justify-self: end;
}
}
} }
&__logo { &__logo {
width: 155.58px;
img { img {
height: 52px; height: 37.14px;
width: auto; width: 100%;
} }
} }
&__safeBuy { &__safeBuy {
display: flex;
align-items: center;
span { span {
align-items: center; align-items: center;
display: flex; display: flex;
@ -26,10 +131,12 @@
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray; color: $color-black;
} }
i { img {
height: 15px;
margin-right: 8px; margin-right: 8px;
} }
} }