github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix: sidebar scroll

pull/3542/head
Daniel 2021-03-28 12:29:23 +05:30
parent 9d87cbb5b8
commit 6db2e0d4e5
9 changed files with 47 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/config/postcss.config.js
View File

@ -7,9 +7,6 @@ module.exports = {
sourcesContent: true
},
plugins: [
require('postcss-scrollbar')({
edgeAutohide: true
}),
require('autoprefixer')({
cascade: false
})

1
build/scss/_layout.scss
View File

@ -581,6 +581,7 @@ body:not(.layout-fixed) {
height: calc(100vh - #{$main-header-height});
overflow-y: auto;
@include scrollbar-width-thin();
@include scrollbar-color-gray();
}
}
}

9
build/scss/_main-sidebar.scss
View File

@ -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

1
build/scss/_mixins.scss
View File

@ -3,6 +3,7 @@
//
@import "mixins/animations";
@import "mixins/scrollbar";
@import "mixins/cards";
@import "mixins/sidebar";
@import "mixins/navbar";

7
build/scss/_sidebar-mini.scss
View File

@ -395,13 +395,6 @@
}
}
}
.sidebar {
@include scrollbar-width-thin();
}
}
.sidebar {
@include scrollbar-width-none();
}
}

9
build/scss/mixins/_miscellaneous.scss
View File

@ -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;
}
//

38
build/scss/mixins/_scrollbar.scss Normal file
View File

@ -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;
}
}
//

56
package-lock.json generated
View File

@ -3324,12 +3324,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",
@ -8446,45 +8440,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",
@ -8516,17 +8471,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",

1
package.json
View File

@ -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.42.1",
"stylelint": "^13.12.0",
"stylelint-config-twbs-bootstrap": "^2.1.0",