forked from M3-Academy/m3-academy-template-checkout
develop #1
@ -3,6 +3,10 @@
|
|||||||
@import "./checkout-pagamento";
|
@import "./checkout-pagamento";
|
||||||
@import "./checkout-autenticacao";
|
@import "./checkout-autenticacao";
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
@ -1,12 +1,111 @@
|
|||||||
/* _header.scss */
|
/* _header.scss */
|
||||||
.headerCheckout {
|
.headerCheckout {
|
||||||
|
padding: 29px 0;
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
}
|
|
||||||
&__wrapper {
|
#progressBar {
|
||||||
align-items: center;
|
width: 439px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
justify-content: space-between;
|
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 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 1fr 2fr;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__logo {
|
&__logo {
|
||||||
|
@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
|
|||||||
|
|
||||||
/* Colors */
|
/* Colors */
|
||||||
$color-black: #292929;
|
$color-black: #292929;
|
||||||
|
$color-black2: #000000;
|
||||||
|
|
||||||
$color-white: #fff;
|
$color-white: #fff;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user