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

buttons utilise BEM style

Browse source
This commit is contained in:
mathuramg 2016-06-09 19:30:59 -04:00
parent 78b77e069b
commit e1b5871290
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
shared/components/Toolbar/Toolbar.jsx
View file

@ -10,11 +10,11 @@ class Toolbar extends React.Component {
render() { render() {
let playButtonClass = classNames({ let playButtonClass = classNames({
"toolbar__play-button": true, "toolbar__play-button": true,
"playing": this.props.isPlaying "toolbar__play-button--selected": this.props.isPlaying
}); });
let stopButtonClass = classNames({ let stopButtonClass = classNames({
"toolbar__stop-button": true, "toolbar__stop-button": true,
"stopped": !this.props.isPlaying "toolbar__stop-button--selected": !this.props.isPlaying
}); });
return ( return (

4
styles/components/_toolbar.scss
View file

@ -1,7 +1,7 @@
.toolbar__play-button { .toolbar__play-button {
@extend %toolbar-button; @extend %toolbar-button;
margin-right: #{15 / $base-font-size}rem; margin-right: #{15 / $base-font-size}rem;
&.playing { &--selected {
background-color: $light-button-background-hover-color; background-color: $light-button-background-hover-color;
& g { & g {
fill: $light-button-hover-color; fill: $light-button-hover-color;
@ -11,7 +11,7 @@
.toolbar__stop-button { .toolbar__stop-button {
@extend %toolbar-button; @extend %toolbar-button;
&.stopped { &--selected {
background-color: $light-button-background-hover-color; background-color: $light-button-background-hover-color;
& g { & g {
fill: $light-button-hover-color; fill: $light-button-hover-color;