From 124b2b9a181e9a281ddecc41d39a26828175465c Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Mon, 22 Aug 2016 09:03:36 -0400
Subject: [PATCH] Add styles

---
 scss/_global.scss |  1 +
 scss/_gui.scss    | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/scss/_global.scss b/scss/_global.scss
index 8bfde1b90..ad5854a36 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -21,6 +21,7 @@ $header-height: $spacing-vertical * 2.5;
 
 $default-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 
+$blur-intensity: 8px;
 
 @mixin clearfix()
 {
diff --git a/scss/_gui.scss b/scss/_gui.scss
index 7f042b433..40997c37a 100644
--- a/scss/_gui.scss
+++ b/scss/_gui.scss
@@ -17,6 +17,10 @@ section
   {
     margin-bottom: 0;
   }
+  &:only-child {
+    /* If it's an only child, assume it's part of a React layout that will handle the last child condition on its own */
+    margin-bottom: $spacing-vertical;
+  }
 }
 
 main h1 {
@@ -186,6 +190,28 @@ input[type="text"], input[type="search"], textarea
   top: 0.16em;
 }
 
+.blur {
+  -webkit-filter: blur($blur-intensity);
+  -moz-filter: blur($blur-intensity);
+  -o-filter: blur($blur-intensity);
+  -ms-filter: blur($blur-intensity);
+  filter: blur($blur-intensity);
+}
+
+.translucent-overlay {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  padding: 5%;
+  background-color: rgba(210, 210, 210, 0.8);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+}
+
 .help {
   font-size: .85em;
   color: $color-help;