console BEM style

This commit is contained in:
therewasaguy 2016-07-18 19:10:42 -04:00
parent 6b672d2629
commit 0c7f713887
3 changed files with 11 additions and 8 deletions

View file

@ -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>
);

View file

@ -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;

View file

@ -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;
}
}