grafana/public/sass/components/_navbar.scss

148 lines
2.5 KiB
SCSS
Raw Normal View History

2016-02-15 08:27:41 -06:00
.navbar {
2016-02-16 07:07:41 -06:00
display: block;
2016-02-15 08:27:41 -06:00
overflow: visible;
position: relative;
z-index: 110;
}
.navbar-inner {
min-height: $navbarHeight;
padding-right: $spacer;
2016-02-15 08:27:41 -06:00
background-color: $navbarBackground;
border-bottom: $navbarBorder;
@include clearfix();
}
.navbar .nav {
position: relative;
left: 0;
float: left;
}
.navbar .nav.pull-right {
float: right; // redeclare due to specificity
margin-right: 0; // remove margin on float right nav
}
.navbar .nav > li {
float: left;
}
// Links
.navbar .nav > li > a {
float: none;
padding: 17px 13px 13px;
color: $navbarLinkColor;
text-decoration: none;
.fa { font-size: 115%; }
}
// Hover/focus
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: $navbarLinkColorHover;
text-decoration: none;
}
// Active nav items
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: $navbarLinkColorActive;
text-decoration: none;
background-color: $navbarLinkBackgroundActive;
}
.navbar-brand-btn {
2016-02-15 08:27:41 -06:00
display: block;
margin-bottom: 3rem;
2017-06-12 14:11:22 -05:00
background-color: $side-menu-bg;
2017-08-15 07:49:12 -05:00
padding: 0.4rem 1.0rem 0.4rem 0.65rem;
2017-06-12 14:11:22 -05:00
min-height: $navbarHeight;
2016-02-15 08:27:41 -06:00
.fa-caret-down {
font-size: 70%;
2016-02-15 08:27:41 -06:00
}
&:hover {
background: $navbarButtonBackgroundHighlight;
2016-02-15 08:27:41 -06:00
}
img {
width: 30px;
position: relative;
2016-02-22 08:15:01 -06:00
top: -1px;
2016-02-15 08:27:41 -06:00
}
.navbar-brand-btn-background {
2016-02-15 08:27:41 -06:00
display: inline-block;
2016-02-16 02:42:46 -06:00
border: 1px solid $body-bg;
2016-02-15 08:27:41 -06:00
padding: 4px;
border-radius: 50%;
background: $iconContainerBackground;
2016-02-16 03:42:06 -06:00
width: 40px;
height: 40px;
2016-02-15 08:27:41 -06:00
}
2016-02-15 08:27:41 -06:00
.icon-gf-grafana_wordmark {
font-size: 21px;
position: relative;
2017-06-07 15:03:10 -05:00
top: 6px;
2016-02-15 08:27:41 -06:00
padding-left: 5px;
display: none;
}
}
2017-06-12 14:11:22 -05:00
.navbar-page-btn-wrapper {
float: left;
&:hover {
background: $navbarButtonBackgroundHighlight;
}
}
.navbar-page-btn {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
margin: 0;
color: darken($link-color, 5%);
font-size: $font-size-lg;
padding: 1rem 1rem 0.75rem 1rem;
min-height:: $navbarHeight;
.fa-caret-down {
font-size: 60%;
padding-left: 0.2rem;
2016-02-15 08:27:41 -06:00
}
.icon-gf {
position: relative;
top: 2px;
font-size: 20px;
line-height: 8px;
2017-06-12 14:11:22 -05:00
margin-right: 0.5rem;
2016-02-15 08:27:41 -06:00
}
> img {
max-width: 27px;
max-height: 27px;
}
2017-06-08 06:56:51 -05:00
&--search {
padding: 1rem 1.5rem 0.75rem 1.5rem;
}
2016-02-15 08:27:41 -06:00
}
.navbar-page-btn-wrapper {
display: inline-block;
position: relative;
}
.navbar-section-wrapper {
position: relative;
float: left;
}