Add a hover effect on left menu links (#418) (#425)

I:
- removed the `margin-left` on the `.panel-block` to put it on the children
instead
- squashed the `margin-bottom` of the links into their `height` (and rounded it
to 40px, feel free to correct me)
- centered vertically the content of the links
- added the `background-color` change on hover for the links

I put the same color as the `.logged-in-block`. Maybe it should be externalized
as a SCSS variable?

I also added a CSS transition. Is it alright?
pull/429/head
Charles de Lacombe 2018-03-28 11:43:09 +02:00 committed by Chocobozzz
parent c73e83da28
commit 829be6e8b7
1 changed files with 9 additions and 4 deletions

View File

@ -91,22 +91,27 @@ menu {
font-weight: $font-bold; // Bold
font-size: 13px;
margin-bottom: 25px;
margin-left: 26px;
}
.panel-block {
margin-bottom: 45px;
margin-left: 26px;
a {
display: flex;
align-items: center;
padding-left: 26px;
color: $menu-color;
cursor: pointer;
height: 22px;
line-height: 22px;
height: 40px;
font-size: 16px;
margin-bottom: 15px;
transition: background-color .1s ease-in-out;
@include disable-default-a-behaviour;
&:hover {
background-color: rgba(255, 255, 255, 0.15);
}
.icon {
@include icon(22px);