From ca2db7b58f32b948c5091b33a829c4146612dc4a Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 20 Aug 2018 15:10:51 -0400
Subject: [PATCH] funding screen base styles

---
 styles/atat.scss              |  1 +
 styles/sections/_funding.scss | 62 +++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 styles/sections/_funding.scss

diff --git a/styles/atat.scss b/styles/atat.scss
index bb29e97f..735e9278 100644
--- a/styles/atat.scss
+++ b/styles/atat.scss
@@ -38,3 +38,4 @@
 @import 'sections/projects_list';
 @import 'sections/project_edit';
 @import 'sections/member_edit';
+@import 'sections/funding';
diff --git a/styles/sections/_funding.scss b/styles/sections/_funding.scss
new file mode 100644
index 00000000..2e43170d
--- /dev/null
+++ b/styles/sections/_funding.scss
@@ -0,0 +1,62 @@
+.funding-summary-row {
+  @include media($medium-screen) {
+    @include grid-row;
+
+    .funding-summary-row__col {
+      @include grid-pad;
+      flex-grow: 1;
+
+      .panel {
+        padding: $gap * 2;
+
+        &.spend-summary {
+          .row {
+            justify-content: space-between;
+          }
+
+          .spend-summary__heading {
+            @include h3;
+            margin: 0 $gap 0 0;
+          }
+
+          .spend-summary__budget {
+            margin: 0 0 0 $gap;
+
+            > div {
+              text-align: right;
+              margin: 0 0 ($gap / 2) 0;
+
+              dd, dt {
+                display: inline;
+              }
+
+              dt {
+                color: $color-gray;
+                margin-right: $gap;
+                font-weight: normal;
+              }
+
+              dd {
+                font-weight: bold;
+              }
+            }
+          }
+
+          meter {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            width: 100%;
+            height: 3rem;
+            display: block;
+            background: $color-gray-lightest;
+          }
+
+          meter::-webkit-meter-bar {
+            background: $color-primary;
+          }
+        }
+      }
+    }
+  }
+}