Improve top bar button styling

 * Make the spacing between the top bar icons consistent

 * Remove redundant CSS from top-bar.scss

The CSS usage here is a little ugly because .top-bar__btn
is used inside the <simple-search> directive but at least it
is clear where the style comes from.

h/static/scripts/directive/simple-search.coffee

@@ -41,8 +41,8 @@ module.exports = ['$http', '$parse', ($http, $parse) ->
                      placeholder="{{loading && 'Loading' || 'Search'}}…"
                      ng-disabled="loading"
                      ng-class="(alwaysExpanded || searchtext.length > 0) ? 'is-expanded' : ''"/>
-              <button class="simple-search-icon btn btn-clean" ng-hide="loading">
-                <i class="h-icon-search btn-icon"></i>
+              <button class="simple-search-icon top-bar__btn" ng-hide="loading">
+                <i class="h-icon-search"></i>
               </button>
               <button class="simple-search-icon btn btn-clean" ng-show="loading" disabled>
                 <span class="btn-icon"><span class="spinner"></span></span>

h/static/styles/top-bar.scss

@@ -41,31 +41,24 @@ $top-bar-height: 40px;
   flex-grow: 1;
 }
 
+// Removes the native styling from a <button> element
+@mixin reset-native-btn-styles {
+  padding: 0px;
+  margin: 0px;
+  background-color: transparent;
+  border-style: none;
+  outline: none;
+}
+
 .top-bar__btn {
+  @include reset-native-btn-styles;
+
   color: $gray-light;
   display: inline-block;
-  min-width: 28px;
   cursor: pointer;
+  padding-left: 6px;
 
-  &:focus, .js-focus, &:hover, .js-hover {
-    color: $gray-dark;
-  }
-}
-
-.top-bar .btn {
-  color: $gray-light;
-  min-width: 28px;
-  height: 28px;
-
-  border: 0;
-  padding: 0;
-
-  &:active {
-    @include single-transition(background-color, .25s);
-    background-color: $gray-light;
-  }
-
-  &:focus, &:hover {
+  &:hover {
     color: $gray-dark;
   }
 }