grafana/public/sass/components/_navs.scss
Josh Soref 05a5a66e2f
Chore: spelling - theme (#24434)
* Chore: spelling - theme

* Chore: drop phantomjs comments

* Chore: remove old phantomjs hack

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
2020-06-05 10:53:57 +02:00

97 lines
1.6 KiB
SCSS

//
// Navs
// --------------------------------------------------
// BASE CLASS
// ----------
.nav {
margin: 0;
list-style: none;
}
// Make links block level
.nav > li > a {
display: block;
}
// Redeclare pull classes because of specificity
.nav > .pull-right {
float: right;
}
// TABS AND PILLS
// -------------
// Common styles
.nav-tabs {
@include clearfix();
}
.nav-tabs > li {
float: left;
}
.nav-tabs > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px; // keeps the overall height an even number
}
// TABS
// ----
// Give the tabs something to sit on
.nav-tabs {
border-bottom: 1px solid $divider-border-color;
padding-left: 10px;
margin: 0 0 10px 0;
}
// Make the list-items overlay the bottom border
.nav-tabs > li {
margin-bottom: -1px;
}
// Active state, and it's :hover/:focus to override normal :hover/:focus
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
@include border-radius(3px);
border-color: $divider-border-color;
border-bottom: 1px solid $panel-bg;
color: $link-color;
}
// Show/hide tabbable areas
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
// temp hack
.modal-body {
.nav-tabs {
border-bottom: none;
}
.nav-tabs > li > a {
border: none;
border-radius: 0;
&:hover,
&:focus {
border-bottom: 1px solid $blue;
}
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
border: none;
border-bottom: 1px solid $blue;
color: $link-color;
}
}