From c9705e25aa80e809a1c23cd87d68180ce58ed308 Mon Sep 17 00:00:00 2001
From: Georgi Gardev <georgi@gardev.com>
Date: Sat, 27 Mar 2021 21:19:00 +0200
Subject: [PATCH] Implement #12: CSS variable for control padding

---
 README.md                               | 1 +
 src/components/time-period.component.ts | 2 +-
 src/components/time-unit.component.ts   | 4 ++--
 src/time-picker-card.ts                 | 2 ++
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 97f2a7a..44e8159 100644
--- 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
index 9f6e928..260cfa4 100644
--- 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
index fb40003..a716063 100644
--- a/src/components/time-unit.component.ts
+++ b/src/components/time-unit.component.ts
@@ -69,7 +69,7 @@ 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);
@@ -77,7 +77,7 @@ export class TimeUnitComponent extends LitElement {
 
       .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
index 539c353..11ca6eb 100644
--- 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));