mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-27 19:26:36 +00:00
Add haStyleScrollbar to hass-tabs-subpage (#16993)
This commit is contained in:
Bram Kragten
GitHub
parent
80c57fa326
commit
b3fa134198
@ -19,6 +19,7 @@ import "../components/ha-menu-button";
|
|||||||
import "../components/ha-svg-icon";
|
import "../components/ha-svg-icon";
|
||||||
import "../components/ha-tab";
|
import "../components/ha-tab";
|
||||||
import { HomeAssistant, Route } from "../types";
|
import { HomeAssistant, Route } from "../types";
|
||||||
|
import { haStyleScrollbar } from "../resources/styles";
|
||||||
|
|
||||||
export interface PageNavigation {
|
export interface PageNavigation {
|
||||||
path: string;
|
path: string;
|
||||||
@ -186,7 +187,7 @@ class HassTabsSubpage extends LitElement {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="content ${classMap({ tabs: showTabs })}"
|
class="content ha-scrollbar ${classMap({ tabs: showTabs })}"
|
||||||
@scroll=${this._saveScrollPos}
|
@scroll=${this._saveScrollPos}
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
@ -211,143 +212,146 @@ class HassTabsSubpage extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return css`
|
return [
|
||||||
:host {
|
haStyleScrollbar,
|
||||||
display: block;
|
css`
|
||||||
height: 100%;
|
:host {
|
||||||
background-color: var(--primary-background-color);
|
display: block;
|
||||||
}
|
height: 100%;
|
||||||
|
background-color: var(--primary-background-color);
|
||||||
:host([narrow]) {
|
|
||||||
width: 100%;
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
ha-menu-button {
|
|
||||||
margin-right: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 20px;
|
|
||||||
height: var(--header-height);
|
|
||||||
background-color: var(--sidebar-background-color);
|
|
||||||
font-weight: 400;
|
|
||||||
border-bottom: 1px solid var(--divider-color);
|
|
||||||
padding: 8px 12px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
@media (max-width: 599px) {
|
|
||||||
.toolbar {
|
|
||||||
padding: 4px;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.toolbar a {
|
|
||||||
color: var(--sidebar-text-color);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.bottom-bar a {
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabbar {
|
:host([narrow]) {
|
||||||
display: flex;
|
width: 100%;
|
||||||
font-size: 14px;
|
position: fixed;
|
||||||
overflow: hidden;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#tabbar > a {
|
ha-menu-button {
|
||||||
overflow: hidden;
|
margin-right: 24px;
|
||||||
max-width: 45%;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#tabbar.bottom-bar {
|
.toolbar {
|
||||||
position: absolute;
|
display: flex;
|
||||||
bottom: 0;
|
align-items: center;
|
||||||
left: 0;
|
font-size: 20px;
|
||||||
padding: 0 16px;
|
height: var(--header-height);
|
||||||
box-sizing: border-box;
|
background-color: var(--sidebar-background-color);
|
||||||
background-color: var(--sidebar-background-color);
|
font-weight: 400;
|
||||||
border-top: 1px solid var(--divider-color);
|
border-bottom: 1px solid var(--divider-color);
|
||||||
justify-content: space-around;
|
padding: 8px 12px;
|
||||||
z-index: 2;
|
box-sizing: border-box;
|
||||||
font-size: 12px;
|
}
|
||||||
width: 100%;
|
@media (max-width: 599px) {
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
.toolbar {
|
||||||
}
|
padding: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.toolbar a {
|
||||||
|
color: var(--sidebar-text-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.bottom-bar a {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
#tabbar:not(.bottom-bar) {
|
#tabbar {
|
||||||
flex: 1;
|
display: flex;
|
||||||
justify-content: center;
|
font-size: 14px;
|
||||||
}
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
:host(:not([narrow])) #toolbar-icon {
|
#tabbar > a {
|
||||||
min-width: 40px;
|
overflow: hidden;
|
||||||
}
|
max-width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
ha-menu-button,
|
#tabbar.bottom-bar {
|
||||||
ha-icon-button-arrow-prev,
|
position: absolute;
|
||||||
::slotted([slot="toolbar-icon"]) {
|
bottom: 0;
|
||||||
display: flex;
|
left: 0;
|
||||||
flex-shrink: 0;
|
padding: 0 16px;
|
||||||
pointer-events: auto;
|
box-sizing: border-box;
|
||||||
color: var(--sidebar-icon-color);
|
background-color: var(--sidebar-background-color);
|
||||||
}
|
border-top: 1px solid var(--divider-color);
|
||||||
|
justify-content: space-around;
|
||||||
|
z-index: 2;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
|
|
||||||
.main-title {
|
#tabbar:not(.bottom-bar) {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
max-height: var(--header-height);
|
justify-content: center;
|
||||||
line-height: 20px;
|
}
|
||||||
color: var(--sidebar-text-color);
|
|
||||||
margin: var(--main-title-margin, 0 0 0 24px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
:host(:not([narrow])) #toolbar-icon {
|
||||||
position: relative;
|
min-width: 40px;
|
||||||
width: calc(
|
}
|
||||||
100% - env(safe-area-inset-left) - env(safe-area-inset-right)
|
|
||||||
);
|
|
||||||
margin-left: env(safe-area-inset-left);
|
|
||||||
margin-right: env(safe-area-inset-right);
|
|
||||||
height: calc(100% - 1px - var(--header-height));
|
|
||||||
height: calc(
|
|
||||||
100% - 1px - var(--header-height) - env(safe-area-inset-bottom)
|
|
||||||
);
|
|
||||||
overflow: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([narrow]) .content.tabs {
|
ha-menu-button,
|
||||||
height: calc(100% - 2 * var(--header-height));
|
ha-icon-button-arrow-prev,
|
||||||
height: calc(
|
::slotted([slot="toolbar-icon"]) {
|
||||||
100% - 2 * var(--header-height) - env(safe-area-inset-bottom)
|
display: flex;
|
||||||
);
|
flex-shrink: 0;
|
||||||
}
|
pointer-events: auto;
|
||||||
|
color: var(--sidebar-icon-color);
|
||||||
|
}
|
||||||
|
|
||||||
#fab {
|
.main-title {
|
||||||
position: fixed;
|
flex: 1;
|
||||||
right: calc(16px + env(safe-area-inset-right));
|
max-height: var(--header-height);
|
||||||
bottom: calc(16px + env(safe-area-inset-bottom));
|
line-height: 20px;
|
||||||
z-index: 1;
|
color: var(--sidebar-text-color);
|
||||||
}
|
margin: var(--main-title-margin, 0 0 0 24px);
|
||||||
:host([narrow]) #fab.tabs {
|
}
|
||||||
bottom: calc(84px + env(safe-area-inset-bottom));
|
|
||||||
}
|
.content {
|
||||||
#fab[is-wide] {
|
position: relative;
|
||||||
bottom: 24px;
|
width: calc(
|
||||||
right: 24px;
|
100% - env(safe-area-inset-left) - env(safe-area-inset-right)
|
||||||
}
|
);
|
||||||
:host([rtl]) #fab {
|
margin-left: env(safe-area-inset-left);
|
||||||
right: auto;
|
margin-right: env(safe-area-inset-right);
|
||||||
left: calc(16px + env(safe-area-inset-left));
|
height: calc(100% - 1px - var(--header-height));
|
||||||
}
|
height: calc(
|
||||||
:host([rtl][is-wide]) #fab {
|
100% - 1px - var(--header-height) - env(safe-area-inset-bottom)
|
||||||
bottom: 24px;
|
);
|
||||||
left: 24px;
|
overflow: auto;
|
||||||
right: auto;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
`;
|
|
||||||
|
:host([narrow]) .content.tabs {
|
||||||
|
height: calc(100% - 2 * var(--header-height));
|
||||||
|
height: calc(
|
||||||
|
100% - 2 * var(--header-height) - env(safe-area-inset-bottom)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
#fab {
|
||||||
|
position: fixed;
|
||||||
|
right: calc(16px + env(safe-area-inset-right));
|
||||||
|
bottom: calc(16px + env(safe-area-inset-bottom));
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
:host([narrow]) #fab.tabs {
|
||||||
|
bottom: calc(84px + env(safe-area-inset-bottom));
|
||||||
|
}
|
||||||
|
#fab[is-wide] {
|
||||||
|
bottom: 24px;
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
:host([rtl]) #fab {
|
||||||
|
right: auto;
|
||||||
|
left: calc(16px + env(safe-area-inset-left));
|
||||||
|
}
|
||||||
|
:host([rtl][is-wide]) #fab {
|
||||||
|
bottom: 24px;
|
||||||
|
left: 24px;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user