Dropdown toggle button stylingenhanced-dropdow-css

3 files changed, 64 insertions, 16 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index dbf11316811..e5e1c8310ed 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -17,6 +17,47 @@
   .dropdown-menu {
     display: block;
   }
+
+  .dropdown-menu-toggle {
+    border-color: $dropdown-toggle-hover-border-color;
+
+    .fa {
+      color: $dropdown-toggle-hover-icon-color;
+    }
+  }
+}
+
+.dropdown-menu-toggle {
+  position: relative;
+  min-width: 160px;
+  padding: 5px 20px 5px 10px;
+  background-color: $dropdown-toggle-bg;
+  color: $dropdown-toggle-color;
+  font-size: 15px;
+  text-align: left;
+  border: 1px solid $dropdown-toggle-border-color;
+  border-radius: 2px;
+  outline: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  .fa {
+    position: absolute;
+    top: 50%;
+    right: 6px;
+    margin-top: -4px;
+    color: $dropdown-toggle-icon-color;
+    font-size: 10px;
+  }
+
+  &:hover, {
+    border-color: $dropdown-toggle-hover-border-color;
+
+    .fa {
+      color: $dropdown-toggle-hover-icon-color;
+    }
+  }
 }
 
 .dropdown-menu {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index aad7ca1a396..6561b3de7c1 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -143,3 +143,10 @@ $dropdown-input-color: #C7C7C7;
 $dropdown-input-focus-border: rgb(58, 171, 240);
 $dropdown-input-focus-shadow: rgba(#000, .2);
 $dropdown-loading-bg: rgba(#fff, .6);
+
+$dropdown-toggle-bg: #fff;
+$dropdown-toggle-color: #626262;
+$dropdown-toggle-border-color: #EAEAEA;
+$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
+$dropdown-toggle-icon-color: #C4C4C4;
+$dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
index 97a27e373ed..0123834bc31 100644
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -182,9 +182,9 @@
       .nav-controls
         = text_field_tag 'sample', nil, class: 'form-control'
         .dropdown
-          %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
+          %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
             %span Sort by name
-            %b.caret
+            = icon('chevron-down')
           %ul.dropdown-menu
             %li
               %a Sort by date
@@ -219,17 +219,17 @@
   .example
     .clearfix
       .dropdown.inline.pull-left
-        %button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
           Dropdown
-          %b.caret
+          = icon('chevron-down')
         %ul.dropdown-menu
           %li
             %a{href: "#"}
               Dropdown Option
       .dropdown.inline.pull-right
-        %button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
           Dropdown
-          %b.caret
+          = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-align-right
           %li
             %a{href: "#"}
@@ -237,9 +237,9 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
           Dropdown
-          %b.caret
+          = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-selectable
           %li
             %a.is-active{href: "#"}
@@ -247,9 +247,9 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
           Dropdown
-          %b.caret
+          = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable
           .dropdown-title
             %span Dropdown Title
@@ -286,9 +286,9 @@
             %strong Tip:
             If an author is not a member of this project, you can still filter by his name while using the search field.
       .dropdown.inline
-        %button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
           Dropdown loading
-          %b.caret
+          = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
           .dropdown-title
             %span Dropdown Title
@@ -330,9 +330,9 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
           Dropdown user
-          %b.caret
+          = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
           .dropdown-title
             %span Dropdown Title
@@ -354,9 +354,9 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
           Dropdown page 2
-          %b.caret
+          = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
           .dropdown-page-one
             .dropdown-title