N°2847 Open user menu when clicking user picture or user welcome message

This commit is contained in:
Stephen Abello
2020-08-04 11:53:25 +02:00
parent e22c36c503
commit 4e7b68aa9a
6 changed files with 99 additions and 45 deletions

View File

@@ -19,6 +19,7 @@
/* SCSS variables */
$ibo-popover-menu--item--text-color: $ibo-color-grey-900 !default;
$ibo-popover-menu--item--hyperlink-color: $ibo-popover-menu--item--text-color !default;
$ibo-popover-menu--item--border-radius: $ibo-popover-menu--border-radius !default;
.ibo-popover-menu--item{
padding: 12px 24px 12px 16px;
@@ -31,4 +32,10 @@ $ibo-popover-menu--item--hyperlink-color: $ibo-popover-menu--item--text-color !d
background-color: var(--ibo-color-grey-200);
color: inherit;
}
&:first-child{
border-radius: $ibo-popover-menu--item--border-radius $ibo-popover-menu--item--border-radius 0 0;
}
&:last-child {
border-radius: 0 0 $ibo-popover-menu--item--border-radius $ibo-popover-menu--item--border-radius;
}
}

View File

@@ -18,7 +18,7 @@
/* SCSS variables */
$ibo-popover-menu--background-color: $ibo-color-white-100 !default;
$ibo-popover-menu--border-radius: 3px !default;
$ibo-popover-menu--border-radius: $ibo-border-radius-300 !default;
$ibo-popover-menu--padding: 0 !default;
.ibo-popover-menu{

View File

@@ -112,6 +112,7 @@ $ibo-navigation-menu--menu-node--border-radius: $ibo-border-radius-500 !default;
$ibo-navigation-menu--bottom-part--padding-y: 24px !default;
$ibo-navigation-menu--bottom-part--padding-x: 0px !default;
$ibo-navigation-menu--bottom-part-collapsed--direct-child--margin: auto 0 !default;
$ibo-navigation-menu--notifications-toggler--font-size: 28px !default;
@@ -170,6 +171,8 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
}
}
.ibo-navigation-menu--bottom-part{
padding: $ibo-navigation-menu--bottom-part--padding-y $ibo-navigation-menu--bottom-part--padding-x;
.ibo-navigation-menu--notifications{
display: none;
}
@@ -179,11 +182,13 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
display: block;
}
.ibo-navigation-menu--user-picture{
.ibo-navigation-menu--user-picture--image{
margin:$ibo-navigation-menu--user-picture--image-expanded--margin;
border: $ibo-navigation-menu--user-picture--image-expanded--border;
border-radius: $ibo-navigation-menu--user-picture--image-expanded--border-radius;
width: $ibo-navigation-menu--user-picture--image-expanded--size;
>a {
margin: $ibo-navigation-menu--user-picture--image-expanded--margin;
.ibo-navigation-menu--user-picture--image {
border: $ibo-navigation-menu--user-picture--image-expanded--border;
border-radius: $ibo-navigation-menu--user-picture--image-expanded--border-radius;
width: $ibo-navigation-menu--user-picture--image-expanded--size;
}
}
}
}
@@ -255,12 +260,14 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
.ibo-navigation-menu--bottom-part{
height: 150px;
background-color: $ibo-navigation-menu--bottom-part--background-color;
padding: $ibo-navigation-menu--bottom-part--padding-y $ibo-navigation-menu--bottom-part--padding-x;
display: flex;
flex-direction: column;
align-items: center;
@extend %ibo-fully-centered-content;
justify-content: space-between;
flex-direction: column;
>*
{
margin: $ibo-navigation-menu--bottom-part-collapsed--direct-child--margin;
}
}
.ibo-navigation-menu--toggler,
@@ -491,10 +498,9 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
}
.ibo-navigation-menu--user-info{
display: flex;
flex-direction: column;
align-content: center;
@extend %ibo-fully-centered-content;
justify-content: space-between;
flex-direction: column;
.ibo-navigation-menu--user-picture{
display: flex;
@@ -510,6 +516,9 @@ $ibo-navigation-menu--user-picture--image-expanded--size: 72px !default;
}
.ibo-navigation-menu--user-welcome-message{
@extend %ibo-font-ral-med-250;
.ibo-navigation-menu--user-welcome-message--text, .ibo-navigation-menu--user-welcome-message--toggler{
color: $ibo-navigation-menu--user--text-color;
}
}
.ibo-navigation-menu--user-welcome-message--toggler{
padding-left: $ibo-navigation-menu--user-welcome-message--toggler--padding-left;