diff options
author | Jan Stevens <jan@playpass.be> | 2015-08-19 22:34:56 +0300 |
---|---|---|
committer | Jan Stevens <jan@playpass.be> | 2015-08-19 22:34:56 +0300 |
commit | 7397065e0daf73ac84e0846b0278736163b147a2 (patch) | |
tree | e8d2f8d4fabd6c08ffce6e71663289d8aec925b4 /assets/stylesheets/bootstrap/_navbar.scss | |
parent | 2bab961e660b59462fa05868facb1e7cf298ffe9 (diff) |
New assets update for bootstrap 4
Diffstat (limited to 'assets/stylesheets/bootstrap/_navbar.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_navbar.scss | 652 |
1 files changed, 108 insertions, 544 deletions
diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss index 11e5c01..61c2121 100644 --- a/assets/stylesheets/bootstrap/_navbar.scss +++ b/assets/stylesheets/bootstrap/_navbar.scss @@ -1,8 +1,3 @@ -// -// Navbars -// -------------------------------------------------- - - // Wrapper and base class // // Provide a static navbar from which we expand to create full-width, fixed, and @@ -10,115 +5,15 @@ .navbar { position: relative; - min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) - margin-bottom: $navbar-margin-bottom; - border: 1px solid transparent; - - // Prevent floats from breaking the navbar - @include clearfix; - - @media (min-width: $grid-float-breakpoint) { - border-radius: $navbar-border-radius; - } -} - - -// Navbar heading -// -// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy -// styling of responsive aspects. - -.navbar-header { - @include clearfix; - - @media (min-width: $grid-float-breakpoint) { - float: left; - } -} - - -// Navbar collapse (body) -// -// Group your navbar content into this for easy collapsing and expanding across -// various device sizes. By default, this content is collapsed when <768px, but -// will expand past that for a horizontal display. -// -// To start (on mobile devices) the navbar links, forms, and buttons are stacked -// vertically and include a `max-height` to overflow in case you have too much -// content for the user's viewport. - -.navbar-collapse { - overflow-x: visible; - padding-right: $navbar-padding-horizontal; - padding-left: $navbar-padding-horizontal; - border-top: 1px solid transparent; - box-shadow: inset 0 1px 0 rgba(255,255,255,.1); + padding: $navbar-padding-vertical $navbar-padding-horizontal; @include clearfix; - -webkit-overflow-scrolling: touch; - &.in { - overflow-y: auto; - } - - @media (min-width: $grid-float-breakpoint) { - width: auto; - border-top: 0; - box-shadow: none; - - &.collapse { - display: block !important; - height: auto !important; - padding-bottom: 0; // Override default setting - overflow: visible !important; - } - - &.in { - overflow-y: visible; - } - - // Undo the collapse side padding for navbars with containers to ensure - // alignment of right-aligned contents. - .navbar-fixed-top &, - .navbar-static-top &, - .navbar-fixed-bottom & { - padding-left: 0; - padding-right: 0; - } - } -} - -.navbar-fixed-top, -.navbar-fixed-bottom { - .navbar-collapse { - max-height: $navbar-collapse-max-height; - - @media (max-device-width: $screen-xs-min) and (orientation: landscape) { - max-height: 200px; - } - } -} - - -// Both navbar header and collapse -// -// When a container is present, change the behavior of the header and collapse. - -.container, -.container-fluid { - > .navbar-header, - > .navbar-collapse { - margin-right: -$navbar-padding-horizontal; - margin-left: -$navbar-padding-horizontal; - - @media (min-width: $grid-float-breakpoint) { - margin-right: 0; - margin-left: 0; - } + @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 @@ -127,10 +22,9 @@ // Static top (unfixed, but 100% wide) navbar .navbar-static-top { z-index: $zindex-navbar; - border-width: 0 0 1px; - @media (min-width: $grid-float-breakpoint) { - border-radius: 0; + @include media-breakpoint-up(sm) { + @include border-radius(0); } } @@ -141,522 +35,192 @@ right: 0; left: 0; z-index: $zindex-navbar-fixed; + margin-bottom: 0; // override .navbar defaults // Undo the rounded corners - @media (min-width: $grid-float-breakpoint) { - border-radius: 0; + @include media-breakpoint-up(sm) { + @include border-radius(0); } } + .navbar-fixed-top { top: 0; - border-width: 0 0 1px; } + .navbar-fixed-bottom { bottom: 0; - margin-bottom: 0; // override .navbar defaults - border-width: 1px 0 0; +} + +.navbar-sticky-top { + position: sticky; + top: 0; + z-index: $zindex-navbar-sticky; + width: 100%; + + // Undo the rounded corners + @include media-breakpoint-up(sm) { + @include border-radius(0); + } } +// // Brand/project name +// .navbar-brand { float: left; - padding: $navbar-padding-vertical $navbar-padding-horizontal; - font-size: $font-size-large; - line-height: $line-height-computed; - height: $navbar-height; + margin-right: 1rem; + padding-top: .25rem; + padding-bottom: .25rem; + font-size: $font-size-lg; - &:hover, - &:focus { + @include hover-focus { text-decoration: none; } > img { display: block; } - - @media (min-width: $grid-float-breakpoint) { - .navbar > .container &, - .navbar > .container-fluid & { - margin-left: -$navbar-padding-horizontal; - } - } } -// Navbar toggle -// -// Custom button for toggling the `.navbar-collapse`, powered by the collapse -// JavaScript plugin. - -.navbar-toggle { - position: relative; - float: right; +.navbar-divider { + float: left; + width: 1px; + padding-top: .425rem; + padding-bottom: .425rem; + overflow: hidden; + margin-left: $navbar-padding-horizontal; margin-right: $navbar-padding-horizontal; - padding: 9px 10px; - @include navbar-vertical-align(34px); - background-color: transparent; - background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 - border: 1px solid transparent; - border-radius: $border-radius-base; - - // We remove the `outline` here, but later compensate by attaching `:hover` - // styles to `:focus`. - &:focus { - outline: 0; - } - // Bars - .icon-bar { - display: block; - width: 22px; - height: 2px; - border-radius: 1px; - } - .icon-bar + .icon-bar { - margin-top: 4px; - } - - @media (min-width: $grid-float-breakpoint) { - display: none; + &:before { + content: '\00a0'; } } -// Navbar nav links +// Navbar toggle // -// Builds on top of the `.nav` components with its own modifier class to make -// the nav the full height of the horizontal nav (above 768px). - -.navbar-nav { - margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal); - - > li > a { - padding-top: 10px; - padding-bottom: 10px; - line-height: $line-height-computed; - } - - @media (max-width: $grid-float-breakpoint-max) { - // Dropdowns get custom display when collapsed - .open .dropdown-menu { - position: static; - float: none; - width: auto; - margin-top: 0; - background-color: transparent; - border: 0; - box-shadow: none; - > li > a, - .dropdown-header { - padding: 5px 15px 5px 25px; - } - > li > a { - line-height: $line-height-computed; - &:hover, - &:focus { - background-image: none; - } - } - } - } +// Custom button for toggling the `.navbar-collapse`, powered by the collapse +// Bootstrap JavaScript plugin. - // Uncollapse the nav - @media (min-width: $grid-float-breakpoint) { - float: left; - margin: 0; +.navbar-toggler { + padding: .5rem .75rem; + font-size: $font-size-lg; + line-height: 1; + background: none; + border: $border-width solid transparent; + @include border-radius($btn-border-radius); - > li { - float: left; - > a { - padding-top: $navbar-padding-vertical; - padding-bottom: $navbar-padding-vertical; - } - } + @include hover-focus { + text-decoration: none; } } - -// Navbar form -// -// Extension of the `.form-inline` with some extra flavor for optimum display in -// our navbars. - -.navbar-form { - margin-left: -$navbar-padding-horizontal; - margin-right: -$navbar-padding-horizontal; - padding: 10px $navbar-padding-horizontal; - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; - $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); - @include box-shadow($shadow); - - // Mixin behavior for optimum display - @include form-inline; - - .form-group { - @media (max-width: $grid-float-breakpoint-max) { - margin-bottom: 5px; - - &:last-child { - margin-bottom: 0; - } +// Custom override for +.navbar-toggleable { + &-xs { + @include media-breakpoint-up(sm) { + display: block !important; } } - - // Vertically center in expanded, horizontal navbar - @include navbar-vertical-align($input-height-base); - - // Undo 100% width for pull classes - @media (min-width: $grid-float-breakpoint) { - width: auto; - border: 0; - margin-left: 0; - margin-right: 0; - padding-top: 0; - padding-bottom: 0; - @include box-shadow(none); - } -} - - -// 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 { - margin-bottom: 0; - @include border-top-radius($navbar-border-radius); - @include border-bottom-radius(0); -} - - -// Buttons in navbars -// -// Vertically center a button within a navbar (when *not* in a form). - -.navbar-btn { - @include navbar-vertical-align($input-height-base); - - &.btn-sm { - @include navbar-vertical-align($input-height-small); - } - &.btn-xs { - @include navbar-vertical-align(22); + &-sm { + @include media-breakpoint-up(md) { + display: block !important; + } } } -// Text in navbars +// Navigation // -// Add a class to make any element properly align itself vertically within the navbars. - -.navbar-text { - @include navbar-vertical-align($line-height-computed); +// Custom navbar navigation built on the base `.nav` styles. - @media (min-width: $grid-float-breakpoint) { +.navbar-nav { + .nav-item { float: left; - margin-left: $navbar-padding-horizontal; - margin-right: $navbar-padding-horizontal; } -} - -// Component alignment -// -// Repurpose the pull utilities as their own navbar utilities to avoid specificity -// issues with parents and chaining. Only do this when the navbar is uncollapsed -// though so that navbar contents properly stack and align in mobile. -// -// Declared after the navbar components to ensure more specificity on the margins. + .nav-link { + display: block; + padding-top: .425rem; + padding-bottom: .425rem; -@media (min-width: $grid-float-breakpoint) { - .navbar-left { - float: left !important; + + .nav-link { + margin-left: 1rem; + } } - .navbar-right { - float: right !important; - margin-right: -$navbar-padding-horizontal; - ~ .navbar-right { - margin-right: 0; - } + .nav-item + .nav-item { + margin-left: 1rem; } } - -// Alternate navbars -// -------------------------------------------------- - -// Default navbar -.navbar-default { - background-color: $navbar-default-bg; - border-color: $navbar-default-border; - +// Dark links against a light background +.navbar-light { .navbar-brand { - color: $navbar-default-brand-color; - &: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; + color: $navbar-light-active-color; - &:hover, - &:focus { - color: $navbar-default-link-hover-color; - background-color: $navbar-default-link-hover-bg; - } - } - > .active > a { - &, - &:hover, - &:focus { - color: $navbar-default-link-active-color; - background-color: $navbar-default-link-active-bg; - } - } - > .disabled > a { - &, - &:hover, - &:focus { - color: $navbar-default-link-disabled-color; - background-color: $navbar-default-link-disabled-bg; - } - } - } - - .navbar-toggle { - border-color: $navbar-default-toggle-border-color; - &:hover, - &:focus { - background-color: $navbar-default-toggle-hover-bg; - } - .icon-bar { - background-color: $navbar-default-toggle-icon-bar-bg; + @include hover-focus { + color: $navbar-light-active-color; } } - .navbar-collapse, - .navbar-form { - border-color: $navbar-default-border; - } - - // Dropdown menu items .navbar-nav { - // Remove background color from open dropdown - > .open > a { - &, - &:hover, - &:focus { - background-color: $navbar-default-link-active-bg; - color: $navbar-default-link-active-color; - } - } + .nav-link { + color: $navbar-light-color; - @media (max-width: $grid-float-breakpoint-max) { - // Dropdowns get custom display when collapsed - .open .dropdown-menu { - > li > a { - color: $navbar-default-link-color; - &:hover, - &:focus { - color: $navbar-default-link-hover-color; - background-color: $navbar-default-link-hover-bg; - } - } - > .active > a { - &, - &:hover, - &:focus { - color: $navbar-default-link-active-color; - background-color: $navbar-default-link-active-bg; - } - } - > .disabled > a { - &, - &:hover, - &:focus { - color: $navbar-default-link-disabled-color; - background-color: $navbar-default-link-disabled-bg; - } - } + @include hover-focus { + color: $navbar-light-hover-color; } } - } - - // Links in navbars - // - // Add a class to ensure links outside the navbar nav are colored correctly. - - .navbar-link { - color: $navbar-default-link-color; - &:hover { - color: $navbar-default-link-hover-color; + .open > .nav-link, + .active > .nav-link, + .nav-link.open, + .nav-link.active { + @include plain-hover-focus { + color: $navbar-light-active-color; + } } } - .btn-link { - color: $navbar-default-link-color; - &:hover, - &:focus { - color: $navbar-default-link-hover-color; - } - &[disabled], - fieldset[disabled] & { - &:hover, - &:focus { - color: $navbar-default-link-disabled-color; - } - } + .navbar-divider { + background-color: rgba(0,0,0,.075); } } -// Inverse navbar - -.navbar-inverse { - background-color: $navbar-inverse-bg; - border-color: $navbar-inverse-border; - +// White links against a dark background +.navbar-dark { .navbar-brand { - color: $navbar-inverse-brand-color; - &: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; + color: $navbar-dark-active-color; - &:hover, - &:focus { - color: $navbar-inverse-link-hover-color; - background-color: $navbar-inverse-link-hover-bg; - } - } - > .active > a { - &, - &:hover, - &:focus { - color: $navbar-inverse-link-active-color; - background-color: $navbar-inverse-link-active-bg; - } - } - > .disabled > a { - &, - &:hover, - &:focus { - color: $navbar-inverse-link-disabled-color; - background-color: $navbar-inverse-link-disabled-bg; - } + @include hover-focus { + color: $navbar-dark-active-color; } } - // Darken the responsive nav toggle - .navbar-toggle { - border-color: $navbar-inverse-toggle-border-color; - &:hover, - &:focus { - background-color: $navbar-inverse-toggle-hover-bg; - } - .icon-bar { - background-color: $navbar-inverse-toggle-icon-bar-bg; - } - } - - .navbar-collapse, - .navbar-form { - border-color: darken($navbar-inverse-bg, 7%); - } - - // Dropdowns .navbar-nav { - > .open > a { - &, - &:hover, - &:focus { - background-color: $navbar-inverse-link-active-bg; - color: $navbar-inverse-link-active-color; - } - } + .nav-link { + color: $navbar-dark-color; - @media (max-width: $grid-float-breakpoint-max) { - // Dropdowns get custom display - .open .dropdown-menu { - > .dropdown-header { - border-color: $navbar-inverse-border; - } - .divider { - background-color: $navbar-inverse-border; - } - > li > a { - color: $navbar-inverse-link-color; - &:hover, - &:focus { - color: $navbar-inverse-link-hover-color; - background-color: $navbar-inverse-link-hover-bg; - } - } - > .active > a { - &, - &:hover, - &:focus { - color: $navbar-inverse-link-active-color; - background-color: $navbar-inverse-link-active-bg; - } - } - > .disabled > a { - &, - &:hover, - &:focus { - color: $navbar-inverse-link-disabled-color; - background-color: $navbar-inverse-link-disabled-bg; - } - } + @include hover-focus { + color: $navbar-dark-hover-color; } } - } - .navbar-link { - color: $navbar-inverse-link-color; - &:hover { - color: $navbar-inverse-link-hover-color; + .open > .nav-link, + .active > .nav-link, + .nav-link.open, + .nav-link.active { + @include plain-hover-focus { + color: $navbar-dark-active-color; + } } } - .btn-link { - color: $navbar-inverse-link-color; - &:hover, - &:focus { - color: $navbar-inverse-link-hover-color; - } - &[disabled], - fieldset[disabled] & { - &:hover, - &:focus { - color: $navbar-inverse-link-disabled-color; - } - } + .navbar-divider { + background-color: rgba(255,255,255,.075); } } |