1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
// 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;
$grah-topbar-item-margin: space-x(0.75);
/// 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;
}
}