// Form $form-group-margin-bottom: space-x(3); /// Topbar $topbar-height: 56px; // ~ unworthy empirical value (@TODO topbar height calculation) $topbar-input-width: 304px; $topbar-item-margin: space-x(0.5); $topbar-fixed-button-width: 136px; /// Sidebar $sidebar-width: 480px; $sidebar-height: calc(100vh - #{ $topbar-height }); $sidebar-tab-margin-x: space-x(2.5); /// Grid constants $layout-height: calc(100vh - #{ $topbar-height} ); // @TODO: use css custom properties /// Misc $overlay-radius: 5px; @mixin aside-topbar() { $border-color: mix-alpha($navbar-dark-hover-color, 5%); padding: 0 space-x(1); height: 100%; @include right-handed() { border-left: 1px solid $border-color; } @include left-handed() { border-right: 1px solid $border-color } } @mixin top-teaser() { background: linear-gradient( to top, mix-alpha($body-bg, 0%) 0%, mix-alpha($body-bg, 100%) 45% ); } @mixin bottom-teaser() { background: linear-gradient( to bottom, mix-alpha($body-bg, 0%) 0%, mix-alpha($body-bg, 100%) 45% ); } @mixin term-window() { @include hidden-scrollbar; $teaser-height: 16px; background-color: $body-bg; height: 100%; position: relative; z-index: 0; &::before { @include top-teaser; content: ""; z-index: z-index("tile", "top-teaser"); pointer-events: none; position: sticky; top: 0; height: $teaser-height; width: 100%; display: block; } &::after { @include bottom-teaser; content: ""; z-index: z-index("tile", "bottom-teaser"); pointer-events: none; position: sticky; bottom: 0; height: $teaser-height; width: 100%; display: block; } }