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
|
// bs4 navbars require .navbar-expand[-sm|-md|-lg|-xl], but bs3 navbars
// don't have them. This selector matches .navbar without .navbar-expand
// and defaults it to .navbar-expand-sm.
.navbar:not(.navbar-expand):not(.navbar-expand-sm):not(.navbar-expand-md):not(.navbar-expand-lg):not(.navbar-expand-xl) {
@extend .navbar-expand-sm;
}
.navbar:not(.fixed-bottom):not(.navbar-fixed-bottom) {
margin-bottom: $navbar-margin-bottom;
}
// Map BS3 navbar positioning to general utilities
.navbar-fixed-top {
@extend .fixed-top;
}
.navbar-fixed-bottom {
@extend .fixed-bottom;
}
.navbar-sticky-top {
@extend .sticky-top;
}
ul.nav.navbar-nav {
flex: 1;
-webkit-flex: 1;
&.navbar-right {
flex: unset;
-webkit-flex: unset;
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
}
ul.nav.navbar-nav>li:not(.dropdown) {
@extend .nav-item;
}
ul.nav.navbar-nav>li>a {
@extend .nav-link;
}
// BS3 .navbar-default -> BS4 .navbar-light
.navbar.navbar-default {
// Sets a variety of fg colors which are configurable via $navbar-light-* options
@extend .navbar-light;
// To make it easier for end users to set the navbar bg color,
// we've introduced this variable
background-color: $navbar-light-bg !important;
}
// BS3 .navbar-inverse -> BS4 .navbar-dark
.navbar.navbar-inverse {
// Sets a variety of fg colors which are configurable via $navbar-dark-* options
@extend .navbar-dark;
// See comments above for $navbar-light-bg
background-color: $navbar-dark-bg !important;
}
// Implement bs3 navbar toggler; used in Rmd websites, i.e.
// https://github.com/rstudio/rmarkdown-website/blob/453e1802b32b5baf1c8a67f80947adcc53e49b7f/_navbar.html
.navbar-toggle {
@extend .navbar-toggler;
}
.navbar-toggle {
> .icon-bar {
display: none;
&:last-child {
@extend .navbar-toggler-icon;
}
}
}
// Make sure navbar-toggle floats right when navbar is collapsed
// https://github.com/rstudio/bslib/issues/289
// In BS4, media-breakpoint-down() does the _next_ breakpoint (xs->sm)
// In BS5+, it takes the breakpoint (sm) verbatim
@include media-breakpoint-down(if($bootstrap-version==4, xs, sm)) {
.navbar-header {
width: 100%;
.navbar-toggle {
float: right;
}
}
}
|
