Moved inline styles to the styles.scss where it was applicable
This commit is contained in:
parent
bedcb559cc
commit
8a1a6511ce
@ -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
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user