Merge pull request #868 from dod-ccpo/funding-page

Funding page

styles/atat.scss

@@ -22,6 +22,7 @@
 @import "elements/kpi";
 @import "elements/graphs";
 @import "elements/menu";
+@import "elements/card";
 
 @import "components/accordion_table";
 @import "components/topbar";

styles/components/_portfolio_layout.scss

@@ -20,7 +20,7 @@
     flex-direction: row;
   }
 
-  margin-bottom: $gap * 4;
+  margin-bottom: $gap * 1;
 
   .col--grow {
     overflow: inherit;
@@ -127,7 +127,7 @@
 }
 
 .portfolio-content {
-  margin: 6 * $gap $gap 0 $gap;
+  margin: 1 * $gap $gap 0 $gap;
 
   .panel {
     @include shadow-panel;
@@ -373,7 +373,7 @@
 }
 
 .portfolio-funding {
-  padding: 2 * $gap;
+  padding: (2 * $gap) 0;
 
   .panel {
     @include shadow-panel;

styles/components/_sticky_cta.scss

@@ -4,12 +4,12 @@
   }
 
   @include media($medium-screen) {
-    margin-left: -$gap * 7;
+    margin-left: -$gap * 5;
   }
 }
 
 .sticky-cta.js-is-sticky {
-  width: 78.5%;
+  width: 80.8%;
 }
 
 .sticky-cta-container {

styles/core/_variables.scss

@@ -165,6 +165,7 @@ $checkbox-border-radius: 2px;
 $border-radius: 3px;
 $button-border-radius: 5px;
 $box-shadow: 0px 2px 5px 0px $color-shadow;
+$box-shadow-big: 0 4px 10px 0 rgba(193, 193, 193, 0.5);
 $focus-outline: 2px dotted $color-gray-light;
 $focus-spacing: 3px;
 $nav-width: 300px;

styles/elements/_card.scss

@@ -0,0 +1,34 @@
+.card {
+  width: 100%;
+  box-shadow: $box-shadow-big;
+  padding: ($gap * 2) ($gap * 2.5) ($gap * 4) ($gap * 3);
+  margin-bottom: 20px;
+
+  .card__status {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-around;
+
+    .card__status-spacer {
+      flex-grow: 10;
+    }
+  }
+
+  .card__header h3 {
+    margin-top: 0;
+  }
+
+  .card__body {
+    font-size: $small-font-size;
+  }
+}
+
+.card {
+  .label {
+    margin-left: 0;
+  }
+
+  .datetime {
+    font-size: $small-font-size;
+  }
+}

styles/sections/_task_order.scss

@@ -66,6 +66,19 @@
   }
 }
 
+.task-order-list {
+  margin-top: 6 * $gap;
+}
+
+.task-order-card .label {
+  font-size: $small-font-size;
+  margin-right: 2 * $gap;
+}
+
+.task-order-card__buttons .usa-button {
+  min-width: 10rem;
+}
+
 .task-order-summary {
   margin: $gap * 4;