mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Fix custom range thumb style (#26385)

Browse Source 
* Fix focus box shadow of custom ranges

* Put `:focus` selector right after `.custom-range`
* Remove unnecessary `outline: none`

* Fix box-shadow issues in IE/Edge

* Better align

* Fix thumb vertical positions in IE/Edge

* Fix incorrect formula of thumb vertical positions in Webkit

* Fix an incorrect comment

* Fix incorrect box-shadow-width
This commit is contained in:
ysds
2018-07-15 13:31:20 +09:00
committed by Mark Otto
parent 0fd40837e8
commit 48c723b60f
2 changed files with 19 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/_custom-forms.scss
+10 -16
View File
@@ -320,6 +320,12 @@
&:focus {
outline: none;
// Pseudo-elements must be split across multiple rulesets to have an affect.
// No box-shadow() mixin for focus accessibility.
&::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
&::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
&::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
}
&::-moz-focus-outer {
@@ -329,7 +335,7 @@
&::-webkit-slider-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
margin-top: -($custom-range-thumb-width * .25); // Webkit specific?
margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@@ -337,11 +343,6 @@
@include transition($custom-forms-transition);
appearance: none;
&:focus {
outline: none;
box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
}
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}
@@ -368,11 +369,6 @@
@include transition($custom-forms-transition);
appearance: none;
&:focus {
outline: none;
box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
}
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}
@@ -392,6 +388,9 @@
&::-ms-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
margin-top: 0; // Edge specific
margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@@ -399,11 +398,6 @@
@include transition($custom-forms-transition);
appearance: none;
&:focus {
outline: none;
box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
}
&:active {
@include gradient-bg($custom-range-thumb-active-bg);
}