app/components/Balance/style.scss
@import 'theme/variables';
.balanceRowContainer {
display: flex;
justify-content: center;
margin: 3em 0 2em 0;
height: 90px;
}
.balanceRow {
display: flex;
padding: 0 1em;
border: 1px solid $gray;
border-radius: 6px;
background-color: $verylightgray;
font-size: 0.8em;
font-weight: bold;
.balanceWrapper {
display: flex;
}
.balanceSymbol {
align-self: center;
padding-bottom: 1.2em;
}
.balanceItem {
flex: 1;
padding: 0.5em 0;
.balanceAmount {
display: inline-block;
padding: 1em;
margin: 0.5em;
border: 1px solid $gray;
border-radius: 6px;
background-color: white;
&.neg {
color: $red;
}
&.pos {
color: $green;
}
}
.balanceTitle {
text-align: center;
}
}
}