aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
authorCharles de Lacombe <ealhad@mail.com>2018-03-28 11:43:09 +0200
committerChocobozzz <me@florianbigard.com>2018-03-28 11:43:09 +0200
commit829be6e8b7e9a09f118577745906c19926c20416 (patch)
tree4bbf03640b4061fd59b038739c7afa042455b7ee /client/src/app/menu
parentc73e83da283c6d4eb094e384d59c4f8eb221507d (diff)
downloadPeerTube-829be6e8b7e9a09f118577745906c19926c20416.tar.gz
PeerTube-829be6e8b7e9a09f118577745906c19926c20416.tar.zst
PeerTube-829be6e8b7e9a09f118577745906c19926c20416.zip
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?
Diffstat (limited to 'client/src/app/menu')
-rw-r--r--client/src/app/menu/menu.component.scss13
1 files changed, 9 insertions, 4 deletions
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 {
91 font-weight: $font-bold; // Bold 91 font-weight: $font-bold; // Bold
92 font-size: 13px; 92 font-size: 13px;
93 margin-bottom: 25px; 93 margin-bottom: 25px;
94 margin-left: 26px;
94 } 95 }
95 96
96 .panel-block { 97 .panel-block {
97 margin-bottom: 45px; 98 margin-bottom: 45px;
98 margin-left: 26px;
99 99
100 a { 100 a {
101 display: flex; 101 display: flex;
102 align-items: center;
103 padding-left: 26px;
102 color: $menu-color; 104 color: $menu-color;
103 cursor: pointer; 105 cursor: pointer;
104 height: 22px; 106 height: 40px;
105 line-height: 22px;
106 font-size: 16px; 107 font-size: 16px;
107 margin-bottom: 15px; 108 transition: background-color .1s ease-in-out;
108 @include disable-default-a-behaviour; 109 @include disable-default-a-behaviour;
109 110
111 &:hover {
112 background-color: rgba(255, 255, 255, 0.15);
113 }
114
110 .icon { 115 .icon {
111 @include icon(22px); 116 @include icon(22px);
112 117