79 lines
1.3 KiB
SCSS
79 lines
1.3 KiB
SCSS
|
input[type=range] {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
&:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus::-webkit-slider-runnable-track {
|
||
|
|
background: #545454;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus::-ms-fill-lower {
|
||
|
|
background: #424242;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:focus::-ms-fill-upper {
|
||
|
|
background: #545454;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-webkit-slider-runnable-track {
|
||
|
|
width: 100%;
|
||
|
|
height: 25.6px;
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
|
||
|
|
background: #424242;
|
||
|
|
border-radius: 0;
|
||
|
|
border: 0 solid #010101;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type=range]::-webkit-slider-thumb {
|
||
|
|
height: 25px;
|
||
|
|
width: 15px;
|
||
|
|
border-radius: 0;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-top: 0.3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
switch {
|
||
|
|
input {
|
||
|
|
position: absolute;
|
||
|
|
appearance: none;
|
||
|
|
opacity: 0;
|
||
|
|
|
||
|
|
&:checked + label:after {
|
||
|
|
transform: translateX(20px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
label {
|
||
|
|
display: block;
|
||
|
|
border-radius: 10px;
|
||
|
|
width: 40px;
|
||
|
|
height: 20px;
|
||
|
|
background-color: #dcdcdc;
|
||
|
|
position: relative;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 0;
|
||
|
|
|
||
|
|
&:after {
|
||
|
|
content: '';
|
||
|
|
background-color: #ff3232;
|
||
|
|
position: absolute;
|
||
|
|
top: 2px;
|
||
|
|
left: 2px;
|
||
|
|
height: 16px;
|
||
|
|
width: 16px;
|
||
|
|
border-radius: 10px;
|
||
|
|
transition: .5s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="file"] {
|
||
|
|
position: fixed;
|
||
|
|
left: -100000vw;
|
||
|
|
height: 1px;
|
||
|
|
width: 1px;
|
||
|
|
}
|