From 0abc9a2a788f6547b09c0a6c1fb32515888d6b68 Mon Sep 17 00:00:00 2001 From: Richard Taylor Date: Mon, 21 Aug 2017 12:20:46 +0100 Subject: [PATCH] Fix native range thumb styles on Webkit (Chrome/Safari) The range slider's thumb was not styling correctly on Chrome or Safari. This was simply because the pseudo-element `::-webkit-slider-thumb` had been incorrectly written as `::-wekit-slider-handle` in `scss/forms/_range.scss`. This revision fixes it to correctly use `::-webkit-slider-thumb`. Test Plan: - Run `npm start` - View `slider.html` in the docs in Chrome and check the range slider's thumb is now styled correctly. - View the docs in Firefox and Edge and ensure they are still correct. - Run `npm run test:sass` and ensure all the tests still pass --- scss/forms/_range.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/forms/_range.scss b/scss/forms/_range.scss index b5766419d..96a720ad8 100644 --- a/scss/forms/_range.scss +++ b/scss/forms/_range.scss @@ -73,7 +73,7 @@ $slider-radius: $global-radius !default; background: $slider-background; } - &::-webkit-slider-handle { + &::-webkit-slider-thumb { width: $slider-handle-width; height: $slider-handle-height; margin-top: -$margin; -- 2.47.2