From e1b58712902988bab7d7ca5aaa649baa03db0d7d Mon Sep 17 00:00:00 2001 From: mathuramg Date: Thu, 9 Jun 2016 19:30:59 -0400 Subject: [PATCH] buttons utilise BEM style --- shared/components/Toolbar/Toolbar.jsx | 4 ++-- styles/components/_toolbar.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/shared/components/Toolbar/Toolbar.jsx b/shared/components/Toolbar/Toolbar.jsx index 5b68754d..74da47e5 100644 --- a/shared/components/Toolbar/Toolbar.jsx +++ b/shared/components/Toolbar/Toolbar.jsx @@ -10,11 +10,11 @@ class Toolbar extends React.Component { render() { let playButtonClass = classNames({ "toolbar__play-button": true, - "playing": this.props.isPlaying + "toolbar__play-button--selected": this.props.isPlaying }); let stopButtonClass = classNames({ "toolbar__stop-button": true, - "stopped": !this.props.isPlaying + "toolbar__stop-button--selected": !this.props.isPlaying }); return ( diff --git a/styles/components/_toolbar.scss b/styles/components/_toolbar.scss index d5bafa53..f8001d86 100644 --- a/styles/components/_toolbar.scss +++ b/styles/components/_toolbar.scss @@ -1,7 +1,7 @@ .toolbar__play-button { @extend %toolbar-button; margin-right: #{15 / $base-font-size}rem; - &.playing { + &--selected { background-color: $light-button-background-hover-color; & g { fill: $light-button-hover-color; @@ -11,7 +11,7 @@ .toolbar__stop-button { @extend %toolbar-button; - &.stopped { + &--selected { background-color: $light-button-background-hover-color; & g { fill: $light-button-hover-color;