commit: 64d71b75cfed41d82a99e3e478fc75d5f81f84bd
parent: 7a5bed0684e0acae1ac69920f467ca8fdac7cff4
Author: lambadalambda <gitgud@rogerbraun.net>
Date: Thu, 9 Mar 2017 03:10:31 -0500
Merge branch 'feature/nav-panel-hover-state' into 'develop'
themeable hover states for nav-panel
See merge request !53
Diffstat:
1 file changed, 23 insertions(+), 10 deletions(-)
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
@@ -1,24 +1,24 @@
<template>
<div class="nav-panel">
- <div class="panel panel-default base01-background">
+ <div class="panel panel-default base02-background">
<ul>
<li v-if='currentUser'>
- <router-link to='/main/friends'>
+ <router-link class="base01-background" to='/main/friends'>
Timeline
</router-link>
</li>
<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
</router-link>
</li>
<li>
- <router-link to='/main/public'>
+ <router-link class="base01-background" to='/main/public'>
Public Timeline
</router-link>
</li>
<li>
- <router-link to='/main/all'>
+ <router-link class="base01-background" to='/main/all'>
The Whole Known Network
</router-link>
</li>
@@ -30,7 +30,6 @@
<script src="./nav_panel.js" ></script>
<style lang="scss">
-
.nav-panel ul {
list-style: none;
margin: 0;
@@ -39,7 +38,15 @@
.nav-panel li {
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 {
@@ -48,10 +55,16 @@
.nav-panel a {
display: block;
- width: 100%;
-
+ padding: 0.8em 0.85em;
+ &:hover {
+ background-color: transparent;
+ }
&.router-link-active {
- font-weight: bold
+ font-weight: bolder;
+ background-color: transparent;
+ &:hover {
+ text-decoration: underline;
+ }
}
}