Merge pull request #1112 from dod-ccpo/app-settings-styling

App settings styling (part 1)

styles/components/_portfolio_layout.scss

@@ -29,9 +29,15 @@
   &__name {
     @include h1;
     h1 {
-      margin: ($gap * 2) $gap ($gap * 2) $gap;
+      margin: 0 $gap ($gap * 2) 0;
       font-size: 3.5rem;
     }
+
+    p {
+      font-size: $small-font-size;
+      margin: 0 0 (-$gap * 0.5);
+      color: $color-gray-medium;
+    }
   }
 
   &__budget {
@@ -69,17 +75,26 @@
     font-size: $small-font-size;
 
     .icon-link {
-      padding: 0.8rem 1.6rem;
+      padding: $gap;
+      border-radius: 0;
+      color: $color-blue-darkest;
+
+      &:hover {
+        background-color: $color-aqua-lightest;
+      }
 
-      color: $color-gray;
-      opacity: 0.3;
       .icon {
-        @include icon-color($color-gray);
+        @include icon-color($color-blue-darkest);
       }
 
       &.active {
-        opacity: 1;
         color: $color-blue;
+        background-color: $color-gray-lightest;
+
+        &:hover {
+          background-color: $color-aqua-lightest;
+        }
+
         .icon {
           @include icon-color($color-blue);
         }
@@ -121,7 +136,7 @@
 }
 
 .portfolio-content {
-  margin: 1 * $gap $gap 0 $gap;
+  margin: (4 * $gap) $gap 0 $gap;
 
   .panel {
     @include shadow-panel;
@@ -133,11 +148,6 @@
       padding-bottom: 0;
     }
 
-    .subheading {
-      font-size: 1.4rem;
-      color: $color-gray;
-    }
-
     .responsive-table-wrapper {
       padding-bottom: $gap * 3;
       margin-bottom: 0;
@@ -249,7 +259,6 @@
 
     textarea {
       max-height: 9rem;
-      max-width: none;
     }
 
     .panel__footer {

styles/core/_grid.scss

@@ -44,4 +44,9 @@
     flex-grow: 1;
     padding-right: $spacing-small;
   }
+
+  &.col--half {
+    width: 50%;
+    max-width: 30em;
+  }
 }

styles/elements/_inputs.scss

@@ -57,13 +57,9 @@
 }
 
 .usa-input {
-  margin: ($gap * 4) ($gap * 2) ($gap * 4) 0;
+  margin: ($gap * 2) 0;
   max-width: 75rem;
 
-  @include media($medium-screen) {
-    margin: ($gap * 4) 0;
-  }
-
   label {
     padding: 0 0 ($gap / 2) 0;
     margin: 0;
@@ -363,6 +359,8 @@ select {
     margin-right: $gap * 4;
 
     .usa-input {
+      margin: 0;
+
       input,
       label,
       .usa-input__message {
@@ -379,6 +377,8 @@ select {
     margin-left: $gap * 4;
 
     .usa-input {
+      margin: 0;
+
       input {
         max-width: 12rem;
       }

styles/sections/_application_edit.scss

@@ -18,7 +18,6 @@
     }
 
     .usa-input {
-      margin: 0 ($gap * 4) 0 0;
       flex-grow: 2;
     }
   }
@@ -28,6 +27,10 @@
 .form-content--app-mem {
   text-align: left;
 
+  .modal__body {
+    min-width: 75rem;
+  }
+
   input[type="checkbox"] + label::before {
     margin-left: 0;
   }
@@ -58,11 +61,8 @@
     }
   }
 
-  .form-row {
-    margin-top: 0;
-
+  .application-member__user-info {
     .usa-input {
-      margin: 0;
       width: 45rem;
 
       input,