fix(styles): fix preloader position & auto hide aside scrollbar in IE

ng-alain · Dec 9, 2017 · bad3001 · bad3001
1 parent aca2c65
commit bad3001
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/site/index.html b/site/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <link rel="shortcut icon" href="./assets/img/logo-color.png">
-    <style type="text/css">.preloader{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#49a9ee;z-index:9999;transition:opacity .65s}.preloader-hidden-add{opacity:1;display:block}.preloader-hidden-add-active{opacity:0}.preloader-hidden{display:none}.cs-loader{position:absolute;top:0;left:0;height:100%;width:100%}.cs-loader-inner{-webkit-transform:translateY(-50%);transform:translateY(-50%);top:50%;position:absolute;width:calc(100% - 200px);color:#fff;padding:0 75pt;text-align:center}.cs-loader-inner label{font-size:20px;opacity:0;display:inline-block}@-webkit-keyframes lol{0%{opacity:0;-webkit-transform:translateX(-300px);transform:translateX(-300px)}33%,66%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(300px);transform:translateX(300px)}}@keyframes lol{0%,to{opacity:0}0%{-webkit-transform:translateX(-300px);transform:translateX(-300px)}33%,66%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(300px);transform:translateX(300px)}}.cs-loader-inner label:nth-child(6){-webkit-animation:lol 3s infinite ease-in-out;animation:lol 3s infinite ease-in-out}.cs-loader-inner label:nth-child(5){-webkit-animation:lol 3s .1s infinite ease-in-out;animation:lol 3s .1s infinite ease-in-out}.cs-loader-inner label:nth-child(4){-webkit-animation:lol 3s .2s infinite ease-in-out;animation:lol 3s .2s infinite ease-in-out}.cs-loader-inner label:nth-child(3){-webkit-animation:lol 3s .3s infinite ease-in-out;animation:lol 3s .3s infinite ease-in-out}.cs-loader-inner label:nth-child(2){-webkit-animation:lol 3s .4s infinite ease-in-out;animation:lol 3s .4s infinite ease-in-out}.cs-loader-inner label:nth-child(1){-webkit-animation:lol 3s .5s infinite ease-in-out;animation:lol 3s .5s infinite ease-in-out}</style>
+    <style type="text/css">.preloader{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#49a9ee;z-index:9999;transition:opacity .65s}.preloader-hidden-add{opacity:1;display:block}.preloader-hidden-add-active{opacity:0}.preloader-hidden{display:none}.cs-loader{position:absolute;top:0;left:0;height:100%;width:100%}.cs-loader-inner{transform:translateY(-50%);top:50%;position:absolute;width:100%;color:#fff;text-align:center}.cs-loader-inner label{font-size:20px;opacity:0;display:inline-block}@keyframes lol{0%{opacity:0;transform:translateX(-300px)}33%{opacity:1;transform:translateX(0)}66%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(300px)}}.cs-loader-inner label:nth-child(6){animation:lol 3s infinite ease-in-out}.cs-loader-inner label:nth-child(5){animation:lol 3s .1s infinite ease-in-out}.cs-loader-inner label:nth-child(4){animation:lol 3s .2s infinite ease-in-out}.cs-loader-inner label:nth-child(3){animation:lol 3s .3s infinite ease-in-out}.cs-loader-inner label:nth-child(2){animation:lol 3s .4s infinite ease-in-out}.cs-loader-inner label:nth-child(1){animation:lol 3s .5s infinite ease-in-out}</style>
 </head>
 
 <body ontouchstart>

diff --git a/src/core/theme/styles/app/_preloader.less b/src/core/theme/styles/app/_preloader.less
@@ -35,9 +35,8 @@
     transform: translateY(-50%);
     top: 50%;
     position: absolute;
-    width: calc(100% - 200px);
+    width: 100%;
     color: #fff;
-    padding: 0 100px;
     text-align: center;
     label {
         font-size: 20px;

diff --git a/src/core/theme/styles/app/sidebar.less b/src/core/theme/styles/app/sidebar.less
@@ -29,6 +29,18 @@
         //     margin-right: -17px;
         //     overflow-y: scroll;
         // }
+
+        /*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: @aside-scrollbar-width;
             width: @aside-scrollbar-height;