console BEM style
This commit is contained in:
parent
6b672d2629
commit
0c7f713887
3 changed files with 11 additions and 8 deletions
|
@ -25,7 +25,7 @@ class Console extends React.Component {
|
|||
const args = nextProps.consoleEvent.arguments;
|
||||
const method = nextProps.consoleEvent.method;
|
||||
const nextChild = (
|
||||
<div key={this.children.length} className={method}>
|
||||
<div key={this.children.length} className={`preview-console__${method}`}>
|
||||
{Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -39,3 +39,6 @@ $dark-button-active-color: $white;
|
|||
$ide-border-color: #f4f4f4;
|
||||
$editor-selected-line-color: #f3f3f3;
|
||||
$input-border-color: #979797;
|
||||
|
||||
$console-warn-color: #ffbe05;
|
||||
$console-error-color: #ff5f52;
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
height:60px;
|
||||
right:0px;
|
||||
bottom: 0px;
|
||||
background:grey;
|
||||
background:$dark-background-color;
|
||||
z-index:1000;
|
||||
|
||||
& > {
|
||||
|
@ -13,15 +13,15 @@
|
|||
}
|
||||
|
||||
// assign styles to different types of console messages
|
||||
.log {
|
||||
color: black;
|
||||
.preview-console__log {
|
||||
color: $dark-secondary-text-color;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
.preview-console__error {
|
||||
color: $console-error-color;
|
||||
}
|
||||
|
||||
.warn {
|
||||
color: yellow;
|
||||
.preview-console__warn {
|
||||
color: $console-warn-color;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue