jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 10:16:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update styling on climate sliders (#137)

Browse Source 
* Increase width of sliders

* Update color styling on sliders

* Remove IDs in favor of tags
This commit is contained in:
Justin Weberg 2016-10-27 09:38:33 -05:00 committed by Paulus Schoutsen
parent 898a8acdc0
commit d2ff6a18e1
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/more-infos/more-info-climate.html
View File

@ -50,22 +50,37 @@
width: 100%; 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-active-color: var(--paper-orange-400);
--paper-slider-secondary-color: var(--paper-green-400); --paper-slider-secondary-color: var(--paper-green-400);
} }
.cool { .cool paper-slider {
--paper-slider-active-color: var(--paper-green-400); --paper-slider-active-color: var(--paper-green-400);
--paper-slider-secondary-color: var(--paper-blue-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-lower-color: var(--paper-orange-400);
--paper-range-slider-active-color: var(--paper-green-400); --paper-range-slider-active-color: var(--paper-green-400);
--paper-range-slider-higher-color: var(--paper-blue-400); --paper-range-slider-higher-color: var(--paper-blue-400);
--paper-range-slider-knob-color: var(--primary-color); --paper-range-slider-knob-color: var(--primary-color);
--paper-range-slider-pin-color: var(--primary-color); --paper-range-slider-pin-color: var(--primary-color);
--paper-range-slider-width: 100%;
} }
.single-row { .single-row {
@ -82,7 +97,6 @@
<div class$='single-row, [[stateObj.attributes.operation_mode]]'> <div class$='single-row, [[stateObj.attributes.operation_mode]]'>
<div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target Temperature</div> <div hidden$='[[computeTargetTempHidden(stateObj)]]'>Target Temperature</div>
<paper-slider <paper-slider
id='temp-slider'
min='[[stateObj.attributes.min_temp]]' min='[[stateObj.attributes.min_temp]]'
max='[[stateObj.attributes.max_temp]]' max='[[stateObj.attributes.max_temp]]'
secondary-progress='[[stateObj.attributes.max_temp]]' secondary-progress='[[stateObj.attributes.max_temp]]'
@ -93,7 +107,6 @@
on-change='targetTemperatureSliderChanged'> on-change='targetTemperatureSliderChanged'>
</paper-slider> </paper-slider>
<paper-range-slider <paper-range-slider
id='temp-range-slider'
min='[[stateObj.attributes.min_temp]]' min='[[stateObj.attributes.min_temp]]'
max='[[stateObj.attributes.max_temp]]' max='[[stateObj.attributes.max_temp]]'
pin pin
@ -111,8 +124,10 @@
<div class='single-row'> <div class='single-row'>
<div>Target Humidity</div> <div>Target Humidity</div>
<paper-slider <paper-slider
class='humidity'
min='[[stateObj.attributes.min_humidity]]' min='[[stateObj.attributes.min_humidity]]'
max='[[stateObj.attributes.max_humidity]]' max='[[stateObj.attributes.max_humidity]]'
secondary-progress='[[stateObj.attributes.max_humidity]]'
step='1' pin step='1' pin
value='[[stateObj.attributes.humidity]]' value='[[stateObj.attributes.humidity]]'
on-change='targetHumiditySliderChanged'> on-change='targetHumiditySliderChanged'>