Update styles on spend table in reports

This commit is contained in:
Patrick Smith
2019-02-09 18:05:32 -05:00
parent fede9f81ee
commit 7278650395
2 changed files with 32 additions and 19 deletions

View File

@@ -200,9 +200,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;
@@ -212,8 +215,8 @@
padding: $gap * 2;
.spend-table__title {
@include h3;
margin: 0;
@include h4;
font-size: $lead-font-size;
flex: 2;
}
@@ -224,6 +227,12 @@
}
table {
thead th {
text-transform: uppercase;
border-bottom: 1px solid $color-gray-lightest;
border-top: none;
}
th, td {
white-space: nowrap;
@@ -231,10 +240,6 @@
margin: 0;
}
&.current-month {
background-color: $color-aqua-lightest;
}
&.previous-month {
color: $color-gray;
}
@@ -283,13 +288,15 @@
.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);
@@ -297,14 +304,21 @@
}
}
.spend-table__application__env {
margin-left: $gap;
th, td {
border-bottom: none;
}
&:last-child {
td, th {
padding-bottom: $gap * 5;
box-shadow: inset 0 (-$gap * 2.5) 0 $color-gray-lightest;
.spend-table__application__env {
margin-left: 2 * $gap;
th, td {
.icon-link {
font-weight: $font-normal;
font-size: $base-font-size;
}
border-bottom: 1px dashed $color-white;
background-color: $color-blue-light;
}
}
}