luizfelipe9627/m3-academy-template-checkout-luiz-felipe
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): criado e alterado estilização.

Browse Source
This commit is contained in:
Luiz Felipe Silva 2022-12-26 20:50:49 -03:00
parent 30555d9098
commit e7e7715e6c
1 changed files with 120 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,18 @@
/* _header.scss */
.headerCheckout {
width: 100%;
border-bottom: 1px solid $color-black2;
.container {
width: auto !important;
margin: 0;
padding: 24px 131px;
@include mq(xl, min) {
padding: 29px 256px;
}
}
&__wrapper {
align-items: center;
display: flex;
@ -11,26 +21,127 @@
&__logo {
img {
height: 52px;
width: auto;
width: 155px;
height: 37px;
@include mq(xl, min) {
width: 382px;
height: 91px;
}
}
}
&__safeBuy {
display: flex;
align-items: center;
span {
align-items: center;
display: flex;
font-weight: 400;
line-height: 16px;
text-transform: uppercase;
font-family: $font-family;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: $color-gray;
color: $color-black1;
@include mq(xl, min) {
font-size: 24px;
line-height: 33px;
}
}
i {
img {
width: 12px;
height: 14px;
margin-right: 8px;
@include mq(xl, min) {
width: 29px;
height: 41px;
}
}
}
.progress-bar {
display: flex;
width: 439px;
height: 35px;
justify-content: space-between;
@include mq(xl, min) {
width: 1078px;
height: 67px;
}
&__container-items {
list-style: none;
}
&__container-item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
&__circle1,
&__circle2,
&__circle3 {
height: 12px;
width: 12px;
border-radius: 50%;
border: 1px solid $color-black2;
@include mq(xl, min) {
height: 24px;
width: 24px;
}
}
&__line1,
&__line2 {
position: absolute;
background-color: $color-black2;
height: 1px;
bottom: 6px;
@include mq(xl, min) {
bottom: 12px;
}
}
&__line1 {
left: 59%;
width: 162px;
@include mq(xl, min) {
width: 437px;
}
}
&__line2 {
right: 60%;
width: 155px;
@include mq(xl, min) {
width: 420px;
}
}
.active {
background-color: $color-black2;
}
&__text {
font-family: $font-family-secundary;
font-size: 12px;
font-weight: 400;
line-height: 14px;
color: $color-black2;
@include mq(xl, min) {
font-size: 24px;
line-height: 28px;
}
}
}
}