Use CSS calc to reduce complexity when offsetting height for system bar and performance bar
Defining problem
When we calculate the height (or top position) of certain elements that are positioned sticky
or fixed
, we need to take into consideration whether the system bar and performance bar are opened:
This results in a complex CSS that would grow combinatorically if we were to add more of these "bars".
.diff-tree-list {
top: $top-pos;
.with-system-header & {
top: $top-pos + $system-header-height;
}
.with-system-header.with-performance-bar & {
top: $top-pos + $system-header-height + $performance-bar-height;
}
.with-performance-bar & {
top: $top-pos + $performance-bar-height;
}
}
Proposal
Widely use the approach from !59150 (merged) utilizing calc()
and CSS Custom properties:
.with-system-header {
--system-header-height: #{$system-header-height};
}
.with-performance-bar {
--performance-bar-height: #{$performance-bar-height};
}
.diff-tree-list {
top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px));
}
We can set the custom properties only once, further reducing the amount of CSS code.
Related
/cc @psimyn (since you've seem to fight similar battle in #322086 (closed))
Edited by Tomas Vik (OOO back on 2024-08-12)