Updated dropdown CSS

This is a start on #3279 by updating the CSS for the dropdown menu. This doesnt include any CSS for the title bar or filter field

7 files changed, 113 insertions, 44 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index e2a30f5ed34..c85ab9148d0 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -11,6 +11,7 @@
 @import "framework/calendar.scss";
 @import "framework/callout.scss";
 @import "framework/common.scss";
+@import "framework/dropdowns.scss";
 @import "framework/files.scss";
 @import "framework/filters.scss";
 @import "framework/flash.scss";
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 1d3c71932a8..c98e43ad09f 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -60,25 +60,6 @@ hr {
   margin: $gl-padding 0;
 }
 
-.dropdown-menu {
-  margin: 6px 0 0;
-}
-
-.dropdown-menu > li > a {
-  text-shadow: none;
-}
-
-.dropdown-menu-align-right {
-  left: auto;
-  right: 0px;
-}
-
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
-  background: $gl-primary;
-  color: #FFF;
-}
-
 .str-truncated {
   @include str-truncated;
 }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
new file mode 100644
index 00000000000..f184d083cd6
--- /dev/null
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -0,0 +1,99 @@
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top: $caret-width-base dashed;
+  border-right: $caret-width-base solid transparent;
+  border-left: $caret-width-base solid transparent;
+}
+
+.dropdown {
+  position: relative;
+
+  &.open {
+    .dropdown-menu {
+      display: block;
+    }
+  }
+}
+
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 9999;
+  width: 240px;
+  margin-top: 2px;
+  padding: 10px 10px;
+  background-color: $dropdown-bg;
+  border: 1px solid $dropdown-border-color;
+  border-radius: $border-radius-base;
+  box-shadow: 0 2px 4px $dropdown-shadow-color;
+
+  li {
+    text-align: left;
+    list-style: none;
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    background-color: $dropdown-divider-color;
+  }
+
+  a {
+    display: block;
+    position: relative;
+    padding-left: 10px;
+    padding-right: 10px;
+    color: $dropdown-link-color;
+    line-height: 34px;
+    text-overflow: ellipsis;
+    border-radius: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &:hover {
+      background-color: $dropdown-link-hover-bg;
+      text-decoration: none;
+    }
+  }
+}
+
+.dropdown-menu-align-right {
+  left: auto;
+  right: 0;
+}
+
+.dropdown-menu-selectable {
+  a {
+    padding-left: 25px;
+
+    &.is-active {
+      &::before {
+        content: "\f00c";
+        position: absolute;
+        left: 4px;
+        top: 8px;
+        font: normal normal normal 14px/1 FontAwesome;
+        font-size: inherit;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+    }
+  }
+}
+
+.dropdown-header {
+  padding-left: 10px;
+  padding-right: 10px;
+  color: $dropdown-header-color;
+  font-size: 13px;
+  line-height: 22px;
+}
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index 1e9959429cd..ddf76704a53 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -22,7 +22,7 @@
 
 // Components
 @import "bootstrap/component-animations";
-@import "bootstrap/dropdowns";
+// @import "bootstrap/dropdowns";
 @import "bootstrap/button-groups";
 @import "bootstrap/input-groups";
 @import "bootstrap/navs";
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 6fc62f7f201..880c8d0bd43 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -126,3 +126,14 @@ $deleted: #f77;
  */
 $monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
 $regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+/*
+* Dropdowns
+*/
+$dropdown-bg: #fff;
+$dropdown-link-color: #555;
+$dropdown-link-hover-bg: rgba(#000, .04);
+$dropdown-border-color: rgba(#000, .1);
+$dropdown-shadow-color: rgba(#000, .1);
+$dropdown-divider-color: rgba(#000, .1);
+$dropdown-header-color: #959494;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 247ac83c24a..5142f4f2270 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -185,29 +185,6 @@
   }
 }
 
-.dropdown-menu {
-  @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
-  @include border-radius ($border-radius-default);
-
-  border: none;
-  padding: 10px 0;
-  font-size: 14px;
-  font-weight: 100;
-
-  li a {
-    color: #5f697a;
-    line-height: 30px;
-
-    &:hover {
-      background-color: #3084bb !important;
-    }
-  }
-
-  i {
-    margin-right: 8px;
-  }
-}
-
 .project-visibility-level-holder {
   .radio {
     margin-bottom: 10px;
diff --git a/app/views/explore/projects/_dropdown.html.haml b/app/views/explore/projects/_dropdown.html.haml
index 87c556adc7d..a4b4cd8d6c7 100644
--- a/app/views/explore/projects/_dropdown.html.haml
+++ b/app/views/explore/projects/_dropdown.html.haml
@@ -6,7 +6,7 @@
     - else
       = sort_title_recently_updated
     %b.caret
-  %ul.dropdown-menu
+  %ul.dropdown-menu.dropdown-menu-align-right
     %li
       = link_to explore_projects_filter_path(sort: sort_value_name) do
         = sort_title_name