Improve iframe demo look
afc163
8 years ago
parent
c361165352
commit
3740fb7f3c
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
export default ({ children }) => (
|
||||
<div className="browser-mockup with-url">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
Loading…
Reference in New Issue