r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

console BEM style

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/modules/IDE/components/Console.js
View file

@ -25,7 +25,7 @@ class Console extends React.Component {
const args = nextProps.consoleEvent.arguments; const args = nextProps.consoleEvent.arguments;
const method = nextProps.consoleEvent.method; const method = nextProps.consoleEvent.method;
const nextChild = ( 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>)} {Object.keys(args).map((key) => <span key={`${this.children.length}-${key}`}>{args[key]}</span>)}
</div> </div>
); );

3
client/styles/abstracts/_variables.scss
View file

@ -39,3 +39,6 @@ $dark-button-active-color: $white;
$ide-border-color: #f4f4f4; $ide-border-color: #f4f4f4;
$editor-selected-line-color: #f3f3f3; $editor-selected-line-color: #f3f3f3;
$input-border-color: #979797; $input-border-color: #979797;
$console-warn-color: #ffbe05;
$console-error-color: #ff5f52;

14
client/styles/components/_console.scss
View file

@ -4,7 +4,7 @@
height:60px; height:60px;
right:0px; right:0px;
bottom: 0px; bottom: 0px;
background:grey; background:$dark-background-color;
z-index:1000; z-index:1000;
& > { & > {
@ -13,15 +13,15 @@
} }
// assign styles to different types of console messages // assign styles to different types of console messages
.log { .preview-console__log {
color: black; color: $dark-secondary-text-color;
} }
.error { .preview-console__error {
color: red; color: $console-error-color;
} }
.warn { .preview-console__warn {
color: yellow; color: $console-warn-color;
} }
} }