From d2ff6a18e16ed02963ba51d4adde34a6efb595eb Mon Sep 17 00:00:00 2001
From: Justin Weberg <justweb1@users.noreply.github.com>
Date: Thu, 27 Oct 2016 09:38:33 -0500
Subject: [PATCH] Update styling on climate sliders (#137)

* Increase width of sliders

* Update color styling on sliders

* Remove IDs in favor of tags
---
 src/more-infos/more-info-climate.html | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/more-infos/more-info-climate.html b/src/more-infos/more-info-climate.html
index 2f1f48c575..8b09868eec 100644
--- a/src/more-infos/more-info-climate.html
+++ b/src/more-infos/more-info-climate.html
@@ -50,22 +50,37 @@
         width: 100%;
       }
 
-      .heat {
+      paper-slider {
+        width: 100%;
+      }
+
+      .auto paper-slider {
+        --paper-slider-active-color: var(--paper-orange-400);
+        --paper-slider-secondary-color: var(--paper-blue-400);
+      }
+
+      .heat paper-slider {
         --paper-slider-active-color: var(--paper-orange-400);
         --paper-slider-secondary-color: var(--paper-green-400);
       }
 
-      .cool {
+      .cool paper-slider {
         --paper-slider-active-color: var(--paper-green-400);
         --paper-slider-secondary-color: var(--paper-blue-400);
       }
 
-      #temp-range-slider {
+      .humidity {
+        --paper-slider-active-color: var(--paper-blue-400);
+        --paper-slider-secondary-color: var(--paper-blue-400);
+      }
+
+      paper-range-slider {
         --paper-range-slider-lower-color: var(--paper-orange-400);
         --paper-range-slider-active-color: var(--paper-green-400);
         --paper-range-slider-higher-color: var(--paper-blue-400);
         --paper-range-slider-knob-color: var(--primary-color);
         --paper-range-slider-pin-color: var(--primary-color);
+        --paper-range-slider-width: 100%;
       }
 
       .single-row {
@@ -82,7 +97,6 @@
         <div class$='single-row, [[stateObj.attributes.operation_mode]]'>
           <div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target Temperature</div>
           <paper-slider
-            id='temp-slider'
             min='[[stateObj.attributes.min_temp]]'
             max='[[stateObj.attributes.max_temp]]'
             secondary-progress='[[stateObj.attributes.max_temp]]'
@@ -93,7 +107,6 @@
             on-change='targetTemperatureSliderChanged'>
           </paper-slider>
           <paper-range-slider
-            id='temp-range-slider'
             min='[[stateObj.attributes.min_temp]]'
             max='[[stateObj.attributes.max_temp]]'
             pin
@@ -111,8 +124,10 @@
         <div class='single-row'>
           <div>Target Humidity</div>
           <paper-slider
+            class='humidity'
             min='[[stateObj.attributes.min_humidity]]'
             max='[[stateObj.attributes.max_humidity]]'
+            secondary-progress='[[stateObj.attributes.max_humidity]]'
             step='1' pin
             value='[[stateObj.attributes.humidity]]'
             on-change='targetHumiditySliderChanged'>