feat(scrollbars): style scrollbars, lefthand scrollbar in stories (#458)

* feat(scrollbars): style scrollbars, lefthand scrollbar in stories * refactor(scrollbars): use global selector
ubilabs · Aug 12, 2020 · 2d91e01 · 2d91e01
1 parent ab4c923
commit 2d91e01
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/src/scripts/components/app/app.styl b/src/scripts/components/app/app.styl
@@ -12,6 +12,20 @@
   background-color: $black
   font-family: Arial, Helvetica, sans-serif
 
+:global(*)
+  scrollbar-color: $darkGrey1 transparent
+
+:global(::-webkit-scrollbar)
+  width: 12px
+
+:global(::-webkit-scrollbar-track)
+  background: transparent
+
+:global(::-webkit-scrollbar-thumb)
+  border-radius: 20px
+  background-color: $darkGrey1
+  -webkit-box-shadow: inset 0 0 6px rgba(16, 22, 26, 0.9)
+
 .logo
   position: absolute
   top: emCalc(22px)

diff --git a/src/scripts/components/layer-list/layer-list.styl b/src/scripts/components/layer-list/layer-list.styl
@@ -1,7 +1,7 @@
 @require '../../../variables.styl'
 
 .layerList
-  overflow-y: scroll
+  overflow-y: auto
   margin: 0
   padding: 0
   height: 100%

diff --git a/src/scripts/components/menu/menu.styl b/src/scripts/components/menu/menu.styl
@@ -15,7 +15,7 @@
   display: flex
   flex-direction: column
   flex-wrap: wrap
-  overflow-y: auto
+  margin: 0
   padding: emCalc(10px) emCalc(32px)
   min-width: emCalc(200px)
   width: 25%

diff --git a/src/scripts/components/story-content/story-content.styl b/src/scripts/components/story-content/story-content.styl
@@ -2,12 +2,15 @@
 
 .content
   overflow-y: auto
-  padding: emCalc(80px) emCalc(28px) 0 emCalc(56px)
+  padding: emCalc(80px) emCalc(28px) emCalc(80px) emCalc(56px)
   max-width: emCalc(750px)
-  height: 100%
   background-color: $black
   color: $textDefault
   line-height: emCalc(22px)
+  direction: rtl
+
+  *
+    direction: ltr
 
   h1
     margin-top: 0