N°4021 - Introduce sticky header for panels and object details (tab container to be done)

This commit is contained in:
Molkobain
2021-05-25 20:16:36 +02:00
parent dd284a6c1d
commit 3ee4a14c56
12 changed files with 526 additions and 54 deletions

View File

@@ -20,6 +20,14 @@
$ibo-is-code--background-color: $ibo-color-white-200 !default;
$ibo-is-code--padding: 1.25rem 1.5rem !default;
$ibo-sticky-sentinel--left: 0 !default;
$ibo-sticky-sentinel--right: 0 !default;
$ibo-sticky-sentinel--height: 0 !default;
$ibo-sticky-sentinel-top--top: 0 !default;
$ibo-sticky-sentinel-top--height: $ibo-sticky-sentinel--height !default;
$ibo-sticky-sentinel-bottom--bottom: 0 !default;
$ibo-sticky-sentinel-bottom--height: $ibo-sticky-sentinel--height !default;
/**************/
/* Visibility */
/**************/
@@ -126,6 +134,28 @@ body.ibo-has-fullscreen-descendant {
@extend %ibo-font-code-150;
}
/***********************************************************************/
/* Sticky headers */
/* */
/* Used as a trigger to make an element stick to another during scroll */
/***********************************************************************/
.ibo-sticky-sentinel {
position: absolute;
left: $ibo-sticky-sentinel--left;
right: $ibo-sticky-sentinel--right;
visibility: hidden;
}
.ibo-sticky-sentinel-top {
top: $ibo-sticky-sentinel-top--top;
height: $ibo-sticky-sentinel-top--height; /* To be overloaded by use cases */
}
.ibo-sticky-sentinel-bottom {
bottom: $ibo-sticky-sentinel-bottom--bottom;
height: $ibo-sticky-sentinel-bottom--height; /* To be overloaded by use cases */
}
%ibo-medallion {
position: relative;
border-radius: var(--ibo-border-radius-full);