p5.js-web-editor/client/styles/components/_console.scss

70 lines
1.2 KiB
SCSS
Raw Normal View History

.preview-console {
2016-07-21 06:05:47 +02:00
position: absolute;
width: 100%;
height: #{150 / $base-font-size}rem;
right: 0;
bottom: 0;
left: 0;
background: $console-light-background-color;
z-index: 1000;
overflow: hidden;
& > {
position:relative;
text-align:left;
}
2016-07-18 02:49:38 +02:00
// assign styles to different types of console messages
2016-07-19 01:10:42 +02:00
.preview-console__log {
color: $dark-secondary-text-color;
2016-07-18 02:49:38 +02:00
}
2016-07-19 01:10:42 +02:00
.preview-console__error {
color: $console-error-color;
2016-07-18 02:49:38 +02:00
}
2016-07-19 01:10:42 +02:00
.preview-console__warn {
color: $console-warn-color;
2016-07-18 02:49:38 +02:00
}
&.preview-console--collapsed {
height: #{29 / $base-font-size}rem;
}
2016-07-21 06:05:47 +02:00
}
.preview-console__header {
background-color: $console-header-background-color;
color: $console-header-color;
padding: #{5 / $base-font-size}rem;
display: flex;
justify-content: space-between;
}
.preview-console__header-title {
2016-07-21 06:05:47 +02:00
font-size: #{16 / $base-font-size}rem;
font-weight: normal;
}
.preview-console__messages {
display: flex;
flex-direction: column;
overflow-y: auto;
height: #{121 / $base-font-size}rem;
}
.preview-console__collapse {
2016-08-01 03:38:46 +02:00
@extend %icon;
.preview-console--collapsed & {
display: none;
}
}
.preview-console__expand {
2016-08-01 03:38:46 +02:00
@extend %icon;
display: none;
.preview-console--collapsed & {
display: inline-block;
}
2016-08-01 03:38:46 +02:00
}