From b223e88816e656cc501660e1ab362e4f9b6a8ffa Mon Sep 17 00:00:00 2001
From: John Furrow <johnf@mesosphere.io>
Date: Sun, 8 Nov 2015 00:48:25 -0800
Subject: [PATCH] Generalize dropdown CSS

---
 client/source/sass/objects/_action-bar.scss | 26 +------------
 client/source/sass/objects/_dropdown.scss   | 42 +++++++++++++++++++++
 2 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/client/source/sass/objects/_action-bar.scss b/client/source/sass/objects/_action-bar.scss
index f2c30591..95523046 100644
--- a/client/source/sass/objects/_action-bar.scss
+++ b/client/source/sass/objects/_action-bar.scss
@@ -63,6 +63,7 @@
 
   &__group {
     display: inline-block;
+    font-size: 0;
     padding: 0 15px;
 
     &--has-divider {
@@ -92,31 +93,6 @@
       .dropdown {
         margin: 5px 0 0 15px;
 
-        &__label {
-          color: $dropdown--label;
-          cursor: pointer;
-          display: block;
-          font-size: 0.65em;
-          font-weight: 500;
-          letter-spacing: 0.1em;
-          line-height: 0.9em;
-          text-transform: uppercase;
-        }
-
-        &__value {
-          color: $dropdown--value;
-
-          &:after {
-            border-top: 5px solid $dropdown--value;
-            border-left: 4px solid transparent;
-            border-right: 4px solid transparent;
-            content: '';
-            display: inline-block;
-            margin-left: 10px;
-            vertical-align: middle;
-          }
-        }
-
         &__content {
           min-width: 250px;
         }
diff --git a/client/source/sass/objects/_dropdown.scss b/client/source/sass/objects/_dropdown.scss
index 73475937..3b86b830 100644
--- a/client/source/sass/objects/_dropdown.scss
+++ b/client/source/sass/objects/_dropdown.scss
@@ -26,6 +26,48 @@
     z-index: 2;
   }
 
+  &.is-expanded {
+
+    .dropdown {
+
+      &__header {
+
+        .dropdown {
+
+          &__value {
+            color: $dropdown--value--active;
+          }
+        }
+      }
+    }
+  }
+
+  &__label {
+    color: $dropdown--label;
+    cursor: pointer;
+    display: block;
+    font-size: 0.65em;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+    line-height: 0.9em;
+    text-transform: uppercase;
+  }
+
+  &__value {
+    color: $dropdown--value;
+    transition: color 0.25s;
+
+    &:after {
+      border-top: 5px solid $dropdown--value;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      content: '';
+      display: inline-block;
+      margin-left: 10px;
+      vertical-align: middle;
+    }
+  }
+
   &__header {
     position: relative;