0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-12 00:08:59 +01:00
Bootstrap/scss/_navbar.scss

231 lines
3.9 KiB
SCSS
Raw Normal View History

2014-12-02 23:02:35 +01: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;
padding: $navbar-padding-y $navbar-padding-x;
@include clearfix;
2014-12-02 23:02:35 +01:00
@include media-breakpoint-up(sm) {
2014-12-02 23:02:35 +01: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.
// A static, full width modifier with no rounded corners.
.navbar-full {
2014-12-02 23:02:35 +01:00
z-index: $zindex-navbar;
@include media-breakpoint-up(sm) {
2014-12-02 23:02:35 +01: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
@include media-breakpoint-up(sm) {
2014-12-02 23:02:35 +01:00
@include border-radius(0);
}
}
2014-12-02 23:02:35 +01:00
.navbar-fixed-top {
top: 0;
}
2014-12-02 23:02:35 +01:00
.navbar-fixed-bottom {
bottom: 0;
}
2015-04-14 04:00:59 +02:00
.navbar-sticky-top {
position: sticky;
top: 0;
z-index: $zindex-navbar-sticky;
width: 100%;
2015-04-14 04:00:59 +02:00
// Undo the rounded corners
@include media-breakpoint-up(sm) {
@include border-radius(0);
}
}
2014-12-02 23:02:35 +01:00
2015-08-18 08:43:59 +02:00
//
2014-12-02 23:02:35 +01:00
// Brand/project name
2015-08-18 08:43:59 +02:00
//
2014-12-02 23:02:35 +01:00
.navbar-brand {
float: left;
padding-top: .25rem;
padding-bottom: .25rem;
2015-08-23 10:00:22 +02:00
margin-right: 1rem;
2014-12-02 23:02:35 +01:00
font-size: $font-size-lg;
2015-08-18 08:43:59 +02:00
@include hover-focus {
text-decoration: none;
2014-12-02 23:02:35 +01:00
}
> img {
display: block;
}
}
2015-08-18 09:59:44 +02:00
.navbar-divider {
float: left;
width: 1px;
padding-top: .425rem;
padding-bottom: .425rem;
margin-right: $navbar-padding-x;
margin-left: $navbar-padding-x;
2015-08-23 10:00:22 +02:00
overflow: hidden;
2015-08-18 09:59:44 +02:00
&::before {
2015-08-23 10:00:22 +02:00
content: "\00a0";
2015-08-18 09:59:44 +02:00
}
}
2014-12-02 23:02:35 +01:00
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
2015-06-23 02:37:52 +02:00
// Bootstrap JavaScript plugin.
2014-12-02 23:02:35 +01:00
.navbar-toggler {
2015-08-18 08:43:59 +02:00
padding: .5rem .75rem;
2014-12-02 23:02:35 +01:00
font-size: $font-size-lg;
line-height: 1;
2014-12-02 23:02:35 +01:00
background: none;
2015-08-18 08:43:59 +02:00
border: $border-width solid transparent;
@include border-radius($btn-border-radius);
2014-12-02 23:02:35 +01:00
@include hover-focus {
2014-12-02 23:02:35 +01:00
text-decoration: none;
}
}
2015-04-17 03:50:32 +02:00
// Custom override for
.navbar-toggleable {
&-xs {
@include media-breakpoint-up(sm) {
display: block !important;
}
}
&-sm {
@include media-breakpoint-up(md) {
display: block !important;
}
}
&-md {
@include media-breakpoint-up(lg) {
display: block !important;
}
}
2015-04-17 03:50:32 +02:00
}
2014-12-02 23:02:35 +01:00
2015-08-18 08:43:59 +02:00
// Navigation
//
2015-08-18 08:43:59 +02:00
// Custom navbar navigation built on the base `.nav` styles.
.navbar-nav {
.nav-item {
float: left;
}
.nav-link {
display: block;
2015-08-18 10:06:14 +02:00
padding-top: .425rem;
padding-bottom: .425rem;
+ .nav-link {
margin-left: 1rem;
}
}
.nav-item + .nav-item {
margin-left: 1rem;
2014-12-02 23:02:35 +01:00
}
}
// Dark links against a light background
.navbar-light {
2014-12-02 23:02:35 +01:00
.navbar-brand {
color: $navbar-light-active-color;
2014-12-20 03:35:10 +01:00
@include hover-focus {
color: $navbar-light-active-color;
2014-12-02 23:02:35 +01:00
}
}
.navbar-nav {
.nav-link {
color: $navbar-light-color;
2014-12-02 23:02:35 +01:00
@include hover-focus {
color: $navbar-light-hover-color;
}
}
2014-12-02 23:02:35 +01: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 09:59:44 +02:00
.navbar-divider {
background-color: rgba(0,0,0,.075);
}
}
// White links against a dark background
.navbar-dark {
2014-12-02 23:02:35 +01:00
.navbar-brand {
color: $navbar-dark-active-color;
2015-08-18 08:43:59 +02:00
@include hover-focus {
color: $navbar-dark-active-color;
2014-12-02 23:02:35 +01:00
}
}
.navbar-nav {
2015-08-18 08:43:59 +02:00
.nav-link {
color: $navbar-dark-color;
2014-12-02 23:02:35 +01:00
@include hover-focus {
color: $navbar-dark-hover-color;
2014-12-02 23:02:35 +01:00
}
2015-08-18 08:43:59 +02:00
}
2014-12-02 23:02:35 +01:00
2015-08-18 08:43:59 +02:00
.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
@include plain-hover-focus {
color: $navbar-dark-active-color;
}
2014-12-02 23:02:35 +01:00
}
}
2015-08-18 09:59:44 +02:00
.navbar-divider {
background-color: rgba(255,255,255,.075);
}
2014-12-02 23:02:35 +01:00
}