fix #7194 Editor errors on Visualize are broken

src/core_plugins/kibana/public/visualize/editor/sidebar.html

@@ -1,8 +1,10 @@
 <div class="sidebar-container">
-  <form class="sidebar-list"
-        ng-submit="visualizeEditor.$invalid ? dontApply() : stageEditableVis()"
-        name="visualizeEditor"
-        novalidate><!-- see http://goo.gl/9kgz5w -->
+  <form
+    class="sidebar-list"
+    ng-submit="visualizeEditor.$invalid ? dontApply() : stageEditableVis()"
+    name="visualizeEditor"
+    novalidate
+  ><!-- see http://goo.gl/9kgz5w -->
 
     <div css-truncate title="{{indexPattern.id}}" ng-if="vis.type.requiresSearch" class="index-pattern">
       {{ indexPattern.id }}
@@ -14,31 +16,57 @@
         <!-- tabs -->
         <ul class="nav navbar-nav">
           <li ng-class="{active: sidebar.section == 'data'}" ng-show="sidebar.showData">
-            <a class="navbar-link active" ng-click="sidebar.section='data'">Data</a>
+            <a
+              class="vis-editor-subnav-link"
+              ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == 'data'}"
+              ng-click="sidebar.section='data'"
+            >
+              Data
+            </a>
           </li>
           <li ng-class="{active: sidebar.section == 'options'}">
-            <a class="navbar-link" ng-click="sidebar.section='options'">Options</a>
+            <a
+              class="vis-editor-subnav-link"
+              ng-class="{'is-vis-editor-sub-nav-link-selected': sidebar.section == 'options'}"
+              ng-click="sidebar.section='options'"
+            >
+              Options
+            </a>
           </li>
         </ul>
 
         <!-- controls -->
         <ul class="nav navbar-nav navbar-right">
-          <li ng-if="visualizeEditor.softErrorCount() > 0"
+          <li
+            ng-if="visualizeEditor.softErrorCount() > 0"
             disabled
-            tooltip="{{ visualizeEditor.describeErrors() }}" tooltip-placement="bottom" tooltip-popup-delay="400" tooltip-append-to-body="1">
-            <a class="danger navbar-link">
+            tooltip="{{ visualizeEditor.describeErrors() }}"
+            tooltip-placement="bottom"
+            tooltip-popup-delay="400"
+            tooltip-append-to-body="1"
+          >
+            <a class="vis-editor-subnav-link vis-editor-subnav-link--danger">
               <i class="fa fa-warning"></i>
             </a>
           </li>
-          <li tooltip="Apply changes" tooltip-placement="bottom" tooltip-popup-delay="400" tooltip-append-to-body="1">
+          <li
+            tooltip="Apply changes"
+            tooltip-placement="bottom"
+            tooltip-popup-delay="400" tooltip-append-to-body="1"
+          >
             <button class="btn-success navbar-btn-link"
               type="submit"
               ng-disabled="!vis.dirty">
 
               <i class="fa fa-play"></i>
             </button>
           </li>
-          <li tooltip="Discard changes" tooltip-placement="bottom" tooltip-popup-delay="400" tooltip-append-to-body="1">
+          <li
+            tooltip="Discard changes"
+            tooltip-placement="bottom"
+            tooltip-popup-delay="400"
+            tooltip-append-to-body="1"
+          >
             <button class="btn-default navbar-btn-link"
               ng-disabled="!vis.dirty"
               ng-click="resetEditableVis()">

src/core_plugins/kibana/public/visualize/editor/styles/_editor.less

@@ -7,36 +7,6 @@
 .vis-editor {
   .flex-parent();
 
-  // For the vis-editor sidebar nav
-  .navbar-default .navbar-nav {
-    &> .active > a {
-      border-bottom: 2px solid @kibanaGray2;
-      color: @kibanaGray1;
-      &:before {
-        display: none;
-      }
-      &:hover {
-        background-color: transparent;
-      }
-    }
-
-    > li {
-      > a {
-        padding: 4px 0;
-        margin: 0 10px;
-        color: @kibanaGray2;
-      }
-      > a:hover {
-        border-bottom: 2px solid @kibanaGray2;
-      }
-    }
-
-    .danger {
-      color: @vis-editor-navbar-error-state-color;
-      background-color: @vis-editor-navbar-error-state-bg;
-    }
-  }
-
   .btn-xs {
     line-height: 1.3;
   }
@@ -382,6 +352,40 @@ vis-editor-vis-options > * {
   .flex-parent();
 }
 
+/**
+   * 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
+   */
+.vis-editor-subnav-link {
+  padding: 4px 10px 5px 10px !important; /* 1 */
+  color: @kibanaGray2 !important; /* 1 */
+
+  &.is-vis-editor-sub-nav-link-selected {
+    border-bottom: 2px solid @kibanaGray2;
+    color: @kibanaGray1;
+    background-color: #f6f6f6;
+
+    &:before {
+      display: none;
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+/**
+ * 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
+ */
+.vis-editor-subnav-link--danger {
+  color: @vis-editor-navbar-error-state-color !important; /* 1 */
+  background-color: @vis-editor-navbar-error-state-bg;
+
+  &:hover {
+    background-color: darken(@vis-editor-navbar-error-state-bg, 12%) !important; /* 1 */
+  }
+}
+
 form.vis-share {
   div.form-control {
     height: inherit;