jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-01 13:37:47 +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 {
text-decoration: none;
color: var(--sidebar-text-color);
font-weight: 500;
font-size: 14px;
text-decoration: none;
position: relative;
display: block;
outline: 0;
}
paper-icon-item {
@ -546,7 +549,8 @@ class HaSidebar extends LitElement {
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;
position: absolute;
top: 0;
@ -555,11 +559,22 @@ class HaSidebar extends LitElement {
left: 0;
pointer-events: none;
content: "";
background-color: var(--sidebar-selected-icon-color);
opacity: 0.12;
transition: opacity 15ms linear;
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 {
opacity: 0.37;

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

@ -88,9 +88,12 @@ class HaConfigNavigation extends LitElement {
a {
text-decoration: none;
color: var(--primary-text-color);
position: relative;
display: block;
outline: 0;
}
.iron-selected paper-item:before {
border-radius: 4px;
.iron-selected paper-item::before,
a:not(.iron-selected):focus::before {
position: absolute;
top: 0;
right: 0;
@ -98,13 +101,22 @@ class HaConfigNavigation extends LitElement {
left: 0;
pointer-events: none;
content: "";
background-color: var(--sidebar-selected-icon-color);
opacity: 0.12;
transition: opacity 15ms linear;
will-change: opacity;
}
.iron-selected paper-item[pressed]:before {
.iron-selected paper-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);
}
.iron-selected paper-item:focus::before,
.iron-selected:focus paper-item::before {
opacity: 0.2;
}
.iron-selected paper-item[pressed]::before {
opacity: 0.37;
}
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: "integrations", core: true },
{ page: "devices", core: true },
{ page: "entities", core: true },
{ page: "automation" },
{ page: "script" },
{ page: "scene" },
{ page: "core", core: true },
{ page: "server_control", core: true },
{ page: "entities", core: true },
{ page: "areas", core: true },
{ page: "person" },
{ page: "users", core: true },
{ page: "server_control", core: true },
{ page: "zha" },
{ page: "zwave" },
{ page: "customize", core: true, advanced: true },