Skip to content

Commit

Permalink
Sticky headers for BCD table, on desktop
Browse files Browse the repository at this point in the history
On desktop with sufficient browser height (determined by a media
query on `(min-height: $screen-height-place-limit)`), make the
headers of the BCD table sticky against the bottom of the sticky
page header.

Signed-off-by: FeRD (Frank Dana) <ferdnyc@gmail.com>
  • Loading branch information
ferdnyc committed Jul 13, 2024
1 parent 118f71b commit 9d76a58
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// Sticky BCD table headers, on sufficiently tall screens
@use "../../../ui/vars" as *;

@media (min-height: $screen-height-place-limit) {
.bc-table {
background-color: var(--background-primary);
position: relative;

thead {
--offset: var(--sticky-header-with-actions-height);
--thead-z-index: calc(var(--z-index-main-header) - 100);

position: sticky;
top: var(--offset);
z-index: var(--thead-z-index);
}
}

.table-container {
overflow: visible;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,7 @@ dl.bc-notes-list {
@import "./index-desktop";
@import "./index-desktop-md";
@import "./index-desktop-xl";
@import "./index-desktop-sticky";

.bcd-cell-text-wrapper {
display: flex;
Expand Down

0 comments on commit 9d76a58

Please sign in to comment.