Add browser picture

scripts/demo.js

@@ -81,4 +81,24 @@ InstantClickChangeFns.push(function () {
   , document.getElementById('versions-select'));
 });
 
+window.BrowserDemo = React.createClass({
+  render() {
+    return (
+      <article className="window-frame focus">
+        <header className="top-bar">
+          <div className="controls">
+            <div className="control close"></div>
+            <div className="control minify"></div>
+            <div className="control expand"></div>
+          </div>
+          <input className="address-bar" defaultValue="http://www.example.com" />
+        </header>
+        <section className="window-content">
+          {this.props.children}
+        </section>
+      </article>
+    );
+  }
+});
+
 module.exports = antd;

site/static/style.css

@@ -2003,3 +2003,101 @@ a.entry-link:hover .anticon-smile {
   position: relative;
   top: -2px;
 }
+
+.window-frame {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  background-color: white;
+  line-height: 1;
+}
+
+.window-frame .top-bar {
+  background: #DCD9DC;
+  background-image: -webkit-linear-gradient(#F6F6F6, #dadada);
+  background-image: linear-gradient(#F6F6F6, #dadada);
+  min-height: 2rem;
+  border-radius: 0.35rem 0.35rem 0 0;
+  padding: 0.41528rem 0.83056rem;
+  border-bottom: 1px solid transparent;
+  border-bottom-color: #ccc;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.window-frame .top-bar .address-bar {
+  border-radius: 0.245rem;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  color: black;
+  box-shadow: 0 0.5px 0 0 rgba(255, 255, 255, 0.75), inset 0 1px 1px rgba(0, 0, 0, 0.15);
+  display: inline-block;
+  padding: 0 0.5em 0 1em;
+  font-size: 0.75rem;
+  line-height: 2;
+  background: white;
+  width: 60%;
+  margin-left: 15%;
+}
+
+.window-frame .top-bar .controls {
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  padding-top: 0.2em;
+}
+.window-frame .top-bar .controls > * {
+  position: relative;
+  vertical-align: middle;
+  line-height: 1;
+  display: inline-block;
+  margin-right: 0.41528rem;
+  -webkit-transition: 0.1s linear;
+          transition: 0.1s linear;
+}
+.window-frame .top-bar .control {
+  width: 0.83056rem;
+  height: 0.83056rem;
+  background: #DCD9DC;
+  border-radius: 0.83056rem;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+}
+.window-frame .top-bar .control:hover {
+  background: #b0adb0;
+}
+.window-frame .top-bar .control:before,
+.window-frame .top-bar .control:after {
+  line-height: 0.5;
+  color: black;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  vertical-align: middle;
+  line-height: 0.5;
+}
+.window-frame .top-bar .control.close {
+  background: #FC625C;
+}
+.window-frame .top-bar .control.minify {
+  background: #FDC041;
+}
+.window-frame .top-bar .control.expand {
+  background: #35CD4B;
+}
+.window-frame .window-content {
+  padding: 0;
+  line-height: 1.5;
+  overflow: hidden;
+  height: 400px;
+  position: relative;
+  border-radius: 0 0 5px 5px;
+}
+.window-frame .status-bar {
+  height: 2rem;
+  border-radius: 0 0 0.35rem 0.35rem;
+  display: none;
+}

spec/layout/demo/aside.md

@@ -10,34 +10,34 @@
 import { Menu, Breadcrumb } from 'antd';
 
 ReactDOM.render(
-  <div className="ant-layout-aside">
-    <aside className="ant-layout-sider">
-    </aside>
-    <div className="ant-layout-main">
-      <div className="ant-layout-header"></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>
+  <BrowserDemo>
+    <div className="ant-layout-aside">
+      <aside className="ant-layout-sider">
+      </aside>
+      <div className="ant-layout-main">
+        <div className="ant-layout-header"></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>
         </div>
       </div>
     </div>
-  </div>
+  </BrowserDemo>
 , document.getElementById('spec-layout-demo-aside'));
 ````
 
 ````css
 .ant-layout-aside {
   background: #f4f4f4;
-  height: 400px;
-  overflow: hidden;
-  position: relative;
+  height: 100%;
 }
 
 .ant-layout-aside .ant-layout-sider {

spec/layout/demo/top-aside.md

@@ -10,34 +10,35 @@
 import { Menu, Breadcrumb } from 'antd';
 
 ReactDOM.render(
-  <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-breadcrumb">
-        <Breadcrumb>
-          <Breadcrumb.Item>首页</Breadcrumb.Item>
-          <Breadcrumb.Item>应用列表</Breadcrumb.Item>
-          <Breadcrumb.Item>某应用</Breadcrumb.Item>
-        </Breadcrumb>
-      </div>
-      <div className="ant-layout-container">
-        <aside className="ant-layout-sider">
-        </aside>
-        <div className="ant-layout-content">
-          <div style={{ height: 240 }}></div>
+  <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-breadcrumb">
+          <Breadcrumb>
+            <Breadcrumb.Item>首页</Breadcrumb.Item>
+            <Breadcrumb.Item>应用列表</Breadcrumb.Item>
+            <Breadcrumb.Item>某应用</Breadcrumb.Item>
+          </Breadcrumb>
+        </div>
+        <div className="ant-layout-container">
+          <aside className="ant-layout-sider">
+          </aside>
+          <div className="ant-layout-content">
+            <div style={{ height: 240 }}></div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </BrowserDemo>
 , document.getElementById('spec-layout-demo-top-aside'));
 ````
 
 ````css
 .ant-layout-topaside {
   background: #f4f4f4;
-  height: 400px;
-  overflow: hidden;
+  height: 100%;
 }
 
 .ant-layout-topaside .ant-layout-header {

spec/layout/demo/top.md

@@ -4,36 +4,39 @@
 
 一二级导航都在顶部。
 
+> `<BrowserDemo />` 做演示用，无须复制。
+
 ---
 
 ````jsx
 import { Menu, Breadcrumb } from 'antd';
 
 ReactDOM.render(
-  <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-breadcrumb">
-        <Breadcrumb>
-          <Breadcrumb.Item>首页</Breadcrumb.Item>
-          <Breadcrumb.Item>应用列表</Breadcrumb.Item>
-          <Breadcrumb.Item>某应用</Breadcrumb.Item>
-        </Breadcrumb>
-      </div>
-      <div className="ant-layout-container">
-        <div style={{ height: 240 }}></div>
+  <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-breadcrumb">
+          <Breadcrumb>
+            <Breadcrumb.Item>首页</Breadcrumb.Item>
+            <Breadcrumb.Item>应用列表</Breadcrumb.Item>
+            <Breadcrumb.Item>某应用</Breadcrumb.Item>
+          </Breadcrumb>
+        </div>
+        <div className="ant-layout-container">
+          <div style={{ height: 240 }}></div>
+        </div>
       </div>
     </div>
-  </div>
+  </BrowserDemo>
 , document.getElementById('spec-layout-demo-top'));
 ````
 
 ````css
 .ant-layout-top {
   background: #f4f4f4;
-  height: 400px;
-  overflow: hidden;
+  height: 100%;
 }
 
 .ant-layout-top .ant-layout-header {