Merge pull request #5013 from Bargs/fix/5004-visOverlap

Fixes #5004 vis editor collapsible sidebar arrow overlaps visualization

src/plugins/kibana/public/discover/styles/main.less

@@ -8,6 +8,7 @@
 
   &-wrapper {
     padding-right: 0px !important;
+    padding-left: @collapser-width;
   }
 
   &-content {

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

@@ -89,7 +89,6 @@
     .sidebar-container {
       .flex-parent(1, 1, auto);
       background-color: @vis-editor-sidebar-bg;
-      border-right-color: @vis-editor-sidebar-border;
 
       form {
         .flex-parent(1, 1, auto);
@@ -332,6 +331,7 @@
     display: flex;
     flex-direction: column;
     overflow: auto;
+    padding-left: @collapser-width;
 
     &.embedded {
       flex-shrink: 1;

src/ui/public/collapsible_sidebar/collapsible_sidebar.less

@@ -6,37 +6,28 @@
 
   .sidebar-collapser {
     background-color: @collapser-bg;
-    height: 28px;
+    height: 100%;
     position: absolute;
     top: 0;
-    right: -20px;
-    width: 20px;
-    border: 1px solid;
-    border-color: @collapser-border;
-    border-width: 0 1px 1px 0;
+    right: -(@collapser-width);
+    width: @collapser-width;
     cursor: pointer;
     z-index: -1;
-    border-bottom-right-radius: 4px;
 
     &:hover {
       background-color: @collapser-hover-bg;
-
-      .chevron-cont{
-
-        &:before {
-          color: @collapser-hover-color;
-        }
-      }
+      border-color: @collapser-hover-bg;
+      color: @collapser-hover-color;
     }
 
     .chevron-cont{
       position: absolute;
-      left: 4px;
-      top: 5px;
+      left: 2px;
+      top: 8px;
+      font-size: 10px;
 
       &:before {
         font-family: FontAwesome;
-        color: @collapser-color;
         content: "\F053";
       }
     }

src/ui/public/styles/sidebar.less

@@ -5,9 +5,7 @@
   padding-left: 0px !important;
   padding-right: 0px !important;
   background-color: @sidebar-bg;
-  border-right: 1px solid;
   border-right-color: @sidebar-border;
-  border-bottom: 1px solid;
   border-bottom-color: @sidebar-border;
 
   .sidebar-well {

src/ui/public/styles/variables/for-theme.less

@@ -65,12 +65,15 @@
 
 
 // Collapser ===================================================================
-@collapser-bg: @white;
-@collapser-border: @gray-lighter;
+@collapser-bg: @gray-lighter;
+@collapser-border: @collapser-bg;
 @collapser-color: @gray3;
 
-@collapser-hover-bg: @gray-lighter;
-@collapser-hover-color: @gray3;
+@collapser-hover-bg: @gray-light;
+@collapser-hover-border: @collapser-hover-bg;
+@collapser-hover-color: @white;
+
+@collapser-width: 12px;
 
 
 // Dashboard ===================================================================