Show More
navbar.less
660 lines
| 14.3 KiB
| text/x-less
|
LessCssLexer
r0 | // | |||
// Navbars | ||||
// -------------------------------------------------- | ||||
// Wrapper and base class | ||||
// | ||||
// Provide a static navbar from which we expand to create full-width, fixed, and | ||||
// other navbar variations. | ||||
.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 | ||||
&:extend(.clearfix all); | ||||
@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 { | ||||
&:extend(.clearfix all); | ||||
@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); | ||||
&:extend(.clearfix all); | ||||
-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; | ||||
} | ||||
} | ||||
} | ||||
// | ||||
// Navbar alignment options | ||||
// | ||||
// Display the navbar across the entirety of the page or fixed it to the top or | ||||
// bottom of the page. | ||||
// 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; | ||||
} | ||||
} | ||||
// 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 | ||||
@media (min-width: @grid-float-breakpoint) { | ||||
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; | ||||
} | ||||
// 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; | ||||
&: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; | ||||
margin-right: @navbar-padding-horizontal; | ||||
padding: 9px 10px; | ||||
.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; | ||||
} | ||||
} | ||||
// Navbar nav links | ||||
// | ||||
// 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; | ||||
} | ||||
} | ||||
} | ||||
} | ||||
// Uncollapse the nav | ||||
@media (min-width: @grid-float-breakpoint) { | ||||
float: left; | ||||
margin: 0; | ||||
> li { | ||||
float: left; | ||||
> a { | ||||
padding-top: @navbar-padding-vertical; | ||||
padding-bottom: @navbar-padding-vertical; | ||||
} | ||||
} | ||||
} | ||||
} | ||||
// 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); | ||||
.box-shadow(@shadow); | ||||
// Mixin behavior for optimum display | ||||
.form-inline(); | ||||
.form-group { | ||||
@media (max-width: @grid-float-breakpoint-max) { | ||||
margin-bottom: 5px; | ||||
&:last-child { | ||||
margin-bottom: 0; | ||||
} | ||||
} | ||||
} | ||||
// Vertically center in expanded, horizontal navbar | ||||
.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; | ||||
.box-shadow(none); | ||||
} | ||||
} | ||||
// Dropdown menus | ||||
// Menu position and menu carets | ||||
.navbar-nav > li > .dropdown-menu { | ||||
margin-top: 0; | ||||
.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; | ||||
.border-top-radius(@navbar-border-radius); | ||||
.border-bottom-radius(0); | ||||
} | ||||
// Buttons in navbars | ||||
// | ||||
// Vertically center a button within a navbar (when *not* in a form). | ||||
.navbar-btn { | ||||
.navbar-vertical-align(@input-height-base); | ||||
&.btn-sm { | ||||
.navbar-vertical-align(@input-height-small); | ||||
} | ||||
&.btn-xs { | ||||
.navbar-vertical-align(22); | ||||
} | ||||
} | ||||
// Text in navbars | ||||
// | ||||
// Add a class to make any element properly align itself vertically within the navbars. | ||||
.navbar-text { | ||||
.navbar-vertical-align(@line-height-computed); | ||||
@media (min-width: @grid-float-breakpoint) { | ||||
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. | ||||
@media (min-width: @grid-float-breakpoint) { | ||||
.navbar-left { .pull-left(); } | ||||
.navbar-right { | ||||
.pull-right(); | ||||
margin-right: -@navbar-padding-horizontal; | ||||
~ .navbar-right { | ||||
margin-right: 0; | ||||
} | ||||
} | ||||
} | ||||
// Alternate navbars | ||||
// -------------------------------------------------- | ||||
// Default navbar | ||||
.navbar-default { | ||||
background-color: @navbar-default-bg; | ||||
border-color: @navbar-default-border; | ||||
.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; | ||||
&: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; | ||||
} | ||||
} | ||||
.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; | ||||
} | ||||
} | ||||
@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; | ||||
} | ||||
} | ||||
} | ||||
} | ||||
} | ||||
// 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; | ||||
} | ||||
} | ||||
.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; | ||||
} | ||||
} | ||||
} | ||||
} | ||||
// Inverse navbar | ||||
.navbar-inverse { | ||||
background-color: @navbar-inverse-bg; | ||||
border-color: @navbar-inverse-border; | ||||
.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; | ||||
&: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; | ||||
} | ||||
} | ||||
} | ||||
// 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; | ||||
} | ||||
} | ||||
@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; | ||||
} | ||||
} | ||||
} | ||||
} | ||||
} | ||||
.navbar-link { | ||||
color: @navbar-inverse-link-color; | ||||
&:hover { | ||||
color: @navbar-inverse-link-hover-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; | ||||
} | ||||
} | ||||
} | ||||
} | ||||