dark mode with bootstrap complete components
Used https://github.com/vinorodrigues/bootstrap-dark-5/releases/tag/v1.0.0
This commit is contained in:
56
scss/dark/bootstrap/forms/_form-range.scss
Normal file
56
scss/dark/bootstrap/forms/_form-range.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
// Range
|
||||
|
||||
.form-range {
|
||||
// background-color: transparent;
|
||||
|
||||
&:focus {
|
||||
&::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
|
||||
&::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include gradient-bg($form-range-thumb-bg-alt);
|
||||
border: $form-range-thumb-border-alt;
|
||||
@include box-shadow($form-range-thumb-box-shadow-alt);
|
||||
|
||||
&:active {
|
||||
@include gradient-bg($form-range-thumb-active-bg-alt);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
// color: transparent; // Why?
|
||||
background-color: $form-range-track-bg-alt;
|
||||
// border-color: transparent;
|
||||
@include box-shadow($form-range-track-box-shadow-alt);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include gradient-bg($form-range-thumb-bg-alt);
|
||||
border: $form-range-thumb-border-alt;
|
||||
@include box-shadow($form-range-thumb-box-shadow-alt);
|
||||
|
||||
&:active {
|
||||
@include gradient-bg($form-range-thumb-active-bg-alt);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
// color: transparent;
|
||||
background-color: $form-range-track-bg-alt;
|
||||
// border-color: transparent; // Firefox specific?
|
||||
@include box-shadow($form-range-track-box-shadow-alt);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $form-range-thumb-disabled-bg-alt;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background-color: $form-range-thumb-disabled-bg-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user