Implement #12: CSS variable for control padding

GeorgeSG · Mar 27, 2021 · c9705e2 · c9705e2
1 parent f4c8fd2
commit c9705e2
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -139,6 +139,7 @@ you can use the following variables in your theme's config file:
 | time-picker-accent-color              | `var(--primary-color)`         | AM / PM active color                   |
 | time-picker-off-color                 | `var(--disabled-text-color)`   | AM / PM inactive color                 |
 | time-picker-border-radius             | `var(--ha-card-border-radius)` | Border radius of the card              |
+| time-picker-control-padding           | `8px`                          | Padding for interactive elements. Increase for larger hitboxes of the controls. Example: `10px 12px` |
 
 ## Meta
 

diff --git a/src/components/time-period.component.ts b/src/components/time-period.component.ts
@@ -63,7 +63,7 @@ export class TimePeriodComponent extends LitElement {
 
       .time-period {
         width: 30px;
-        padding: 8px;
+        padding: var(--tpc-control-padding);
         background: var(--tpc-off-color);
         color: var(--tpc-text-color);
         text-align: center;

diff --git a/src/components/time-unit.component.ts b/src/components/time-unit.component.ts
@@ -69,15 +69,15 @@ export class TimeUnitComponent extends LitElement {
 
       .time-picker-icon {
         width: 30px;
-        padding: 8px;
+        padding: var(--tpc-control-padding);
         text-align: center;
         cursor: pointer;
         color: var(--tpc-icon-color);
       }
 
       .time-input {
         width: 30px;
-        padding: 8px 8px 6px;
+        padding: var(--tpc-control-padding);
         background: var(--tpc-elements-background-color);
         border: 0;
         border-bottom: 2px solid var(--tpc-elements-background-color);

diff --git a/src/time-picker-card.ts b/src/time-picker-card.ts
@@ -226,6 +226,8 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
           var(--primary-color)
         );
 
+        --tpc-control-padding: var(--time-picker-control-padding, 8px);
+
         --tpc-icon-color: var(--time-picker-icon-color, var(--primary-text-color));
         --tpc-text-color: var(--time-picker-text-color, #fff);
         --tpc-accent-color: var(--time-picker-accent-color, var(--primary-color));