-
Notifications
You must be signed in to change notification settings - Fork 297
/
_header.scss
133 lines (115 loc) · 2.79 KB
/
_header.scss
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/**
* The header at the top of the page.
*/
// If we want the shadow to only point downward in the future, set
// box-shadow to: 0 0.125rem 0.25rem -0.125rem rgba(0, 0, 0, 0.11);
.bd-header {
position: sticky;
top: 0;
z-index: $zindex-fixed;
// Overrides bootstrap
background: var(--pst-color-on-background) !important;
box-shadow: 0 0.125rem 0.25rem 0 var(--pst-color-shadow);
min-height: var(--pst-header-height);
width: 100%;
padding: 0.5rem 0;
max-width: 100vw;
.bd-header__inner {
height: 100%;
gap: 1rem;
padding-left: 1rem;
padding-right: 1rem;
}
// Hide the header items on mobile
.navbar-header-items {
display: none;
@include media-breakpoint-up($breakpoint-sidebar-primary) {
display: inherit;
padding: 0;
}
}
#navbar-end,
#navbar-center,
#navbar-start {
display: flex;
align-items: center;
flex-flow: wrap;
}
#navbar-end,
#navbar-center {
gap: 1rem;
}
// A little smaller because this is displayed by default on mobile
#navbar-start {
margin-right: auto;
gap: 0.5rem;
}
.navbar-nav {
display: flex;
align-items: center;
// Dropdowns for the extra links
.dropdown {
button {
display: unset;
color: var(--pst-color-text-muted);
border: none;
}
.dropdown-menu {
z-index: $zindex-popover;
border: 1px solid var(--pst-color-border);
box-shadow: 0 0 0.3rem 0.1rem var(--pst-color-shadow);
background-color: var(--pst-color-on-background);
padding: 0.5rem 1rem;
margin: 0.5rem 0;
min-width: 20rem;
// Hide the menu unless show has been clicked
&:not(.show) {
display: none;
}
}
}
}
}
// inline the element in the navbar as long as they fit and use display block when collapsing
.navbar-center-item {
display: inline-block;
}
#navbar-main-elements li.nav-item i {
font-size: 0.7rem;
padding-left: 2px;
vertical-align: middle;
}
/**
* Showing and hiding the sidebar toggle buttons and header items
*/
// Hide the header items on mobile
.bd-header {
// Toggle labels
label {
&.sidebar-toggle {
display: flex;
cursor: pointer;
font-size: 1.2rem;
align-items: center;
color: var(--pst-color-muted);
margin-bottom: 0;
}
&.primary-toggle {
@include media-breakpoint-up($breakpoint-sidebar-primary) {
display: none;
}
}
&.secondary-toggle {
@include media-breakpoint-up($breakpoint-sidebar-secondary) {
display: none;
}
}
}
// Hide the navbar header items on mobile because they're in the sidebar
.navbar-header-items {
display: none;
@include media-breakpoint-up($breakpoint-sidebar-primary) {
display: inherit;
}
}
}