69 lines
1.2 KiB
SCSS
69 lines
1.2 KiB
SCSS
.preview-console {
|
|
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;
|
|
}
|
|
|
|
// assign styles to different types of console messages
|
|
.preview-console__log {
|
|
color: $dark-secondary-text-color;
|
|
}
|
|
|
|
.preview-console__error {
|
|
color: $console-error-color;
|
|
}
|
|
|
|
.preview-console__warn {
|
|
color: $console-warn-color;
|
|
}
|
|
|
|
&.preview-console--collapsed {
|
|
height: #{29 / $base-font-size}rem;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
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 {
|
|
@extend %icon;
|
|
.preview-console--collapsed & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.preview-console__expand {
|
|
@extend %icon;
|
|
display: none;
|
|
.preview-console--collapsed & {
|
|
display: inline-block;
|
|
}
|
|
}
|