atst/styles/components/_portfolio_layout.scss

261 lines
4.2 KiB
SCSS

.portfolio-panel-container {
@include media($large-screen) {
@include grid-row;
}
.line {
box-sizing: border-box;
height: 2px;
width: 100%;
border: 1px solid $color-gray-lightest;
}
}
.portfolio-breadcrumbs {
margin-bottom: $gap * 2;
color: $color-gray-medium;
font-size: $h5-font-size;
.icon-link {
color: $color-gray-medium;
font-weight: normal;
}
.icon--tiny {
padding: $gap 0;
}
.icon {
@include icon-color($color-gray-medium);
}
.portfolio-breadcrumbs__crumb {
.icon {
@include icon-color($color-blue);
}
.icon-link {
color: $color-blue;
pointer-events: none;
}
}
}
.portfolio-header {
margin: 2 * $gap 0;
.portfolio-header__name {
@include h1;
}
.portfolio-header__budget {
font-size: $small-font-size;
align-items: center;
button {
margin: 0;
padding: 0;
}
.portfolio-header__budget--dollars {
font-size: $h2-font-size;
font-weight: bold;
}
}
.links {
font-size: $small-font-size;
.icon-link {
&.active {
color: $color-gray;
.icon {
@include icon-color($color-gray);
}
}
.icon-link--icon {
text-align: center;
}
.icon {
@include icon-size(20);
}
}
}
}
.portfolio-content {
margin-top: 6 * $gap;
}
.portfolio-applications {
.portfolio-applications__header {
margin-bottom: 4 * $gap;
.portfolio-applications__header--title {
color: $color-gray-dark;
padding: $gap 0;
text-transform: uppercase;
opacity: 0.54;
font-size: $small-font-size;
font-weight: bold;
}
.portfolio-applications__header--actions {
color: $color-blue;
font-size: $small-font-size;
.icon {
@include icon-color($color-blue);
@include icon-size(14);
}
}
}
.application-list {
.application-list-item {
box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5);
}
}
}
.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);
}
}
.unfunded {
color: $color-red;
.icon {
@include icon-color($color-red);
}
}
}
.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;
}
.to-performance-period {
&.to-expiring-soon {
.to-expiration-alert {
font-weight: $font-bold;
font-size: 1.5rem;
margin-left: $gap;
}
&.funded .to-expiration-alert {
color: $color-blue;
.icon {
@include icon-color($color-blue);
}
}
&.unfunded {
.to-expiration-alert {
color: $color-red;
}
.icon {
@include icon-color($color-red);
}
.to-end-date {
color: $color-red;
}
}
}
}
}
}