From f8e563ba7119826d1845f79fa30a3f80100afe7b Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 16 Jan 2018 16:03:50 -0800
Subject: [PATCH] A new place to put styles only the styleguide uses

---
 ui/app/styles/app.scss        | 11 +++++----
 ui/app/styles/styleguide.scss | 44 +++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 ui/app/styles/styleguide.scss

diff --git a/ui/app/styles/app.scss b/ui/app/styles/app.scss
index 444a30182..952709aee 100644
--- a/ui/app/styles/app.scss
+++ b/ui/app/styles/app.scss
@@ -1,5 +1,8 @@
-@import "./core";
-@import "./components";
-@import "./charts";
+@import './core';
+@import './components';
+@import './charts';
 
-@import "ember-power-select";
+@import 'ember-power-select';
+
+// Only necessary in dev
+@import './styleguide.scss';
diff --git a/ui/app/styles/styleguide.scss b/ui/app/styles/styleguide.scss
new file mode 100644
index 000000000..f77df0655
--- /dev/null
+++ b/ui/app/styles/styleguide.scss
@@ -0,0 +1,44 @@
+#styleguide {
+  .mock-content {
+    display: flex;
+    height: 250px;
+
+    .mock-image,
+    .mock-copy {
+      height: 100%;
+      width: 100%;
+      margin: 1em;
+    }
+
+    .mock-image {
+      background: linear-gradient(
+          to top right,
+          transparent 0%,
+          transparent 49%,
+          $grey-blue 49%,
+          $grey-blue 51%,
+          transparent 51%,
+          transparent 100%
+        ),
+        linear-gradient(
+          to bottom right,
+          transparent 0%,
+          transparent 49%,
+          $grey-blue 49%,
+          $grey-blue 51%,
+          transparent 51%,
+          transparent 100%
+        );
+    }
+
+    .mock-copy {
+      background: repeating-linear-gradient(
+        to bottom,
+        $grey-blue,
+        $grey-blue 5px,
+        transparent 5px,
+        transparent 14px
+      );
+    }
+  }
+}