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

294 lines
6.1 KiB
SCSS
Raw Normal View History

// Contents
//
// Navbar
// Navbar brand
// Navbar nav
// Navbar text
// Navbar divider
// Responsive navbar
// Navbar position
// Navbar themes
// Navbar
2014-12-02 23:02:35 +01:00
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
display: flex;
flex-wrap: wrap; // allow us to do the line break for collapsing content
align-items: center;
justify-content: space-between; // space out brand from logo
padding: $navbar-padding-y $navbar-padding-x;
// Because flex properties aren't inherited, we need to redeclare these first
2018-07-10 02:59:22 +02:00
// few properties so that content nested within behave properly.
> [class^="container"] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
2014-12-02 23:02:35 +01:00
}
2016-12-21 09:40:31 +01:00
// Navbar brand
2015-08-18 08:43:59 +02:00
//
// Used for brand, project, or site names.
2014-12-02 23:02:35 +01:00
.navbar-brand {
2016-12-21 09:40:31 +01:00
display: inline-block;
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
2016-12-21 23:16:04 +01:00
margin-right: $navbar-padding-x;
@include font-size($navbar-brand-font-size);
line-height: inherit;
2016-12-21 23:16:04 +01:00
white-space: nowrap;
2014-12-02 23:02:35 +01:00
&:hover,
&:focus {
2015-08-18 08:43:59 +02:00
text-decoration: none;
2014-12-02 23:02:35 +01:00
}
}
2014-12-02 23:02:35 +01:00
2015-08-18 09:59:44 +02:00
// Navbar nav
//
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
.navbar-nav {
display: flex;
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
padding-left: 0;
margin-bottom: 0;
list-style: none;
.nav-link {
padding-right: 0;
2016-12-29 02:46:35 +01:00
padding-left: 0;
2015-08-18 09:59:44 +02:00
}
.dropdown-menu {
position: static;
}
2015-08-18 09:59:44 +02:00
}
// Navbar text
//
//
.navbar-text {
display: inline-block;
padding-top: $nav-link-padding-y;
padding-bottom: $nav-link-padding-y;
}
// Responsive navbar
2014-12-02 23:02:35 +01:00
//
// Custom styles for responsive collapsing and toggling of navbar contents.
// Powered by the collapse Bootstrap JavaScript plugin.
2014-12-02 23:02:35 +01:00
// When collapsed, prevent the toggleable navbar contents from appearing in
2018-07-10 02:59:22 +02:00
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
.navbar-collapse {
flex-basis: 100%;
2017-09-12 10:32:43 +02:00
flex-grow: 1;
// For always expanded or extra full navbars, ensure content aligns itself
// properly vertically. Can be easily overridden with flex utilities.
align-items: center;
}
// Button for toggling the navbar when in its collapsed state
2014-12-02 23:02:35 +01:00
.navbar-toggler {
2016-05-13 17:15:48 +02:00
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
@include font-size($navbar-toggler-font-size);
line-height: 1;
background-color: transparent; // remove default button style
border: $border-width solid transparent; // remove default button style
2016-05-13 06:50:17 +02:00
@include border-radius($navbar-toggler-border-radius);
2014-12-02 23:02:35 +01:00
&:hover,
&:focus {
2014-12-02 23:02:35 +01:00
text-decoration: none;
}
}
// Keep as a separate element so folks can easily override it with another icon
// or image file as needed.
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
2016-12-22 07:20:22 +01:00
content: "";
background: no-repeat center center;
background-size: 100% 100%;
}
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
> [class^=".container"] {
padding-right: 0;
padding-left: 0;
}
}
@include media-breakpoint-up($next) {
flex-flow: row nowrap;
justify-content: flex-start;
.navbar-nav {
flex-direction: row;
.dropdown-menu {
position: absolute;
}
.nav-link {
padding-right: $navbar-nav-link-padding-x;
padding-left: $navbar-nav-link-padding-x;
}
}
// For nesting containers, have to redeclare for alignment purposes
> [class^=".container"] {
flex-wrap: nowrap;
}
.navbar-collapse {
2019-01-08 05:46:29 +01:00
display: flex !important; // stylelint-disable-line declaration-no-important
// Changes flex-bases to auto because of an IE10 bug
flex-basis: auto;
}
.navbar-toggler {
display: none;
}
}
}
}
}
// Navbar themes
//
// Styles for switching between navbars with light or dark background.
// Dark links against a light background
.navbar-light {
.navbar-brand {
color: $navbar-light-brand-color;
2014-12-20 03:35:10 +01:00
&:hover,
&:focus {
color: $navbar-light-brand-hover-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
&:hover,
&:focus {
color: $navbar-light-hover-color;
}
&.disabled {
color: $navbar-light-disabled-color;
}
}
2014-12-02 23:02:35 +01:00
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-light-active-color;
}
}
2015-08-18 09:59:44 +02:00
.navbar-toggler {
color: $navbar-light-color;
border-color: $navbar-light-toggler-border-color;
}
.navbar-toggler-icon {
background-image: escape-svg($navbar-light-toggler-icon-bg);
}
.navbar-text {
color: $navbar-light-color;
2017-10-02 19:11:11 +02:00
a,
a:hover,
a:focus {
color: $navbar-light-active-color;
2017-10-02 19:11:11 +02:00
}
}
}
// White links against a dark background
.navbar-dark {
.navbar-brand {
color: $navbar-dark-brand-color;
2015-08-18 08:43:59 +02:00
&:hover,
&:focus {
color: $navbar-dark-brand-hover-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
&:hover,
&:focus {
color: $navbar-dark-hover-color;
2014-12-02 23:02:35 +01:00
}
&.disabled {
color: $navbar-dark-disabled-color;
}
2015-08-18 08:43:59 +02:00
}
2014-12-02 23:02:35 +01:00
.show > .nav-link,
2015-08-18 08:43:59 +02:00
.active > .nav-link,
.nav-link.show,
2015-08-18 08:43:59 +02:00
.nav-link.active {
color: $navbar-dark-active-color;
2014-12-02 23:02:35 +01:00
}
}
2015-08-18 09:59:44 +02:00
.navbar-toggler {
color: $navbar-dark-color;
border-color: $navbar-dark-toggler-border-color;
}
.navbar-toggler-icon {
background-image: escape-svg($navbar-dark-toggler-icon-bg);
}
.navbar-text {
color: $navbar-dark-color;
a,
a:hover,
a:focus {
2017-10-02 19:11:11 +02:00
color: $navbar-dark-active-color;
}
}
2014-12-02 23:02:35 +01:00
}