Improve main menu design
parent
49751674a1
commit
9d3ca4786a
|
@ -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':
|
||||||
|
|
|
@ -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>
|
||||||
`;
|
`;
|
||||||
|
|
Loading…
Reference in New Issue