autonomic-cooperative
/
hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: better look of user panel on mobile

This commit is contained in:
gaelle morin 2020-06-09 12:10:13 +02:00
parent 57d775fa01
commit eaa7478196
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/styles/base/header.scss
View File

@ -127,9 +127,13 @@ sib-notifications {
}
&:focus {
background-color: var(--color-user-panel-header-background-open);
background-color: transparent;
color: var(--color-user-panel-header-text-open);
outline: none;
@include breakpoint(lg) {
background-color: var(--color-user-panel-header-background-open);
}
}
}
@ -143,14 +147,14 @@ sib-notifications {
}
hubl-user-avatar {
height: 4.8rem;
margin-right: 2rem;
width: 4.8rem;
height: 3.3rem;
margin-right: 0;
width: 3.3rem;
@include breakpoint(sm) {
height: 3.3rem;
margin-right: 0;
width: 3.3rem;
@include breakpoint(lg) {
height: 4.8rem;
margin-right: 2rem;
width: 4.8rem;
}
}
@ -178,8 +182,14 @@ sib-notifications {
position: absolute;
right: 0;
z-index: 1;
width: 100%;
top: 83px;
/* Quick fix for mobile version */
width: 215px;
top: 42px;
@include breakpoint (lg) {
width: 100%;
top: 83px;
}
> nav {
background-color: var(--color-user-panel-list-background);
@ -245,12 +255,12 @@ sib-notifications {
.mobile-menu-icon {
display: none;
display: block;
padding-left: 0;
font-size: 24px;
@include breakpoint(sm) {
display: block;
padding-left: 0;
font-size: 24px;
@include breakpoint(lg) {
display: none;
}
}