Merge pull request #17 from darlanrod/dev

Range track and thumb tweaks for Mozilla Firefox.

.gitignore

@@ -1,5 +1,6 @@
 
 # Created by https://www.gitignore.io/api/sass,macos,windows
+# Edit at https://www.gitignore.io/?templates=sass,macos,windows
 
 ### macOS ###
 # General
@@ -38,6 +39,7 @@ Temporary Items
 ### Windows ###
 # Windows thumbnail cache files
 Thumbs.db
+Thumbs.db:encryptable
 ehthumbs.db
 ehthumbs_vista.db
 
@@ -60,5 +62,4 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
-
 # End of https://www.gitignore.io/api/sass,macos,windows

README.md

@@ -4,7 +4,7 @@ Sass component for customizing the input range using the native properties of ea
 
 ## NPM Package
 ```
-npm install --save input-range-scss
+npm i input-range-scss
 ```
 ## Features
 
@@ -19,34 +19,7 @@ npm install --save input-range-scss
 
 ## Changelog
 
-#### 1.5.1
--   Correction of input cursor to default (thanks, [pichfl](https://github.com/pichfl))
-
-#### 1.5.0
--   Added :disabled state (thanks, [mpavel](https://github.com/mpavel))
--   Improved normalization across browsers (thanks, [guidezpl](https://github.com/guidezpl) and [GufNZ](https://github.com/GufNZ))
--   Removed Firefox border outline on focus (thanks, [DeanPoulin](https://github.com/DeanPoulin))
-
-#### 1.4.1
--   Fixing example page
-
-#### 1.4.0
--   NPM Package
-
-#### 1.3.0
--   Better default style and example page
-
-#### 1.2.0
--   Improvement in SCSS lint (thanks, [Dustin McCaffree](https://github.com/dMcCaffree))
-
-#### 1.1.1
--   Fix track height in IE and thumb margin in Edge (thanks, [danclaydonpm](https://github.com/danclaydonpm) and [jenstornell](https://github.com/jenstornell))
-
-#### 1.1.0
--   Make all variables as '!default'. (thanks, [n0nick](https://github.com/n0nick))
-
-#### 1.0.1
--   SCSS-Lint fix. (thanks, [CookPete](https://github.com/CookPete))
+To see the change history of this project, check out the `changelog.md` file.
 
 ## See Also
 

_inputrange.scss

@@ -1,7 +1,7 @@
 // Styling Cross-Browser Compatible Range Inputs with Sass
 // Github: https://github.com/darlanrod/input-range-sass
 // Author: Darlan Rod https://github.com/darlanrod
-// Version 1.5.1
+// Version 1.5.2
 // MIT License
 
 $track-color: #eceff1 !default;
@@ -40,18 +40,15 @@ $ie-bottom-track-color: darken($track-color, $contrast) !default;
   width: $track-width;
 }
 
-@mixin thumb($adjustment: 0) {
+@mixin thumb {
   @include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
   background: $thumb-color;
   border: $thumb-border-width solid $thumb-border-color;
   border-radius: $thumb-radius;
+  box-sizing: border-box;
   cursor: default;
-  height: $thumb-height + $adjustment;
-  width: $thumb-width + $adjustment;
-}
-
-@mixin disabled {
-  cursor: not-allowed;
+  height: $thumb-height;
+  width: $thumb-width;
 }
 
 [type='range'] {
@@ -104,7 +101,7 @@ $ie-bottom-track-color: darken($track-color, $contrast) !default;
   }
 
   &::-moz-range-thumb {
-    @include thumb(-4);
+    @include thumb;
   }
 
   &::-ms-track {
@@ -130,33 +127,18 @@ $ie-bottom-track-color: darken($track-color, $contrast) !default;
   }
 
   &::-ms-thumb {
-    @include thumb(-4);
+    @include thumb;
     margin-top: $track-height / 4;
   }
 
   &:disabled {
-    &::-webkit-slider-thumb {
-      @include disabled;
-    }
-
-    &::-moz-range-thumb {
-      @include disabled;
-    }
-
-    &::-ms-thumb {
-      @include disabled;
-    }
-
-    &::-webkit-slider-runnable-track {
-      @include disabled;
-    }
-
-    &::-ms-fill-lower {
-      @include disabled;
-    }
-
+    &::-webkit-slider-thumb,
+    &::-moz-range-thumb,
+    &::-ms-thumb,
+    &::-webkit-slider-runnable-track,
+    &::-ms-fill-lower,
     &::-ms-fill-upper {
-      @include disabled;
+      cursor: not-allowed;
     }
   }
 }

changelog.md

@@ -0,0 +1,34 @@
+# Changelog
+_Styling Cross-Browser Compatible Range Inputs with Sass / SCSS_
+
+## 1.5.2
+-   Range track and thumb tweaks for Mozilla Firefox. (thanks [Adam Jagosz](https://github.com/hyvyys))
+
+## 1.5.1
+-   Correction of input cursor to default. (thanks [pichfl](https://github.com/pichfl))
+
+## 1.5.0
+-   Added `:disabled` state. (thanks [mpavel](https://github.com/mpavel))
+-   Improved normalization across browsers. (thanks [guidezpl](https://github.com/guidezpl) and [GufNZ](https://github.com/GufNZ))
+-   Removed Firefox border outline on focus. (thanks [DeanPoulin](https://github.com/DeanPoulin))
+
+## 1.4.1
+-   Fixing example page.
+
+## 1.4.0
+-   NPM Package.
+
+## 1.3.0
+-   Better default style and example page.
+
+## 1.2.0
+-   Improvement in SCSS lint. (thanks [Dustin McCaffree](https://github.com/dMcCaffree))
+
+## 1.1.1
+-   Fix track height in IE and thumb margin in Edge. (thanks [danclaydonpm](https://github.com/danclaydonpm) and [jenstornell](https://github.com/jenstornell))
+
+## 1.1.0
+-   Make all variables as '!default'. (thanks [n0nick](https://github.com/n0nick))
+
+## 1.0.1
+-   SCSS-Lint fix. (thanks [CookPete](https://github.com/CookPete))

example/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Styling Cross-Browser Compatible Range Inputs with Sass/SCSS</title>
-    <link href="_inputrange.min.css" rel="stylesheet">
+    <link href="inputrange.css" rel="stylesheet">
     <style>
       div {
         margin: 20px;

example/inputrange.css

@@ -0,0 +1,100 @@
+[type=range] {
+  -webkit-appearance: none;
+  background: transparent;
+  margin: 12px 0;
+  width: 100%;
+}
+[type=range]::-moz-focus-outer {
+  border: 0;
+}
+[type=range]:focus {
+  outline: 0;
+}
+[type=range]:focus::-webkit-slider-runnable-track {
+  background: #fbfbfc;
+}
+[type=range]:focus::-ms-fill-lower {
+  background: #eceff1;
+}
+[type=range]:focus::-ms-fill-upper {
+  background: #fbfbfc;
+}
+[type=range]::-webkit-slider-runnable-track {
+  cursor: default;
+  height: 8px;
+  transition: all 0.2s ease;
+  width: 100%;
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
+  background: #eceff1;
+  border: 2px solid #cfd8dc;
+  border-radius: 5px;
+}
+[type=range]::-webkit-slider-thumb {
+  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), 0 0 4px rgba(13, 13, 13, 0.2);
+  background: #607d8b;
+  border: 2px solid #eceff1;
+  border-radius: 12px;
+  box-sizing: border-box;
+  cursor: default;
+  height: 24px;
+  width: 24px;
+  -webkit-appearance: none;
+  margin-top: -10px;
+}
+[type=range]::-moz-range-track {
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
+  cursor: default;
+  height: 8px;
+  transition: all 0.2s ease;
+  width: 100%;
+  background: #eceff1;
+  border: 2px solid #cfd8dc;
+  border-radius: 5px;
+  height: 4px;
+}
+[type=range]::-moz-range-thumb {
+  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), 0 0 4px rgba(13, 13, 13, 0.2);
+  background: #607d8b;
+  border: 2px solid #eceff1;
+  border-radius: 12px;
+  box-sizing: border-box;
+  cursor: default;
+  height: 24px;
+  width: 24px;
+}
+[type=range]::-ms-track {
+  cursor: default;
+  height: 8px;
+  transition: all 0.2s ease;
+  width: 100%;
+  background: transparent;
+  border-color: transparent;
+  border-width: 12px 0;
+  color: transparent;
+}
+[type=range]::-ms-fill-lower {
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
+  background: #dde3e6;
+  border: 2px solid #cfd8dc;
+  border-radius: 10px;
+}
+[type=range]::-ms-fill-upper {
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
+  background: #eceff1;
+  border: 2px solid #cfd8dc;
+  border-radius: 10px;
+}
+[type=range]::-ms-thumb {
+  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2), 0 0 4px rgba(13, 13, 13, 0.2);
+  background: #607d8b;
+  border: 2px solid #eceff1;
+  border-radius: 12px;
+  box-sizing: border-box;
+  cursor: default;
+  height: 24px;
+  width: 24px;
+  margin-top: 2px;
+}
+[type=range]:disabled::-webkit-slider-thumb, [type=range]:disabled::-moz-range-thumb, [type=range]:disabled::-ms-thumb, [type=range]:disabled::-webkit-slider-runnable-track, [type=range]:disabled::-ms-fill-lower, [type=range]:disabled::-ms-fill-upper {
+  cursor: not-allowed;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "input-range-scss",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Sass component for customizing the input range using the native properties of each browser.",
   "main": "_inputrange.scss",
   "style": "_inputrange.scss",