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-12-08 09:30:23 +00:00
|
|
|
padding: $navbar-padding-y $navbar-padding-x;
|
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.
|
|
|
|
|
2015-09-06 03:58:28 +00:00
|
|
|
// A static, full width modifier with no rounded corners.
|
|
|
|
.navbar-full {
|
2014-12-02 22:02:35 +00:00
|
|
|
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;
|
|
|
|
|
|
|
|
// 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 {
|
2016-10-17 04:51:26 +00:00
|
|
|
display: block;
|
2016-02-17 07:11:25 +00:00
|
|
|
padding-top: $navbar-brand-padding-y;
|
|
|
|
padding-bottom: $navbar-brand-padding-y;
|
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;
|
2016-02-17 06:48:41 +00:00
|
|
|
width: $border-width;
|
2016-05-13 15:15:48 +00:00
|
|
|
padding-top: $navbar-divider-padding-y;
|
|
|
|
padding-bottom: $navbar-divider-padding-y;
|
2015-12-08 09:30:23 +00:00
|
|
|
margin-right: $navbar-padding-x;
|
|
|
|
margin-left: $navbar-padding-x;
|
2015-08-23 08:00:22 +00:00
|
|
|
overflow: hidden;
|
2015-08-18 07:59:44 +00:00
|
|
|
|
2015-08-19 20:31:31 +00:00
|
|
|
&::before {
|
2015-08-23 08:00:22 +00:00
|
|
|
content: "\00a0";
|
2015-08-18 07:59:44 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2016-05-15 19:29:56 +00:00
|
|
|
// Navbar text
|
|
|
|
//
|
|
|
|
//
|
|
|
|
|
|
|
|
.navbar-text {
|
|
|
|
display: inline-block;
|
|
|
|
padding-top: .425rem;
|
|
|
|
padding-bottom: .425rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
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 {
|
2016-09-12 05:25:42 +00:00
|
|
|
width: 2.5em;
|
|
|
|
height: 2em;
|
2016-05-13 15:15:48 +00:00
|
|
|
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
|
2016-05-13 04:50:17 +00:00
|
|
|
font-size: $navbar-toggler-font-size;
|
2015-04-29 19:00:11 +00:00
|
|
|
line-height: 1;
|
2016-09-12 05:25:42 +00:00
|
|
|
background: transparent no-repeat center center;
|
|
|
|
background-size: 24px 24px;
|
2015-08-18 06:43:59 +00:00
|
|
|
border: $border-width solid transparent;
|
2016-05-13 04:50:17 +00:00
|
|
|
@include border-radius($navbar-toggler-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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-02-06 20:28:18 +00:00
|
|
|
// scss-lint:disable ImportantRule
|
2015-04-17 01:50:32 +00:00
|
|
|
.navbar-toggleable {
|
2016-10-17 04:51:26 +00:00
|
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
2016-10-18 04:05:07 +00:00
|
|
|
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
2016-10-17 04:51:26 +00:00
|
|
|
&-#{$breakpoint} {
|
|
|
|
@include clearfix;
|
2016-10-18 04:05:07 +00:00
|
|
|
@include media-breakpoint-up($next) {
|
2016-10-17 04:51:26 +00:00
|
|
|
display: block !important;
|
|
|
|
|
|
|
|
.navbar-brand {
|
|
|
|
float: left;
|
|
|
|
margin-right: 1rem;
|
|
|
|
}
|
|
|
|
}
|
2015-09-02 21:08:52 +00:00
|
|
|
}
|
|
|
|
}
|
2015-04-17 01:50:32 +00:00
|
|
|
}
|
2016-02-06 20:28:18 +00:00
|
|
|
// scss-lint:enable ImportantRule
|
2015-04-17 01:50:32 +00:00
|
|
|
|
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 08:06:14 +00:00
|
|
|
padding-top: .425rem;
|
|
|
|
padding-bottom: .425rem;
|
|
|
|
|
|
|
|
+ .nav-link {
|
|
|
|
margin-left: 1rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav-item + .nav-item {
|
|
|
|
margin-left: 1rem;
|
2014-12-02 22:02:35 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-08-18 07:46:29 +00:00
|
|
|
// Dark links against a light background
|
|
|
|
.navbar-light {
|
2016-05-12 18:24:09 +00:00
|
|
|
.navbar-brand,
|
|
|
|
.navbar-toggler {
|
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
|
|
|
|
2016-09-12 05:25:42 +00:00
|
|
|
.navbar-toggler {
|
|
|
|
background-image: $navbar-light-toggler-bg;
|
|
|
|
}
|
|
|
|
|
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 {
|
2016-05-12 18:24:09 +00:00
|
|
|
.navbar-brand,
|
|
|
|
.navbar-toggler {
|
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
|
|
|
|
2016-09-12 05:25:42 +00:00
|
|
|
.navbar-toggler {
|
|
|
|
background-image: $navbar-dark-toggler-bg;
|
|
|
|
}
|
|
|
|
|
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
|
|
|
}
|
2016-07-27 03:16:23 +00:00
|
|
|
|
|
|
|
|
|
|
|
// Navbar toggleable
|
|
|
|
//
|
|
|
|
// Custom override for collapse plugin in navbar.
|
|
|
|
|
|
|
|
.navbar-toggleable {
|
|
|
|
&-xs {
|
|
|
|
@include clearfix;
|
|
|
|
@include media-breakpoint-down(xs) {
|
|
|
|
.navbar-nav .nav-item {
|
|
|
|
float: none;
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
|
|
display: block !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&-sm {
|
|
|
|
@include clearfix;
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
|
|
.navbar-nav .nav-item {
|
|
|
|
float: none;
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
|
|
display: block !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&-md {
|
|
|
|
@include clearfix;
|
|
|
|
@include media-breakpoint-down(md) {
|
|
|
|
.navbar-nav .nav-item {
|
|
|
|
float: none;
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
|
|
display: block !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|