errilaz/98se.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add slider (#78)

Browse source 
* Add section in docs

* Hide range input on all browsers

Displays indicator as radio outline on Windows 10 Firefox 75

* Add svg icons

* Add thumb styling on range input

* Add track to range input

* Add indicator css for has-recatangular-indicator

* Update styling and labels for range input

* Update example for simple range input

* Remove repeated code

* Remove unused icon and add vertical input style

* Refactor styling and adapt description to fit

* Add style for all vertical lengths and update docs

* Correct 2x to 2px
This commit is contained in:
João Nuno Mota 2020-05-07 21:10:43 +01:00 • committed by GitHub
parent a040540135
commit 1e004ff6b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 196 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

136
style.css
View file

@ -22,6 +22,8 @@
--radio-width: 12px;
--checkbox-width: 13px;
--radio-label-spacing: 6px;
--range-track-height: 4px;
--range-spacing: 10px;
/* Some detailed computations for radio buttons and checkboxes */
--radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
@ -429,6 +431,140 @@ textarea:focus {
outline: none;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 21px;
width: 11px;
background: svg-load("./icon/indicator-horizontal.svg");
transform: translateY(-8px);
}
input[type=range].has-box-indicator::-webkit-slider-thumb {
background: svg-load("./icon/indicator-rectangle-horizontal.svg");
transform: translateY(-10px);
}
input[type=range]::-moz-range-thumb {
height: 21px;
width: 11px;
border: 0;
border-radius: 0;
background: svg-load("./icon/indicator-horizontal.svg");
transform: translateY(2px);
}
input[type=range].has-box-indicator::-moz-range-thumb {
background: svg-load("./icon/indicator-rectangle-horizontal.svg");
transform: translateY(0px);
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
box-sizing: border-box;
background: black;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
box-shadow:
1px 0 0 white,
1px 1px 0 white,
0 1px 0 white,
-1px 0 0 darkgrey,
-1px -1px 0 darkgrey,
0 -1px 0 darkgrey,
-1px 1px 0 white,
1px -1px darkgrey;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 2px;
box-sizing: border-box;
background: black;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
box-shadow:
1px 0 0 white,
1px 1px 0 white,
0 1px 0 white,
-1px 0 0 darkgrey,
-1px -1px 0 darkgrey,
0 -1px 0 darkgrey,
-1px 1px 0 white,
1px -1px darkgrey;
}
.is-vertical {
display: inline-block;
width: 4px;
height: 150px;
transform: translateY(50%) ;
}
.is-vertical > input[type=range] {
width: 150px;
height: 4px;
margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 var(--range-spacing);
transform-origin: left;
transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing))) ;
}
.is-vertical > input[type=range]::-webkit-slider-runnable-track {
border-left: 1px solid grey;
border-right: 0;
border-bottom: 1px solid grey;
box-shadow:
-1px 0 0 white,
-1px 1px 0 white,
0 1px 0 white,
1px 0 0 darkgrey,
1px -1px 0 darkgrey,
0 -1px 0 darkgrey,
1px 1px 0 white,
-1px -1px darkgrey;
}
.is-vertical > input[type=range]::-moz-range-track {
border-left: 1px solid grey;
border-right: 0;
border-bottom: 1px solid grey;
box-shadow:
-1px 0 0 white,
-1px 1px 0 white,
0 1px 0 white,
1px 0 0 darkgrey,
1px -1px 0 darkgrey,
0 -1px 0 darkgrey,
1px 1px 0 white,
-1px -1px darkgrey;
}
.is-vertical > input[type=range]::-webkit-slider-thumb {
transform: translateY(-8px) scaleX(-1);
}
.is-vertical > input[type=range].has-box-indicator::-webkit-slider-thumb {
transform: translateY(-10px) scaleX(-1);
}
.is-vertical > input[type=range]::-moz-range-thumb {
transform: translateY(2px) scaleX(-1);
}
.is-vertical > input[type=range].has-box-indicator::-moz-range-thumb {
transform: translateY(0px) scaleX(-1);
}
select:focus {
color: var(--button-highlight);
background-color: var(--dialog-blue);