From c84cd88f519854d6706a5722ac79cebc2f31f0d6 Mon Sep 17 00:00:00 2001
From: xrk <xrkffgg@gmail.com>
Date: Mon, 26 Oct 2020 12:17:07 +0800
Subject: [PATCH] docs: optimize layout demo css (#27369)

---
 components/layout/demo/basic.md                |  8 ++++----
 components/layout/demo/custom-trigger-debug.md | 10 ----------
 components/layout/demo/custom-trigger.md       |  2 +-
 components/layout/demo/side.md                 |  2 +-
 components/layout/demo/top-side-2.md           | 17 ++++++++---------
 components/layout/demo/top-side.md             | 11 ++++++++---
 components/layout/demo/top.md                  | 15 ++++++++-------
 7 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md
index 404e28a7c9..328831afbc 100644
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -63,8 +63,8 @@ ReactDOM.render(
 }
 #components-layout-demo-basic .ant-layout-header,
 #components-layout-demo-basic .ant-layout-footer {
-  background: #7dbcea;
   color: #fff;
+  background: #7dbcea;
 }
 [data-theme="dark"] #components-layout-demo-basic .ant-layout-header {
   background: #6aa0c7;
@@ -76,18 +76,18 @@ ReactDOM.render(
   line-height: 1.5;
 }
 #components-layout-demo-basic .ant-layout-sider {
-  background: #3ba0e9;
   color: #fff;
   line-height: 120px;
+  background: #3ba0e9;
 }
 [data-theme="dark"] #components-layout-demo-basic .ant-layout-sider {
   background: #3499ec;
 }
 #components-layout-demo-basic .ant-layout-content {
-  background: rgba(16, 142, 233, 1);
-  color: #fff;
   min-height: 120px;
+  color: #fff;
   line-height: 120px;
+  background: rgba(16, 142, 233, 1);
 }
 [data-theme="dark"] #components-layout-demo-basic .ant-layout-content {
   background: #107bcb;
diff --git a/components/layout/demo/custom-trigger-debug.md b/components/layout/demo/custom-trigger-debug.md
index b56feaffad..f5dde438e5 100644
--- a/components/layout/demo/custom-trigger-debug.md
+++ b/components/layout/demo/custom-trigger-debug.md
@@ -98,14 +98,4 @@ ReactDOM.render(<SiderDemo />, mountNode);
 #components-layout-demo-custom-trigger .trigger:hover {
   color: #1890ff;
 }
-
-#components-layout-demo-custom-trigger .logo {
-  height: 32px;
-  background: rgba(255, 255, 255, 0.2);
-  margin: 16px;
-}
-
-.site-layout-background {
-  background: #fff;
-}
 ```
diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md
index 9fe3207b62..dcca453483 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -94,7 +94,7 @@ ReactDOM.render(<SiderDemo />, mountNode);
 
 #components-layout-demo-custom-trigger .logo {
   height: 32px;
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.3);
   margin: 16px;
 }
 
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index 84b7914a07..39ad379f5e 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -94,8 +94,8 @@ ReactDOM.render(<SiderDemo />, mountNode);
 ```css
 #components-layout-demo-side .logo {
   height: 32px;
-  background: rgba(255, 255, 255, 0.2);
   margin: 16px;
+  background: rgba(255, 255, 255, 0.3);
 }
 
 .site-layout .site-layout-background {
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index f4afc4cb46..999930c56c 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -83,20 +83,19 @@ ReactDOM.render(
 
 ```css
 #components-layout-demo-top-side-2 .logo {
+  float: left;
   width: 120px;
   height: 31px;
-  background: rgba(255, 255, 255, 0.2);
-  margin: 16px 28px 16px 0;
-  float: left;
+  margin: 16px 24px 16px 0;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.ant-row-rtl #components-layout-demo-top-side-2 .logo {
+  float: right;
+  margin: 16px 0 16px 24px;
 }
 
 .site-layout-background {
   background: #fff;
 }
 ```
-
-<style>
-  #components-layout-demo-top-side-2 .logo {
-    background: rgba(255, 255, 255, 0.3);
-  }
-</style>
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 817458e112..a5f6a4894d 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -75,11 +75,16 @@ ReactDOM.render(
 
 ```css
 #components-layout-demo-top-side .logo {
+  float: left;
   width: 120px;
   height: 31px;
-  background: rgba(255, 255, 255, 0.2);
-  margin: 16px 28px 16px 0;
-  float: left;
+  margin: 16px 24px 16px 0;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.ant-row-rtl #components-layout-demo-top-side .logo {
+  float: right;
+  margin: 16px 0 16px 24px;
 }
 
 .site-layout-background {
diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
index 20980898ce..5a4501af77 100644
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -50,16 +50,20 @@ ReactDOM.render(
 
 ```css
 .site-layout-content {
-  background: #fff;
-  padding: 24px;
   min-height: 280px;
+  padding: 24px;
+  background: #fff;
 }
 #components-layout-demo-top .logo {
+  float: left;
   width: 120px;
   height: 31px;
-  background: rgba(255, 255, 255, 0.2);
   margin: 16px 24px 16px 0;
-  float: left;
+  background: rgba(255, 255, 255, 0.3);
+}
+.ant-row-rtl #components-layout-demo-top .logo {
+  float: right;
+  margin: 16px 0 16px 24px;
 }
 ```
 
@@ -67,7 +71,4 @@ ReactDOM.render(
   [data-theme="dark"] .site-layout-content {
     background: #141414;
   }
-  [data-theme="dark"] #components-layout-demo-top .logo {
-    background: rgba(255,255,255,0.3);
-  }
 </style>