/base/000_base/node_modules/bootstrap/less/navbar.less |
@@ -0,0 +1,660 @@ |
// |
// 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; |
} |
} |
} |
} |