atst/styles/components/_portfolio_layout.scss
2019-01-29 15:52:55 -05:00

131 lines
1.9 KiB
SCSS

.portfolio-panel-container {
@include media($large-screen) {
@include grid-row;
}
}
.portfolio-navigation {
@include panel-margin;
margin-bottom: $gap * 4;
ul {
display: flex;
flex-direction: column;
li {
flex-grow: 1;
}
}
@include media($medium-screen) {
margin-bottom: $gap * 5;
}
@include media($large-screen) {
width: 20rem;
margin-right: $gap * 2;
ul {
display: block;
}
}
}
.portfolio-funding {
.portfolio-funding__header {
padding: 0;
margin: 0 $gap;
align-items: center;
.portfolio-funding__header--funded-through {
padding: 2 * $gap;
flex-grow: 1;
text-align: left;
font-weight: bold;
}
.funded {
color: $color-green;
.icon {
@include icon-color($color-green);
}
}
}
.pending-task-order {
background-color: $color-gold-lightest;
align-items: center;
margin: 0;
padding: 2 * $gap;
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
.label {
margin-right: 2 * $gap;
}
.pending-task-order__started {
flex-grow: 1;
}
.pending-task-order__value {
text-align: right;
}
}
.view-task-order-link {
margin-left: $gap * 2;
.icon--tiny {
@include icon-size(10);
margin-left: 1rem;
}
}
.portfolio-total-balance {
margin-top: -$gap;
margin-bottom: 3rem;
.row {
flex-direction: row-reverse;
margin: 2 * $gap 0;
padding-right: 14rem;
.label {
margin: 0 2 * $gap;
}
}
}
table {
th{
.icon {
margin-left: 1rem;
}
&.period-of-performance {
color: $color-blue;
.icon {
@include icon-color($color-primary)
}
}
}
td.unused-balance {
color: $color-red;
}
.label--expired {
background-color: $color-gray-light;
}
}
}