From ebab617a12ad7081fdba81b3f14febdc6c976ae7 Mon Sep 17 00:00:00 2001
From: yanas <yana@jitsi.org>
Date: Wed, 22 Feb 2017 16:40:51 -0600
Subject: [PATCH] Re-styles range inputs for Chrome and FF.

---
 css/_mixins.scss                  | 38 ++++++++++++++++++++++++++--
 css/components/_input-slider.scss | 41 +++++++++++++++++++++++++++++++
 css/main.scss                     |  3 ++-
 css/themes/_light.scss            |  2 ++
 4 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 css/components/_input-slider.scss

diff --git a/css/_mixins.scss b/css/_mixins.scss
index d28e4504b..b70c59077 100644
--- a/css/_mixins.scss
+++ b/css/_mixins.scss
@@ -90,8 +90,8 @@
 }
 
 /**
-* Mixin styling placeholder
-**/
+ * Mixin styling a placeholder.
+ **/
 @mixin placeholder() {
   $selectors: (
           "::-webkit-input-placeholder",
@@ -107,6 +107,40 @@
   }
 }
 
+/**
+ * Mixin styling a slider track for different browsers.
+ **/
+@mixin slider() {
+  $selectors: (
+          "input[type=range]::-webkit-slider-runnable-track",
+          "input[type=range]::-moz-range-track",
+          "input[type=range]::-ms-track"
+  );
+
+  @each $selector in $selectors {
+    #{$selector} {
+      @content;
+    }
+  }
+}
+
+/**
+ * Mixin styling a slider thumb for different browsers.
+ **/
+@mixin slider-thumb() {
+  $selectors: (
+          "input[type=range]::-webkit-slider-thumb",
+          "input[type=range]::-moz-range-thumb",
+          "input[type=range]::-ms-thumb"
+  );
+
+  @each $selector in $selectors {
+    #{$selector} {
+      @content;
+    }
+  }
+}
+
 @mixin box-shadow($h, $y, $blur, $color, $inset: false) {
   @if $inset {
     -webkit-box-shadow: inset $h $y $blur $color;
diff --git a/css/components/_input-slider.scss b/css/components/_input-slider.scss
new file mode 100644
index 000000000..4d8cd75d6
--- /dev/null
+++ b/css/components/_input-slider.scss
@@ -0,0 +1,41 @@
+/**
+ * Disable the default webkit styles for range inputs (sliders).
+ */
+input[type=range]{
+  -webkit-appearance: none;
+  background: none;
+}
+
+/**
+ * Disable the default focus styles for webkit range inputs (sliders).
+ */
+input[type=range]:focus {
+  outline: none;
+}
+
+/**
+ * Include the mixin for a range input style.
+ */
+@include slider {
+  background: $sliderTrackBackground;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  height: 6px;
+  width: 100%;
+}
+
+/**
+ * Include the mixin for a range input thumb style.
+ */
+@include slider-thumb {
+  -webkit-appearance: none;
+  background: white;
+  border: 1px solid $sliderThumbBackground;
+  border-radius: 50%;
+  box-shadow: 0px 0px 1px $sliderThumbBackground;
+  cursor: pointer;
+  height: 14px;
+  margin-top: -4px;
+  width: 14px;
+}
diff --git a/css/main.scss b/css/main.scss
index eb3915af4..f8afad43d 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -60,7 +60,8 @@
 @import 'components/link';
 @import 'shortcuts/main';
 @import 'components/button-control';
-@import 'components/_input-control.scss';
+@import 'components/input-control';
+@import 'components/input-slider';
 @import "modals/invite/invite";
 @import "connection-info";
 @import 'aui-components/dropdown';
diff --git a/css/themes/_light.scss b/css/themes/_light.scss
index d49e5d0b8..95210cc13 100644
--- a/css/themes/_light.scss
+++ b/css/themes/_light.scss
@@ -8,6 +8,8 @@ $baseLight: #FFFFFF;
 */
 $controlBackground: $baseLight;
 $controlColor: #333333;
+$sliderTrackBackground: #474747;
+$sliderThumbBackground: #3572b0;
 
 /**
 * Buttons