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

drop usage of thumb size css variable

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-03 11:14:35 +03:00
parent 4c4095b577
commit 2f40cf25f7
2 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -115,9 +115,11 @@ const Slider = ({ className, value, minimumValue, maximumValue, onSlide, onCompl
<div className={styles['track-before']} style={{ width: `calc(100% * ${thumbPosition})` }} />
</div>
<div className={styles['layer']}>
<svg className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} viewBox={'0 0 10 10'}>
<circle cx={'5'} cy={'5'} r={'5'} />
</svg>
<div className={styles['thumb-container']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }}>
<svg className={styles['thumb']} viewBox={'0 0 10 10'}>
<circle cx={'5'} cy={'5'} r={'5'} />
</svg>
</div>
</div>
</div>
);

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

@ -9,6 +9,7 @@ html.active-slider-within {
.slider-container {
position: relative;
z-index: 0;
overflow: visible;
cursor: pointer;
.layer {
@ -21,25 +22,31 @@ html.active-slider-within {
display: flex;
flex-direction: row;
align-items: center;
overflow: visible;
}
.track {
flex: 1;
height: calc(var(--thumb-size) / 3);
height: 30%;
background-color: var(--track-color);
}
.track-before {
flex: none;
height: calc(var(--thumb-size) / 3);
height: 30%;
background-color: var(--track-before-color);
}
.thumb {
.thumb-container {
flex: none;
width: var(--thumb-size);
height: var(--thumb-size);
align-self: stretch;
transform: translateX(-50%);
fill: var(--thumb-color);
.thumb {
display: block;
width: 100%;
height: 100%;
fill: var(--thumb-color);
}
}
}