p5.js-web-editor/client/styles/layout/_ide.scss

70 lines
1.1 KiB
SCSS
Raw Normal View History

2016-05-18 19:37:59 +02:00
.ide {
2016-09-22 00:52:44 +02:00
display: flex;
2016-09-14 18:46:54 +02:00
flex-direction: column;
height: 100%;
flex-wrap: wrap;
@include themify() {
color: getThemifyVariable('primary-text-color');
background-color: getThemifyVariable('background-color');
}
2016-05-11 04:22:32 +02:00
}
2016-07-21 06:05:47 +02:00
.editor-preview-container {
width: 100%;
2016-07-22 23:19:15 +02:00
flex: 1 0 0px;
2016-07-21 06:05:47 +02:00
display: flex;
2016-08-11 21:41:13 +02:00
position: relative;
2016-07-21 06:05:47 +02:00
}
.editor-console-container {
2016-08-11 21:41:13 +02:00
// flex: 1 0 0px;
// max-width: 45%;
width: 100%;
2016-07-21 06:05:47 +02:00
height: 100%;
position: relative;
// temporary fix for safari
min-height: 75vh;
2016-07-21 06:05:47 +02:00
}
2016-08-11 21:38:32 +02:00
.editor-accessibility {
@extend %hidden-element;
}
2016-08-16 02:28:18 +02:00
.text-output {
@extend %hidden-element;
}
2016-05-11 04:22:32 +02:00
.preview-frame {
2017-01-05 22:54:33 +01:00
min-height: 100%;
min-width: 100%;
2016-08-11 21:41:13 +02:00
position: absolute;
}
2016-08-11 21:41:13 +02:00
.preview-frame-overlay {
height: 100%;
width: 100%;
position: absolute;
z-index: 10;
display: none;
2016-05-11 19:19:37 +02:00
}
.preview-frame-placeholder {
width: #{400 / $base-font-size}rem;
height: #{400 / $base-font-size}rem;
position: absolute;
@include themify() {
background: getThemifyVariable('preview-placeholder-color');
}
}
2016-05-11 19:19:37 +02:00
.toolbar {
width: 100%;
2016-06-17 20:31:33 +02:00
}
.sidebar {
2016-08-11 21:41:13 +02:00
width: 100%;
height: 100%;
}