GeorgeSG/lovelace-time-picker-card
1
0
Fork 0
mirror of https://github.com/GeorgeSG/lovelace-time-picker-card.git synced 2026-09-06 02:18:44 +00:00
Code Issues Projects Releases Wiki Activity

Implement #12: CSS variable for control padding

Browse Source
This commit is contained in:
GeorgeSG
2021-03-27 21:19:00 +02:00
parent f4c8fd283a
commit c9705e25aa
4 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -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
src/components/time-period.component.ts
+1 -1
View File
@@ -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;
src/components/time-unit.component.ts
+2 -2
View File
@@ -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);
src/time-picker-card.ts
+2
View File
@@ -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));