pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #617 from dod-ccpo/reskin-portfolio-reports

Browse Source 
Reskin portfolio reports
This commit is contained in:
patricksmithdds
2019-02-11 12:59:22 -05:00
committed by GitHub
parent 66a3df89ef f80e8aca6c
commit a7733925ca
6 changed files with 202 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
styles/components/_portfolio_layout.scss
View File

@@ -95,17 +95,21 @@
margin: 6 * $gap $gap 0 $gap;
}
@mixin subheading {
color: $color-gray-dark;
padding: $gap 0;
text-transform: uppercase;
opacity: 0.54;
font-size: $small-font-size;
font-weight: bold;
}
.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;
@include subheading;
}
.portfolio-applications__header--actions {
@@ -287,3 +291,19 @@
}
}
}
.portfolio-reports {
.portfolio-reports__header {
margin-bottom: 4 * $gap;
.portfolio-reports__header--title {
@include subheading;
}
}
.panel {
box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
border-top: none;
border-bottom: none;
}
}

176
styles/sections/_reports.scss
View File

@@ -7,6 +7,11 @@
.funding-summary-row__col {
hr {
margin: 2 * $gap 0;
border-bottom: 1px solid $color-gray-lightest;
}
@include media($medium-screen) {
@include grid-pad;
flex-grow: 1;
@@ -36,6 +41,11 @@
max-width: 100%;
}
.subheading {
@include h4;
margin: 0 $gap 2 * $gap 0;
-ms-flex-negative: 1;
}
// Spending Summary
// ===============================
@@ -53,40 +63,28 @@
}
}
.spend-summary__heading {
@include h3;
margin: 0 $gap 0 0;
-ms-flex-negative: 1;
}
.spend-summary__budget {
margin: 0 0 0 $gap;
@include ie-only {
margin: $gap 0 0 0;
}
}
> div {
text-align: right;
margin: 0 0 ($gap / 2) 0;
dl {
text-align: left;
margin: 0 0 ($gap / 2) 0;
@include ie-only {
text-align: left;
}
@include ie-only {
text-align: left;
}
dd, dt {
display: inline;
}
dt {
color: $color-gray;
margin-right: $gap;
font-weight: normal;
}
dd {
font-weight: bold;
}
dt {
text-transform: uppercase;
color: $color-gray-light;
margin-right: $gap;
font-weight: bold;
font-size: $small-font-size;
}
}
@@ -97,42 +95,42 @@
}
.spend-summary__spent {
margin: $gap 0 0 0;
margin: 2 * $gap 0;
display: flex;
flex-direction: row-reverse;
flex-direction: column;
justify-content: flex-end;
dd, dt {
@include h5;
}
dt {
font-weight: normal;
margin-left: $gap;
letter-spacing: 0.47px;
}
}
}
// Task Order Summary
// ===============================
&.to-summary {
.to-summary__row {
.to-summary__heading {
@include h3;
margin: 0;
}
.icon-link {
font-weight: $font-normal
}
.to-summary__to-number {
margin: 0;
dd {
&::before {
content: '#';
color: $color-gray;
margin-right: $gap;
}
.subheading {
margin-bottom: 0;
}
.to-summary__heading {
@include h4;
margin: 0 $gap 0 0;
}
.to-summary__to-number {
margin: 0;
dd {
&::before {
content: '#';
color: $color-gray;
margin-right: $gap;
}
}
@@ -163,23 +161,27 @@
.to-summary__expiration {
dl {
margin: ($gap * 2) 0 0 0;
text-align: right;
> div {
margin: 0 0 ($gap / 2) 0;
dd, dt {
display: inline;
}
dd, dt {
display: block;
}
dt {
font-size: $small-font-size;
text-transform: uppercase;
font-weight: $font-bold;
color: $color-gray-light;
}
dt {
color: $color-gray;
margin-right: $gap;
font-weight: normal;
}
dd.ending-soon {
color: $color-red-dark;
font-size: $h2-font-size;
white-space: nowrap;
dd {
font-weight: bold;
.icon {
@include icon-size(28);
@include icon-color($color-red-dark);
}
}
}
@@ -203,9 +205,12 @@
.spend-table {
box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
.spend-table__header {
@include panel-base;
@include panel-theme-default;
border-top: none;
border-bottom: 0;
display: flex;
flex-direction: row;
@@ -215,8 +220,8 @@
padding: $gap * 2;
.spend-table__title {
@include h3;
margin: 0;
@include h4;
font-size: $lead-font-size;
flex: 2;
}
@@ -227,6 +232,12 @@
}
table {
thead th {
text-transform: uppercase;
border-bottom: 1px solid $color-gray-lightest;
border-top: none;
}
th, td {
white-space: nowrap;
@@ -234,10 +245,6 @@
margin: 0;
}
&.current-month {
background-color: $color-aqua-lightest;
}
&.previous-month {
color: $color-gray;
}
@@ -286,28 +293,53 @@
.spend-table__portfolio {
th, td {
font-weight: bold;
border-bottom: 1px solid $color-gray-lightest;
}
}
.spend-table__application {
.spend-table__application__toggler {
@include icon-link-color($color-black-light, $color-gray-lightest);
@include icon-link-color($color-blue, $color-gray-lightest);
margin-left: -$gap;
color: $color-blue;
.icon {
@include icon-size(12);
margin-right: $gap;
}
.open-indicator {
position: absolute;
bottom: 0;
left: 5 * $gap;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid $color-blue-light;
}
}
th, td {
border-bottom: none;
}
th[scope=rowgroup] {
position: relative;
}
.spend-table__application__env {
margin-left: $gap;
margin-left: 2 * $gap;
&:last-child {
td, th {
padding-bottom: $gap * 5;
box-shadow: inset 0 (-$gap * 2.5) 0 $color-gray-lightest;
th, td {
.icon-link {
font-weight: $font-normal;
font-size: $base-font-size;
}
border-bottom: 1px dashed $color-white;
background-color: $color-blue-light;
}
}
}