add restriction-lock-row-margin-left css var

iantrich · Oct 22, 2019 · 657c5c0 · 657c5c0
1 parent 2f01dac
commit 657c5c0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -106,13 +106,14 @@ In your `resources` section add
 The following variables are available and can be set in your theme to change the appearance of the lock.
 Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS.
 
-| name                             | Default              | Description                                    |
-| -------------------------------- | -------------------- | ---------------------------------------------- |
-| `restriction-regular-lock-color` | `primary-text-color` | Lock color                                     |
-| `restriction-success-lock-color` | `primary-color`      | Lock color when unlocked                       |
-| `restriction-blocked-lock-color` | `error-state-color`  | Lock color when card is blocked                |
-| `restriction-invalid--color`     | `error-state-color`  | Lock color after an invalid attempt to unlock  |
-| `restriction-lock-margin-left`   | `unset`              | Manually bump the left margin of the lock icon |
+| name                               | Default              | Description                                            |
+| ---------------------------------- | -------------------- | ------------------------------------------------------ |
+| `restriction-regular-lock-color`   | `primary-text-color` | Lock color                                             |
+| `restriction-success-lock-color`   | `primary-color`      | Lock color when unlocked                               |
+| `restriction-blocked-lock-color`   | `error-state-color`  | Lock color when card is blocked                        |
+| `restriction-invalid--color`       | `error-state-color`  | Lock color after an invalid attempt to unlock          |
+| `restriction-lock-margin-left`     | `0px`                | Manually bump the left margin of the lock icon         |
+| `restriction-lock-row-margin-left` | `24px`               | Manually bump the left margin of the lock icon in rows |
 
 ## Example Configurations
 

diff --git a/dist/restriction-card.js b/dist/restriction-card.js
diff --git a/src/restriction-card.ts b/src/restriction-card.ts
@@ -256,6 +256,7 @@ class RestrictionCard extends LitElement implements LovelaceCard {
           var(--error-state-color, #db4437)
         );
         --lock-margin-left: var(--restriction-lock-margin-left, 0px);
+        --lock-row-margin-left: var(--restriction-lock-row-margin-left, 24px);
       }
       #overlay {
         align-items: flex-start;
@@ -277,7 +278,7 @@ class RestrictionCard extends LitElement implements LovelaceCard {
         margin-left: var(--lock-margin-left);
       }
       .row {
-        margin-left: 24px !important;
+        margin-left: var(--lock-row-margin-left) !important;
       }
       .hidden {
         visibility: hidden;