Merge pull request #9099 from fabi1cazenave/sliders-bug854469

Bug 854469 - style sliders when native <input type=range> is enabled, r=kaze

(cherry picked from commit 7bc54c2)

Conflicts:
	apps/settings/style/lists.css

apps/settings/js/utils.js

@@ -213,7 +213,15 @@ function bug344618_polyfill() {
   var range = document.createElement('input');
   range.type = 'range';
   if (range.type == 'range') {
+    // In some future version of gaia that will only be used with gecko v23+,
+    // we can remove the bug344618_polyfill stuff.
     console.warn("bug344618 has landed, there's some dead code to remove.");
+    var sel = 'label:not(.without_bug344618_polyfill) > input[type="range"]';
+    var ranges = document.querySelectorAll(sel);
+    for (var i = 0; i < ranges.length; i++) {
+      var label = ranges[i].parentNode;
+      label.classList.add('without_bug344618_polyfill');
+    }
     return; // <input type="range"> is already supported, early way out.
   }
 

apps/settings/style/lists.css

@@ -195,6 +195,50 @@ ul li p + input[type="password"] {
  * Range inputs
  */
 
+input[type=range] {
+  -moz-appearance: none;
+  border: none;
+  background: none;
+}
+
+input[type=range]:-moz-focusring {
+  outline: none;
+}
+
+ul li > label input[type="range"] {
+  position: relative;
+  top: calc(50% - 1.5rem);
+  left: 6.5rem;
+  right: 8.5rem;
+  height: 3rem;
+  width: calc(100% - 15rem);
+}
+
+input[type=range]::-moz-range-track {
+  height: 0.1rem;
+  background-color: #7e7e7e;
+}
+
+input[type=range]::-moz-range-progress {
+  height: 0.3rem;
+  background-color: #01c5ed;
+}
+
+input[type=range]::-moz-range-thumb {
+  width: 2.8rem;
+  height: 2.8rem;
+  border: solid 0.1rem transparent;
+  border-radius: 3rem;
+  transition: border 0.15s ease;
+  -moz-box-sizing: border-box;
+  background: url(images/range_thumb.png) no-repeat 50% 50%;
+}
+
+input[type=range]:active::-moz-range-thumb {
+  border: solid 0.4rem #01c5ed;
+}
+
+
 ul li.sound-setting > label input[type="range"] {
   margin: 0 auto;
   width: calc(100% - 3rem);