wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1243691 - Tweak the general RDM layout to allow multiple viewports, center them and snap to top/left when needed; r=jryans

Browse Source
This commit is contained in:
Patrick Brosset 2016-02-01 14:57:31 +01:00
parent d4b909c4ad
commit d1371d355a
1 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
devtools/client/responsive.html/index.css
View File

@ -1,21 +1,46 @@
/* TODO: May break up into component local CSS. Pending future discussions by
* React component group on how to best handle CSS. */
html, body, #app, #viewports {
html, body {
margin: 0;
height: 100%;
}
#viewports {
body {
/* Only allow horizontal scrolling when more viewports are added */
overflow-y: hidden;
}
#app {
height: 100%;
/* Center the viewports container */
display: flex;
justify-content: center;
align-items: center;
}
#viewports {
/* Snap to the top of the app when there isn't enough vertical space anymore
to center the viewports (so we don't loose the toolbar) */
position: sticky;
top: 0;
/* Make sure left-most viewport is visible when there's horizontal overflow.
That is, when the horizontal space become smaller than the viewports and a
scrollbar appears, then the first viewport will still be visible */
left: 0;
/* Individual viewports are inline elements, make sure they stay on a single
line */
white-space: nowrap;
}
/**
* Viewport Container
*/
.viewport {
display: inline-block;
/* Align all viewports to the top */
vertical-align: top;
border: 1px solid var(--theme-splitter-color);
box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
}