1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-29 16:19:53 +02:00

Proposal for form range

This commit is contained in:
louismaxime.piton
2023-08-22 12:15:09 +02:00
parent daf481627f
commit 7959675969

View File

@@ -29,7 +29,7 @@
height: $form-range-thumb-height; height: $form-range-thumb-height;
margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
appearance: none; appearance: none;
@include gradient-bg($form-range-thumb-bg); @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
border: $form-range-thumb-border; border: $form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius); @include border-radius($form-range-thumb-border-radius);
@include box-shadow($form-range-thumb-box-shadow); @include box-shadow($form-range-thumb-box-shadow);
@@ -55,7 +55,7 @@
width: $form-range-thumb-width; width: $form-range-thumb-width;
height: $form-range-thumb-height; height: $form-range-thumb-height;
appearance: none; appearance: none;
@include gradient-bg($form-range-thumb-bg); @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
border: $form-range-thumb-border; border: $form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius); @include border-radius($form-range-thumb-border-radius);
@include box-shadow($form-range-thumb-box-shadow); @include box-shadow($form-range-thumb-box-shadow);
@@ -72,20 +72,13 @@
color: transparent; color: transparent;
cursor: $form-range-track-cursor; cursor: $form-range-track-cursor;
background-color: $form-range-track-bg; background-color: $form-range-track-bg;
border-color: transparent; // Firefox specific? border-color: transparent;
@include border-radius($form-range-track-border-radius); @include border-radius($form-range-track-border-radius);
@include box-shadow($form-range-track-box-shadow); @include box-shadow($form-range-track-box-shadow);
} }
&:disabled { &:disabled {
--#{$prefix}form-range-thumb-bg: #{$form-range-thumb-disabled-bg};
pointer-events: none; pointer-events: none;
&::-webkit-slider-thumb {
background-color: $form-range-thumb-disabled-bg;
}
&::-moz-range-thumb {
background-color: $form-range-thumb-disabled-bg;
}
} }
} }