[CSS] Cleaned up some CSS and normalized styles

elastic · Mar 7, 2016 · 66db302 · 66db302
1 parent 804c7a9
commit 66db302
Show file tree

Hide file tree

Showing 17 changed files with 45 additions and 95 deletions.
diff --git a/src/optimize/BaseOptimizer.js b/src/optimize/BaseOptimizer.js
@@ -110,7 +110,7 @@ class BaseOptimizer {
           { test: /\.json$/, loader: 'json' },
           { test: /\.(html|tmpl)$/, loader: 'raw' },
           { test: /\.png$/, loader: 'url?limit=10000&name=[path][name].[ext]' },
-          { test: /\.(woff|woff2|ttf|eot|svg|ico|gif)(\?|$)/, loader: 'file?name=[path][name].[ext]' },
+          { test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/, loader: 'file?name=[path][name].[ext]' },
           { test: /[\/\\]src[\/\\](plugins|ui)[\/\\].+\.js$/, loader: `rjs-repack${mapQ}` },
           {
             test: /\.js$/,

diff --git a/src/plugins/kibana/public/dashboard/index.html b/src/plugins/kibana/public/dashboard/index.html
@@ -1,13 +1,13 @@
 <div dashboard-app class="app-container dashboard-container">
-  <navbar name="dashboard-options">
-    <div class="dashboard-info">
-      <span ng-show="dash.id" class="dashboard-info-title">
+  <navbar name="dashboard-options" class="kibana-nav-options">
+    <div class="kibana-nav-info">
+      <span ng-show="dash.id" class="kibana-nav-info-title">
         <span ng-bind="::dash.title"></span>
       </span>
 
     </div>
 
-    <div class="button-group dashboard-actions" role="toolbar">
+    <div class="button-group kibana-nav-actions" role="toolbar">
       <button ng-click="newDashboard()"
         aria-label="New Dashboard">
         <span>New</span>

diff --git a/src/plugins/kibana/public/dashboard/styles/main.less b/src/plugins/kibana/public/dashboard/styles/main.less
@@ -3,9 +3,6 @@
 
 .tab-dashboard {
   background-color: @dashboard-bg;
-  navbar[name="dashboard-options"] {
-    padding-bottom: 0;
-  }
 }
 
 dashboard-grid {
@@ -158,10 +155,6 @@ dashboard-grid {
   }
 }
 
-.dashboard-actions {
-  margin-left: auto;
-}
-
 .dashboard-panel-picker > .list-group-item {
   border-top: 0;
 }

diff --git a/src/plugins/kibana/public/discover/index.html b/src/plugins/kibana/public/discover/index.html
@@ -1,15 +1,15 @@
 <div ng-controller="discover" class="app-container">
-  <navbar name="discover-options">
-    <div class="discover-info">
-      <span ng-show="opts.savedSearch.id" class="discover-info-title">
+  <navbar name="discover-options" class="kibana-nav-options">
+    <div class="kibana-nav-info">
+      <span ng-show="opts.savedSearch.id" class="kibana-nav-info-title">
         <span ng-bind="::opts.savedSearch.title"></span>
         <i aria-label="Reload Saved Search" tooltip="Reload Saved Search" ng-click="resetQuery();" class="fa fa-undo small"></i>
       </span>
 
       <strong class="discover-info-hits">{{(hits || 0) | number:0}}</strong>
       <ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
     </div>
-    <div class="discover-actions button-group" role="toolbar">
+    <div class="kibana-nav-actions button-group" role="toolbar">
       <button
         ng-click="newQuery()"
         aria-label="New Search">

diff --git a/src/plugins/kibana/public/discover/styles/main.less b/src/plugins/kibana/public/discover/styles/main.less
@@ -2,9 +2,6 @@
 
 .tab-discover {
   overflow-x: hidden;
-  navbar[name="discover-options"] {
-    padding-bottom: 0;
-  }
 }
 
 .discover {
@@ -77,10 +74,6 @@
     }
   }
 
-  &-actions {
-    margin-left: auto;
-  }
-
   &-info {
     line-height: 30px;
     padding: 0px 10px;

diff --git a/src/plugins/kibana/public/visualize/editor/editor.html b/src/plugins/kibana/public/visualize/editor/editor.html
@@ -1,12 +1,12 @@
-<div ng-controller="VisEditor" class="vis-editor vis-type-{{ vis.type.name }}">
-  <navbar ng-if="chrome.getVisible()" name="visualize-options">
+<div ng-controller="VisEditor" class="app-container vis-editor vis-type-{{ vis.type.name }}">
+  <navbar name="visualize-options" class="kibana-nav-options" ng-if="chrome.getVisible()">
     <div class="vis-editor-info">
       <span ng-show="savedVis.id" class="vis-editor-info-title">
         <span ng-bind="::savedVis.title"></span>
       </span>
     </div>
 
-    <div class="button-group vis-editor-actions">
+    <div class="button-group kibana-nav-actions">
       <button ng-click="startOver()" aria-label="New Visualization">
         <span>New</span>
       </button>

diff --git a/src/plugins/kibana/public/visualize/editor/styles/_editor.less b/src/plugins/kibana/public/visualize/editor/styles/_editor.less
@@ -77,14 +77,6 @@
     }
   }
 
