Updates alarm more-info dialog button styles to match lovelace card (#3955)

* Updates alarm more-info dialog button styles to match lovelace card

* Use flex for controlling button size

* Limit max-width of alarm buttons

This matches the width of the code input field
This commit is contained in:
Josh McCarty 2019-10-15 12:04:29 -07:00 committed by Bram Kragten
parent 49d69f65ad
commit a39e47cced

View File

@ -29,8 +29,9 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
width: 80px;
}
.actions mwc-button {
min-width: 160px;
margin-bottom: 16px;
flex: 1 0 50%;
margin: 0 4px 16px;
max-width: 200px;
}
mwc-button.disarm {
color: var(--google-red-500);
@ -137,7 +138,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
<div class="layout horizontal center-justified actions">
<template is="dom-if" if="[[_disarmVisible]]">
<mwc-button
raised
outlined
class="disarm"
on-click="_callService"
data-service="alarm_disarm"
@ -148,7 +149,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
</template>
<template is="dom-if" if="[[_armVisible]]">
<mwc-button
raised
outlined
on-click="_callService"
data-service="alarm_arm_home"
disabled="[[!_codeValid]]"
@ -156,7 +157,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
[[localize('ui.card.alarm_control_panel.arm_home')]]
</mwc-button>
<mwc-button
raised
outlined
on-click="_callService"
data-service="alarm_arm_away"
disabled="[[!_codeValid]]"