jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update material design sidebar (#1676)

Browse Source
This commit is contained in:
Paulus Schoutsen 2018-09-19 14:59:48 +02:00 committed by GitHub
parent 15d21cc673
commit 348bebc417
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ha-sidebar.js
View File

@ -47,7 +47,7 @@ class HaSidebar extends LocalizeMixin(PolymerElement) {
} }
paper-listbox { paper-listbox {
padding-bottom: 0; padding: 0;
} }
paper-listbox > a { paper-listbox > a {
@ -59,15 +59,37 @@ class HaSidebar extends LocalizeMixin(PolymerElement) {
}; };
} }
paper-icon-item {
margin: 8px;
padding-left: 9px;
border-radius: 4px;
--paper-item-min-height: 40px;
}
.iron-selected paper-icon-item:before {
border-radius: 4px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
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[pressed]:before {
opacity: 0.37;
}
paper-icon-item span { paper-icon-item span {
@apply --sidebar-text; @apply --sidebar-text;
} }
a.iron-selected { a.iron-selected {
--paper-icon-item: {
background-color: var(--sidebar-selected-background-color, var(--paper-grey-200));
};
--paper-item-icon: { --paper-item-icon: {
color: var(--sidebar-selected-icon-color); color: var(--sidebar-selected-icon-color);
}; };

3
src/resources/ha-style.js
View File

@ -44,8 +44,7 @@ documentContainer.innerHTML = `<custom-style>
--sidebar-text-color: var(--primary-text-color); --sidebar-text-color: var(--primary-text-color);
--sidebar-background-color: var(--paper-listbox-background-color); /* backward compatible with existing themes */ --sidebar-background-color: var(--paper-listbox-background-color); /* backward compatible with existing themes */
--sidebar-icon-color: rgba(0, 0, 0, 0.5); --sidebar-icon-color: rgba(0, 0, 0, 0.5);
--sidebar-selected-text-color: var(--primary-text-color); --sidebar-selected-text-color: var(--primary-color);
/* --sidebar-selected-background-color: rgba(30,30,30,0.1); */
--sidebar-selected-icon-color: var(--primary-color); --sidebar-selected-icon-color: var(--primary-color);
/* controls */ /* controls */