diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_custom-forms.scss | 26 | ||||
| -rw-r--r-- | scss/_variables.scss | 17 |
2 files changed, 19 insertions, 24 deletions
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index f4e005a96..8348e261c 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -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); } diff --git a/scss/_variables.scss b/scss/_variables.scss index 6531a934f..94ea93578 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -537,14 +537,15 @@ $custom-range-track-bg: $gray-300 !default; $custom-range-track-border-radius: 1rem !default; $custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; -$custom-range-thumb-width: 1rem !default; -$custom-range-thumb-height: $custom-range-thumb-width !default; -$custom-range-thumb-bg: $component-active-bg !default; -$custom-range-thumb-border: 0 !default; -$custom-range-thumb-border-radius: 1rem !default; -$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; -$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; -$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; +$custom-range-thumb-width: 1rem !default; +$custom-range-thumb-height: $custom-range-thumb-width !default; +$custom-range-thumb-bg: $component-active-bg !default; +$custom-range-thumb-border: 0 !default; +$custom-range-thumb-border-radius: 1rem !default; +$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; +$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; +$custom-range-thumb-focus-box-shadow-width: $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge +$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; $custom-file-height: $input-height !default; $custom-file-height-inner: $input-height-inner !default; |