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

N°4021 - Add support for tab container for the sticky header

Browse Source
This commit is contained in:
Molkobain
2021-05-28 16:35:02 +02:00
committed by Eric
parent 15c92440fb
commit a490efe7fa
8 changed files with 213 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
css/backoffice/components/_panel.scss
View File

@@ -17,8 +17,6 @@
*/
/* SCSS variables */
$ibo-panel--spacing-top: 24px !default;
/* - Base variables for the block */
$ibo-panel--base-border-size: 1px !default;
$ibo-panel--base-border-style: solid !default;
@@ -35,18 +33,14 @@ $ibo-panel--base-transition: $ibo-panel--base-transition-property $ibo-panel--ba
}
/* - Specific variables for the block */
$ibo-panel--header--margin-bottom: 4px !default;
$ibo-panel--header--background-color--is-sticking: $ibo-color-grey-100 !default;
$ibo-panel--header--border--is-sticking: $ibo-panel--base-border !default;
$ibo-panel--header--padding-y--is-sticking: 4px !default;
$ibo-panel--spacing-top: 24px !default;
$ibo-panel--highlight--width: 100% !default;
$ibo-panel--highlight--height: 8px !default;
$ibo-panel--highlight--border-radius: $ibo-border-radius-400 $ibo-border-radius-400 0 0 !default;
$ibo-panel--highlight--padding-bottom: $ibo-panel--highlight--height !default;
$ibo-panel--body--z-index: 1 !default;
$ibo-panel--body--background-color: $ibo-color-white-100 !default;
$ibo-panel--body--padding-bottom: 24px !default;
$ibo-panel--body--padding-top: $ibo-panel--body--padding-bottom + $ibo-panel--highlight--height !default;
@@ -54,6 +48,12 @@ $ibo-panel--body--padding-x: 16px !default;
$ibo-panel--body--border-radius: $ibo-border-radius-500 !default;
$ibo-panel--body--border: $ibo-panel--base-border !default;
$ibo-panel--header--z-index: $ibo-panel--body--z-index + 1 !default; /* Should always be above the body */
$ibo-panel--header--margin-bottom: 4px !default;
$ibo-panel--header--background-color--is-sticking: $ibo-color-grey-100 !default;
$ibo-panel--header--border--is-sticking: $ibo-panel--base-border !default;
$ibo-panel--header--padding-y--is-sticking: 4px !default;
$ibo-panel--icon--size: 48px !default;
$ibo-panel--icon--spacing: 16px !default;
$ibo-panel--icon--size-as-medallion: 72px !default;
@@ -163,6 +163,8 @@ $ibo-panel-colors: (
}
.ibo-panel--header {
position: relative;
z-index: $ibo-panel--header--z-index;
display: flex;
justify-content: space-between;
align-items: flex-end;
@@ -217,6 +219,7 @@ $ibo-panel-colors: (
.ibo-panel--body {
position: relative;
z-index: $ibo-panel--body--z-index;
padding: $ibo-panel--body--padding-top $ibo-panel--body--padding-x $ibo-panel--body--padding-bottom $ibo-panel--body--padding-x;
background-color: $ibo-panel--body--background-color;
border: $ibo-panel--body--border;
@@ -262,8 +265,8 @@ $ibo-panel-colors: (
// Note: Direct child selector is mandatory, otherwise a panel within a panel could be affected too when it shouldn't (eg. dashboard in an object, n:n panel)
> .ibo-panel--header {
position: sticky;
z-index: 1;
top: 0; /* Default, stick on the top of the panel. Custom integrations should be done in the "blocks-integrations" partials */
border: transparent; /* To avoid visual glitch during transition, otherwise the border looks black first */
/* All transitions should have a specific duration except for the header's "top" property otherwise it feels laggy */
/* - The header itself */