Custom scrollbars for windows and linux

2018-05-10 12:03:34 -05:00
parent 7a356d954c
commit ff9993717c
2 changed files with 32 additions and 0 deletions
--- a/app/assets/stylesheets/app/_scrollbars.scss
+++ b/app/assets/stylesheets/app/_scrollbars.scss
@@ -0,0 +1,31 @@
+.windows-web, .windows-desktop, .linux-web, .linux-desktop {
+
+  $thumb-color: #dfdfdf;
+  $track-border-color: #E7E7E7;
+  $thumb-width: 4px;
+
+  ::-webkit-scrollbar {
+    width: 14px;
+    height: 18px;
+    border-left: 0.5px solid $track-border-color;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    height: 6px;
+    border: $thumb-width solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    -webkit-border-radius: 7px;
+    background-color: $thumb-color;
+    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
+  }
+
+  ::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}
--- a/app/assets/stylesheets/main.css.scss
+++ b/app/assets/stylesheets/main.css.scss
@@ -1,5 +1,6 @@
@import "app/main";
@import "app/ui";
+@import "app/scrollbars";
@import "app/footer";
@import "app/tags";
@import "app/notes";