From 829be6e8b7e9a09f118577745906c19926c20416 Mon Sep 17 00:00:00 2001 From: Charles de Lacombe Date: Wed, 28 Mar 2018 11:43:09 +0200 Subject: 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? --- client/src/app/menu/menu.component.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'client/src/app/menu/menu.component.scss') diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index da5a581a1..c36a7aa36 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -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); -- cgit v1.2.3