diff --git a/components/breadcrumb/demo/router.md b/components/breadcrumb/demo/router.md index 9ab146a9fa..4628ca21e0 100644 --- a/components/breadcrumb/demo/router.md +++ b/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 }) => ( -
+
Home Application List @@ -55,20 +55,20 @@ ReactDOM.render( ```` ````css -#components-breadcrumb-demo-router iframe { - height: 180px; +.demo { + 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; } ```` diff --git a/site/theme/static/mock-browser.less b/site/theme/static/mock-browser.less index 7451657709..3350cca416 100644 --- a/site/theme/static/mock-browser.less +++ b/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; - padding: 0; - border-radius: 5px; - border: 1px solid #ccc; - background-color: #fff; - line-height: 1; + border-radius: 3px 3px 0 0; } -.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); +.browser-mockup:before { + display: block; + position: absolute; + content: ''; + top: -1.25em; + left: 1em; + width: 0.5em; + height: 0.5em; + border-radius: 50%; + background-color: #f44; + box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5; } -.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%; +.browser-mockup.with-tab:after { + display: block; + position: absolute; + 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; } -.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; +.browser-mockup.with-url:after { + display: block; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - vertical-align: middle; -} -.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: auto; - height: 440px; - position: relative; - border-radius: 0 0 5px 5px; - background: #ececec; + content: ''; + top: -1.6em; + left: 5.5em; + width: ~"calc(100% - 6em)"; + height: 1.2em; + border-radius: 2px; + background-color: white; } -.window-frame .status-bar { - height: 2rem; - border-radius: 0 0 0.35rem 0.35rem; - display: none; +.browser-mockup > * { + display: block; } diff --git a/site/theme/template/BrowserDemo.jsx b/site/theme/template/BrowserDemo.jsx deleted file mode 100644 index 8225f489ed..0000000000 --- a/site/theme/template/BrowserDemo.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -export default function BrowserDemo(props) { - return ( -
-
-
-
-
-
-
- -
-
- {props.children} -
-
- ); -} diff --git a/site/theme/template/BrowserFrame.jsx b/site/theme/template/BrowserFrame.jsx new file mode 100644 index 0000000000..dc111e7889 --- /dev/null +++ b/site/theme/template/BrowserFrame.jsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export default ({ children }) => ( +
+ {children} +
+); diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx index ee25717c20..1571eec63b 100644 --- a/site/theme/template/Content/Demo.jsx +++ b/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 ?