Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

themeable hover states for nav-panel

Browse source
This commit is contained in:
xj9 2017-03-08 22:36:03 -07:00
parent ba4f7ef3ef
commit aff432a572
1 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/nav_panel/nav_panel.vue
View file

@ -1,24 +1,24 @@
<template> <template>
<div class="nav-panel"> <div class="nav-panel">
<div class="panel panel-default base01-background"> <div class="panel panel-default base02-background">
<ul> <ul>
<li v-if='currentUser'> <li v-if='currentUser'>
<router-link to='/main/friends'> <router-link class="base01-background" to='/main/friends'>
Timeline Timeline
</router-link> </router-link>
</li> </li>
<li v-if='currentUser'> <li v-if='currentUser'>
<router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> <router-link class="base01-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
Mentions Mentions
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link to='/main/public'> <router-link class="base01-background" to='/main/public'>
Public Timeline Public Timeline
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link to='/main/all'> <router-link class="base01-background" to='/main/all'>
The Whole Known Network The Whole Known Network
</router-link> </router-link>
</li> </li>
@ -30,7 +30,6 @@
<script src="./nav_panel.js" ></script> <script src="./nav_panel.js" ></script>
<style lang="scss"> <style lang="scss">
.nav-panel ul { .nav-panel ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -39,7 +38,15 @@
.nav-panel li { .nav-panel li {
border-bottom: 1px solid; border-bottom: 1px solid;
padding: 0.8em 0.85em; padding: 0;
&:first-child a {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
&:last-child a {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
} }
.nav-panel li:last-child { .nav-panel li:last-child {
@ -48,10 +55,16 @@
.nav-panel a { .nav-panel a {
display: block; display: block;
width: 100%; padding: 0.8em 0.85em;
&:hover {
background-color: transparent;
}
&.router-link-active { &.router-link-active {
font-weight: bold font-weight: bolder;
background-color: transparent;
&:hover {
text-decoration: underline;
}
} }
} }