Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

slider styled with variables and without transform

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-12-03 17:44:41 +02:00
parent fd69e61a34
commit 8da8bb3029
2 changed files with 34 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/common/Slider/Slider.js
View file

@ -14,8 +14,7 @@ class Slider extends Component {
return nextProps.value !== this.props.value || return nextProps.value !== this.props.value ||
nextProps.minimumValue !== this.props.minimumValue || nextProps.minimumValue !== this.props.minimumValue ||
nextProps.maximumValue !== this.props.maximumValue || nextProps.maximumValue !== this.props.maximumValue ||
nextProps.containerClassName !== this.props.containerClassName || nextProps.className !== this.props.className;
nextProps.thumbClassName !== this.props.thumbClassName;
} }
onSlide = (...args) => { onSlide = (...args) => {
@ -84,23 +83,19 @@ class Slider extends Component {
} }
render() { render() {
const thumbStartProp = this.props.orientation === 'horizontal' ? 'marginLeft' : 'marginBottom'; const thumbStartProp = this.props.orientation === 'horizontal' ? 'left' : 'bottom';
const thumbStart = (this.props.value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue); const thumbStart = (this.props.value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue);
return ( return (
<div className={classnames(styles['slider-container'], styles[this.props.orientation], this.props.containerClassName)} onMouseDown={this.onStartSliding}> <div className={classnames(styles['slider-container'], styles[this.props.orientation], this.props.className)} onMouseDown={this.onStartSliding}>
<div className={styles['line']} /> <div className={styles['line']} />
<div <div className={styles['thumb']} style={{ [thumbStartProp]: `calc(100% * ${thumbStart})` }} />
className={classnames(styles['thumb'], this.props.thumbClassName)}
style={{ [thumbStartProp]: `calc(100% * ${thumbStart})` }}
/>
</div> </div>
); );
} }
} }
Slider.propTypes = { Slider.propTypes = {
containerClassName: PropTypes.string, className: PropTypes.string,
thumbClassName: PropTypes.string,
value: PropTypes.number.isRequired, value: PropTypes.number.isRequired,
minimumValue: PropTypes.number.isRequired, minimumValue: PropTypes.number.isRequired,
maximumValue: PropTypes.number.isRequired, maximumValue: PropTypes.number.isRequired,

39
src/common/Slider/styles.less
View file

@ -2,20 +2,31 @@
.slider-container { .slider-container {
position: relative; position: relative;
z-index: 0;
min-width: var(--thumb-size);
min-height: var(--thumb-size);
cursor: pointer; cursor: pointer;
.line { .line {
position: absolute; position: absolute;
z-index: 1;
background-color: @colorprim; background-color: @colorprim;
} }
.thumb { .thumb {
border-radius: 50%; position: absolute;
background-color: @colormedium; z-index: 2;
width: var(--thumb-size);
height: var(--thumb-size);
transition-duration: 0.06s; transition-duration: 0.06s;
&:hover { &::after {
background-color: @colorprimlight; display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: @colormedium;
content: "";
} }
} }
@ -28,8 +39,11 @@
} }
.thumb { .thumb {
transform: translateX(-50%); transition-property: left;
transition-property: margin-left;
&::after {
margin-left: calc(-0.5 * var(--thumb-size));
}
} }
} }
@ -42,14 +56,19 @@
} }
.thumb { .thumb {
transform: translateY(50%); transition-property: bottom;
transition-property: margin-top;
&::after {
margin-top: calc(0.5 * var(--thumb-size));
}
} }
} }
&.active { &:hover, &.active {
.thumb { .thumb {
background-color: @colorprimlight; &::after {
background-color: @colorprimlight;
}
} }
} }
} }