From df601a579fdf7f97afcbe322d6da31fbfe4af55b Mon Sep 17 00:00:00 2001
From: John Furrow <johnf@mesosphere.io>
Date: Sat, 19 Mar 2016 12:25:48 +0100
Subject: [PATCH] Move menu styles to base-menu

---
 client/source/sass/components/_base-menu.scss | 72 +++++++++++++++++++
 client/source/sass/components/_dropdown.scss  | 22 +++---
 client/source/sass/components/_menu.scss      | 29 --------
 client/source/sass/style.scss                 |  2 +-
 4 files changed, 84 insertions(+), 41 deletions(-)
 create mode 100644 client/source/sass/components/_base-menu.scss
 delete mode 100644 client/source/sass/components/_menu.scss

diff --git a/client/source/sass/components/_base-menu.scss b/client/source/sass/components/_base-menu.scss
new file mode 100644
index 00000000..55b23d29
--- /dev/null
+++ b/client/source/sass/components/_base-menu.scss
@@ -0,0 +1,72 @@
+$menu--background: rgba(#fff, 0.98);
+$menu--container--border: rgba($background, 0.1);
+$menu--container--shadow: rgba($background, 0.3);
+$menu--label: #abbac7;
+$menu--value: #8899a8;
+$menu--value--active: #4e6a7c;
+$menu--header--border: rgba($background, 0.05);
+$menu--item--background--hover: rgba($main-content--background, 0.4);
+$menu--item--foreground: #95a2ad;
+$menu--item--foreground--hover: darken($menu--item--foreground, 10%);
+$menu--item--secondary--foreground: lighten($menu--item--foreground, 20%);
+$menu--item--foreground--active: $blue;
+
+.menu {
+  background: $menu--background;
+  border-radius: 3px;
+  box-shadow:
+    0 0 0 1px $menu--container--border,
+    0 0 35px $menu--container--shadow;
+  color: $menu--item--foreground;
+  text-align: left;
+
+  &__item {
+    padding: 5px 15px;
+
+    &__label {
+
+      &--primary {
+
+        &.has-action {
+          display: flex;
+
+          .menu {
+
+            &__item {
+
+              &__label {
+                flex: 1 1 auto;
+
+                &__action {
+                  flex: 0 0 auto;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &--secondary {
+        color: $menu--item--secondary--foreground;
+        display: block;
+        font-size: 0.85em;
+      }
+    }
+
+    &.is-selectable {
+      cursor: pointer;
+      display: block;
+      font-size: 0.9em;
+      transition: background 0.25s, color 0.25s;
+
+      &:hover {
+        background: $menu--item--background--hover;
+        color: $menu--item--foreground--hover;
+      }
+
+      &.is-selected {
+        color: $menu--item--foreground--active;
+      }
+    }
+  }
+}
diff --git a/client/source/sass/components/_dropdown.scss b/client/source/sass/components/_dropdown.scss
index fe557c53..de38e7b0 100644
--- a/client/source/sass/components/_dropdown.scss
+++ b/client/source/sass/components/_dropdown.scss
@@ -1,14 +1,14 @@
-$dropdown--background: rgba(#fff, 0.98);
-$dropdown--foreground: #95a2ad;
-$dropdown--container--border: rgba($background, 0.1);
-$dropdown--container--shadow: rgba($background, 0.3);
-$dropdown--label: #abbac7;
-$dropdown--value: #8899a8;
-$dropdown--value--active: #4e6a7c;
-$dropdown--header--border: rgba($background, 0.05);
-$dropdown--item--background--hover: rgba($main-content--background, 0.4);
-$dropdown--item--foreground--hover: darken($dropdown--foreground, 10%);
-$dropdown--item--foreground--active: $blue;
+$dropdown--background: $menu--background;
+$dropdown--container--border: $menu--container--border;
+$dropdown--container--shadow: $menu--container--shadow;
+$dropdown--label: $menu--label;
+$dropdown--value: $menu--value;
+$dropdown--value--active: $menu--value--active;
+$dropdown--header--border: $menu--header--border;
+$dropdown--item--foreground: $menu--item--foreground;
+$dropdown--item--background--hover: $menu--item--background--hover;
+$dropdown--item--foreground--hover: $menu--item--foreground--hover;
+$dropdown--item--foreground--active: $menu--item--foreground--active;
 
 .dropdown {
   display: inline-block;
diff --git a/client/source/sass/components/_menu.scss b/client/source/sass/components/_menu.scss
deleted file mode 100644
index 892cba53..00000000
--- a/client/source/sass/components/_menu.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.menu {
-  background: $dropdown--background;
-  border-radius: 3px;
-  box-shadow:
-    0 0 0 1px $dropdown--container--border,
-    0 0 35px $dropdown--container--shadow;
-  color: $dropdown--foreground;
-  text-align: left;
-
-  &__item {
-    padding: 5px 15px;
-
-    &.is-selectable {
-      cursor: pointer;
-      display: block;
-      font-size: 0.9em;
-      transition: background 0.25s, color 0.25s;
-
-      &:hover {
-        background: $dropdown--item--background--hover;
-        color: $dropdown--item--foreground--hover;
-      }
-
-      &.is-selected {
-        color: $dropdown--item--foreground--active;
-      }
-    }
-  }
-}
diff --git a/client/source/sass/style.scss b/client/source/sass/style.scss
index de4d33ff..de51b9fc 100644
--- a/client/source/sass/style.scss
+++ b/client/source/sass/style.scss
@@ -18,6 +18,7 @@
 @import "components/action-bar";
 @import "components/application-content";
 @import "components/badge";
+@import "components/base-menu";
 @import "components/client-stats";
 @import "components/context-menu";
 @import "components/directory-tree";
@@ -26,7 +27,6 @@
 @import "components/floating-action";
 @import "components/icons";
 @import "components/loading-indicator";
-@import "components/menu";
 @import "components/modals";
 @import "components/priority-meter";
 @import "components/progress-bar";