diff options
Diffstat (limited to 'client/src/app/menu/menu.component.scss')
-rw-r--r-- | client/src/app/menu/menu.component.scss | 207 |
1 files changed, 149 insertions, 58 deletions
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index b05173751..5bff0c328 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss | |||
@@ -6,7 +6,8 @@ | |||
6 | height: calc(100vh - #{$header-height}); | 6 | height: calc(100vh - #{$header-height}); |
7 | padding: 0; | 7 | padding: 0; |
8 | width: $menu-width; | 8 | width: $menu-width; |
9 | z-index: 10000; | 9 | z-index: z(menu); |
10 | scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor); | ||
10 | } | 11 | } |
11 | 12 | ||
12 | menu { | 13 | menu { |
@@ -26,9 +27,13 @@ menu { | |||
26 | overflow-y: auto; | 27 | overflow-y: auto; |
27 | } | 28 | } |
28 | 29 | ||
30 | @media not all and (hover: hover) and (pointer: fine) { | ||
31 | overflow-y: auto; | ||
32 | } | ||
33 | |||
29 | &.logged-in { | 34 | &.logged-in { |
30 | .panel-block { | 35 | .panel-block { |
31 | margin-bottom: 25px; | 36 | margin-bottom: 20px; |
32 | } | 37 | } |
33 | 38 | ||
34 | .block-title { | 39 | .block-title { |
@@ -87,22 +92,6 @@ menu { | |||
87 | @include apply-svg-color(var(--menuForegroundColor)); | 92 | @include apply-svg-color(var(--menuForegroundColor)); |
88 | } | 93 | } |
89 | } | 94 | } |
90 | |||
91 | .dropdown-item { | ||
92 | @include dropdown-with-icon-item; | ||
93 | |||
94 | my-global-icon { | ||
95 | width: 22px; | ||
96 | height: 22px; | ||
97 | |||
98 | &[iconName="sign-out"] { | ||
99 | position: relative; | ||
100 | right: -1px; | ||
101 | height: 21px; | ||
102 | width: 21px; | ||
103 | } | ||
104 | } | ||
105 | } | ||
106 | } | 95 | } |
107 | } | 96 | } |
108 | 97 | ||
@@ -142,7 +131,7 @@ menu { | |||
142 | } | 131 | } |
143 | 132 | ||
144 | .panel-block { | 133 | .panel-block { |
145 | margin-bottom: 45px; | 134 | margin-bottom: 15px; |
146 | 135 | ||
147 | a { | 136 | a { |
148 | @include disable-default-a-behaviour; | 137 | @include disable-default-a-behaviour; |
@@ -197,58 +186,160 @@ menu { | |||
197 | } | 186 | } |
198 | 187 | ||
199 | .footer { | 188 | .footer { |
200 | padding-bottom: 15px; | ||
201 | padding-left: $menu-lateral-padding; | ||
202 | padding-right: $menu-lateral-padding; | ||
203 | width: $menu-width; | 189 | width: $menu-width; |
190 | padding-bottom: 15px; | ||
204 | 191 | ||
205 | .language, .shortcuts, .color-palette { | 192 | .bottom-links { |
206 | display: inline-block; | 193 | display: flex; |
207 | color: $menu-bottom-color; | 194 | flex-direction: column; |
208 | cursor: pointer; | 195 | padding: 0 $menu-lateral-padding; |
209 | font-size: 12px; | 196 | } |
210 | font-weight: $font-semibold; | ||
211 | 197 | ||
212 | .icon { | 198 | $footer-links-base-opacity: .8; |
213 | @include disable-outline; | ||
214 | @include icon(28px); | ||
215 | opacity: 0.9; | ||
216 | 199 | ||
217 | &.icon-language { | 200 | .footer-links { |
218 | position: relative; | 201 | &, > div { |
219 | top: -1px; | 202 | display: flex; |
220 | width: 28px; | 203 | flex-wrap: wrap; |
221 | height: 24px; | 204 | } |
222 | 205 | ||
223 | background-image: url('../../assets/images/menu/language.png'); | 206 | a, span[role=button] { |
207 | display: inline-block; | ||
208 | text-decoration: none; | ||
209 | color: var(--mainBackgroundColor); | ||
210 | opacity: $footer-links-base-opacity; | ||
211 | white-space: nowrap; | ||
212 | font-size: 90%; | ||
213 | font-weight: 500; | ||
214 | line-height: 1.4rem; | ||
215 | margin-right: 8px; | ||
216 | |||
217 | &.inline-global-icon { | ||
218 | display: inline-flex; | ||
219 | align-items: center; | ||
220 | white-space: nowrap; | ||
221 | height: 1.4rem; | ||
222 | |||
223 | my-global-icon { | ||
224 | @include apply-svg-color(var(--mainBackgroundColor)); | ||
225 | |||
226 | display: flex; | ||
227 | width: auto; | ||
228 | height: 90%; | ||
229 | margin-right: .2rem; | ||
230 | } | ||
224 | } | 231 | } |
232 | } | ||
233 | } | ||
225 | 234 | ||
226 | &.icon-shortcuts { | 235 | .footer-copyleft small a { |
227 | position: relative; | 236 | @include disable-default-a-behaviour; |
228 | top: -1px; | ||
229 | width: 24px; | ||
230 | height: 24px; | ||
231 | 237 | ||
232 | background-image: url('../../assets/images/menu/keyboard.png'); | 238 | color: var(--mainBackgroundColor); |
233 | filter: invert(100%); | 239 | opacity: $footer-links-base-opacity - .2; |
234 | } | 240 | } |
241 | } | ||
242 | } | ||
235 | 243 | ||
236 | &.icon-moonsun { | 244 | .dropdown-menu { |
237 | margin-left: 10px; | 245 | width: calc(100% + 40px); |
238 | position: relative; | 246 | } |
239 | top: -1px; | ||
240 | width: 24px; | ||
241 | height: 24px; | ||
242 | 247 | ||
243 | background-image: url('../../assets/images/menu/moonsun.svg'); | 248 | .dropdown-item { |
244 | } | 249 | @include dropdown-with-icon-item; |
245 | 250 | ||
246 | &:hover { | 251 | cursor: pointer; |
247 | opacity: 1; | 252 | display: flex; |
248 | } | 253 | align-items: center; |
249 | } | 254 | |
255 | i.glyphicon-menu-right { | ||
256 | opacity: .4; | ||
257 | } | ||
258 | |||
259 | my-global-icon { | ||
260 | &[iconName="cog"], | ||
261 | &[iconName="sign-out"] { | ||
262 | position: relative; | ||
263 | right: -2px; | ||
264 | height: 20px; | ||
265 | width: 20px; | ||
250 | } | 266 | } |
251 | } | 267 | } |
268 | |||
269 | my-global-icon.not-displayed { | ||
270 | display: none; | ||
271 | } | ||
272 | |||
273 | &:hover { | ||
274 | my-global-icon.hover-display-toggle.not-displayed { | ||
275 | display: inherit; | ||
276 | } | ||
277 | my-global-icon.hover-display-toggle { | ||
278 | display: none; | ||
279 | } | ||
280 | } | ||
281 | } | ||
282 | |||
283 | .more-settings { | ||
284 | text-transform: uppercase; | ||
285 | font-size: 80%; | ||
286 | color: #6c757d; | ||
287 | } | ||
288 | |||
289 | .icon { | ||
290 | @include disable-outline; | ||
291 | @include icon(22px); | ||
292 | opacity: 0.8; | ||
293 | |||
294 | &.icon-shortcuts { | ||
295 | position: relative; | ||
296 | top: -1px; | ||
297 | margin-right: 10px; | ||
298 | |||
299 | background-image: url('../../assets/images/menu/keyboard.png'); | ||
300 | } | ||
301 | } | ||
302 | |||
303 | input[type=checkbox]{ | ||
304 | position: absolute; | ||
305 | visibility: hidden; | ||
306 | } | ||
307 | |||
308 | label { | ||
309 | cursor: pointer; | ||
310 | text-indent: -9999px; | ||
311 | width: 35px; | ||
312 | height: 20px; | ||
313 | background: #cccccc; | ||
314 | display: block; | ||
315 | border-radius: 100px; | ||
316 | position: relative; | ||
317 | margin: 0; | ||
318 | |||
319 | &:after { | ||
320 | content: ''; | ||
321 | position: absolute; | ||
322 | top: 3px; | ||
323 | left: 3px; | ||
324 | width: 14px; | ||
325 | height: 14px; | ||
326 | background: var(--mainBackgroundColor); | ||
327 | border-radius: 50%; | ||
328 | transition: 0.3s ease-out; | ||
329 | } | ||
330 | |||
331 | &:active:after { | ||
332 | width: 40px; | ||
333 | } | ||
334 | } | ||
335 | |||
336 | input:checked + label { | ||
337 | background: var(--mainColor); | ||
338 | |||
339 | &:after { | ||
340 | left: calc(100% - 3px); | ||
341 | transform: translateX(-100%); | ||
342 | } | ||
252 | } | 343 | } |
253 | 344 | ||
254 | @media screen and (max-width: $mobile-view) { | 345 | @media screen and (max-width: $mobile-view) { |