Bug 1243403 - Implement the general design of the responsive design mode r=jryans

This commit is contained in:
Gabriel Luong 2016-01-27 17:51:57 -05:00
parent 7a8b8f2092
commit b008e80ef8
2 changed files with 32 additions and 2 deletions

View File

@ -29,8 +29,11 @@ module.exports = createClass({
// handles, etc.
return dom.div(
{
className: "viewport",
className: "viewport"
},
dom.div({
className: "viewport-header",
}),
Browser({
location,
width: viewport.width,

View File

@ -1,6 +1,33 @@
/* TODO: May break up into component local CSS. Pending future discussions by
* React component group on how to best handle CSS. */
iframe {
html, body, #app, #viewports {
height: 100%;
}
#viewports {
display: flex;
justify-content: center;
align-items: center;
}
/**
* Viewport Container
*/
.viewport {
border: 1px solid var(--theme-splitter-color);
box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
}
.viewport-header {
background-color: var(--theme-toolbar-background);
border-bottom: 1px solid var(--theme-splitter-color);
color: var(--theme-body-color-alt);
height: 16px;
}
.browser {
display: block;
border: 0;
}