fix: spin should mask content, close: ant-design#3091

ithanshui · Sep 20, 2016 · 9b99c38 · 9b99c38
1 parent 3958eb4
commit 9b99c38
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 10 deletions.
diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 import Icon from '../icon';

diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
@@ -1,6 +1,6 @@
 ---
 order: 3
-title: 
+title:
   zh-CN: 卡片加载中
   en-US: Embedded mode
 ---

diff --git a/components/spin/index.tsx b/components/spin/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { PropTypes } from 'react';
 import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';

diff --git a/components/spin/style/index.less b/components/spin/style/index.less
@@ -29,15 +29,34 @@
 
   &-nested-loading & {
     position: absolute;
-    top: 50%;
-    height: 20px;
-    line-height: 20px;
-    margin-top: -10px;
-    z-index: 4;
-    text-align: center;
+    height: 100%;
     width: 100%;
+    z-index: 4;
     &-dot {
-      display: inline-block;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin: -@spin-dot-size / 2;
+    }
+
+    &-sm .@{spin-prefix-cls}-dot {
+      margin: -@spin-dot-size-sm / 2;
+    }
+    &-lg .@{spin-prefix-cls}-dot {
+      margin: -@spin-dot-size-lg / 2;
+    }
+
+    &-text {
+      position: absolute;
+      top: 50%;
+      width: 100%;
+      padding-top: @spin-dot-size / 2;
+    }
+    &-sm &-text {
+      padding-top: @spin-dot-size-sm / 2;
+    }
+    &-lg &-text {
+      padding-top: @spin-dot-size-lg / 2;
     }
   }