deblan/side_menu
deblan/side_menu
3
6
Fork 5
Code Issues 6 Pull requests 11 Projects Releases 119 Wiki Activity

fully apply Nextcloud AppMenu.vue updated (#326)
Some checks are pending
ci/woodpecker/push/woodpecker Pipeline is pending
Details

Browse source
This commit is contained in:
Simon Vieille 2024-02-14 11:26:54 +01:00
parent 774c314e7b
commit b8aa312a14
Signed by: deblan
GPG key ID: 579388D585F70417
1 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/AppMenu.vue
View file

@ -168,6 +168,7 @@ $header-icon-size: 20px;
flex-shrink: 1;
flex-wrap: wrap;
}
.app-menu-main {
display: flex;
flex-wrap: nowrap;
@ -177,7 +178,6 @@ $header-icon-size: 20px;
height: 50px;
position: relative;
display: flex;
opacity: .7;
&.app-menu-entry__active {
opacity: 1;
@ -217,6 +217,7 @@ $header-icon-size: 20px;
width: $header-icon-size;
height: $header-icon-size;
padding: calc((100% - $header-icon-size) / 2);
box-sizing: content-box;
filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
}
@ -226,8 +227,8 @@ $header-icon-size: 20px;
font-size: 12px;
color: var(--color-primary-text);
text-align: center;
bottom: -5px;
left: 50%;
top: 45%;
display: block;
min-width: 100%;
transform: translateX(-50%);
@ -235,6 +236,7 @@ $header-icon-size: 20px;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
letter-spacing: -0.5px;
}
&:not(.app-menu-entry__hidden-label):not(.app-menu-entry__show-hovered):hover,
@ -242,11 +244,11 @@ $header-icon-size: 20px;
opacity: 1;
.app-menu-entry--label {
opacity: 1;
font-weight: bold;
font-size: 14px;
font-weight: bolder;
bottom: 0;
width: auto;
overflow: visible;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
@ -263,8 +265,10 @@ $header-icon-size: 20px;
&:not(.app-menu-main__hidden-label):not(.app-menu-main__show-hovered):focus-within,
.app-menu-entry:not(.app-menu-entry__hidden-label):hover,
.app-menu-entry:not(.app-menu-entry__hidden-label):focus {
opacity: 1;
img {
margin-top: -6px;
margin-top: -8px;
}
.app-menu-entry--label {
@ -280,7 +284,7 @@ $header-icon-size: 20px;
&.app-menu-main__show-hovered .app-menu-entry:hover,
&.app-menu-main__show-hovered .app-menu-entry:focus {
img {
margin-top: -6px;
margin-top: -8px;
}
.app-menu-entry--label {
@ -295,38 +299,42 @@ $header-icon-size: 20px;
}
::v-deep .app-menu-more .button-vue--vue-tertiary {
color: var(--color-primary-text);
opacity: .7;
margin: 3px;
filter: var(--background-image-invert-if-bright, var(--primary-invert-if-bright));
&:hover {
opacity: 1;
background-color: transparent !important;
&:not([aria-expanded="true"]) {
color: var(--color-primary-element-text);
&:hover {
opacity: 1;
background-color: transparent !important;
}
}
&:focus-visible {
opacity: 1;
background-color: transparent !important;
border-radius: var(--border-radius);
outline: none;
box-shadow: 0 0 0 2px var(--color-primary-text);
}
&:focus-visible {
opacity: 1;
outline: none !important;
}
}
.app-menu-popover-entry {
.app-icon {
position: relative;
height: 44px;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
&.has-unread::after {
background-color: var(--color-main-text);
}
img {
filter: var(--background-invert-if-bright, var(--primary-invert-if-bright));
width: $header-icon-size;
height: $header-icon-size;
padding: calc((50px - $header-icon-size) / 2);
}
}
}
@ -335,7 +343,7 @@ $header-icon-size: 20px;
content: "";
width: 8px;
height: 8px;
background-color: var(--color-primary-text);
background-color: var(--color-primary-element-text);
border-radius: 50%;
position: absolute;
display: block;