Merge pull request #1 from rashidkpc/enhancement/sidebar-hover

Add hover to match spy tab, make bar smaller
w33ble · Sep 23, 2015 · 3223a4b · 3223a4b
2 parents 41bf15c + b146709
commit 3223a4b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/src/plugins/kibana/public/visualize/editor/styles/_editor.less b/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);

diff --git a/src/ui/public/collapsible_sidebar/collapsible_sidebar.less b/src/ui/public/collapsible_sidebar/collapsible_sidebar.less
@@ -14,14 +14,20 @@
     cursor: pointer;
     z-index: -1;
 
+    &:hover {
+      background-color: @collapser-hover-bg;
+      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";
       }
     }

diff --git a/src/ui/public/styles/sidebar.less b/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 {

diff --git a/src/ui/public/styles/variables/for-theme.less b/src/ui/public/styles/variables/for-theme.less
@@ -66,13 +66,14 @@
 
 // Collapser ===================================================================
 @collapser-bg: @gray-lighter;
-@collapser-border: @gray-lighter;
+@collapser-border: @collapser-bg;
 @collapser-color: @gray3;
 
-@collapser-hover-bg: @white;
-@collapser-hover-color: @gray3;
+@collapser-hover-bg: @gray-light;
+@collapser-hover-border: @collapser-hover-bg;
+@collapser-hover-color: @white;
 
-@collapser-width: 20px;
+@collapser-width: 12px;
 
 
 // Dashboard ===================================================================