Add common layout

site/static/style.css

@@ -2010,7 +2010,7 @@ a.entry-link:hover .anticon-smile {
   padding: 0;
   border-radius: 5px;
   border: 1px solid #ccc;
-  background-color: white;
+  background-color: #fff;
   line-height: 1;
 }
 
@@ -2091,10 +2091,11 @@ a.entry-link:hover .anticon-smile {
 .window-frame .window-content {
   padding: 0;
   line-height: 1.5;
-  overflow: hidden;
-  height: 400px;
+  overflow: auto;
+  height: 440px;
   position: relative;
   border-radius: 0 0 5px 5px;
+  background: #f4f4f4;
 }
 .window-frame .status-bar {
   height: 2rem;

spec/layout/demo/aside.md

@@ -7,25 +7,48 @@
 ---
 
 ````jsx
-import { Menu, Breadcrumb } from 'antd';
+import { Menu, Breadcrumb, Icon } from 'antd';
+const SubMenu = Menu.SubMenu;
 
 ReactDOM.render(
   <BrowserDemo>
     <div className="ant-layout-aside">
       <aside className="ant-layout-sider">
+        <div className="ant-layout-logo"></div>
+        <Menu mode="inline" theme="dark"
+          defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
+          <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
+            <Menu.Item key="1">选项1</Menu.Item>
+            <Menu.Item key="2">选项2</Menu.Item>
+            <Menu.Item key="3">选项3</Menu.Item>
+            <Menu.Item key="4">选项4</Menu.Item>
+          </SubMenu>
+          <SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
+            <Menu.Item key="5">选项5</Menu.Item>
+            <Menu.Item key="6">选项6</Menu.Item>
+            <Menu.Item key="7">选项7</Menu.Item>
+            <Menu.Item key="8">选项8</Menu.Item>
+          </SubMenu>
+          <SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
+            <Menu.Item key="9">选项9</Menu.Item>
+            <Menu.Item key="10">选项10</Menu.Item>
+            <Menu.Item key="11">选项11</Menu.Item>
+            <Menu.Item key="12">选项12</Menu.Item>
+          </SubMenu>
+        </Menu>
       </aside>
       <div className="ant-layout-main">
         <div className="ant-layout-header"></div>
+        <div className="ant-layout-breadcrumb">
+          <Breadcrumb>
+            <Breadcrumb.Item>首页</Breadcrumb.Item>
+            <Breadcrumb.Item>应用列表</Breadcrumb.Item>
+            <Breadcrumb.Item>某应用</Breadcrumb.Item>
+          </Breadcrumb>
+        </div>
         <div className="ant-layout-container">
-          <div className="ant-layout-breadcrumb">
-            <Breadcrumb>
-              <Breadcrumb.Item>首页</Breadcrumb.Item>
-              <Breadcrumb.Item>应用列表</Breadcrumb.Item>
-              <Breadcrumb.Item>某应用</Breadcrumb.Item>
-            </Breadcrumb>
-          </div>
           <div className="ant-layout-content">
-            <div style={{ height: 290 }}></div>
+            <div style={{ height: 590 }}></div>
           </div>
         </div>
       </div>
@@ -36,15 +59,29 @@ ReactDOM.render(
 
 ````css
 .ant-layout-aside {
-  background: #f4f4f4;
-  height: 100%;
+  position: relative;
+  min-height: 100%;
+  overflow: hidden;
+}
+
+.ant-layout-aside .ant-layout-logo {
+  width: 150px;
+  height: 32px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px 24px 16px 28px;
 }
 
 .ant-layout-aside .ant-layout-sider {
   width: 224px;
-  height: 100%;
+  background: #404040;
   position: absolute;
-  background: #373737;
+  padding-bottom: 24px;
+  min-height: 100%;
+}
+
+.ant-layout-aside .ant-layout-sider > .ant-menu {
+  margin-bottom: 20px;
 }
 
 .ant-layout-aside .ant-layout-header {
@@ -54,16 +91,20 @@ ReactDOM.render(
 }
 
 .ant-layout-aside .ant-layout-breadcrumb {
-  margin-top: 7px;
-  margin-bottom: -17px;
+  margin: 7px 0 -17px 24px;
+}
+
+.ant-layout-aside .ant-layout-main {
+  margin-left: 224px;
+  margin-bottom: 24px;
 }
 
 .ant-layout-aside .ant-layout-container {
-  margin: 0 16px 16px 240px;
+  margin: 24px 16px;
 }
 
 .ant-layout-aside .ant-layout-content {
   background: #fff;
-  margin-top: 24px;
+  padding: 24px;
 }
 ````

spec/layout/demo/top-aside.md

@@ -7,14 +7,34 @@
 ---
 
 ````jsx
-import { Menu, Breadcrumb } from 'antd';
+import { Menu, Breadcrumb, Icon } from 'antd';
+const SubMenu = Menu.SubMenu;
 
 ReactDOM.render(
   <BrowserDemo>
     <div className="ant-layout-topaside">
-      <div className="ant-layout-header"></div>
-      <div className="ant-layout-subheader"></div>
-      <div className="ant-layout-main">
+      <div className="ant-layout-header">
+        <div className="ant-layout-wrapper">
+          <div className="ant-layout-logo"></div>
+          <Menu theme="dark" mode="horizontal"
+            defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
+            <Menu.Item key="1">导航一</Menu.Item>
+            <Menu.Item key="2">导航二</Menu.Item>
+            <Menu.Item key="3">导航三</Menu.Item>
+          </Menu>
+        </div>
+      </div>
+      <div className="ant-layout-subheader">
+        <div className="ant-layout-wrapper">
+          <Menu mode="horizontal"
+            defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
+            <Menu.Item key="1">二级导航</Menu.Item>
+            <Menu.Item key="2">二级导航</Menu.Item>
+            <Menu.Item key="3">二级导航</Menu.Item>
+          </Menu>
+        </div>
+      </div>
+      <div className="ant-layout-wrapper">
         <div className="ant-layout-breadcrumb">
           <Breadcrumb>
             <Breadcrumb.Item>首页</Breadcrumb.Item>
@@ -24,6 +44,26 @@ ReactDOM.render(
         </div>
         <div className="ant-layout-container">
           <aside className="ant-layout-sider">
+            <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
+              <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
+                <Menu.Item key="1">选项1</Menu.Item>
+                <Menu.Item key="2">选项2</Menu.Item>
+                <Menu.Item key="3">选项3</Menu.Item>
+                <Menu.Item key="4">选项4</Menu.Item>
+              </SubMenu>
+              <SubMenu key="sub2" title={<span><Icon type="laptop" />导航二</span>}>
+                <Menu.Item key="5">选项5</Menu.Item>
+                <Menu.Item key="6">选项6</Menu.Item>
+                <Menu.Item key="7">选项7</Menu.Item>
+                <Menu.Item key="8">选项8</Menu.Item>
+              </SubMenu>
+              <SubMenu key="sub3" title={<span><Icon type="notification" />导航三</span>}>
+                <Menu.Item key="9">选项9</Menu.Item>
+                <Menu.Item key="10">选项10</Menu.Item>
+                <Menu.Item key="11">选项11</Menu.Item>
+                <Menu.Item key="12">选项12</Menu.Item>
+              </SubMenu>
+            </Menu>
           </aside>
           <div className="ant-layout-content">
             <div style={{ height: 240 }}></div>
@@ -37,44 +77,52 @@ ReactDOM.render(
 
 ````css
 .ant-layout-topaside {
-  background: #f4f4f4;
   height: 100%;
 }
 
+.ant-layout-topaside .ant-layout-wrapper {
+  padding: 0 50px;
+}
+
 .ant-layout-topaside .ant-layout-header {
-  background: #373737;
+  background: #404040;
   height: 64px;
 }
 
+.ant-layout-topaside .ant-layout-logo {
+  width: 120px;
+  height: 32px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px 28px 16px 0;
+  float: left;
+}
+
 .ant-layout-topaside .ant-layout-subheader {
   height: 48px;
-  border-bottom: 1px solid #e9e9e9;
+  border-bottom: 1px solid #d9d9d9;
   background: #fff;
 }
 
 .ant-layout-topaside .ant-layout-breadcrumb {
-  margin-top: 7px;
-  margin-bottom: -17px;
-}
-
-.ant-layout-topaside .ant-layout-main {
-  padding: 0 50px;
+  margin: 7px 0 -17px 24px;
 }
 
 .ant-layout-topaside .ant-layout-container {
   background: #fff;
-  margin-top: 24px;
+  margin: 24px 0;
   position: relative;
+  padding: 24px 0;
+  overflow: hidden;
 }
 
 .ant-layout-topaside .ant-layout-sider {
   width: 224px;
-  height: 100%;
-  position: absolute;
+  float: left;
 }
 
 .ant-layout-topaside .ant-layout-content {
-  border-left: 1px solid #e9e9e9;
-  margin-left: 224px;
+  border-left: 1px solid #d9d9d9;
+  margin-left: 223px;
 }
 ````

spec/layout/demo/top.md

@@ -14,9 +14,28 @@ import { Menu, Breadcrumb } from 'antd';
 ReactDOM.render(
   <BrowserDemo>
     <div className="ant-layout-top">
-      <div className="ant-layout-header"></div>
-      <div className="ant-layout-subheader"></div>
-      <div className="ant-layout-main">
+      <div className="ant-layout-header">
+        <div className="ant-layout-wrapper">
+          <div className="ant-layout-logo"></div>
+          <Menu theme="dark" mode="horizontal"
+            defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
+            <Menu.Item key="1">导航一</Menu.Item>
+            <Menu.Item key="2">导航二</Menu.Item>
+            <Menu.Item key="3">导航三</Menu.Item>
+          </Menu>
+        </div>
+      </div>
+      <div className="ant-layout-subheader">
+        <div className="ant-layout-wrapper">
+          <Menu mode="horizontal"
+            defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
+            <Menu.Item key="1">二级导航</Menu.Item>
+            <Menu.Item key="2">二级导航</Menu.Item>
+            <Menu.Item key="3">二级导航</Menu.Item>
+          </Menu>
+        </div>
+      </div>
+      <div className="ant-layout-wrapper">
         <div className="ant-layout-breadcrumb">
           <Breadcrumb>
             <Breadcrumb.Item>首页</Breadcrumb.Item>
@@ -35,32 +54,42 @@ ReactDOM.render(
 
 ````css
 .ant-layout-top {
-  background: #f4f4f4;
   height: 100%;
 }
 
+.ant-layout-top .ant-layout-wrapper {
+  padding: 0 50px;
+}
+
 .ant-layout-top .ant-layout-header {
-  background: #373737;
+  background: #404040;
   height: 64px;
 }
 
+.ant-layout-top .ant-layout-logo {
+  width: 120px;
+  height: 32px;
+  background: #333;
+  border-radius: 6px;
+  margin: 16px 28px 16px 0;
+  float: left;
+}
+
 .ant-layout-top .ant-layout-subheader {
   height: 48px;
-  border-bottom: 1px solid #e9e9e9;
+  border-bottom: 1px solid #d9d9d9;
   background: #fff;
 }
 
 .ant-layout-top .ant-layout-breadcrumb {
-  margin-top: 7px;
-  margin-bottom: -17px;
-}
-
-.ant-layout-top .ant-layout-main {
-  padding: 0 50px;
+  margin: 7px 0 -17px 24px;
 }
 
 .ant-layout-top .ant-layout-container {
   background: #fff;
-  margin-top: 24px;
+  margin: 24px 0;
+  position: relative;
+  padding-top: 24px;
+  overflow: hidden;
 }
 ````

style/components/menu.less

@@ -10,7 +10,7 @@
   box-shadow: @overlay-shadow;
   color: @text-color;
   background: #fff;
-  line-height: 50px;
+  line-height: 46px;
 
   &-hidden {
     display: none;
@@ -25,7 +25,7 @@
     color: #999;
     line-height: 1.5;
     padding: 8px 10px;
-    border-bottom: 1px solid #dedede;
+    border-bottom: 1px solid #d9d9d9;
   }
 
   &-item,
@@ -41,6 +41,11 @@
     background-color: tint(@primary-color, 90%);
   }
 
+  &-horizontal &-item,
+  &-horizontal &-submenu {
+    margin-top: -1px;
+  }
+
   &-horizontal > &-item-active,
   &-horizontal > &-submenu &-submenu-title:hover {
     background-color: transparent;
@@ -52,7 +57,7 @@
 
   &-inline,
   &-vertical {
-    border-right: 1px solid #e9e9e9;
+    border-right: 1px solid #d9d9d9;
     .@{menu-prefix-cls}-item {
       border-right: 2px solid transparent;
       margin-left: -1px;
@@ -156,7 +161,7 @@
   &-submenu-title {
     .anticon {
       width: 14px;
-      margin-right: 8px;
+      margin-right: 9px;
       top: 1px;
     }
   }
@@ -165,7 +170,6 @@
     border: none;
     border-bottom: 1px solid #d9d9d9;
     box-shadow: none;
-    padding-left: 20px;
     z-index: 0;
 
     > .@{menu-prefix-cls}-item,
@@ -211,7 +215,7 @@
 
   &-vertical, &-inline {
     & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
-      padding: 0 20px;
+      padding: 0px 16px 0 28px;
       font-size: 12px;
       line-height: 42px;
       height: 42px;
@@ -264,7 +268,7 @@
 
   &-dark&-horizontal > &-item,
   &-dark&-horizontal > &-submenu {
-    border-bottom: 2px solid transparent;
+    border-bottom: 0;
     top: 0;
   }