Moved inline styles to the styles.scss where it was applicable

This commit is contained in:
Oleksandr Zhurbenko 2016-12-23 13:27:49 -08:00
parent bedcb559cc
commit 8a1a6511ce
2 changed files with 33 additions and 32 deletions

View File

@ -168,27 +168,15 @@ export default class ClosedCaptionsMenu extends BaseMenu {
<div <div
tabIndex='12' tabIndex='12'
className={ styles.swatch } className={ styles.swatch }
style={{
'padding': '5px',
'background': '#fff',
'borderRadius': '1px',
'boxShadow': '0 0 0 1px rgba(0,0,0,.1)',
'display': 'inline-block',
'cursor': 'pointer',
}}
onClick={ this.handleColorPickerClick.bind(this, "displayBackgroundColorPicker") }> onClick={ this.handleColorPickerClick.bind(this, "displayBackgroundColorPicker") }>
<div <div
style={{ className={styles.swatchInner}
'background': this.state.ccBackgroundColor, style={{'background': this.state.ccBackgroundColor}}/>
'width': '36px',
'height': '14px',
'borderRadius': '2px',
}}/>
</div> </div>
{ this.state.displayBackgroundColorPicker ? { this.state.displayBackgroundColorPicker ?
<div style={{'zIndex': '1001'}}> <div className={styles.colorPickerPopover}>
<div <div
style={{'position': 'fixed', 'top': '0px', 'right': '0px', 'bottom': '0px', 'left': '0px'}} className={styles.colorPickerOverlay}
onClick={ this.handleCloseColorPicker.bind(this) } onClick={ this.handleCloseColorPicker.bind(this) }
/> />
<GithubPicker <GithubPicker
@ -209,27 +197,15 @@ export default class ClosedCaptionsMenu extends BaseMenu {
<div <div
tabIndex='12' tabIndex='12'
className={ styles.swatch } className={ styles.swatch }
style={{
'padding': '5px',
'background': '#fff',
'borderRadius': '1px',
'boxShadow': '0 0 0 1px rgba(0,0,0,.1)',
'display': 'inline-block',
'cursor': 'pointer',
}}
onClick={ this.handleColorPickerClick.bind(this, "displayFontColorPicker") }> onClick={ this.handleColorPickerClick.bind(this, "displayFontColorPicker") }>
<div <div
style={{ className={styles.swatchInner}
'background': this.state.ccFontColor, style={{'background': this.state.ccFontColor}}/>
'width': '36px',
'height': '14px',
'borderRadius': '2px',
}}/>
</div> </div>
{ this.state.displayFontColorPicker ? { this.state.displayFontColorPicker ?
<div style={{'zIndex': '1001'}}> <div className={styles.colorPickerPopover}>
<div <div
style={{'position': 'fixed', 'top': '0px', 'right': '0px', 'bottom': '0px', 'left': '0px'}} className={styles.colorPickerOverlay}
onClick={ this.handleCloseColorPicker.bind(this) } onClick={ this.handleCloseColorPicker.bind(this) }
/> />
<GithubPicker <GithubPicker

View File

@ -156,4 +156,29 @@ ul li {
.swatch { .swatch {
float: right; float: right;
margin-right: 10%; margin-right: 10%;
padding: 5px;
background: #fff;
border-radius: 1px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
display: inline-block;
cursor: pointer;
}
.swatchInner {
width: 36px;
height: 14px;
border-radius: 2px;
}
.colorPickerOverlay {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.colorPickerPopover {
//it has to be bigger than the overlay of the settings modal
z-index: 1001;
} }