Code for the littler Buttons the Computer used in the Turing Machine portion of the book.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
buttons-computer/sass/_sliders.scss

100 lines
1.9 KiB

// Sliders
// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
.slider {
appearance: none;
background: transparent;
display: block;
width: 100%;
height: $unit-6;
&:focus {
@include control-shadow();
outline: none;
}
&.tooltip:not([data-tooltip]) {
&::after {
content: attr(value);
}
}
// Slider Thumb
&::-webkit-slider-thumb {
-webkit-appearance: none;
background: $primary-color;
border: 0;
border-radius: 50%;
height: $unit-3;
margin-top: -($unit-3 - $unit-h) / 2;
transition: transform .2s;
width: $unit-3;
}
&::-moz-range-thumb {
background: $primary-color;
border: 0;
border-radius: 50%;
height: $unit-3;
transition: transform .2s;
width: $unit-3;
}
&::-ms-thumb {
background: $primary-color;
border: 0;
border-radius: 50%;
height: $unit-3;
transition: transform .2s;
width: $unit-3;
}
&:active {
&::-webkit-slider-thumb {
transform: scale(1.25);
}
&::-moz-range-thumb {
transform: scale(1.25);
}
&::-ms-thumb {
transform: scale(1.25);
}
}
&:disabled,
&.disabled {
&::-webkit-slider-thumb {
background: $gray-color-light;
transform: scale(1);
}
&::-moz-range-thumb {
background: $gray-color-light;
transform: scale(1);
}
&::-ms-thumb {
background: $gray-color-light;
transform: scale(1);
}
}
// Slider Track
&::-webkit-slider-runnable-track {
background: $bg-color-dark;
border-radius: $border-radius;
height: $unit-h;
width: 100%;
}
&::-moz-range-track {
background: $bg-color-dark;
border-radius: $border-radius;
height: $unit-h;
width: 100%;
}
&::-ms-track {
background: $bg-color-dark;
border-radius: $border-radius;
height: $unit-h;
width: 100%;
}
&::-ms-fill-lower {
background: $primary-color;
}
}