float the apple/discard buttons at the bottom. Closes #420

Author: Rashid Khan

src/kibana/apps/visualize/editor/editor.less

@@ -1,6 +1,11 @@
 .vis-editor {
   .flex-parent();
 
+  @vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
+  @vis-editor-sidebar-min-width: 350px;
+  @vis-editor-nesting-width: 8px;
+  @vis-editor-agg-editor-spacing: 5px;
+
   navbar {
     .bitty-modal-container {
       position: relative;
@@ -39,6 +44,20 @@
     @media (min-width: @screen-md-min) {
       .flex-basis(@vis-editor-sidebar-basis);
       min-width: @vis-editor-sidebar-min-width;
+      margin-bottom: (@input-height-base * 2) - 3;
+    }
+
+    &-buttons {
+      // overrides for tablet and desktop
+      @media (min-width: @screen-md-min) {
+        position: absolute;
+        bottom: 0;
+        min-width: @vis-editor-sidebar-min-width;
+      }
+    }
+
+    .sidebar-item {
+      border-top: 0 !important;
     }
 
     .sidebar-container {
@@ -79,7 +98,6 @@
     &-group {
       .flex-parent();
       color: @text-color;
-      margin-bottom: 10px;
     }
 
     &-header {

src/kibana/apps/visualize/editor/sidebar.html

@@ -29,13 +29,15 @@
         </vis-editor-agg-group>
 
         <!-- apply/discard -->
-        <li class="sidebar-item" ng-if="vis.dirty">
+        <li class="vis-editor-sidebar-buttons sidebar-item">
           <button
+            ng-disabled="!vis.dirty"
             type="submit"
             class="sidebar-item-button success">
             Apply
           </button>
           <button
+            ng-disabled="!vis.dirty"
             type="button"
             ng-click="reset()"
             class="sidebar-item-button warn">

src/kibana/apps/visualize/styles/main.less

@@ -19,4 +19,4 @@
   font-size: 1.2em;
 }
 
-@import "../editor/editor.less";
+@import "../editor/editor.less";

src/kibana/styles/_variables.less

@@ -16,9 +16,4 @@
 @sidebar-active-color: @component-active-color;
 @sidebar-active-bg: @component-active-bg;
 @sidebar-active-hover-bg: @component-active-bg;
-@sidebar-active-hover-color: @component-active-color;
-
-@vis-editor-sidebar-basis: (100/12) * 2%; // two of twelve columns
-@vis-editor-sidebar-min-width: 350px;
-@vis-editor-nesting-width: 8px;
-@vis-editor-agg-editor-spacing: 5px;
+@sidebar-active-hover-color: @component-active-color;