mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
ed89be1f44
We have it set to `1` right now just to avoid compilation errors, but it’s been replaced everywhere with our new spacer classes anywho. We’ll likely want to remap that var to custom component vars though (e.g., `$pagination-margin` instead of `$spacer-y`).
383 lines
7.7 KiB
SCSS
383 lines
7.7 KiB
SCSS
//
|
|
// Navbars
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Wrapper and base class
|
|
//
|
|
// Provide a static navbar from which we expand to create full-width, fixed, and
|
|
// other navbar variations.
|
|
|
|
.navbar {
|
|
position: relative;
|
|
padding: $spacer;
|
|
margin-bottom: $navbar-margin-bottom;
|
|
@include clearfix;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
@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;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
@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;
|
|
margin-bottom: 0; // override .navbar defaults
|
|
|
|
// Undo the rounded corners
|
|
@include media-breakpoint-up(sm) {
|
|
@include border-radius(0);
|
|
}
|
|
}
|
|
|
|
.navbar-fixed-top {
|
|
top: 0;
|
|
}
|
|
|
|
.navbar-fixed-bottom {
|
|
bottom: 0;
|
|
}
|
|
|
|
.navbar-sticky-top {
|
|
position: sticky;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: $zindex-navbar-sticky;
|
|
|
|
// Undo the rounded corners
|
|
@include media-breakpoint-up(sm) {
|
|
@include border-radius(0);
|
|
}
|
|
}
|
|
|
|
|
|
// Brand/project name
|
|
|
|
.navbar-brand {
|
|
float: left;
|
|
padding: .625rem .75rem;
|
|
margin-right: $spacer;
|
|
margin-bottom: 0; // For headings
|
|
font-size: $font-size-lg;
|
|
line-height: 1;
|
|
|
|
> a {
|
|
@include hover-focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
> img {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
// Navbar toggle
|
|
//
|
|
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
|
|
// JavaScript plugin.
|
|
|
|
.navbar-toggler {
|
|
padding: .55rem .75rem;
|
|
margin-right: $spacer;
|
|
margin-bottom: 0; // For headings
|
|
font-size: $font-size-lg;
|
|
line-height: 1;
|
|
background: none;
|
|
border: 0;
|
|
|
|
@include hover-focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// Custom override for
|
|
.navbar-toggleable {
|
|
&-xs {
|
|
@include media-breakpoint-up(sm) {
|
|
display: block !important;
|
|
}
|
|
}
|
|
&-sm {
|
|
@include media-breakpoint-up(md) {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Dropdown menus
|
|
|
|
// Menu position and menu carets
|
|
.navbar-nav > li > .dropdown-menu {
|
|
margin-top: 0;
|
|
@include border-top-radius(0);
|
|
}
|
|
// Menu position and menu caret support for dropups via extra dropup class
|
|
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
|
|
@include border-top-radius($navbar-border-radius);
|
|
@include border-bottom-radius(0);
|
|
}
|
|
|
|
|
|
// Condensed navbar
|
|
|
|
.navbar-condensed {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
|
|
.navbar-brand {
|
|
padding-top: .95rem;
|
|
padding-bottom: .95rem;
|
|
}
|
|
|
|
.form-inline {
|
|
margin-top: .6rem;
|
|
}
|
|
}
|
|
|
|
.navbar-nav {
|
|
.nav-item {
|
|
float: left;
|
|
}
|
|
|
|
.nav-link {
|
|
display: block;
|
|
padding-top: .95rem;
|
|
padding-bottom: .95rem;
|
|
line-height: 1.25; // Match the `.navbar-brand`
|
|
}
|
|
|
|
.open > .nav-link,
|
|
.active > .nav-link,
|
|
.nav-link.open,
|
|
.nav-link.active {
|
|
@include plain-hover-focus {
|
|
color: $navbar-default-link-active-color;
|
|
cursor: default;
|
|
background-color: $navbar-default-link-active-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Alternate navbars
|
|
// --------------------------------------------------
|
|
|
|
// todo: audit these styles
|
|
|
|
// Default navbar
|
|
.navbar-default {
|
|
background-color: $navbar-default-bg;
|
|
border-color: $navbar-default-border;
|
|
|
|
.navbar-brand {
|
|
color: $navbar-default-brand-color;
|
|
|
|
@include hover-focus {
|
|
color: $navbar-default-brand-hover-color;
|
|
background-color: $navbar-default-brand-hover-bg;
|
|
}
|
|
}
|
|
|
|
// .navbar-text {
|
|
// color: $navbar-default-color;
|
|
// }
|
|
|
|
// .navbar-nav {
|
|
// > li > a {
|
|
// color: $navbar-default-link-color;
|
|
|
|
// @include hover-focus {
|
|
// color: $navbar-default-link-hover-color;
|
|
// background-color: $navbar-default-link-hover-bg;
|
|
// }
|
|
// }
|
|
// > .active > a {
|
|
// @include plain-hover-focus {
|
|
// color: $navbar-default-link-active-color;
|
|
// background-color: $navbar-default-link-active-bg;
|
|
// }
|
|
// }
|
|
// > .disabled > a {
|
|
// @include plain-hover-focus {
|
|
// color: $navbar-default-link-disabled-color;
|
|
// background-color: $navbar-default-link-disabled-bg;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// .navbar-toggle {
|
|
// border-color: $navbar-default-toggle-border-color;
|
|
// @include hover-focus {
|
|
// background-color: $navbar-default-toggle-hover-bg;
|
|
// }
|
|
// .icon-bar {
|
|
// background-color: $navbar-default-toggle-icon-bar-bg;
|
|
// }
|
|
// }
|
|
|
|
// .navbar-collapse,
|
|
// .navbar-form {
|
|
// border-color: $navbar-default-border;
|
|
// }
|
|
|
|
// // Dropdown menu items
|
|
// .navbar-nav {
|
|
// // Remove background color from open dropdown
|
|
// > .open > a {
|
|
// @include plain-hover-focus {
|
|
// color: $navbar-default-link-active-color;
|
|
// background-color: $navbar-default-link-active-bg;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
|
|
// // Links in navbars
|
|
// //
|
|
// // Add a class to ensure links outside the navbar nav are colored correctly.
|
|
|
|
// .navbar-link {
|
|
// color: $navbar-default-link-color;
|
|
// @include hover {
|
|
// color: $navbar-default-link-hover-color;
|
|
// }
|
|
// }
|
|
|
|
// .btn-link {
|
|
// color: $navbar-default-link-color;
|
|
// @include hover-focus {
|
|
// color: $navbar-default-link-hover-color;
|
|
// }
|
|
// &:disabled,
|
|
// fieldset[disabled] & {
|
|
// @include hover-focus {
|
|
// color: $navbar-default-link-disabled-color;
|
|
// }
|
|
// }
|
|
// }
|
|
}
|
|
|
|
// Inverse navbar
|
|
|
|
.navbar-inverse {
|
|
background-color: $navbar-inverse-bg;
|
|
border-color: $navbar-inverse-border;
|
|
|
|
.navbar-toggler,
|
|
.navbar-brand > a,
|
|
.nav-pills > .nav-item > .nav-link {
|
|
color: $navbar-inverse-link-color;
|
|
|
|
@include hover-focus {
|
|
color: $navbar-inverse-link-hover-color;
|
|
}
|
|
}
|
|
.nav-pills > .nav-item > .nav-link {
|
|
@include hover-focus {
|
|
color: $navbar-inverse-link-active-color;
|
|
background-color: $navbar-inverse-link-active-bg;
|
|
}
|
|
}
|
|
.nav-pills > .active > .nav-link,
|
|
.nav-pills > .nav-link.active {
|
|
color: $navbar-inverse-link-active-color;
|
|
background-color: $navbar-inverse-link-active-bg;
|
|
}
|
|
|
|
|
|
.navbar-brand {
|
|
color: $navbar-inverse-brand-color;
|
|
@include hover-focus {
|
|
color: $navbar-inverse-brand-hover-color;
|
|
background-color: $navbar-inverse-brand-hover-bg;
|
|
}
|
|
}
|
|
|
|
.navbar-text {
|
|
color: $navbar-inverse-color;
|
|
}
|
|
|
|
.navbar-nav {
|
|
> li > a {
|
|
color: $navbar-inverse-link-color;
|
|
|
|
@include hover-focus {
|
|
color: $navbar-inverse-link-hover-color;
|
|
background-color: $navbar-inverse-link-hover-bg;
|
|
}
|
|
}
|
|
> .active > a {
|
|
@include plain-hover-focus {
|
|
color: $navbar-inverse-link-active-color;
|
|
background-color: $navbar-inverse-link-active-bg;
|
|
}
|
|
}
|
|
> .disabled > a {
|
|
@include plain-hover-focus {
|
|
color: $navbar-inverse-link-disabled-color;
|
|
background-color: $navbar-inverse-link-disabled-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-collapse,
|
|
.navbar-form {
|
|
border-color: darken($navbar-inverse-bg, 7%);
|
|
}
|
|
|
|
// Dropdowns
|
|
.navbar-nav {
|
|
> .open > a {
|
|
@include plain-hover-focus {
|
|
color: $navbar-inverse-link-active-color;
|
|
background-color: $navbar-inverse-link-active-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-link {
|
|
color: $navbar-inverse-link-color;
|
|
@include hover {
|
|
color: $navbar-inverse-link-hover-color;
|
|
}
|
|
}
|
|
|
|
.btn-link {
|
|
color: $navbar-inverse-link-color;
|
|
|
|
@include hover-focus {
|
|
color: $navbar-inverse-link-hover-color;
|
|
}
|
|
|
|
&:disabled,
|
|
fieldset[disabled] & {
|
|
@include hover-focus {
|
|
color: $navbar-inverse-link-disabled-color;
|
|
}
|
|
}
|
|
}
|
|
}
|