Merge pull request #40 from FormidableLabs/custom-scrollbars

Added discrete custom scrollbars.
FormidableLabs · Oct 7, 2017 · 5f91c21 · 5f91c21
2 parents 2c4780f + 0fa6ad4
commit 5f91c21
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 12 deletions.
diff --git a/app/app.global.css b/app/app.global.css
@@ -24,7 +24,3 @@ table {
 table td {
   word-wrap: break-word;
 }
-
-::-webkit-scrollbar {
-  display: none;
-}
diff --git a/app/components/Container.js b/app/components/Container.js
@@ -8,4 +8,8 @@ export default styled.div`
   padding: 40px;
   flex-wrap: wrap;
   overflow: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
diff --git a/app/components/ScrollerBase.js b/app/components/ScrollerBase.js
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const ScrollerBase = styled.div`
+  overflow: scroll;
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: hsla(0, 0%, 100%, 0.25);
+    border-radius: 3px;
+  }
+`;
diff --git a/app/containers/Assets.js b/app/containers/Assets.js
@@ -6,15 +6,15 @@ import { fadeIn } from 'react-animations';
 import Text from '../components/Text';
 import Error from '../components/Error';
 import Loading from '../components/Loading';
+import { ScrollerBase } from '../components/ScrollerBase';
 
 const fadeInAnimation = keyframes`${fadeIn}`;
 const alertIcon = require('../assets/alert-icon.svg');
 
-const Container = styled.div`
+const Container = styled(ScrollerBase)`
   opacity: 0;
   animation: 500ms ${fadeInAnimation} 500ms;
   animation-fill-mode: forwards;
-  overflow: scroll;
   height: calc(100% - 27px);
 `;
 

diff --git a/app/containers/Log.js b/app/containers/Log.js
@@ -4,12 +4,12 @@ import styled, { keyframes } from 'styled-components';
 import { fadeIn } from 'react-animations';
 import withSettings from './withSettings';
 import getFontSize from '../util/get-font-size';
+import { ScrollerBase } from '../components/ScrollerBase';
 
 const fadeInAnimation = keyframes`${fadeIn}`;
 
-const LogScroller = styled.div`
+const LogScroller = styled(ScrollerBase)`
   flex: 1;
-  overflow: scroll;
   padding: 30px;
   opacity: 0;
   animation: 500ms ${fadeInAnimation} 500ms;

diff --git a/app/containers/Modules.js b/app/containers/Modules.js
@@ -9,18 +9,18 @@ import Error from '../components/Error';
 import Loading from '../components/Loading';
 import withSettings from './withSettings';
 import getFontSize from '../util/get-font-size';
+import { ScrollerBase } from '../components/ScrollerBase';
 
 const fadeInAnimation = keyframes`${fadeIn}`;
 
 const ColorText = styled(Text) `
   color: #00d0ff;
 `;
 
-const Container = styled.div`
+const Container = styled(ScrollerBase)`
   opacity: 0;
   animation: 500ms ${fadeInAnimation} 500ms;
   animation-fill-mode: forwards;
-  overflow: scroll;
   height: calc(100% - 27px);
 `;
 

diff --git a/app/containers/Problems.js b/app/containers/Problems.js
@@ -8,10 +8,11 @@ import Error from '../components/Error';
 import Loading from '../components/Loading';
 import withSettings from './withSettings';
 import getFontSize from '../util/get-font-size';
+import { ScrollerBase } from '../components/ScrollerBase';
 
 const fadeInAnimation = keyframes`${fadeIn}`;
 
-const ProblemContainer = withSettings(styled.div`
+const ProblemContainer = withSettings(styled(ScrollerBase)`
   flex: 0;
   white-space: pre-wrap;
   font-family: 'menloregular';
@@ -20,7 +21,6 @@ const ProblemContainer = withSettings(styled.div`
   opacity: 0;
   animation: 500ms ${fadeInAnimation} 500ms;
   animation-fill-mode: forwards;
-  overflow: 'scroll';
   height: calc(100% - 27px);
 `);