fix(module:theme): fix keeping show scroll bar in firefox (#336)

- close ng-alain/ng-alain#837
ng-alain · Dec 23, 2018 · 727d0d7 · 727d0d7
1 parent 0510864
commit 727d0d7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 23 deletions.
diff --git a/packages/theme/styles/layout/default/aside.less b/packages/theme/styles/layout/default/aside.less
@@ -20,30 +20,10 @@
   }
   &-inner {
     overflow-x: hidden;
-    overflow-y: scroll; // margin-right: -17px;
+    overflow-y: scroll;
     height: 100%;
-    -webkit-overflow-scrolling: touch;
-    /*IE10,IE11*/
-    -ms-scroll-chaining: chained;
-    -ms-overflow-style: none;
-    -ms-content-zooming: zoom;
-    -ms-scroll-rails: none;
-    -ms-content-zoom-limit-min: 100%;
-    -ms-content-zoom-limit-max: 500%;
-    -ms-scroll-snap-type: proximity;
-    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      height: @alain-default-aside-scrollbar-width;
-      width: @alain-default-aside-scrollbar-height;
-    }
-    &::-webkit-scrollbar-track {
-      -webkit-box-shadow: inset 0 0 @alain-default-aside-scrollbar-width
-        @alain-default-aside-scrollbar-track-color;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: @alain-default-aside-scrollbar-thumb-color;
-    }
+    transition: width 0.2s;
+    width: @alain-default-aside-scroll-width + @alain-default-aside-wd;
   }
 }
 
@@ -52,6 +32,10 @@
   @{alain-default-prefix}__collapsed {
     @{alain-default-prefix}__aside {
       width: @alain-default-aside-collapsed-wd;
+      &-inner {
+        transition: width 0.2s;
+        width: @alain-default-aside-scroll-width + @alain-default-aside-collapsed-wd;
+      }
     }
   }
 }

diff --git a/packages/theme/styles/layout/default/variable.less b/packages/theme/styles/layout/default/variable.less
@@ -8,6 +8,7 @@
 @alain-default-header-search-height:  34px;
 @alain-default-header-icon-fs:        18px;
 
+@alain-default-aside-scroll-width:            20px;
 @alain-default-aside-wd:                      200px;
 @alain-default-aside-bg:                      #fff;
 @alain-default-aside-scrollbar-width:         0;