Merge pull request #3542 from danny007in/sidebar-fixes

Fix: sidebar bugs

build/config/postcss.config.js

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

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();
     }
   }
 }

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

build/scss/_mixins.scss

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

build/scss/_sidebar-mini.scss

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

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

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

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",

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",