Scrollbar: Show scrollbar on only on hover (#22386)

22eb558d · Torkel Ödegaard · GitHub · 1f4a0443 · 22eb558d
Commit 22eb558d authored Feb 22, 2020 by Torkel Ödegaard Committed by GitHub Feb 22, 2020
Hide whitespace changes
Inline Side-by-side

Showing with 10 additions and 0 deletions

packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss
+10 -0

No files found.
--- a/packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss
+++ b/packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss
@@ -31,11 +31,21 @@
  .thumb-vertical {
    @include gradient-vertical($scrollbarBackground, $scrollbarBackground2);
    border-radius: 6px;
+    opacity: 0;
  }

  .thumb-horizontal {
    @include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
    border-radius: 6px;
+    opacity: 0;
+  }
+
+  &:hover {
+    .thumb-vertical,
+    .thumb-horizontal {
+      opacity: 0.8;
+      transition: opacity 0.3s ease-in-out;
+    }
  }

  // page scrollbar should stick to left side to aid hitting it