From: Richard Taylor <richardt@comcarde.com>
Date: Mon, 21 Aug 2017 11:20:46 +0000 (+0100)
Subject: Fix native range thumb styles on Webkit (Chrome/Safari)
X-Git-Tag: v6.4.4-rc1~29^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10562%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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
---

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;