From 12436fbd9e87f24477f433f5fa7bb73ae73b779e Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Fri, 1 Jun 2018 17:19:27 -0400
Subject: [PATCH] Extracting select list styles to be re-used

---
 src/components/Form/style.css | 25 +------------------------
 src/globals.css               | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/components/Form/style.css b/src/components/Form/style.css
index 4999664..84ff957 100644
--- a/src/components/Form/style.css
+++ b/src/components/Form/style.css
@@ -63,28 +63,5 @@
 }
 
 .select {
-  position: relative;
-  vertical-align: bottom;
-  display: inline-block;
-  height: var(--select-height);
-  width: var(--select-width);
-  background: var(--control-gradient);
-  color: var(--color-black);
-  overflow: hidden;
-
-  & select {
-    background: transparent;
-    border: 0 none;
-    font-size: inherit;
-    height: var(--select-height);
-    width: calc(var(--select-width) + 2rem);
-  }
-
-  & svg {
-    position: absolute;
-    top: calc((var(--select-height) - 24px) / 2);
-    right: 0;
-    pointer-events: none;
-    border-left: 0.1rem solid color(var(--color-black) alpha(0.2));
-  }
+  @apply --fancy-select;
 }
diff --git a/src/globals.css b/src/globals.css
index 34a7a3a..31a544b 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -78,4 +78,36 @@
       visibility: hidden;
     }
   }
+
+  --control-gradient: var(--color-green) var(--gradient-green);
+  --select-height: 2.8rem;
+  --select-width: 12rem;
+  --fancy-select {
+    margin-left: 1ex;
+    position: relative;
+    vertical-align: bottom;
+    display: inline-block;
+    height: var(--select-height);
+    width: var(--select-width);
+    background: var(--control-gradient);
+    color: var(--color-black);
+    overflow: hidden;
+
+    & select {
+      background: transparent;
+      border: 0 none;
+      font-size: inherit;
+      height: var(--select-height);
+      width: calc(var(--select-width) + 2rem);
+    }
+
+    & svg {
+      position: absolute;
+      top: calc((var(--select-height) - 24px) / 2);
+      right: 0;
+      pointer-events: none;
+      border-left: 0.1rem solid color(var(--color-black) alpha(0.2));
+      background: var(--control-gradient);
+    }
+  }
 }