add spacing theme options

piitaya · Feb 1, 2022 · c50244f · c50244f
1 parent 77b1e98
commit c50244f
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 12 deletions.
diff --git a/src/cards/cover-card/controls/cover-buttons-control.ts b/src/cards/cover-card/controls/cover-buttons-control.ts
@@ -60,7 +60,7 @@ export class CoverButtonsControl extends LitElement {
                 width: 100%;
             }
             :host *:not(:last-child) {
-                margin-right: 12px;
+                margin-right: var(--spacing);
             }
             mushroom-button {
                 flex: 1;

diff --git a/src/cards/person-card/person-card.ts b/src/cards/person-card/person-card.ts
@@ -171,11 +171,6 @@ export class PersonCard extends LitElement implements LovelaceCard {
         return [
             cardStyle,
             css`
-                .container {
-                    display: flex;
-                    flex-direction: column;
-                    padding: 12px;
-                }
                 mushroom-state-item {
                     cursor: pointer;
                 }

diff --git a/src/shared/slider.ts b/src/shared/slider.ts
@@ -117,7 +117,7 @@ export class SliderItem extends LitElement {
                 height: 42px;
             }
             .container > *:not(:last-child) {
-                margin-right: 12px;
+                margin-right: var(--spacing);
             }
             .slider {
                 position: relative;

diff --git a/src/shared/state-item.ts b/src/shared/state-item.ts
@@ -34,7 +34,7 @@ export class StateItem extends LitElement {
                 align-items: center;
             }
             .container > *:not(:last-child) {
-                margin-right: 12px;
+                margin-right: var(--spacing);
             }
             .icon {
                 position: relative;
@@ -54,7 +54,7 @@ export class StateItem extends LitElement {
                 flex-direction: column;
             }
             .container.vertical > *:not(:last-child) {
-                margin-bottom: 12px;
+                margin-bottom: var(--spacing);
                 margin-right: 0;
             }
             .container.vertical .info {

diff --git a/src/utils/card-styles.ts b/src/utils/card-styles.ts
@@ -4,6 +4,7 @@ import { colorCss } from "./colors";
 export const cardStyle = css`
     :host {
         ${colorCss}
+        --spacing: var(--mush-spacing, 12px)
     }
     ha-card {
         height: 100%;
@@ -15,10 +16,10 @@ export const cardStyle = css`
         justify-content: center;
         display: flex;
         flex-direction: column;
-        padding: 12px;
+        padding: var(--spacing);
     }
     .container > *:not(:last-child) {
-        margin-bottom: 12px;
+        margin-bottom: var(--spacing);
     }
     .actions {
         display: flex;
@@ -27,7 +28,7 @@ export const cardStyle = css`
         overflow-y: auto;
     }
     .actions *:not(:last-child) {
-        margin-right: 12px;
+        margin-right: var(--spacing);
     }
     .unavailable {
         --main-color: var(--warning-color);