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,37 +1,59 @@
 @charset "UTF-8";
 @import "./common/var.css";
 
-.el-loading-spinner {
-  top: 50%;
-  margin-top: calc(- var(--loading-spinner-size) / 2);
-  width: 100%;
-  text-align: center;
-
-  .el-loading-text {
-    color: var(--color-primary);
-    margin: 3px 0;
-    font-size: 14px;
-  }
+@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;
 
-  .circular {
-    width: var(--loading-spinner-size);
-    animation: rotate 2s linear infinite;
+    @when fullscreen {
+      position: fixed;
+    }
   }
 
-  .path {
-    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;
-  }
+  @b loading-spinner {
+    top: 50%;
+    margin-top: calc(- var(--loading-spinner-size) / 2);
+    width: 100%;
+    text-align: center;
+    position: absolute;
 
-  @when full-screen {
-    margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
+    @when fullscreen {
+      position: fixed;
+    }
+
+    .el-loading-text {
+      color: var(--color-primary);
+      margin: 3px 0;
+      font-size: 14px;
+    }
 
     .circular {
-      width: var(--loading-fullscreen-spinner-size);
+      width: var(--loading-spinner-size);
+      animation: rotate 2s linear infinite;
+    }
+
+    .path {
+      animation: dash 1.5s ease-in-out infinite;
+      stroke-dasharray: 1, 100;
+      stroke-dashoffset: 0;
+      stroke-width: 2;
+      stroke: var(--color-primary);
+      stroke-linecap: round;
+    }
+
+    @when full-screen {
+      margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
+
+      .circular {
+        width: var(--loading-fullscreen-spinner-size);
+      }
     }
   }
 }

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