Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27: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 ||
nextProps.minimumValue !== this.props.minimumValue ||
nextProps.maximumValue !== this.props.maximumValue ||
nextProps.containerClassName !== this.props.containerClassName ||
nextProps.thumbClassName !== this.props.thumbClassName;
nextProps.className !== this.props.className;
}
onSlide = (...args) => {
@ -84,23 +83,19 @@ class Slider extends Component {
}
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);
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={classnames(styles['thumb'], this.props.thumbClassName)}
style={{ [thumbStartProp]: `calc(100% * ${thumbStart})` }}
/>
<div className={styles['thumb']} style={{ [thumbStartProp]: `calc(100% * ${thumbStart})` }} />
</div>
);
}
}
Slider.propTypes = {
containerClassName: PropTypes.string,
thumbClassName: PropTypes.string,
className: PropTypes.string,
value: PropTypes.number.isRequired,
minimumValue: PropTypes.number.isRequired,
maximumValue: PropTypes.number.isRequired,

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

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