SabrinaMiranda/m3-academy-template-checkout-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): Aplica css na barra de progresso

Browse Source
This commit is contained in:
Sabrina Miranda 2022-12-13 22:56:37 -03:00
parent 0f14bfe418
commit 7409bb9cc9
3 changed files with 107 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -3,6 +3,10 @@
@import "./checkout-pagamento";
@import "./checkout-autenticacao";
* {
box-sizing: border-box;
}
html {
height: 100%;
min-height: 100%;

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

@ -1,12 +1,111 @@
/* _header.scss */
.headerCheckout {
padding: 29px 0;
.container {
width: auto !important;
#progressBar {
width: 439px;
ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 !important;
}
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 39.40%;
}
li .container-li {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
li:first-child .container-li {
align-items: flex-start;
}
li:last-child .container-li {
align-items: flex-end;
}
li .progress-bar-center {
width: auto;
}
li .progress-bar-center .container-li {
align-items: center;
margin-left: 7px;
}
li .container-li div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
li .container-li div .progress-bar-text {
font-family: $font-family-secundary;
line-height: 14px;
font-size: 12px;
font-weight: 400;
color: $color-black2;
margin-bottom: 9px;
}
#progress-bar-circle-1,
#progress-bar-circle-2,
#progress-bar-circle-3 {
width: 12px;
height: 12px;
border: 1px solid $color-black2;
background-color: $color-white;
border-radius: 50%;
z-index: map-get($z-index, level2 );
}
#progress-bar-circle-1.active,
#progress-bar-circle-2.active,
#progress-bar-circle-3.active {
border: none;
background-color: $color-black2;
}
.progress-bar-line-1,
.progress-bar-line-2 {
position: absolute;
width: 177px;
height: 1px;
border-top: 1px solid $color-black2;
bottom: 5px;
}
.progress-bar-line-1 {
left: 28%;
}
.progress-bar-line-2 {
right: 25%;
}
}
}
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
display: grid;
grid-template-columns: 2fr 1fr 2fr;
align-items: center;
}
&__logo {

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

@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
/* Colors */
$color-black: #292929;
$color-black2: #000000;
$color-white: #fff;