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

slider uses css variables for sizes and colors

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-12-06 12:04:10 +02:00
parent 48b9207026
commit 82b1c44e31
2 changed files with 18 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -87,7 +87,7 @@ class Slider extends Component {
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.className)} onMouseDown={this.onStartSliding}>
<div className={styles['line']} />
<div className={styles['track']} />
<div className={styles['thumb']} style={{ [thumbStartProp]: `calc(100% * ${thumbStart})` }} />
</div>
);

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

@ -1,5 +1,3 @@
@import 'stremio-colors';
.slider-container {
position: relative;
z-index: 0;
@ -7,10 +5,10 @@
min-height: var(--thumb-size);
cursor: pointer;
.line {
.track {
position: absolute;
z-index: 1;
background-color: @colorprim;
background-color: var(--track-color);
}
.thumb {
@ -18,57 +16,50 @@
z-index: 2;
width: var(--thumb-size);
height: var(--thumb-size);
transition-duration: 0.06s;
&::after {
display: block;
width: 100%;
height: 100%;
width: var(--thumb-size);
height: var(--thumb-size);
border-radius: 50%;
background-color: @colormedium;
background-color: var(--thumb-color);
content: "";
}
}
&.horizontal {
.line {
.track {
left: 0;
right: 0;
top: 40%;
bottom: 40%;
}
.thumb {
transition-property: left;
&::after {
margin-left: calc(-0.5 * var(--thumb-size));
}
.thumb::after {
margin-left: calc(-0.5 * var(--thumb-size));
}
}
&.vertical {
.line {
.track {
left: 40%;
right: 40%;
top: 0;
bottom: 0;
}
.thumb {
transition-property: bottom;
&::after {
margin-top: calc(0.5 * var(--thumb-size));
}
.thumb::after {
margin-top: calc(0.5 * var(--thumb-size));
}
}
&:hover, &.active {
.thumb {
&::after {
background-color: @colorprimlight;
}
.track {
background-color: var(--track-active-color, var(--track-color));
}
.thumb::after {
background-color: var(--thumb-active-color, var(--thumb-color));
}
}
}