improved the navbar button styles

elastic · Jul 24, 2014 · 44a3547 · 44a3547
1 parent ee70c27
commit 44a3547
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 25 deletions.
diff --git a/src/kibana/apps/dashboard/index.html b/src/kibana/apps/dashboard/index.html
@@ -13,11 +13,11 @@
       </form>
 
       <div class="button-group">
-        <button ng-click="openAdd()" class="btn"><i class="fa fa-plus"></i></button>
-        <button ng-click="openSave()" class="btn"><i class="fa fa-save"></i></button>
-        <button ng-click="openLoad()" class="btn"><i class="fa fa-folder-open"></i></button>
-        <button ng-click="openShare()" class="btn"><i class="fa fa-code"></i></button>
-        <button ng-click="refresh()" class="btn"><i class="fa fa-refresh"></i></button>
+        <button ng-click="openAdd()"><i class="fa fa-plus"></i></button>
+        <button ng-click="openSave()"><i class="fa fa-save"></i></button>
+        <button ng-click="openLoad()"><i class="fa fa-folder-open"></i></button>
+        <button ng-click="openShare()"><i class="fa fa-code"></i></button>
+        <button ng-click="refresh()"><i class="fa fa-refresh"></i></button>
       </div>
     </navbar>
   </nav>

diff --git a/src/kibana/apps/discover/index.html b/src/kibana/apps/discover/index.html
@@ -7,9 +7,9 @@
     </form>
 
     <div class="button-group">
-      <button class="btn" ng-click="toggleSave()"><i class="fa fa-save"></i></button>
-      <button class="btn" ng-click="toggleLoad()"><i class="fa fa-folder-open"></i></button>
-      <button class="btn" ng-click="toggleConfig()"><i class="fa fa-gear"></i></button>
+      <button ng-click="toggleSave()"><i class="fa fa-save"></i></button>
+      <button ng-click="toggleLoad()"><i class="fa fa-folder-open"></i></button>
+      <button ng-click="toggleConfig()"><i class="fa fa-gear"></i></button>
     </div>
   </navbar>
   <config config-template="configTemplate" config-object="opts" config-close="configClose" config-submit="fetch"></config>

diff --git a/src/kibana/apps/visualize/editor.html b/src/kibana/apps/visualize/editor.html
@@ -28,11 +28,11 @@
       </div>
 
       <div class="button-group">
-        <button ng-click="startOver()" class="btn"><i class="fa fa-file-o"></i></button>
-        <button ng-click="toggleSave()" class="btn"><i class="fa fa-save"></i></button>
-        <button ng-click="toggleLoad()" class="btn"><i class="fa fa-folder-open"></i></button>
-        <button ng-click="toggleShare()" class="btn"><i class="fa fa-code"></i></button>
-        <button ng-click="doVisualize()" class="btn"><i class="fa fa-refresh"></i></button>
+        <button ng-click="startOver()"><i class="fa fa-file-o"></i></button>
+        <button ng-click="toggleSave()"><i class="fa fa-save"></i></button>
+        <button ng-click="toggleLoad()"><i class="fa fa-folder-open"></i></button>
+        <button ng-click="toggleShare()"><i class="fa fa-code"></i></button>
+        <button ng-click="doVisualize()"><i class="fa fa-refresh"></i></button>
       </div>
     </navbar>
     <config

diff --git a/src/kibana/styles/_navbar.less b/src/kibana/styles/_navbar.less
@@ -35,21 +35,19 @@ navbar {
 
   // the "brand" that is displayed, usually on the left of the navbar
   > .name {
+    .align-self(center);
+
     font-size: @font-size-large;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    .align-self(center);
   }
 
   button {
-    color: @navbar-default-link-color;
-    background-color: @brand-primary;
     padding: @padding-base-vertical @padding-base-horizontal;
     font-size: @font-size-base;
-    font-weight: normal;
-    line-height: 1;
-    text-align: center;
+    color: @navbar-default-link-color;
+    background-color: @brand-primary;
 
     &:hover {
       color: @navbar-default-link-hover-color;
@@ -65,6 +63,14 @@ navbar {
       color: @navbar-default-link-disabled-color;
       background-color: @navbar-default-link-disabled-bg;
     }
+
+    &:focus {
+      // because some buttons are all side-to-side, the browser's outline
+      // is cut off by the next button. This causes the outline to be
+      // drawn inside the button. Appplied to all buttons so that it's
+      // uniform within this widget
+      outline-offset: -4px;
+    }
   }
 
 
@@ -84,10 +90,16 @@ navbar {
     }
   }
 
-  > .inline-form button {
-    color: @brand-primary;
-    background-color: @input-group-addon-bg;
-    border: 1px solid @input-group-addon-border-color;
+  .inline-form {
+    input {
+      height: auto;
+    }
+
+    button {
+      color: @brand-primary;
+      background-color: @input-group-addon-bg;
+      border: 1px solid @input-group-addon-border-color;
+    }
   }
 
   /***

diff --git a/src/kibana/styles/main.less b/src/kibana/styles/main.less
@@ -7,6 +7,9 @@
 // custom bootstrap build
 @import "./_bootstrap.less";
 
+// bootstrap modifications
+@import "./theme/_theme.less";
+
 // call outs
 @import "./_callout.less";
 
@@ -27,8 +30,6 @@
 
 @import "./_sidebar.less";
 
-@import "./theme/_theme.less";
-
 html,
 body {
   height: 100%;
@@ -39,6 +40,11 @@ label > small {
   font-weight: normal;
 }
 
+button {
+  // buttons have a stupid 1990's default look which should be disabled
+  .btn();
+}
+
 // Colors available for font awesome icons, these might not look good with normal text
 .text-color-primary {
   color: @brand-primary;