Alarm Panel card: number buttons outline and adjusted padding and font-size fixing #2812 (#3991)

* outline on alarm panel buttons

* Fix for font-size before mwc-button is working.

* suggested edits from review

* changed to just outline

* Remove base-unit
This commit is contained in:
Marcus Fredlund 2019-10-14 21:29:37 +02:00 committed by Bram Kragten
parent 59e4cdc62a
commit 424d677bcb

View File

@ -164,7 +164,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
<mwc-button <mwc-button
.value="${value}" .value="${value}"
@click="${this._handlePadClick}" @click="${this._handlePadClick}"
dense outlined
> >
${value === "clear" ${value === "clear"
? this._label("clear_code") ? this._label("clear_code")
@ -226,8 +226,6 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
--alarm-color-armed: var(--label-badge-red); --alarm-color-armed: var(--label-badge-red);
--alarm-color-autoarm: rgba(0, 153, 255, 0.1); --alarm-color-autoarm: rgba(0, 153, 255, 0.1);
--alarm-state-color: var(--alarm-color-armed); --alarm-state-color: var(--alarm-color-armed);
--base-unit: 15px;
font-size: calc(var(--base-unit));
} }
ha-label-badge { ha-label-badge {
@ -271,13 +269,11 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
paper-input { paper-input {
margin: 0 auto 8px; margin: 0 auto 8px;
max-width: 150px; max-width: 150px;
font-size: calc(var(--base-unit));
text-align: center; text-align: center;
} }
.state { .state {
margin-left: 16px; margin-left: 16px;
font-size: calc(var(--base-unit) * 0.9);
position: relative; position: relative;
bottom: 16px; bottom: 16px;
color: var(--alarm-state-color); color: var(--alarm-state-color);
@ -289,14 +285,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
margin: auto; margin: auto;
width: 300px; width: 100%;
max-width: 300px;
} }
#keypad mwc-button { #keypad mwc-button {
margin-bottom: 5%; text-size: 20px;
padding: 8px;
width: 30%; width: 30%;
padding: calc(var(--base-unit));
font-size: calc(var(--base-unit) * 1.1);
box-sizing: border-box; box-sizing: border-box;
} }
@ -306,11 +302,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
font-size: calc(var(--base-unit) * 1);
} }
.actions mwc-button { .actions mwc-button {
min-width: calc(var(--base-unit) * 9);
margin: 0 4px 4px; margin: 0 4px 4px;
} }