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

💄 align light card regardless of brightness support (#4582)

Browse Source 
* 💄 align light card regardless of brightness support

* merge css properties
This commit is contained in:
Ian Richardson 2020-01-24 15:12:54 -06:00 committed by Bram Kragten
parent 729a5e385f
commit ef6e468a7f
1 changed files with 18 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/panels/lovelace/cards/hui-light-card.ts
View File

@ -100,19 +100,19 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
<div id="controls"> <div id="controls">
<div id="slider"> <div id="slider">
${supportsFeature(stateObj, SUPPORT_BRIGHTNESS) <round-slider
? html` min="0"
<round-slider .value=${brightness}
min="0" @value-changing=${this._dragEvent}
.value=${brightness} @value-changed=${this._setBrightness}
@value-changing=${this._dragEvent} style=${styleMap({
@value-changed=${this._setBrightness} visibility: supportsFeature(stateObj, SUPPORT_BRIGHTNESS)
></round-slider> ? "visible"
` : "hidden",
: ""} })}
></round-slider>
<paper-icon-button <paper-icon-button
class="light-button ${classMap({ class="light-button ${classMap({
"slider-center": supportsFeature(stateObj, SUPPORT_BRIGHTNESS),
"state-on": stateObj.state === "on", "state-on": stateObj.state === "on",
"state-unavailable": stateObj.state === "unavailable", "state-unavailable": stateObj.state === "unavailable",
})}" })}"
@ -276,6 +276,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
color: var(--paper-item-icon-color, #44739e); color: var(--paper-item-icon-color, #44739e);
width: 60%; width: 60%;
height: auto; height: auto;
position: absolute;
max-width: calc(100% - 40px);
box-sizing: border-box;
border-radius: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
.light-button.state-on { .light-button.state-on {
@ -286,16 +293,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
color: var(--state-icon-unavailable-color); color: var(--state-icon-unavailable-color);
} }
.slider-center {
position: absolute;
max-width: calc(100% - 40px);
box-sizing: border-box;
border-radius: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#info { #info {
display: flex-vertical; display: flex-vertical;
justify-content: center; justify-content: center;