From 53f2ca31279470b78c4b01fbb033f83be8fcf56f Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 14 Aug 2018 12:47:28 -0700
Subject: [PATCH] New layout helper for associating two elements vertically

By default, blocks have a margin of 1.5em to create a consistent
vertical rhythm. However, sometimes elements need to be associated with
the element above them. In this cases, the gap between elements needs to
be tighter. There are many ways to do this, but this approach asks the
latter content to be marked as associative. The implication is that the
association is with the previous block.
---
 ui/app/styles/core.scss         | 51 +++++++++++++++++----------------
 ui/app/styles/utils/layout.scss |  3 ++
 2 files changed, 29 insertions(+), 25 deletions(-)
 create mode 100644 ui/app/styles/utils/layout.scss

diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index e4391415b..a92c17ade 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -1,34 +1,35 @@
 // Utils
-@import "./utils/reset.scss";
-@import "./utils/z-indices";
-@import "./utils/product-colors";
-@import "./utils/bumper";
+@import './utils/reset.scss';
+@import './utils/z-indices';
+@import './utils/product-colors';
+@import './utils/bumper';
+@import './utils/layout';
 
 // Start with Bulma variables as a foundation
-@import "bulma/sass/utilities/initial-variables";
+@import 'bulma/sass/utilities/initial-variables';
 
 // Override variables where appropriate
-@import "./core/variables.scss";
+@import './core/variables.scss';
 
 // Bring in the rest of Bulma
-@import "bulma/bulma";
+@import 'bulma/bulma';
 
 // Override Bulma details where appropriate
-@import "./core/buttons";
-@import "./core/breadcrumb";
-@import "./core/columns";
-@import "./core/forms";
-@import "./core/icon";
-@import "./core/level";
-@import "./core/menu";
-@import "./core/message";
-@import "./core/navbar";
-@import "./core/notification";
-@import "./core/pagination";
-@import "./core/progress";
-@import "./core/section";
-@import "./core/table";
-@import "./core/tabs";
-@import "./core/tag";
-@import "./core/title";
-@import "./core/typography";
+@import './core/buttons';
+@import './core/breadcrumb';
+@import './core/columns';
+@import './core/forms';
+@import './core/icon';
+@import './core/level';
+@import './core/menu';
+@import './core/message';
+@import './core/navbar';
+@import './core/notification';
+@import './core/pagination';
+@import './core/progress';
+@import './core/section';
+@import './core/table';
+@import './core/tabs';
+@import './core/tag';
+@import './core/title';
+@import './core/typography';
diff --git a/ui/app/styles/utils/layout.scss b/ui/app/styles/utils/layout.scss
new file mode 100644
index 000000000..6504a68cf
--- /dev/null
+++ b/ui/app/styles/utils/layout.scss
@@ -0,0 +1,3 @@
+.is-associative {
+  margin-top: -0.75em;
+}