From e1b6738fab56bd201929bd1c7dc7c71f750d919b Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Thu, 14 Jan 2021 15:54:43 +0530 Subject: [PATCH 1/3] postcss-scrollbar plugin installed --- package-lock.json | 56 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 57 insertions(+) diff --git a/package-lock.json b/package-lock.json index 0871ace43..e9dbf630f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8724,6 +8724,62 @@ } } }, + "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": { + "cssesc": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz", + "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==", + "dev": true + }, + "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-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-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", diff --git a/package.json b/package.json index 2ab3aefe1..5555d4a95 100644 --- a/package.json +++ b/package.json @@ -147,6 +147,7 @@ "npm-run-all": "^4.1.5", "postcss": "^8.2.4", "postcss-cli": "^8.3.1", + "postcss-scrollbar": "^0.3.0", "rollup": "^2.36.1", "stylelint": "^13.8.0", "stylelint-config-twbs-bootstrap": "^2.1.0", From 39b5a9a8839ae4b52033ee1f777f7cdc675fb191 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Thu, 14 Jan 2021 15:55:12 +0530 Subject: [PATCH 2/3] Update postcss.config.js --- build/config/postcss.config.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/build/config/postcss.config.js b/build/config/postcss.config.js index 273ee9413..0b60e2fe8 100644 --- a/build/config/postcss.config.js +++ b/build/config/postcss.config.js @@ -1,14 +1,17 @@ 'use strict' -module.exports = () => ({ +module.exports = { map: { inline: false, annotation: true, sourcesContent: true }, - plugins: { - autoprefixer: { + plugins: [ + require('postcss-scrollbar')({ + edgeAutohide: true + }), + require('autoprefixer')({ cascade: false - } - } -}) + }) + ] +} From 151eefc778a3a770ca6042f106a92d6f5c418590 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Wed, 13 Jan 2021 13:42:15 +0530 Subject: [PATCH 3/3] Sidebar scroll fixed (#3304) --- build/scss/_layout.scss | 2 +- build/scss/_main-sidebar.scss | 3 ++- build/scss/_sidebar-mini.scss | 7 +++++++ build/scss/mixins/_miscellaneous.scss | 10 ++++++++++ build/scss/mixins/_sidebar.scss | 1 - 5 files changed, 20 insertions(+), 3 deletions(-) diff --git a/build/scss/_layout.scss b/build/scss/_layout.scss index 88530dcd1..7a8229c22 100644 --- a/build/scss/_layout.scss +++ b/build/scss/_layout.scss @@ -580,7 +580,7 @@ body:not(.layout-fixed) { .control-sidebar-content { height: calc(100vh - #{$main-header-height}); overflow-y: auto; - scrollbar-width: thin; + @include scrollbar-width-thin(); } } } diff --git a/build/scss/_main-sidebar.scss b/build/scss/_main-sidebar.scss index e8b65283a..d9e0f6c24 100644 --- a/build/scss/_main-sidebar.scss +++ b/build/scss/_main-sidebar.scss @@ -19,12 +19,13 @@ .sidebar { height: calc(100% - (#{$main-header-height-inner} + #{$main-header-bottom-border-width})); + overflow-x: none; overflow-y: initial; - scrollbar-width: thin; padding-bottom: $sidebar-padding-y; padding-left: $sidebar-padding-x; padding-right: $sidebar-padding-x; padding-top: $sidebar-padding-y; + @include scrollbar-width-thin(); } // Sidebar user panel diff --git a/build/scss/_sidebar-mini.scss b/build/scss/_sidebar-mini.scss index e853745cf..e25acdba8 100644 --- a/build/scss/_sidebar-mini.scss +++ b/build/scss/_sidebar-mini.scss @@ -415,6 +415,13 @@ } } } + .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 5b474dd5f..9d7f46244 100644 --- a/build/scss/mixins/_miscellaneous.scss +++ b/build/scss/mixins/_miscellaneous.scss @@ -30,3 +30,13 @@ 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/_sidebar.scss b/build/scss/mixins/_sidebar.scss index 161a506f4..907bfd9fc 100644 --- a/build/scss/mixins/_sidebar.scss +++ b/build/scss/mixins/_sidebar.scss @@ -25,7 +25,6 @@ .nav-sidebar > .nav-header, .nav-sidebar .nav-link { white-space: nowrap; - overflow: hidden; } // When the sidebar is collapsed...