Merge pull request #792 from dod-ccpo/style-updates

Style updates

styles/components/_accordion_table.scss

@@ -19,9 +19,9 @@
 
   .accordion-table__head {
     padding: $gap $gap*2;
+    font-size: $small-font-size;
     font-weight: 700;
     color: $color-gray;
-    text-transform: uppercase;
     background-color: $color-gray-lightest;
     border-bottom: 1px solid $color-gray-lightest;
     border-top: none;
@@ -107,6 +107,11 @@
     }
 
     .accordion-table__item__expanded {
+      font-size: $small-font-size;
+      font-weight: $font-normal;
+      background-color: $color-gray-lightest;
+      padding: $gap*2 $gap*4;
+
       th, td {
         .icon-link {
           font-weight: $font-normal;
@@ -118,12 +123,7 @@
 
       .accordion-table__item__expanded_first {
         float: left;
-        font-weight: bold;
       }
-
-      font-size: $small-font-size;
-      background-color: $color-gray-lightest;
-      padding: $gap*2.5 $gap*7 $gap*5 $gap*7;
     }
   }
 }
@@ -131,8 +131,6 @@
 #application-members {
   .accordion-table {
     .accordion-table__head {
-      font-size: $small-font-size;
-      padding-left: $gap*3;
     }
 
     .accordion-table__item-content, .accordion-table__head {
@@ -152,5 +150,9 @@
       flex-grow: 1;
       flex-basis: 0;
     }
+
+    .accordion-table__item__toggler {
+      text-align: right;
+    }
   }
 }

styles/components/_alerts.scss

@@ -4,6 +4,11 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/components/_alerts.scss
  */
 
+.usa-alert-heading {
+  line-height: 2.4rem;
+  margin-bottom: $gap;
+}
+
 @mixin alert {
   padding: $gap * 2;
   border-left-width: $gap / 2;

styles/components/_portfolio_layout.scss

@@ -16,7 +16,7 @@
 
 .portfolio-breadcrumbs {
   margin-bottom: $gap * 2;
-  color: $color-gray-medium;
+  color: $color-gray-dark;
   font-size: $h5-font-size;
 
   .icon-link {
@@ -34,10 +34,10 @@
 
   .portfolio-breadcrumbs__home {
     &.icon-link--disabled {
-      color: $color-gray-medium;
+      color: $color-gray-dark;
       opacity: 1;
       .icon {
-        @include icon-color($color-gray-medium);
+        @include icon-color($color-gray-dark);
       }
     }
   }
@@ -97,6 +97,7 @@
     font-size: $small-font-size;
 
     .icon-link {
+      padding: 0.8rem 1.2rem;
       &.active {
         color: $color-gray;
         .icon {
@@ -152,8 +153,6 @@
   color: $color-gray-dark;
   padding: $gap 0;
   text-transform: uppercase;
-  opacity: 0.54;
-  font-size: $small-font-size;
   font-weight: bold;
   margin-bottom: 3 * $gap;
 }
@@ -228,10 +227,6 @@
           }
         }
 
-        .green {
-          color: $color-green;
-        }
-
         .name {
           font-weight: bold;
 
@@ -337,6 +332,16 @@
         }
       }
     }
+
+    textarea {
+      max-height: 9rem;
+      max-width: none;
+    }
+
+    .panel__footer {
+      padding-bottom: 0;
+      padding-top: 0;
+    }
   }
 
   .activity-log {
@@ -378,8 +383,8 @@
     }
 
     .application-list-item {
+      box-shadow: $box-shadow;
       border-radius: 5px;
-      box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5);
       margin-bottom: 6 * $gap;
 
       .col {
@@ -467,7 +472,6 @@
   }
 
   table {
-    box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
     thead {
       th:first-child {
         padding-left: 3 * $gap;