From ef6e468a7f64742c6e7cf52038f271d5f5f286b0 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Fri, 24 Jan 2020 15:12:54 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20align=20light=20card=20regardles?=
 =?UTF-8?q?s=20of=20brightness=20support=20(#4582)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 align light card regardless of brightness support

* merge css properties
---
 src/panels/lovelace/cards/hui-light-card.ts | 39 ++++++++++-----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index 10d19495bd..b395163e86 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -100,19 +100,19 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
         <div id="controls">
           <div id="slider">
-            ${supportsFeature(stateObj, SUPPORT_BRIGHTNESS)
-              ? html`
-                  <round-slider
-                    min="0"
-                    .value=${brightness}
-                    @value-changing=${this._dragEvent}
-                    @value-changed=${this._setBrightness}
-                  ></round-slider>
-                `
-              : ""}
+            <round-slider
+              min="0"
+              .value=${brightness}
+              @value-changing=${this._dragEvent}
+              @value-changed=${this._setBrightness}
+              style=${styleMap({
+                visibility: supportsFeature(stateObj, SUPPORT_BRIGHTNESS)
+                  ? "visible"
+                  : "hidden",
+              })}
+            ></round-slider>
             <paper-icon-button
               class="light-button ${classMap({
-                "slider-center": supportsFeature(stateObj, SUPPORT_BRIGHTNESS),
                 "state-on": stateObj.state === "on",
                 "state-unavailable": stateObj.state === "unavailable",
               })}"
@@ -276,6 +276,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         color: var(--paper-item-icon-color, #44739e);
         width: 60%;
         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 {
@@ -286,16 +293,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         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 {
         display: flex-vertical;
         justify-content: center;