diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_navbar.scss')
| -rw-r--r-- | assets/stylesheets/bootstrap/_navbar.scss | 116 |
1 files changed, 42 insertions, 74 deletions
diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss index 5f10a62..01d827f 100644 --- a/assets/stylesheets/bootstrap/_navbar.scss +++ b/assets/stylesheets/bootstrap/_navbar.scss @@ -4,7 +4,6 @@ // Navbar brand // Navbar nav // Navbar text -// Navbar divider // Responsive navbar // Navbar position // Navbar themes @@ -21,19 +20,24 @@ 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; + padding-top: $navbar-padding-y; + padding-right: $navbar-padding-x; // default: null + padding-bottom: $navbar-padding-y; + padding-left: $navbar-padding-x; // default: null + @include gradient-bg(); // Because flex properties aren't inherited, we need to redeclare these first // few properties so that content nested within behave properly. + // The `flex-wrap` property is inherited to simplify the expanded navbars %container-flex-properties { display: flex; - flex-wrap: wrap; + flex-wrap: inherit; align-items: center; justify-content: space-between; } - .container, - .container-fluid { + > .container, + > .container-fluid { @extend %container-flex-properties; } @@ -50,16 +54,16 @@ // Used for brand, project, or site names. .navbar-brand { - display: inline-block; padding-top: $navbar-brand-padding-y; padding-bottom: $navbar-brand-padding-y; - margin-right: $navbar-padding-x; + margin-right: $navbar-brand-margin-right; @include font-size($navbar-brand-font-size); - line-height: inherit; + text-decoration: if($link-decoration == none, null, none); white-space: nowrap; - @include hover-focus() { - text-decoration: none; + &:hover, + &:focus { + text-decoration: if($link-hover-decoration == underline, none, null); } } @@ -82,7 +86,6 @@ .dropdown-menu { position: static; - float: none; } } @@ -92,7 +95,6 @@ // .navbar-text { - display: inline-block; padding-top: $nav-link-padding-y; padding-bottom: $nav-link-padding-y; } @@ -107,11 +109,10 @@ // the default flexbox row orientation. Requires the use of `flex-wrap: wrap` // on the `.navbar` parent. .navbar-collapse { - flex-basis: 100%; - 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; + width: 100%; } // Button for toggling the navbar when in its collapsed state @@ -122,10 +123,17 @@ background-color: transparent; // remove default button style border: $border-width solid transparent; // remove default button style @include border-radius($navbar-toggler-border-radius); + @include transition($navbar-toggler-transition); - @include hover-focus() { + &:hover { text-decoration: none; } + + &:focus { + text-decoration: none; + outline: 0; + box-shadow: 0 0 0 $navbar-toggler-focus-width; + } } // Keep as a separate element so folks can easily override it with another icon @@ -135,9 +143,9 @@ width: 1.5em; height: 1.5em; vertical-align: middle; - content: ""; - background: no-repeat center center; - background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center; + background-size: 100%; } // Generate series of `.navbar-expand-*` responsive classes for configuring @@ -148,26 +156,8 @@ $infix: breakpoint-infix($next, $grid-breakpoints); &#{$infix} { - @include media-breakpoint-down($breakpoint) { - %container-navbar-expand-#{$breakpoint} { - padding-right: 0; - padding-left: 0; - } - - > .container, - > .container-fluid { - @extend %container-navbar-expand-#{$breakpoint}; - } - - @each $size, $container-max-width in $container-max-widths { - > .container#{breakpoint-infix($size, $container-max-widths)} { - @extend %container-navbar-expand-#{$breakpoint}; - } - } - } - @include media-breakpoint-up($next) { - flex-flow: row nowrap; + flex-wrap: nowrap; justify-content: flex-start; .navbar-nav { @@ -183,27 +173,8 @@ } } - // For nesting containers, have to redeclare for alignment purposes - %container-nesting-#{$breakpoint} { - flex-wrap: nowrap; - } - - > .container, - > .container-fluid { - @extend %container-nesting-#{$breakpoint}; - } - - @each $size, $container-max-width in $container-max-widths { - > .container#{breakpoint-infix($size, $container-max-widths)} { - @extend %container-nesting-#{$breakpoint}; - } - } - .navbar-collapse { display: flex !important; // stylelint-disable-line declaration-no-important - - // Changes flex-bases to auto because of an IE10 bug - flex-basis: auto; } .navbar-toggler { @@ -224,7 +195,8 @@ .navbar-brand { color: $navbar-light-brand-color; - @include hover-focus() { + &:hover, + &:focus { color: $navbar-light-brand-hover-color; } } @@ -233,7 +205,8 @@ .nav-link { color: $navbar-light-color; - @include hover-focus() { + &:hover, + &:focus { color: $navbar-light-hover-color; } @@ -243,8 +216,6 @@ } .show > .nav-link, - .active > .nav-link, - .nav-link.show, .nav-link.active { color: $navbar-light-active-color; } @@ -261,12 +232,11 @@ .navbar-text { color: $navbar-light-color; - a { - color: $navbar-light-active-color; - @include hover-focus() { - color: $navbar-light-active-color; - } + a, + a:hover, + a:focus { + color: $navbar-light-active-color; } } } @@ -276,7 +246,8 @@ .navbar-brand { color: $navbar-dark-brand-color; - @include hover-focus() { + &:hover, + &:focus { color: $navbar-dark-brand-hover-color; } } @@ -285,7 +256,8 @@ .nav-link { color: $navbar-dark-color; - @include hover-focus() { + &:hover, + &:focus { color: $navbar-dark-hover-color; } @@ -295,8 +267,6 @@ } .show > .nav-link, - .active > .nav-link, - .nav-link.show, .nav-link.active { color: $navbar-dark-active-color; } @@ -313,12 +283,10 @@ .navbar-text { color: $navbar-dark-color; - a { + a, + a:hover, + a:focus { color: $navbar-dark-active-color; - - @include hover-focus() { - color: $navbar-dark-active-color; - } } } } |