Dropdown variables

app/assets/stylesheets/framework/dropdowns.scss

@@ -187,13 +187,13 @@
   position: absolute;
   top: -1px;
   padding: 0;
-  color: #BFBFBF;
+  color: $dropdown-title-btn-color;
   font-size: 14px;
   border: 0;
   background: none;
 
   &:hover {
-    color: darken(#BFBFBF, 15%);
+    color: darken($dropdown-title-btn-color, 15%);
   }
 }
 
@@ -222,7 +222,7 @@
 .dropdown-input-field {
   width: 100%;
   padding: 0 7px;
-  color: #C7C7C7;
+  color: $dropdown-input-color;
   line-height: 30px;
   border: 1px solid $dropdown-divider-color;
   border-radius: 2px;
@@ -230,8 +230,8 @@
 
   &:focus {
     color: $dropdown-link-color;
-    border-color: rgb(58, 171, 240);
-    box-shadow: 0 0 4px rgba(#000, .2);
+    border-color: $dropdown-input-focus-border;
+    box-shadow: 0 0 4px $dropdown-input-focus-shadow;
 
     + .fa {
       color: $dropdown-link-color;
@@ -265,7 +265,7 @@
   left: 0;
   display: none;
   z-index: 9;
-  background-color: rgba(#fff, .6);
+  background-color: $dropdown-loading-bg;
   font-size: 28px;
 
   .fa {

app/assets/stylesheets/framework/variables.scss

@@ -138,3 +138,8 @@ $dropdown-shadow-color: rgba(#000, .1);
 $dropdown-divider-color: rgba(#000, .1);
 $dropdown-header-color: #959494;
 $dropdown-caret-color: #54565B;
+$dropdown-title-btn-color: #BFBFBF;
+$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);

app/views/help/ui.html.haml

@@ -353,7 +353,7 @@
 
   .example
     %div
-      .dropdown.inline.open
+      .dropdown.inline
         %button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
           Dropdown page 2
           %b.caret