diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_navbar.scss')
| -rw-r--r-- | vendor/twbs/bootstrap/scss/_navbar.scss | 116 |
1 files changed, 45 insertions, 71 deletions
diff --git a/vendor/twbs/bootstrap/scss/_navbar.scss b/vendor/twbs/bootstrap/scss/_navbar.scss index cf5b66790..2ccef11b7 100644 --- a/vendor/twbs/bootstrap/scss/_navbar.scss +++ b/vendor/twbs/bootstrap/scss/_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-end; @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; } @@ -122,10 +124,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,15 +144,17 @@ width: 1.5em; height: 1.5em; vertical-align: middle; - content: ""; - background: 50% / 100% 100% no-repeat; + background-repeat: no-repeat; + background-position: center; + background-size: 100%; } .navbar-nav-scroll { - max-height: $navbar-nav-scroll-max-height; + max-height: var(--#{$variable-prefix}scroll-height, 75vh); overflow-y: auto; } +// scss-docs-start navbar-expand-loop // Generate series of `.navbar-expand-*` responsive classes for configuring // where your navbar collapses. .navbar-expand { @@ -151,27 +162,10 @@ $next: breakpoint-next($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($next, $grid-breakpoints); + // stylelint-disable-next-line scss/selector-no-union-class-name &#{$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 { @@ -187,30 +181,12 @@ } } - // 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-nav-scroll { overflow: visible; } .navbar-collapse { display: flex !important; // stylelint-disable-line declaration-no-important - - // Changes flex-bases to auto because of an IE10 bug flex-basis: auto; } @@ -221,6 +197,7 @@ } } } +// scss-docs-end navbar-expand-loop // Navbar themes @@ -232,7 +209,8 @@ .navbar-brand { color: $navbar-light-brand-color; - @include hover-focus() { + &:hover, + &:focus { color: $navbar-light-brand-hover-color; } } @@ -241,7 +219,8 @@ .nav-link { color: $navbar-light-color; - @include hover-focus() { + &:hover, + &:focus { color: $navbar-light-hover-color; } @@ -251,8 +230,6 @@ } .show > .nav-link, - .active > .nav-link, - .nav-link.show, .nav-link.active { color: $navbar-light-active-color; } @@ -269,12 +246,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; } } } @@ -284,7 +260,8 @@ .navbar-brand { color: $navbar-dark-brand-color; - @include hover-focus() { + &:hover, + &:focus { color: $navbar-dark-brand-hover-color; } } @@ -293,7 +270,8 @@ .nav-link { color: $navbar-dark-color; - @include hover-focus() { + &:hover, + &:focus { color: $navbar-dark-hover-color; } @@ -303,8 +281,6 @@ } .show > .nav-link, - .active > .nav-link, - .nav-link.show, .nav-link.active { color: $navbar-dark-active-color; } @@ -321,12 +297,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; - } } } } |