jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 14:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Styling focus menus (#4483)

Browse Source 
* Styling menus

* Update ha-config-navigation.ts
This commit is contained in:
Bram Kragten 2020-01-15 19:41:56 +01:00 committed by GitHub
parent 0e43435362
commit 86f8ef3a70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/ha-sidebar.ts
View File

@ -520,10 +520,13 @@ class HaSidebar extends LitElement {
} }
a { a {
text-decoration: none;
color: var(--sidebar-text-color); color: var(--sidebar-text-color);
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
text-decoration: none; position: relative;
display: block;
outline: 0;
} }
paper-icon-item { paper-icon-item {
@ -546,7 +549,8 @@ class HaSidebar extends LitElement {
color: var(--sidebar-icon-color); color: var(--sidebar-icon-color);
} }
.iron-selected paper-icon-item:before { .iron-selected paper-icon-item::before,
a:not(.iron-selected):focus::before {
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
top: 0; top: 0;
@ -555,11 +559,22 @@ class HaSidebar extends LitElement {
left: 0; left: 0;
pointer-events: none; pointer-events: none;
content: ""; content: "";
background-color: var(--sidebar-selected-icon-color);
opacity: 0.12;
transition: opacity 15ms linear; transition: opacity 15ms linear;
will-change: opacity; will-change: opacity;
} }
.iron-selected paper-icon-item::before {
background-color: var(--sidebar-selected-icon-color);
opacity: 0.12;
}
a:not(.iron-selected):focus::before {
background-color: currentColor;
opacity: var(--dark-divider-opacity);
margin: 4px 8px;
}
.iron-selected paper-icon-item:focus::before,
.iron-selected:focus paper-icon-item::before {
opacity: 0.2;
}
.iron-selected paper-icon-item[pressed]:before { .iron-selected paper-icon-item[pressed]:before {
opacity: 0.37; opacity: 0.37;

24
src/panels/config/dashboard/ha-config-navigation.ts
View File

@ -88,9 +88,12 @@ class HaConfigNavigation extends LitElement {
a { a {
text-decoration: none; text-decoration: none;
color: var(--primary-text-color); color: var(--primary-text-color);
position: relative;
display: block;
outline: 0;
} }
.iron-selected paper-item:before { .iron-selected paper-item::before,
border-radius: 4px; a:not(.iron-selected):focus::before {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -98,13 +101,22 @@ class HaConfigNavigation extends LitElement {
left: 0; left: 0;
pointer-events: none; pointer-events: none;
content: ""; content: "";
background-color: var(--sidebar-selected-icon-color);
opacity: 0.12;
transition: opacity 15ms linear; transition: opacity 15ms linear;
will-change: opacity; will-change: opacity;
} }
.iron-selected paper-item::before {
.iron-selected paper-item[pressed]:before { background-color: var(--sidebar-selected-icon-color);
opacity: 0.12;
}
a:not(.iron-selected):focus::before {
background-color: currentColor;
opacity: var(--dark-divider-opacity);
}
.iron-selected paper-item:focus::before,
.iron-selected:focus paper-item::before {
opacity: 0.2;
}
.iron-selected paper-item[pressed]::before {
opacity: 0.37; opacity: 0.37;
} }
paper-listbox { paper-listbox {

4
src/panels/config/ha-panel-config.ts
View File

@ -109,15 +109,15 @@ class HaPanelConfig extends LitElement {
{ page: "cloud", info: this._cloudStatus }, { page: "cloud", info: this._cloudStatus },
{ page: "integrations", core: true }, { page: "integrations", core: true },
{ page: "devices", core: true }, { page: "devices", core: true },
{ page: "entities", core: true },
{ page: "automation" }, { page: "automation" },
{ page: "script" }, { page: "script" },
{ page: "scene" }, { page: "scene" },
{ page: "core", core: true }, { page: "core", core: true },
{ page: "server_control", core: true },
{ page: "entities", core: true },
{ page: "areas", core: true }, { page: "areas", core: true },
{ page: "person" }, { page: "person" },
{ page: "users", core: true }, { page: "users", core: true },
{ page: "server_control", core: true },
{ page: "zha" }, { page: "zha" },
{ page: "zwave" }, { page: "zwave" },
{ page: "customize", core: true, advanced: true }, { page: "customize", core: true, advanced: true },