diff --git a/build/config/postcss.config.js b/build/config/postcss.config.js index 0b60e2fe8..a325f3d31 100644 --- a/build/config/postcss.config.js +++ b/build/config/postcss.config.js @@ -7,9 +7,6 @@ module.exports = { sourcesContent: true }, plugins: [ - require('postcss-scrollbar')({ - edgeAutohide: true - }), require('autoprefixer')({ cascade: false }) diff --git a/build/scss/_layout.scss b/build/scss/_layout.scss index 7769fecd0..8f37bd571 100644 --- a/build/scss/_layout.scss +++ b/build/scss/_layout.scss @@ -149,6 +149,16 @@ body, } } + @each $name, $color in $colors { + .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) { + background-color: $sidebar-dark-bg; + } + + .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) { + background-color: $sidebar-light-bg; + } + } + .content-wrapper { margin-top: $main-header-height; } @@ -267,17 +277,6 @@ body, z-index: $zindex-main-header + 1; } - // Sidebar variants brand-link fix - @each $name, $color in $theme-colors { - .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) { - background-color: $sidebar-dark-bg; - } - - .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) { - background-color: $sidebar-light-bg; - } - } - .content-wrapper { margin-top: $main-header-height; } @@ -581,6 +580,7 @@ body:not(.layout-fixed) { height: calc(100vh - #{$main-header-height}); overflow-y: auto; @include scrollbar-width-thin(); + @include scrollbar-color-gray(); } } } diff --git a/build/scss/_main-sidebar.scss b/build/scss/_main-sidebar.scss index 4aef9c311..2cb4daff9 100644 --- a/build/scss/_main-sidebar.scss +++ b/build/scss/_main-sidebar.scss @@ -19,13 +19,18 @@ .sidebar { height: calc(100% - (#{$main-header-height-inner} + #{$main-header-bottom-border-width})); - overflow-x: none; + overflow-x: hidden; overflow-y: initial; padding-bottom: $sidebar-padding-y; padding-left: $sidebar-padding-x; padding-right: $sidebar-padding-x; padding-top: $sidebar-padding-y; - @include scrollbar-width-thin(); + @include scrollbar-color-gray(); + @include scrollbar-width-none(); + + &:hover { + @include scrollbar-width-thin(); + } } // Sidebar user panel diff --git a/build/scss/_mixins.scss b/build/scss/_mixins.scss index 7a4f40744..0de487cb4 100644 --- a/build/scss/_mixins.scss +++ b/build/scss/_mixins.scss @@ -3,6 +3,7 @@ // @import "mixins/animations"; +@import "mixins/scrollbar"; @import "mixins/cards"; @import "mixins/sidebar"; @import "mixins/navbar"; diff --git a/build/scss/_sidebar-mini.scss b/build/scss/_sidebar-mini.scss index 40e531587..43a57b767 100644 --- a/build/scss/_sidebar-mini.scss +++ b/build/scss/_sidebar-mini.scss @@ -395,13 +395,6 @@ } } } - .sidebar { - @include scrollbar-width-thin(); - } - } - - .sidebar { - @include scrollbar-width-none(); } } diff --git a/build/scss/mixins/_miscellaneous.scss b/build/scss/mixins/_miscellaneous.scss index 9d7f46244..e0f61f3be 100644 --- a/build/scss/mixins/_miscellaneous.scss +++ b/build/scss/mixins/_miscellaneous.scss @@ -30,13 +30,4 @@ background-image: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop)); } -@mixin scrollbar-width-thin() { - scrollbar-width: thin; - scrollbar-color: #a9a9a9 transparent; -} - -@mixin scrollbar-width-none() { - scrollbar-width: none; -} - // diff --git a/build/scss/mixins/_scrollbar.scss b/build/scss/mixins/_scrollbar.scss new file mode 100644 index 000000000..a91437322 --- /dev/null +++ b/build/scss/mixins/_scrollbar.scss @@ -0,0 +1,38 @@ +// +// Mixins: Scrollbar +// + +@mixin scrollbar-color-gray() { + scrollbar-color: #a9a9a9 transparent; + + &::-webkit-scrollbar-thumb { + background-color: #a9a9a9; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } + + &::-webkit-scrollbar-corner { + background-color: transparent; + } +} + +@mixin scrollbar-width-thin() { + scrollbar-width: thin; + + &::-webkit-scrollbar { + width: .5rem; + height: .5rem; + } +} + +@mixin scrollbar-width-none() { + scrollbar-width: none; + + &::-webkit-scrollbar { + width: 0; + } +} + +// diff --git a/package-lock.json b/package-lock.json index 5b45a3524..82c0dc0a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3387,12 +3387,6 @@ } } }, - "cssesc": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz", - "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==", - "dev": true - }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -8509,45 +8503,6 @@ } } }, - "postcss-scrollbar": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/postcss-scrollbar/-/postcss-scrollbar-0.3.0.tgz", - "integrity": "sha512-eoyc1lMOKr/hidOnUZTFxwrn0FqLFQ47wSn5eE9jUYpBXb2MZGSKEBNyqBErcTjT+9+W6aKZ3hhjPNjdVH+wDQ==", - "dev": true, - "requires": { - "postcss": "^7.0.14", - "postcss-selector-parser": "^5.0.0", - "postcss-value-parser": "^3.3.1" - }, - "dependencies": { - "postcss": { - "version": "7.0.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", - "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", - "dev": true, - "requires": { - "chalk": "^2.4.2", - "source-map": "^0.6.1", - "supports-color": "^6.1.0" - } - }, - "postcss-value-parser": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", - "dev": true - }, - "supports-color": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", - "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", - "dev": true, - "requires": { - "has-flag": "^3.0.0" - } - } - } - }, "postcss-scss": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.1.1.tgz", @@ -8579,17 +8534,6 @@ } } }, - "postcss-selector-parser": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz", - "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==", - "dev": true, - "requires": { - "cssesc": "^2.0.0", - "indexes-of": "^1.0.1", - "uniq": "^1.0.1" - } - }, "postcss-sorting": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-5.0.1.tgz", diff --git a/package.json b/package.json index e9640716b..c1026d1f3 100644 --- a/package.json +++ b/package.json @@ -147,7 +147,6 @@ "npm-run-all": "^4.1.5", "postcss": "^8.2.8", "postcss-cli": "^8.3.1", - "postcss-scrollbar": "^0.3.0", "rollup": "^2.43.1", "stylelint": "^13.12.0", "stylelint-config-twbs-bootstrap": "^2.1.0",