fix alert loading style in nested loading (#1570)

youzan · Nov 26, 2020 · 6b03490 · 6b03490
1 parent 9694740
commit 6b03490
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/packages/zent/assets/loading.scss b/packages/zent/assets/loading.scss
@@ -11,20 +11,20 @@
     left: 0;
     width: 100%;
     height: 100%;
+
+    > .zent-loading-icon-and-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 
   &.zent-loading--has-children {
     .zent-loading-mask {
       @include theme-color(background-color, stroke, 9, 0.5);
     }
   }
-
-  .zent-loading-icon-and-text {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
 }
 
 .zent-loading--inline {

diff --git a/packages/zent/src/alert/demos/loading.md b/packages/zent/src/alert/demos/loading.md
@@ -9,13 +9,18 @@ en-US:
 ---
 
 ```jsx
-import { Alert } from 'zent';
+import { Alert, BlockLoading } from 'zent';
 
 ReactDOM.render(
 	<div className="zent-alert-example">
 		<Alert type="info" loading>
 			{i18n.content}
 		</Alert>
+		<BlockLoading>
+			<Alert type="info" loading>
+				{i18n.content}
+			</Alert>
+		</BlockLoading>
 	</div>,
 	mountNode
 );