Improve main menu design

master
mathieucura 2021-01-10 22:47:09 +01:00
parent 49751674a1
commit 9d3ca4786a
2 changed files with 12 additions and 10 deletions

View File

@ -9,13 +9,15 @@ template.innerHTML = `
padding: 0px; padding: 0px;
} }
elix-menu-button::part(menu) { elix-menu-button::part(menu) {
background-color: #eee !important; background-color: var(--icon-bg-color) !important;
color: #fff;
} }
elix-menu-button::part(popup-toggle) { elix-menu-button::part(popup-toggle) {
padding: 0.25em 0.60em !important padding: 0.25em 0.60em !important
} }
:host ::slotted([current]){ :host ::slotted([current]){
background-color: #F4E284 !important; background-color: var(--icon-bg-color-hover) !important;
color: #fff;
} }
:host ::slotted(*){ :host ::slotted(*){
padding: 0.25em 1.25em 0.25em 0.25em !important; padding: 0.25em 1.25em 0.25em 0.25em !important;
@ -64,8 +66,8 @@ export class SeMenu extends HTMLElement {
switch (name) { switch (name) {
case 'src': case 'src':
image.src = newValue; image.src = newValue;
image.width = 18; image.width = 24;
image.height = 18; image.height = 24;
this.$label.prepend(image); this.$label.prepend(image);
break; break;
case 'label': case 'label':

View File

@ -8,8 +8,8 @@ template.innerHTML = `
</style> </style>
<elix-menu-item> <elix-menu-item>
<div style="display:flex; align-items: center;"> <div style="display:flex; align-items: center;">
<img src="./images/logo.svg" alt="icon" style="display:none;" /> <img src="./images/logo.svg" alt="icon" style="display:none;" width="24"/>
<span style="margin-left: 3px;"></span> <span style="margin-left: 7px;"></span>
</div> </div>
</elix-menu-item> </elix-menu-item>
`; `;