Merge pull request #9 from ScottLogic/add-custom-scrollbar-to-editor

Add custom scrollbar to editor

Author: moxon6

styles/editor.scss

@@ -1,4 +1,6 @@
 
+$scroll-width: 10px;
+
 .editor-panel {
   position: relative;
 
@@ -9,7 +11,7 @@
 
   .button-container {
     position: absolute;
-    right: 0;
+    right: $scroll-width;
     bottom: 0;
   }
 
@@ -50,3 +52,13 @@
     }
   }
 }
+
+
+.ace_scrollbar.ace_scrollbar-v {
+  @include withScrollbar($scroll-width);
+  width: $scroll-width !important;
+}
+
+.ace_scroller {
+  right: $scroll-width !important;
+}

styles/main.scss

@@ -1,5 +1,5 @@
 
-@import 'scrollbar.scss';
+@import "scrollbar.scss";
 @import "messages.scss";
 @import "editor.scss";
 @import "console.scss";

styles/scrollbar.scss

@@ -1,16 +1,16 @@
-@mixin withScrollbar() {
+@mixin withScrollbar($width: 6px, $color: #32465a) {
   &::-webkit-scrollbar
     {
-      width: 6px;
+      width: $width;
       background-color: #F5F5F5;
       &-track
       {
-        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+        -webkit-box-shadow: inset 0 0 $width rgba(0,0,0,0.3);
         background-color: #F5F5F5;
       }
       &-thumb
       {
-        background-color: #32465a;
+        background-color: $color;
       }
     }
 }