Use paper-tabs while in edit mode (#7563)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Ryan Meek 2020-11-01 16:04:52 -05:00 committed by GitHub
parent 3b91343082
commit 199e17d0b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -17,6 +17,7 @@ import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-tabs/paper-tab";
import "@polymer/paper-tabs/paper-tabs";
import {
css,
CSSResult,
@ -381,7 +382,7 @@ class HUIRoot extends LitElement {
${this._editMode
? html`
<div sticky>
<ha-tabs
<paper-tabs
scrollable
.selected="${this._curView}"
@iron-activate="${this._handleViewSelected}"
@ -461,7 +462,7 @@ class HUIRoot extends LitElement {
</mwc-icon-button>
`
: ""}
</ha-tabs>
</paper-tabs>
</div>
`
: ""}
@ -798,13 +799,17 @@ class HUIRoot extends LitElement {
width: 100%;
height: 100%;
margin-left: 4px;
}
paper-tabs {
margin-left: 12px;
margin-left: max(env(safe-area-inset-left), 12px);
margin-right: env(safe-area-inset-right);
}
ha-tabs, paper-tabs {
--paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
text-transform: uppercase;
}
.edit-mode ha-tabs {
margin-left: max(env(safe-area-inset-left), 24px);
margin-right: max(env(safe-area-inset-right), 24px);
}
.edit-mode {
background-color: var(--dark-color, #455a64);
color: var(--text-dark-color);