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

N°3628 - Navigation menu: Add visual hint on toggler when silo applied

Browse Source
This commit is contained in:
Molkobain
2021-01-18 15:40:22 +01:00
parent daba1d3bba
commit f4b9b0b313
4 changed files with 82 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
css/backoffice/layout/_navigation-menu.scss
View File

@@ -31,15 +31,6 @@ $ibo-navigation-menu--top-part--padding-y: $ibo-navigation-menu--body--padding-y
$ibo-navigation-menu--top-part--padding-x: $ibo-navigation-menu--body--padding-x !default;
$ibo-navigation-menu--top-part--elements-spacing: 20px !default;
$ibo-navigation-menu--silo-selection--width: 70% !default;
$ibo-navigation-menu--silo-selection--margin-left: 15px !default;
$ibo-navigation-menu--silo-selection--input--action-button--hierarchy--padding-right: -42px !default;
$ibo-navigation-menu--silo-selection--input--padding-right: 38px !default;
$ibo-navigation-menu--silo-selection--input-select--action-button--hierarchy--margin-left: -42px !default;
$ibo-navigation-menu--silo-selection--input-select-autocomplete--padding-left: 60px !default;
$ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--search--margin-left: -42px !default;
$ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--hierarchy--margin-left: -60px !default;
$ibo-navigation-menu--middle-part--padding-top: 24px !default;
$ibo-navigation-menu--middle-part--padding-bottom: 16px !default;
$ibo-navigation-menu--middle-part--padding-x: $ibo-navigation-menu--body--padding-x !default;
@@ -58,6 +49,26 @@ $ibo-navigation-menu--bottom-part--background-color: $ibo-color-grey-800 !defaul
$ibo-navigation-menu--bottom-part--is-expanded--padding-top: 24px !default;
$ibo-navigation-menu--bottom-part--is-expanded--padding-bottom: 12px !default;
$ibo-navigation-menu--visual-hint--size: 16px !default;
$ibo-navigation-menu--visual-hint--background-color: $ibo-color-red-600 !default;
$ibo-navigation-menu--visual-hint--border-radius: $ibo-border-radius-full !default;
$ibo-navigation-menu--silo-selection--width: 70% !default;
$ibo-navigation-menu--silo-selection--margin-left: 15px !default;
$ibo-navigation-menu--silo-selection--input--action-button--hierarchy--padding-right: -42px !default;
$ibo-navigation-menu--silo-selection--input--padding-right: 38px !default;
$ibo-navigation-menu--silo-selection--input-select--action-button--hierarchy--margin-left: -42px !default;
$ibo-navigation-menu--silo-selection--input-select-autocomplete--padding-left: 60px !default;
$ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--search--margin-left: -42px !default;
$ibo-navigation-menu--silo-selection--input-select-autocomplete--action-button--hierarchy--margin-left: -60px !default;
$ibo-navigation-menu--silo-visual-hint--top: 2px !default;
$ibo-navigation-menu--silo-visual-hint--right: 0 !default;
$ibo-navigation-menu--silo-visual-hint--size: $ibo-navigation-menu--visual-hint--size !default;
$ibo-navigation-menu--silo-visual-hint--background-color: $ibo-navigation-menu--visual-hint--background-color !default;
$ibo-navigation-menu--silo-visual-hint--border: 2px solid $ibo-navigation-menu--body--background-color !default;
$ibo-navigation-menu--silo-visual-hint--border-radius: $ibo-navigation-menu--visual-hint--border-radius !default;
$ibo-navigation-menu--action--padding-x: 8px !default;
$ibo-navigation-menu--action--padding-y: 10px !default;
$ibo-navigation-menu--action--border-radius: $ibo-border-radius-500 !default;
@@ -163,13 +174,12 @@ $ibo-navigation-menu--notifications-toggler--color: $ibo-color-grey-600 !default
$ibo-navigation-menu--notifications-toggler--color--is-loaded: $ibo-color-grey-300 !default;
$ibo-navigation-menu--notifications-toggler--color--on-hover: $ibo-color-white-200 !default;
$ibo-navigation-menu--notifications-toggler--new-messages--width: 16px !default;
$ibo-navigation-menu--notifications-toggler--new-messages--height: 16px !default;
$ibo-navigation-menu--notifications-toggler--new-messages--top: -2px !default;
$ibo-navigation-menu--notifications-toggler--new-messages--right: -7px !default;
$ibo-navigation-menu--notifications-toggler--new-messages--background-color: $ibo-color-red-600 !default;
$ibo-navigation-menu--notifications-toggler--new-messages--border: solid 2px $ibo-navigation-menu--bottom-part--background-color !default;
$ibo-navigation-menu--notifications-toggler--new-messages--border-radius: $ibo-border-radius-full !default;
$ibo-navigation-menu--notifications-toggler--new-messages--size: $ibo-navigation-menu--visual-hint--size !default;
$ibo-navigation-menu--notifications-toggler--new-messages--background-color: $ibo-navigation-menu--visual-hint--background-color !default;
$ibo-navigation-menu--notifications-toggler--new-messages--border: 2px solid $ibo-navigation-menu--bottom-part--background-color !default;
$ibo-navigation-menu--notifications-toggler--new-messages--border-radius: $ibo-navigation-menu--visual-hint--border-radius !default;
$ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--width: 10px !default;
$ibo-navigation-menu--user-notifications--notifications-toggler--new-messages--height: 10px !default;
@@ -215,6 +225,9 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default;
.ibo-navigation-menu--silo-selection{
display: inline-block;
}
.ibo-navigation-menu--silo-visual-hint{
display: none;
}
.ibo-navigation-menu--body{
width: $ibo-navigation-menu--body--width-expanded;
@@ -383,6 +396,7 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default;
}
/* - Toggler */
.ibo-navigation-menu--toggler{
position: relative; /* For the silo visual hint to be placed relatively to it */
display: inline-flex;
/* Width is define here in addition of the icon so we can fix its width whether the menu is collapsed or expanded */
width: $ibo-navigation-menu--toggler--width;
@@ -447,6 +461,16 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default;
}
}
}
.ibo-navigation-menu--silo-visual-hint{
position: absolute;
top: $ibo-navigation-menu--silo-visual-hint--top;
right: $ibo-navigation-menu--silo-visual-hint--right;
width: $ibo-navigation-menu--silo-visual-hint--size;
height: $ibo-navigation-menu--silo-visual-hint--size;
background-color: $ibo-navigation-menu--silo-visual-hint--background-color;
border: $ibo-navigation-menu--silo-visual-hint--border;
border-radius: $ibo-navigation-menu--silo-visual-hint--border-radius;
}
/* - Menu groups */
@@ -698,8 +722,8 @@ $ibo-navigation-menu--user-info--height--is-expanded: 100% !default;
.ibo-navigation-menu--notifications-toggler--new-messages{
top: $ibo-navigation-menu--notifications-toggler--new-messages--top;
right: $ibo-navigation-menu--notifications-toggler--new-messages--right;
width: $ibo-navigation-menu--notifications-toggler--new-messages--width;
height: $ibo-navigation-menu--notifications-toggler--new-messages--height;
width: $ibo-navigation-menu--notifications-toggler--new-messages--size;
height: $ibo-navigation-menu--notifications-toggler--new-messages--size;
}
}