Merge pull request #1039 from Leopoldthecoder/loading-css

Loading: remove unnecessary inline styles

packages/loading/src/directive.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { addClass, removeClass } from 'wind-dom/src/class';
 let Spinner = Vue.extend(require('./spinner.vue'));
 
 exports.install = Vue => {
@@ -9,14 +10,14 @@ exports.install = Vue => {
           el.originalPosition = document.body.style.position;
           el.originalOverflow = document.body.style.overflow;
 
-          ['top', 'right', 'bottom', 'left'].forEach(property => {
-            el.maskStyle[property] = '0';
-          });
-          el.maskStyle.position = 'fixed';
-          el.spinnerStyle.position = 'fixed';
+          addClass(el.mask, 'is-fullscreen');
+          addClass(el.spinner, 'is-fullscreen');
 
           insertDom(document.body, el, binding);
         } else {
+          removeClass(el.mask, 'is-fullscreen');
+          removeClass(el.spinner, 'is-fullscreen');
+
           if (binding.modifiers.body) {
             el.originalPosition = document.body.style.position;
 
@@ -31,11 +32,6 @@ exports.install = Vue => {
             insertDom(document.body, el, binding);
           } else {
             el.originalPosition = el.style.position;
-
-            ['top', 'right', 'bottom', 'left'].forEach(property => {
-              el.maskStyle[property] = '0';
-            });
-
             insertDom(el, el, binding);
           }
         }
@@ -63,10 +59,6 @@ exports.install = Vue => {
         directive.mask.style[property] = directive.maskStyle[property];
       });
 
-      Object.keys(directive.spinnerStyle).forEach(property => {
-        directive.spinner.style[property] = directive.spinnerStyle[property];
-      });
-
       if (directive.originalPosition !== 'absolute') {
         parent.style.position = 'relative';
       }
@@ -87,12 +79,7 @@ exports.install = Vue => {
     bind: function(el, binding) {
       el.mask = document.createElement('div');
       el.mask.className = 'el-loading-mask';
-      el.maskStyle = {
-        position: 'absolute',
-        zIndex: '10000',
-        backgroundColor: 'rgba(255, 255, 255, .9)',
-        margin: '0'
-      };
+      el.maskStyle = {};
 
       let spinner = new Spinner({
         data: {
@@ -102,9 +89,6 @@ exports.install = Vue => {
       });
       spinner.$mount(el.mask);
       el.spinner = spinner.$el;
-      el.spinnerStyle = {
-        position: 'absolute'
-      };
       toggleLoading(el, binding);
     },
 

packages/theme-default/src/loading.css

@@ -1,11 +1,32 @@
 @charset "UTF-8";
 @import "./common/var.css";
 
-.el-loading-spinner {
+@component-namespace el {
+  @b loading-mask {
+    position: absolute;
+    z-index: 10000;
+    background-color: rgba(255, 255, 255, .9);
+    margin: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    @when fullscreen {
+      position: fixed;
+    }
+  }
+
+  @b loading-spinner {
     top: 50%;
     margin-top: calc(- var(--loading-spinner-size) / 2);
     width: 100%;
     text-align: center;
+    position: absolute;
+
+    @when fullscreen {
+      position: fixed;
+    }
 
     .el-loading-text {
       color: var(--color-primary);
@@ -19,11 +40,11 @@
     }
 
     .path {
+      animation: dash 1.5s ease-in-out infinite;
       stroke-dasharray: 1, 100;
       stroke-dashoffset: 0;
       stroke-width: 2;
       stroke: var(--color-primary);
-    animation: dash 1.5s ease-in-out infinite;
       stroke-linecap: round;
     }
 
@@ -35,6 +56,7 @@
       }
     }
   }
+}
 
 @keyframes rotate {
   100% {

test/unit/specs/loading.spec.js

@@ -106,9 +106,7 @@ describe('Loading', () => {
     Vue.nextTick(() => {
       const mask = document.querySelector('.el-loading-mask');
       expect(mask.parentNode === document.body).to.true;
-      expect(mask.style.left).to.equal('0px');
-      expect(mask.style.right).to.equal('0px');
-      expect(mask.style.position).to.equal('fixed');
+      expect(mask.classList.contains('is-fullscreen')).to.true;
       vm.loading = false;
       document.body.removeChild(mask);
       document.body.removeChild(vm.$el);