fix: scroll bar theming (#1890)

akveo · Oct 10, 2019 · e6b19a5 · e6b19a5
1 parent a678e60
commit e6b19a5
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/src/framework/theme/components/layout/_layout.component.theme.scss b/src/framework/theme/components/layout/_layout.component.theme.scss
@@ -38,7 +38,7 @@
 
 @mixin nb-layout-theme() {
 
-  nb-layout {
+  nb-layout .scrollable-container {
     @include nb-scrollbars(
         nb-theme(layout-scrollbar-color),
         nb-theme(layout-scrollbar-background-color),

diff --git a/src/framework/theme/components/sidebar/_sidebar.component.theme.scss b/src/framework/theme/components/sidebar/_sidebar.component.theme.scss
@@ -17,11 +17,6 @@
     line-height: nb-theme(sidebar-text-line-height);
     width: nb-theme(sidebar-width);
 
-    @include nb-scrollbars(
-        nb-theme(sidebar-scrollbar-color),
-        nb-theme(sidebar-scrollbar-background-color),
-        nb-theme(sidebar-scrollbar-width));
-
     .main-container {
       height: nb-theme(sidebar-height);
       width: nb-theme(sidebar-width);
@@ -36,6 +31,11 @@
         overflow-y: scroll;
         -webkit-overflow-scrolling: touch;
       }
+
+      @include nb-scrollbars(
+          nb-theme(sidebar-scrollbar-color),
+          nb-theme(sidebar-scrollbar-background-color),
+          nb-theme(sidebar-scrollbar-width));
     }
 
     // TODO: width used to use transition on width

diff --git a/src/framework/theme/components/tabset/_tabset.component.theme.scss b/src/framework/theme/components/tabset/_tabset.component.theme.scss
@@ -7,11 +7,6 @@
 @mixin nb-tabset-theme() {
 
   nb-tabset {
-    @include nb-scrollbars(
-        nb-theme(tabset-scrollbar-color),
-        nb-theme(tabset-scrollbar-background-color),
-        nb-theme(tabset-scrollbar-width));
-
     background-color: nb-theme(tabset-background-color);
     border-radius: nb-theme(tabset-border-radius);
     box-shadow: nb-theme(tabset-shadow);
@@ -98,6 +93,11 @@
       font-weight: nb-theme(tabset-content-text-font-weight);
       line-height: nb-theme(tabset-content-text-line-height);
       padding: nb-theme(tabset-content-padding);
+
+      @include nb-scrollbars(
+          nb-theme(tabset-scrollbar-color),
+          nb-theme(tabset-scrollbar-background-color),
+          nb-theme(tabset-scrollbar-width));
     }
   }
 }
diff --git a/src/framework/theme/styles/core/_mixins.scss b/src/framework/theme/styles/core/_mixins.scss
@@ -5,18 +5,18 @@
  */
 
 @mixin nb-scrollbars($fg, $bg, $size, $border-radius: $size / 2) {
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: $size;
     height: $size;
   }
 
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     background: $fg;
     cursor: pointer;
     border-radius: $border-radius;
   }
 
-  ::-webkit-scrollbar-track {
+  &::-webkit-scrollbar-track {
     background: $bg;
   }