p5.js-web-editor/client/styles/layout/_ide.scss
Lauren McCarthy a5d304da2b implement sidebar design #234 (#235)
* removing avenir, replacing with montserrat

* sidebar tweaks

* sidebar positioning

* resolving merge conflict

* working on sidebar

* removing avenir font, using montserrat instead due to licensing issues

* removing old import statement for typeography scss file

* design formatting for sidebar closes #234
2016-12-19 17:07:04 -05:00

75 lines
1.1 KiB
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;
}
.editor-console-container {
// flex: 1 0 0px;
// max-width: 45%;
width: 100%;
height: 100%;
position: relative;
// temporary fix for safari
min-height: 75vh;
}
.editor-holder {
height: 100%;
width: 100%;
position: absolute;
}
.editor-accessibility {
@extend %hidden-element;
}
.text-output {
@extend %hidden-element;
}
.preview-frame {
height: 100%;
width: 100%;
position: absolute;
}
.preview-frame-overlay {
height: 100%;
width: 100%;
position: absolute;
z-index: 10;
display: none;
}
.preview-frame-placeholder {
width: #{400 / $base-font-size}rem;
height: #{400 / $base-font-size}rem;
position: absolute;
@include themify() {
background: getThemifyVariable('preview-placeholder-color');
}
}
.toolbar {
width: 100%;
}
.sidebar {
width: 100%;
height: 100%;
}