local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Change menu hamburger icon

Browse source
This commit is contained in:
kolaente 2021-07-20 23:57:55 +02:00
parent 3c548b2153
commit 2e2887c2ad
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 37 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/home/topNavigation.vue
View file

@ -16,14 +16,12 @@
@shortkey="() => $store.commit('toggleMenu')" @shortkey="() => $store.commit('toggleMenu')"
v-shortkey="['ctrl', 'e']" v-shortkey="['ctrl', 'e']"
> >
<icon icon="bars"></icon>
</a> </a>
</div> </div>
<a <a
@click="$store.commit('toggleMenu')" @click="$store.commit('toggleMenu')"
class="menu-show-button" class="menu-show-button"
> >
<icon icon="bars"></icon>
</a> </a>
<div class="list-title" ref="listTitle" :style="{'display': currentList.id ? '': 'none'}"> <div class="list-title" ref="listTitle" :style="{'display': currentList.id ? '': 'none'}">
<template v-if="currentList.id"> <template v-if="currentList.id">

39
src/styles/theme/navigation.scss
View file

@ -375,11 +375,46 @@
z-index: 31; z-index: 31;
font-weight: bold; font-weight: bold;
font-size: 2rem; font-size: 2rem;
color: $text; color: $grey-400;
line-height: 1; line-height: 1;
transition: all $transition;
&:hover, &:focus { &:hover, &:focus {
color: $grey-900; height: 1rem;
color: $grey-600;
}
}
.menu-show-button {
height: .75rem;
width: 2rem;
&:before, &:after {
display: block;
content: '';
border-top: 3px solid $grey-400;
border-radius: $radius;
transition: all $transition;
}
&:before {
margin-bottom: .5rem;
}
&:after {
margin-top: .5rem;
}
&:hover, &:focus {
color: $grey-600;
&:before {
margin-bottom: .75rem;
}
&:after {
margin-top: .75rem;
}
} }
} }