Fixed default margins

custom-cards · Apr 26, 2020 · 75bcfa6 · 75bcfa6
1 parent 2cbdc7b
commit 75bcfa6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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;
+export default styles;