-  navbar[name="visualize-options"] {
-    padding-bottom: 0;
-  }
-
-
-  &-actions {
-    margin-left: auto;
-  }
 
   &-content {
     .flex-parent();

diff --git a/src/plugins/kibana/public/visualize/styles/main.less b/src/plugins/kibana/public/visualize/styles/main.less
@@ -42,18 +42,5 @@
   }
 }
 
-.visualize-info {
-  align-self: flex-end;
-
-  &-tab {
-    background-color: @visualize-info-bg;
-    padding: 5px 10px;
-    margin-left: @padding-base-horizontal;
-    border-bottom-left-radius: @border-radius-base;
-    text-align: right;
-    font-weight: bold;
-  }
-
-}
 
 @import "../editor/styles/_editor.less";
diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/app_switcher/app_switcher.less
@@ -5,9 +5,11 @@
 @as-open-width: 160px;
 @as-closed-width: 53px;
 @app-icon-height: 38px;
+@app-line-height: 24px;
 @transition-time: .35s;
 @transition-delay: .25s;
 @app-links-wrapper-background: #3caed2;
+@app-links-active-background: lighten(@app-links-wrapper-background, 7.5%);
 
 @firstLinkColor: #E4BB51;
 @secondLinkColor: #8AC336;
@@ -81,17 +83,17 @@ body { overflow-x: hidden; }
   .app-link {
     width: @as-open-width;
     height: @app-icon-height;
-    line-height:  24px;
+    line-height:  @app-line-height;
 
 
     > a {
       display: block;
       height: 100%;
-      color: #fff;
+      color: @white;
     }
 
     &:hover {
-      background-color: lighten(@app-links-wrapper-background, 7.5%);
+      background-color: @app-links-active-background;
     }
 
     .app-icon {
@@ -103,8 +105,6 @@ body { overflow-x: hidden; }
       display: inline-block;
       height: @app-icon-height;
       width: @as-closed-width;
-      > i {
-      }
 
       > img {
         height: 18px;
@@ -118,6 +118,7 @@ body { overflow-x: hidden; }
       font-size: 1.7em;
       display: inline-block;
       height: @app-icon-height;
+      line-height: @app-icon-height;
       width: @as-closed-width;
       background-position: center;
       background-size: contain;
@@ -135,7 +136,7 @@ body { overflow-x: hidden; }
     }
 
     &.active {
-      background-color: lighten(@app-links-wrapper-background, 10%);
+      background-color: @app-links-active-background;
       > a {
         color: #333;
         text-decoration: none;

diff --git a/src/ui/public/images/kibana.gif b/src/ui/public/images/kibana.gif
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
@@ -94,7 +94,7 @@ ul.navbar-inline li {
   .flex-parent(@shrink: 0);
   position: relative;
   z-index: 0;
-  background-color: #fff;
+  background-color: @white;
 }
 
 .top-fixed {
@@ -140,11 +140,25 @@ a {
     z-index: 0;
   }
 
-  > navbar:first-child { padding-bottom: 0; }
+  .kibana-nav-options {
+    padding-bottom: 0;
+    .kibana-nav-actions {
+      margin-left: auto;
+    }
+    .kibana-nav-info {
+      line-height: 30px;
+      padding: 0 10px;
+      &-title {
+        font-weight: bold;
+        margin-right: 10px;
+      }
+    }
+  }
 
   > config {
     z-index: 1;
   }
+  > navbar { padding-bottom: 4px; }
 
   > nav,
   > navbar {

diff --git a/src/ui/public/styles/control_group.less b/src/ui/public/styles/control_group.less
@@ -23,37 +23,6 @@
     }
   }
 
-  button {
-    padding: 4px 10px;
-    font-size: @font-size-base;
-    color: @control-group-link-color;
-    background-color: @control-group-bg;
-
-    &:hover {
-      color: @control-group-link-hover-color;
-      background-color: @control-group-link-hover-bg;
-    }
-
-    .active, &:active, &:focus {
-      color: @control-group-link-active-color;
-      background-color: @control-group-link-active-bg;
-    }
-
-    &[disabled] {
-      color: @control-group-link-disabled-color;
-      background-color: @control-group-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;
-    }
-  }
-
-
   // horizontal group of buttons/form elements
   .button-group,
   .inline-form .input-group {

diff --git a/src/ui/public/styles/navbar.less b/src/ui/public/styles/navbar.less
@@ -1,5 +1,7 @@
 @import "./control_group";
 
+@navbar-margin: @padding-small-vertical;
+
 navbar {
   .control-group();
 
@@ -21,8 +23,8 @@ navbar {
   }
 
   .navbar-text {
-    margin-top: 6px;
-    margin-bottom: 6px;
+    margin-top: @navbar-margin;
+    margin-bottom: @navbar-margin;
   }
 
   // the "brand" that is displayed, usually on the left of the navbar

diff --git a/src/ui/public/styles/variables/for-theme.less b/src/ui/public/styles/variables/for-theme.less
@@ -302,6 +302,8 @@
 @tooltip-color: @gray-lighter;
 
 @tooltip-table-border: @gray;
+@tooltip-bold: 600;
+
 
 
 // Svg =========================================================================

diff --git a/src/ui/public/timepicker/toggle.html b/src/ui/public/timepicker/toggle.html
@@ -8,8 +8,7 @@
   </li>
 
   <li
-    ng-show="timefilter.refreshInterval.value > 0 || configTemplate.is('interval') || configTemplate.is('filter')"
-    class="to-body">
+    ng-show="timefilter.refreshInterval.value > 0 || configTemplate.is('interval') || configTemplate.is('filter')">
 
     <button ng-click="configTemplate.toggle('interval')"
     ng-class="{active: configTemplate.is('interval') }"
@@ -20,7 +19,7 @@
 
   </li>
 
-  <li class="to-body" >
+  <li>
     <button ng-class="{active: configTemplate.is('filter')}"
       ng-click="configTemplate.toggle('filter')"
       aria-haspopup="true"

diff --git a/src/ui/public/vislib/styles/_tooltip.less b/src/ui/public/vislib/styles/_tooltip.less
@@ -1,7 +1,5 @@
 @import (reference) "~ui/styles/variables";
 
-@semi-bold: 600;
-
 .vis-tooltip,
 .vis-tooltip-sizing-clone {
   visibility: hidden;
@@ -30,7 +28,7 @@
     font-family: @font-family-sans-serif;
 
     th {
-      font-weight: @semi-bold;
+      font-weight: @tooltip-bold;
     }
   }
 

diff --git a/src/ui/public/visualize/visualize.html b/src/ui/public/visualize/visualize.html
@@ -11,7 +11,7 @@ <h4>No results found</h4>
     ng-style="loadingStyle"
     ng-class="{ loading: vis.type.requiresSearch && searchSource.activeFetchCount > 0 }"
     class="visualize-chart"></div>
-  <visualize-legend ng-show="vis.params.addLegend"></visualize-legend>
+  <visualize-legend></visualize-legend>
 </div>
 <!-- <pre>{{chartData | json}}</pre> -->
 <visualize-spy ng-if="vis.type.requiresSearch && showSpyPanel"></visualize-spy>