From 2ec2d9410916fe988c34371012f5a3f6e4464c64 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Tue, 17 Jul 2018 14:42:56 -0400
Subject: [PATCH] Icon styles

---
 scss/atat.scss            |  2 ++
 scss/core/_util.scss      |  3 +++
 scss/core/_variables.scss |  7 +++----
 scss/elements/_icons.scss | 28 ++++++++++++++++++++++++++++
 4 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 scss/core/_util.scss
 create mode 100644 scss/elements/_icons.scss

diff --git a/scss/atat.scss b/scss/atat.scss
index 8f73326c..532330bb 100644
--- a/scss/atat.scss
+++ b/scss/atat.scss
@@ -3,6 +3,7 @@
 
 @import 'core/base';
 @import 'core/grid';
+@import 'core/util';
 
 @import 'elements/typography';
 @import 'elements/inputs';
@@ -10,6 +11,7 @@
 @import 'elements/panels';
 @import 'elements/block_lists';
 @import 'elements/tables';
+@import 'elements/icons';
 
 @import 'components/site_action';
 @import 'components/empty_state';
diff --git a/scss/core/_util.scss b/scss/core/_util.scss
new file mode 100644
index 00000000..101ddcf4
--- /dev/null
+++ b/scss/core/_util.scss
@@ -0,0 +1,3 @@
+.nowrap {
+  white-space: nowrap;
+}
diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss
index 5dbdb23a..266065e8 100644
--- a/scss/core/_variables.scss
+++ b/scss/core/_variables.scss
@@ -3,10 +3,9 @@
  * ===================================================
  */
 
-$gap:             .8rem; // 8px at 10px $em-base
-$topbar-height:   4.8rem;
-
-
+$gap:               .8rem; // 8px at 10px $em-base
+$topbar-height:     4.8rem;
+$icon-size-small:   2.4rem;
 
 /*
  * USWDS Variables
diff --git a/scss/elements/_icons.scss b/scss/elements/_icons.scss
new file mode 100644
index 00000000..95f7fb46
--- /dev/null
+++ b/scss/elements/_icons.scss
@@ -0,0 +1,28 @@
+@mixin icon {
+  display: inline-block;
+  vertical-align: bottom;
+
+  > svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@mixin icon-size($size) {
+  $icon-size: $size * .1rem;
+  width: $icon-size;
+  height: $icon-size;
+  margin: $icon-size / 4;
+}
+
+@mixin icon-style-default {
+  > svg * {
+    fill: $color-black;
+  }
+}
+
+.icon {
+  @include icon;
+  @include icon-size(16);
+  @include icon-style-default;
+}