diff options
Diffstat (limited to 'client/src/app/menu/menu.component.scss')
-rw-r--r-- | client/src/app/menu/menu.component.scss | 47 |
1 files changed, 46 insertions, 1 deletions
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index c36a7aa36..e61f4acd3 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss | |||
@@ -1,6 +1,13 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | .menu-wrapper { | ||
5 | position: fixed; | ||
6 | height: calc(100vh - #{$header-height}); | ||
7 | padding: 0; | ||
8 | width: $menu-width; | ||
9 | } | ||
10 | |||
4 | menu { | 11 | menu { |
5 | background-color: $black-background; | 12 | background-color: $black-background; |
6 | margin: 0; | 13 | margin: 0; |
@@ -11,6 +18,13 @@ menu { | |||
11 | overflow: hidden; | 18 | overflow: hidden; |
12 | z-index: 1000; | 19 | z-index: 1000; |
13 | color: $menu-color; | 20 | color: $menu-color; |
21 | overflow-y: auto; | ||
22 | display: flex; | ||
23 | flex-direction: column; | ||
24 | |||
25 | .top-menu { | ||
26 | flex-grow: 1; | ||
27 | } | ||
14 | 28 | ||
15 | .logged-in-block { | 29 | .logged-in-block { |
16 | height: 100px; | 30 | height: 100px; |
@@ -100,7 +114,7 @@ menu { | |||
100 | a { | 114 | a { |
101 | display: flex; | 115 | display: flex; |
102 | align-items: center; | 116 | align-items: center; |
103 | padding-left: 26px; | 117 | padding-left: $menu-left-padding; |
104 | color: $menu-color; | 118 | color: $menu-color; |
105 | cursor: pointer; | 119 | cursor: pointer; |
106 | height: 40px; | 120 | height: 40px; |
@@ -155,4 +169,35 @@ menu { | |||
155 | } | 169 | } |
156 | } | 170 | } |
157 | } | 171 | } |
172 | |||
173 | .footer { | ||
174 | margin-bottom: 15px; | ||
175 | padding-left: $menu-left-padding; | ||
176 | |||
177 | .language { | ||
178 | display: inline-block; | ||
179 | color: $menu-bottom-color; | ||
180 | cursor: pointer; | ||
181 | font-size: 12px; | ||
182 | font-weight: $font-semibold; | ||
183 | |||
184 | .icon { | ||
185 | @include icon(28px); | ||
186 | opacity: 0.9; | ||
187 | |||
188 | &.icon-language { | ||
189 | position: relative; | ||
190 | top: -1px; | ||
191 | width: 28px; | ||
192 | height: 24px; | ||
193 | |||
194 | background-image: url('../../assets/images/menu/language.png'); | ||
195 | } | ||
196 | |||
197 | &:hover { | ||
198 | opacity: 1; | ||
199 | } | ||
200 | } | ||
201 | } | ||
202 | } | ||
158 | } | 203 | } |