69 lines
1.7 KiB
HTML
69 lines
1.7 KiB
HTML
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
|
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
|
|
|
|
<link rel='import' href='../components/ha-color-picker.html'>
|
|
|
|
<dom-module id='more-info-light'>
|
|
<style>
|
|
.brightness {
|
|
margin-bottom: 8px;
|
|
|
|
max-height: 0px;
|
|
overflow: hidden;
|
|
transition: max-height .5s ease-in;
|
|
}
|
|
|
|
.color_temp {
|
|
margin-bottom: 8px;
|
|
|
|
max-height: 0px;
|
|
overflow: hidden;
|
|
transition: max-height .5s ease-in;
|
|
}
|
|
|
|
ha-color-picker {
|
|
display: block;
|
|
width: 350px;
|
|
margin: 0 auto;
|
|
|
|
max-height: 0px;
|
|
overflow: hidden;
|
|
transition: max-height .5s ease-in;
|
|
}
|
|
|
|
.has-brightness .brightness {
|
|
max-height: 40px;
|
|
}
|
|
|
|
.has-color_temp .color_temp {
|
|
max-height: 40px;
|
|
}
|
|
|
|
.has-xy_color ha-color-picker {
|
|
max-height: 500px;
|
|
}
|
|
</style>
|
|
<template>
|
|
<div class$='[[computeClassNames(stateObj)]]'>
|
|
<div class='brightness center horizontal layout'>
|
|
<div>Brightness</div>
|
|
<paper-slider
|
|
max='255' id='brightness' value='{{brightnessSliderValue}}'
|
|
on-change='brightnessSliderChanged' class='flex'>
|
|
</paper-slider>
|
|
</div>
|
|
<div class='color_temp center horizontal layout'>
|
|
<div>Color temperature</div>
|
|
<paper-slider min="154" max="500"
|
|
id='color_temp' value='{{ctSliderValue}}'
|
|
on-change='ctSliderChanged' class='flex'>
|
|
</paper-slider>
|
|
</div>
|
|
|
|
<ha-color-picker on-colorselected='colorPicked' width='350' height='200'>
|
|
</ha-color-picker>
|
|
|
|
</div>
|
|
</template>
|
|
</dom-module>
|