fix alignment of switches positioned absolutely (#3812)

* fix alignment of switches positioned absolutely

* wrap switches

* remove !important
This commit is contained in:
Ian Richardson 2019-09-30 14:27:19 -05:00 committed by Bram Kragten
parent c69585db98
commit 64366dc99a
3 changed files with 22 additions and 16 deletions

View File

@ -32,10 +32,12 @@ export class CloudAlexaPref extends LitElement {
return html`
<ha-card header="Alexa">
<ha-switch
.checked=${alexa_enabled}
@change=${this._enabledToggleChanged}
></ha-switch>
<div class="switch">
<ha-switch
.checked=${alexa_enabled}
@change=${this._enabledToggleChanged}
></ha-switch>
</div>
<div class="card-content">
With the Alexa integration for Home Assistant Cloud you'll be able to
control all your Home Assistant devices via any Alexa-enabled device.
@ -133,7 +135,7 @@ export class CloudAlexaPref extends LitElement {
a {
color: var(--primary-color);
}
ha-card > ha-switch {
.switch {
margin: -4px 0;
position: absolute;
right: 8px;

View File

@ -43,11 +43,13 @@ export class CloudGooglePref extends LitElement {
return html`
<ha-card header="Google Assistant">
<ha-switch
id="google_enabled"
.checked="${google_enabled}"
@change="${this._toggleChanged}"
></ha-switch>
<div class="switch">
<ha-switch
id="google_enabled"
.checked="${google_enabled}"
@change="${this._toggleChanged}"
></ha-switch>
</div>
<div class="card-content">
With the Google Assistant integration for Home Assistant Cloud you'll
be able to control all your Home Assistant devices via any Google
@ -138,7 +140,7 @@ export class CloudGooglePref extends LitElement {
a {
color: var(--primary-color);
}
ha-card > ha-switch {
.switch {
margin: -4px 0;
position: absolute;
right: 8px;

View File

@ -59,10 +59,12 @@ export class CloudRemotePref extends LitElement {
return html`
<ha-card header="Remote Control">
<ha-switch
.checked="${remote_connected}"
@change="${this._toggleChanged}"
></ha-switch>
<div class="switch">
<ha-switch
.checked="${remote_connected}"
@change="${this._toggleChanged}"
></ha-switch>
</div>
<div class="card-content">
Home Assistant Cloud provides a secure remote connection to your
instance while away from home. Your instance
@ -118,7 +120,7 @@ export class CloudRemotePref extends LitElement {
a {
color: var(--primary-color);
}
ha-card > ha-switch {
.switch {
margin: -4px 0;
position: absolute;
right: 8px;