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

N°4021 - Change approach for sticky header, use the ScrollMagic lib as in the scrolling tabs to use the same abstraction level everywhere

Browse Source
This commit is contained in:
Molkobain
2021-05-27 17:42:29 +02:00
parent e669cfcea1
commit b8ef4885e5
3 changed files with 42 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
css/backoffice/blocks-integrations/_panel-within-modal.scss
View File

@@ -3,6 +3,9 @@
* @license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-panel-within-modal--sticky-sentinel-top--top: -1 * $ibo-vendors-jqueryui--ui-dialog-content--padding-y !default;
$ibo-panel-within-modal--sticky-sentinel-top--height: $ibo-vendors-jqueryui--ui-dialog-content--padding-y !default;
$ibo-panel-within-modal--header--top--is-sticky: -1 * $ibo-vendors-jqueryui--ui-dialog-content--padding-y !default;
.ui-dialog-content {
@@ -13,12 +16,14 @@ $ibo-panel-within-modal--header--top--is-sticky: -1 * $ibo-vendors-jqueryui--ui-
* - We don't want to hardcode the modal's markup selector if not necessary as it could change in the future (and is already different in read-only vs edition)
* - Unlike in JS, there no easy way to find the closest descendant
*/
.ibo-panel {
.ibo-panel.ibo-has-sticky-header {
/* Sticky header rules */
> .ibo-panel--header {
&.ibo-is-sticking {
> .ibo-sticky-sentinel-top {
top: $ibo-panel-within-modal--sticky-sentinel-top--top;
height: $ibo-panel-within-modal--sticky-sentinel-top--height;
}
> .ibo-panel--header.ibo-is-sticking {
top: $ibo-panel-within-modal--header--top--is-sticky;
}
}
}
}

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

@@ -267,8 +267,8 @@ $ibo-panel-colors: (
/* All transitions should have a specific duration except for the header's "top" property otherwise it feels laggy */
/* - The header itself */
transition-property: $ibo-panel--base-transition-property, top;
transition-duration: $ibo-panel--base-transition-duration, 0s;
transition-property: $ibo-panel--base-transition-property, top, background-color;
transition-duration: $ibo-panel--base-transition-duration, 0s, 0s;
transition-timing-function: $ibo-panel--base-transition-timing-function;
/* - Impacted descendants (we don't put "*" as it can get shaky otherwise) */
.ibo-panel--title,