➕ allow scrollbar setting to be customized

fluid-framework · Oct 20, 2021 · 8ff0582 · 8ff0582
1 parent cec56ce
commit 8ff0582
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/src/objects/_scrollbar.scss b/src/objects/_scrollbar.scss
@@ -11,28 +11,28 @@
     //
     .scrollbar {
       &::-webkit-scrollbar {
-        width: 7px;
-        height: 7px;
-        background-color: $gray-100;
+        width: $scrollbar-width;
+        height: $scrollbar-height;
+        background-color: $scrollbar-background;
       }
 
       &::-webkit-scrollbar-track {
         background-color: transparent;
       }
 
       &::-webkit-scrollbar-thumb {
-        border-radius: $borderradius-pill;
-        background-color: rgba($dark, .65);
+        border-radius: $scrollbar-thumb-radius;
+        background-color: $scrollbar-thumb-background;
       }
 
       // stylelint-disable-next-line selector-pseudo-class-disallowed-list
       &::-webkit-scrollbar-thumb:focus {
-        background-color: $dark;
+        background-color: $scrollbar-thumb-focus-background;
       }
 
       // stylelint-disable-next-line selector-pseudo-class-disallowed-list
       &::-webkit-scrollbar:hover {
-        background-color: $gray-200;
+        background-color: $scrollbar-hover-background;
       }
     }
   }

diff --git a/src/settings/_settings.scss b/src/settings/_settings.scss
@@ -56,6 +56,7 @@ $enable-experimental-css:                           true !default;       // Enab
 
 @import "./objects/grid";
 @import "./objects/layout";
+@import "./objects/scrollbar";
 @import "./objects/containers";
 
 //

diff --git a/src/settings/objects/_scrollbar.scss b/src/settings/objects/_scrollbar.scss
@@ -0,0 +1,19 @@
+//
+// Containers Settings
+//
+
+//
+// Inherit
+//
+$scrollbar-thumb-radius:             $borderradius-pill !default;
+
+//
+// Setting
+//
+$scrollbar-width:                    7px !default;
+$scrollbar-height:                   7px !default;
+$scrollbar-background:               $gray-100 !default;
+$scrollbar-hover-background:         $gray-200 !default;
+
+$scrollbar-thumb-background:         rgba($dark, .65) !default;
+$scrollbar-thumb-focus-background:   $dark !default;