From 75bcfa64dabbd9ebdbe6144fb67415adad7b1aee Mon Sep 17 00:00:00 2001
From: Gluwc <lucas.bramlage@gmail.com>
Date: Sun, 26 Apr 2020 16:26:58 +0200
Subject: [PATCH] Fixed default margins

---
 README.md       |  1 +
 src/bar-card.ts |  2 +-
 src/styles.ts   | 27 +++++++++++++++++++++------
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 8655fe4..37e7cab 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,7 @@ See [example](#200-default-layout-requires-card-mod). (**requires** [card-mod](h
 
 | Name | Description
 | ---- | ----
+| #states | HA states containing all rows.
 | bar-card-card | The root bar of each defined entity containing all elements.
 | bar-card-background | Contains bar and any elements `outside` of the bar.
 | bar-card-backgroundbar | The background of the bar.
diff --git a/src/bar-card.ts b/src/bar-card.ts
index 5812129..8b762ff 100644
--- a/src/bar-card.ts
+++ b/src/bar-card.ts
@@ -436,7 +436,7 @@ export class BarCard extends LitElement {
     const rowArray: TemplateResult[] = [];
     for (const row of perRowArray) {
       rowArray.push(html`
-        <bar-card-row style="flex-direction: ${rowFlexDirection}; margin-bottom: 8px;">${row}</bar-card-row>
+        <bar-card-row style="flex-direction: ${rowFlexDirection};">${row}</bar-card-row>
       `);
     }
     return rowArray;
diff --git a/src/styles.ts b/src/styles.ts
index 46fb60e..0d07c86 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -14,13 +14,17 @@ export const styles = html`
     #states > * {
       margin: 8px 0px;
     }
+    #states > :last-child {
+      margin-top: 0px;
+      margin-bottom: 0px;
+    }
+    #states > :first-child {
+      margin-top: 0px;
+    }
     bar-card-row {
       display: flex;
       justify-content: stretch;
     }
-    bar-card-row:last-child {
-      margin-bottom: 0px;
-    }
     bar-card-row > div {
       flex-basis: 100%;
     }
@@ -76,10 +80,21 @@ export const styles = html`
       opacity: 0.25;
     }
     bar-card-currentbar {
-      background: linear-gradient(to var(--bar-direction), var(--bar-color) var(--bar-percent), #0000 var(--bar-percent), #0000 var(--bar-percent));
+      background: linear-gradient(
+        to var(--bar-direction),
+        var(--bar-color) var(--bar-percent),
+        #0000 var(--bar-percent),
+        #0000 var(--bar-percent)
+      );
     }
     bar-card-targetbar {
-      background: linear-gradient(to var(--bar-direction), #0000 var(--bar-percent), var(--bar-color) var(--bar-percent), var(--bar-color) var(--bar-target-percent), #0000 var(--bar-target-percent));
+      background: linear-gradient(
+        to var(--bar-direction),
+        #0000 var(--bar-percent),
+        var(--bar-color) var(--bar-percent),
+        var(--bar-color) var(--bar-target-percent),
+        #0000 var(--bar-target-percent)
+      );
       display: var(--target-display);
       filter: brightness(0.66);
       opacity: 0.33;
@@ -207,4 +222,4 @@ export const styles = html`
   </style>
 `;
 
-export default styles;
\ No newline at end of file
+export default styles;