2014-12-02 22:02:35 +00:00
|
|
|
// Wrapper and base class
|
|
|
|
//
|
|
|
|
// Provide a static navbar from which we expand to create full-width, fixed, and
|
|
|
|
// other navbar variations.
|
|
|
|
|
|
|
|
.navbar {
|
|
|
|
position: relative;
|
2015-08-18 07:46:29 +00:00
|
|
|
padding: $navbar-padding-vertical $navbar-padding-horizontal;
|
2014-12-11 22:47:10 +00:00
|
|
|
@include clearfix;
|
2014-12-02 22:02:35 +00:00
|
|
|
|
2014-12-29 21:40:19 +00:00
|
|
|
@include media-breakpoint-up(sm) {
|
2014-12-02 22:02:35 +00:00
|
|
|
@include border-radius($navbar-border-radius);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Navbar alignment options
|
|
|
|
//
|
|
|
|
// Display the navbar across the entirety of the page or fixed it to the top or
|
|
|
|
// bottom of the page.
|
|
|
|
|
|
|
|
// Static top (unfixed, but 100% wide) navbar
|
|
|
|
.navbar-static-top {
|
|
|
|
z-index: $zindex-navbar;
|
|
|
|
|
2014-12-29 21:40:19 +00:00
|
|
|
@include media-breakpoint-up(sm) {
|
2014-12-02 22:02:35 +00:00
|
|
|
@include border-radius(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Fix the top/bottom navbars when screen real estate supports it
|
|
|
|
.navbar-fixed-top,
|
|
|
|
.navbar-fixed-bottom {
|
|
|
|
position: fixed;
|
|
|
|
right: 0;
|
|
|
|
left: 0;
|
|
|
|
z-index: $zindex-navbar-fixed;
|
2014-12-11 22:47:10 +00:00
|
|
|
margin-bottom: 0; // override .navbar defaults
|
2014-12-02 22:02:35 +00:00
|
|
|
|
|
|
|
// Undo the rounded corners
|
2014-12-29 21:40:19 +00:00
|
|
|
@include media-breakpoint-up(sm) {
|
2014-12-02 22:02:35 +00:00
|
|
|
@include border-radius(0);
|
|
|
|
}
|
|
|
|
}
|
2014-12-11 22:47:10 +00:00
|
|
|
|
2014-12-02 22:02:35 +00:00
|
|
|
.navbar-fixed-top {
|
|
|
|
top: 0;
|
|
|
|
}
|
2014-12-11 22:47:10 +00:00
|
|
|
|
2014-12-02 22:02:35 +00:00
|
|
|
.navbar-fixed-bottom {
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
|
2015-04-14 02:00:59 +00:00
|
|
|
.navbar-sticky-top {
|
|
|
|
position: sticky;
|
|
|
|
top: 0;
|
|
|
|
z-index: $zindex-navbar-sticky;
|
2015-05-27 22:49:55 +00:00
|
|
|
width: 100%;
|
2015-04-14 02:00:59 +00:00
|
|
|
|
|
|
|
// Undo the rounded corners
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
|
|
@include border-radius(0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-12-02 22:02:35 +00:00
|
|
|
|
2015-08-18 06:43:59 +00:00
|
|
|
//
|
2014-12-02 22:02:35 +00:00
|
|
|
// Brand/project name
|
2015-08-18 06:43:59 +00:00
|
|
|
//
|
2014-12-02 22:02:35 +00:00
|
|
|
|
|
|
|
.navbar-brand {
|
|
|
|
float: left;
|
2015-08-18 07:46:29 +00:00
|
|
|
margin-right: 1rem;
|
|
|
|
padding-top: .25rem;
|
|
|
|
padding-bottom: .25rem;
|
2014-12-02 22:02:35 +00:00
|
|
|
font-size: $font-size-lg;
|
|
|
|
|
2015-08-18 06:43:59 +00:00
|
|
|
@include hover-focus {
|
|
|
|
text-decoration: none;
|
2014-12-02 22:02:35 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
> img {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2015-08-18 07:59:44 +00:00
|
|
|
.navbar-divider {
|
|
|
|
float: left;
|
|
|
|
width: 1px;
|
|
|
|
padding-top: .425rem;
|
|
|
|
padding-bottom: .425rem;
|
|
|
|
overflow: hidden;
|
|
|
|
margin-left: $navbar-padding-horizontal;
|
|
|
|
margin-right: $navbar-padding-horizontal;
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
content: '\00a0';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2014-12-02 22:02:35 +00:00
|
|
|
// Navbar toggle
|
|
|
|
//
|
|
|
|
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
|
2015-06-23 00:37:52 +00:00
|
|
|
// Bootstrap JavaScript plugin.
|
2014-12-02 22:02:35 +00:00
|
|
|
|
|
|
|
.navbar-toggler {
|
2015-08-18 06:43:59 +00:00
|
|
|
padding: .5rem .75rem;
|
2014-12-02 22:02:35 +00:00
|
|
|
font-size: $font-size-lg;
|
2015-04-29 19:00:11 +00:00
|
|
|
line-height: 1;
|
2014-12-02 22:02:35 +00:00
|
|
|
background: none;
|
2015-08-18 06:43:59 +00:00
|
|
|
border: $border-width solid transparent;
|
|
|
|
@include border-radius($btn-border-radius);
|
2014-12-02 22:02:35 +00:00
|
|
|
|
2015-01-01 09:05:01 +00:00
|
|
|
@include hover-focus {
|
2014-12-02 22:02:35 +00:00
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-04-17 01:50:32 +00:00
|
|
|
// Custom override for
|
|
|
|
.navbar-toggleable {
|
|
|
|
&-xs {
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
|
|
display: block !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-sm {
|
|
|
|
@include media-breakpoint-up(md) {
|
|
|
|
display: block !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-12-02 22:02:35 +00:00
|
|
|
|
2015-08-18 06:43:59 +00:00
|
|
|
// Navigation
|
2015-06-22 23:30:31 +00:00
|
|
|
//
|
2015-08-18 06:43:59 +00:00
|
|
|
// Custom navbar navigation built on the base `.nav` styles.
|
2015-04-19 01:12:10 +00:00
|
|
|
|
|
|
|
.navbar-nav {
|
|
|
|
.nav-item {
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav-link {
|
|
|
|
display: block;
|
2015-08-18 07:46:29 +00:00
|
|
|
padding: .425rem .5rem;
|
2014-12-02 22:02:35 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-08-18 07:46:29 +00:00
|
|
|
// Dark links against a light background
|
|
|
|
.navbar-light {
|
2014-12-02 22:02:35 +00:00
|
|
|
.navbar-brand {
|
2015-08-18 07:46:29 +00:00
|
|
|
color: $navbar-light-active-color;
|
2014-12-20 02:35:10 +00:00
|
|
|
|
2015-01-01 09:05:01 +00:00
|
|
|
@include hover-focus {
|
2015-08-18 07:46:29 +00:00
|
|
|
color: $navbar-light-active-color;
|
2014-12-02 22:02:35 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-08-18 07:46:29 +00:00
|
|
|
.navbar-nav {
|
|
|
|
.nav-link {
|
|
|
|
color: $navbar-light-color;
|
2014-12-02 22:02:35 +00:00
|
|
|
|
2015-08-18 07:46:29 +00:00
|
|
|
@include hover-focus {
|
|
|
|
color: $navbar-light-hover-color;
|
|
|
|
}
|
|
|
|
}
|
2014-12-02 22:02:35 +00:00
|
|
|
|
2015-08-18 07:46:29 +00:00
|
|
|
.open > .nav-link,
|
|
|
|
.active > .nav-link,
|
|
|
|
.nav-link.open,
|
|
|
|
.nav-link.active {
|
|
|
|
@include plain-hover-focus {
|
|
|
|
color: $navbar-light-active-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2015-08-18 07:59:44 +00:00
|
|
|
|
|
|
|
.navbar-divider {
|
|
|
|
background-color: rgba(0,0,0,.075);
|
|
|
|
}
|
2015-08-18 07:46:29 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// White links against a dark background
|
|
|
|
.navbar-dark {
|
2014-12-02 22:02:35 +00:00
|
|
|
.navbar-brand {
|
2015-08-18 07:46:29 +00:00
|
|
|
color: $navbar-dark-active-color;
|
2015-08-18 06:43:59 +00:00
|
|
|
|
2015-01-01 09:05:01 +00:00
|
|
|
@include hover-focus {
|
2015-08-18 07:46:29 +00:00
|
|
|
color: $navbar-dark-active-color;
|
2014-12-02 22:02:35 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.navbar-nav {
|
2015-08-18 06:43:59 +00:00
|
|
|
.nav-link {
|
2015-08-18 07:46:29 +00:00
|
|
|
color: $navbar-dark-color;
|
2014-12-02 22:02:35 +00:00
|
|
|
|
2015-01-01 09:05:01 +00:00
|
|
|
@include hover-focus {
|
2015-08-18 07:46:29 +00:00
|
|
|
color: $navbar-dark-hover-color;
|
2014-12-02 22:02:35 +00:00
|
|
|
}
|
2015-08-18 06:43:59 +00:00
|
|
|
}
|
2014-12-02 22:02:35 +00:00
|
|
|
|
2015-08-18 06:43:59 +00:00
|
|
|
.open > .nav-link,
|
|
|
|
.active > .nav-link,
|
|
|
|
.nav-link.open,
|
|
|
|
.nav-link.active {
|
|
|
|
@include plain-hover-focus {
|
2015-08-18 07:46:29 +00:00
|
|
|
color: $navbar-dark-active-color;
|
2015-06-23 06:24:55 +00:00
|
|
|
}
|
2014-12-02 22:02:35 +00:00
|
|
|
}
|
|
|
|
}
|
2015-08-18 07:59:44 +00:00
|
|
|
|
|
|
|
.navbar-divider {
|
|
|
|
background-color: rgba(255,255,255,.075);
|
|
|
|
}
|
2014-12-02 22:02:35 +00:00
|
|
|
}
|