p5.js-web-editor/client/styles/layout/_ide.scss
Ben Duncan 3b1cd6782b Fixes by isolating preview pane layers ()
Restrict the z-index of the console (and any other preview panes) to the
context of the preview container, thereby preventing any internal
content from overlaying a modal. `z-index:0` is used as a more
browser-compliant form of `isolation:isolate` or `contain:paint` to
create an isolated stacking context.
2018-09-07 17:25:09 -04:00

48 lines
757 B
SCSS

.ide {
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: wrap;
@include themify() {
color: getThemifyVariable('primary-text-color');
background-color: getThemifyVariable('background-color');
}
}
.editor-preview-container {
width: 100%;
flex: 1 0 0px;
display: flex;
position: relative;
// create a stacking context to isolate z-index layering
z-index: 0;
}
.editor-console-container {
// flex: 1 0 0px;
// max-width: 45%;
width: 100%;
height: 100%;
position: relative;
// temporary fix for safari
min-height: 75vh;
}
.editor-accessibility {
@extend %hidden-element;
}
.accessible-output {
@extend %hidden-element;
}
.toolbar {
width: 100%;
}
.sidebar {
width: 100%;
height: 100%;
}