diff --git a/src/framework/theme/components/layout/_layout.component.theme.scss b/src/framework/theme/components/layout/_layout.component.theme.scss index bac388e913..a4aea3905f 100644 --- 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 index 03c8ee65a0..7774a817f1 100644 --- 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 index 4d870a2699..63976042e5 100644 --- 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 index f6ba765445..e386a2db5b 100644 --- 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; }