Improve iframe demo look

components/breadcrumb/demo/router.md

@@ -1,6 +1,6 @@
 ---
 order: 2
-iframe: true
+iframe: 200
 title:
   zh-CN: 路由
   en-US: React Router Integration
@@ -30,7 +30,7 @@ const Apps = () => (
 );
 
 const Home = ({ routes, params, children }) => (
-  <div>
+  <div className="demo">
     <div className="demo-nav">
       <Link to="/">Home</Link>
       <Link to="/apps">Application List</Link>
@@ -55,20 +55,20 @@ ReactDOM.render(
 ````
 
 ````css
-#components-breadcrumb-demo-router iframe {
+.demo {
-  height: 180px;
+  margin: 16px;
 }
 .demo-nav {
   height: 30px;
   line-height: 30px;
-  margin-bottom: 15px;
+  margin-bottom: 16px;
   background: #f8f8f8;
 }
 .demo-nav a {
   line-height: 30px;
-  padding: 0 10px;
+  padding: 0 8px;
 }
 .app-list {
-  margin-top: 15px;
+  margin-top: 16px;
 }
 ````

site/theme/static/mock-browser.less

@@ -1,98 +1,53 @@
-.window-frame {
+/* Browser mockup code
+ * Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
+ * Live example: https://updown.io
+ */
+
+.browser-mockup {
+  border-top: 2em solid rgba(230, 230, 230, 0.7);
+  box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
   position: relative;
-  margin: 0;
+  border-radius: 3px 3px 0 0;
-  padding: 0;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  background-color: #fff;
-  line-height: 1;
 }
 
-.window-frame .top-bar {
+.browser-mockup:before {
-  background: #dcd9dc;
+  display: block;
-  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;
+  content: '';
-  left: 0;
+  top: -1.25em;
-  right: 0;
+  left: 1em;
-  bottom: 0;
+  width: 0.5em;
-  vertical-align: middle;
+  height: 0.5em;
-}
+  border-radius: 50%;
-.window-frame .top-bar .control.close {
+  background-color: #f44;
-  background: #fc625c;
+  box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
-}
-.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: auto;
-  height: 440px;
-  position: relative;
-  border-radius: 0 0 5px 5px;
-  background: #ececec;
 }
 
-.window-frame .status-bar {
+.browser-mockup.with-tab:after {
-  height: 2rem;
+  display: block;
-  border-radius: 0 0 0.35rem 0.35rem;
+  position: absolute;
-  display: none;
+  content: '';
+  top: -2em;
+  left: 5.5em;
+  width: 20%;
+  height: 0;
+  border-bottom: 2em solid white;
+  border-left: 0.8em solid transparent;
+  border-right: 0.8em solid transparent;
+}
+
+.browser-mockup.with-url:after {
+  display: block;
+  position: absolute;
+  content: '';
+  top: -1.6em;
+  left: 5.5em;
+  width: ~"calc(100% - 6em)";
+  height: 1.2em;
+  border-radius: 2px;
+  background-color: white;
+}
+
+.browser-mockup > * {
+  display: block;
 }

site/theme/template/BrowserDemo.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-export default function BrowserDemo(props) {
-  return (
-    <article className="window-frame focus">
-      <header className="top-bar">
-        <div className="controls">
-          <div className="control close" />
-          <div className="control minify" />
-          <div className="control expand" />
-        </div>
-        <input className="address-bar" defaultValue="http://www.example.com" />
-      </header>
-      <section className="window-content">
-        {props.children}
-      </section>
-    </article>
-  );
-}

site/theme/template/BrowserFrame.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default ({ children }) => (
+  <div className="browser-mockup with-url">
+    {children}
+  </div>
+);

site/theme/template/Content/Demo.jsx

@@ -5,6 +5,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import classNames from 'classnames';
 import { Icon, Tooltip } from 'antd';
 import EditButton from './EditButton';
+import BrowserFrame from '../BrowserFrame';
 
 export default class Demo extends React.Component {
   static contextTypes = {
@@ -82,7 +83,9 @@ export default class Demo extends React.Component {
       expand,
     } = props;
     if (!this.liveDemo) {
-      this.liveDemo = meta.iframe ? <iframe src={src} height={meta.iframe} /> : preview(React, ReactDOM);
+      this.liveDemo = meta.iframe
+        ? <BrowserFrame><iframe src={src} height={meta.iframe} /></BrowserFrame>
+        : preview(React, ReactDOM);
     }
     const codeExpand = state.codeExpand || expand;
     const codeBoxClass = classNames({