composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 02:28:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Popover menu: Introduce option to add a visual hint on the menu toggler

Browse Source 
This adds a visual hint (caret down) on the toggler to help the user understand that clicking on the toggler won't do something right away, but will open a menu instead
This commit is contained in:
Molkobain
2021-03-19 19:46:36 +01:00
parent 482bf2e523
commit 8334b68285
4 changed files with 115 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
css/backoffice/components/popover-menu/_popover-menu.scss
View File

@@ -21,9 +21,11 @@ $ibo-popover-menu--background-color: $ibo-color-white-100 !default;
$ibo-popover-menu--border-radius: $ibo-border-radius-300 !default;
$ibo-popover-menu--padding: 0 !default;
$ibo-popover-menu--toggler-visual-hint--margin-left: 0.5rem !default;
$ibo-popover-menu--section-border-radius: $ibo-popover-menu--border-radius !default;
.ibo-popover-menu{
.ibo-popover-menu {
display: none;
padding: $ibo-popover-menu--padding;
background-color: $ibo-popover-menu--background-color;
@@ -38,8 +40,11 @@ $ibo-popover-menu--section-border-radius: $ibo-popover-menu--border-radius !defa
}
}
.ibo-popover-menu--toggler-visual-hint {
margin-left: $ibo-popover-menu--toggler-visual-hint--margin-left;
}
.ibo-popover-menu--section{
.ibo-popover-menu--section {
display: flex;
flex-direction: column;
align-self: flex-start;
@@ -47,10 +52,11 @@ $ibo-popover-menu--section-border-radius: $ibo-popover-menu--border-radius !defa
width: 100%;
white-space: nowrap;
overflow: hidden; /* To avoid first/last entries of the menu to have no border-radius on hover */
&:first-child{
&:first-child {
border-radius: $ibo-popover-menu--section-border-radius $ibo-popover-menu--section-border-radius 0 0;
}
&:last-child {
border-radius: 0 0 $ibo-popover-menu--section-border-radius $ibo-popover-menu--section-border-radius;
}