diff options
Diffstat (limited to 'less')
| -rw-r--r-- | less/dropdowns.less | 5 | ||||
| -rw-r--r-- | less/navbar.less | 331 | ||||
| -rw-r--r-- | less/variables.less | 8 |
3 files changed, 247 insertions, 97 deletions
diff --git a/less/dropdowns.less b/less/dropdowns.less index 055d76717..99cf7d00d 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -21,6 +21,11 @@ position: relative; } +// Prevent the focus on the dropdown toggle when closing dropdowns +.dropdown-toggle:focus { + outline: 0; +} + // The dropdown menu (ul) .dropdown-menu { position: absolute; diff --git a/less/navbar.less b/less/navbar.less index 1549220c9..f23598fc0 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -2,69 +2,89 @@ // 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; - padding-left: @navbar-padding-horizontal; - padding-right: @navbar-padding-horizontal; background-color: @navbar-bg; - border-radius: @navbar-border-radius; + border: 1px solid @navbar-border; // Prevent floats from breaking the navbar .clearfix(); + + @media (min-width: @grid-float-breakpoint) { + border-radius: @navbar-border-radius; + } } -// Navbar nav links -// ------------------------- -.navbar-nav { - > li > a { - padding-top: ((@navbar-height - @line-height-computed) / 2); - padding-bottom: ((@navbar-height - @line-height-computed) / 2); - color: @navbar-link-color; - line-height: @line-height-computed; - border-radius: @border-radius-base; - &:hover, - &:focus { - color: @navbar-link-hover-color; - background-color: @navbar-link-hover-bg; - } - } - > .active > a { - &, - &:hover, - &:focus { - color: @navbar-link-active-color; - background-color: @navbar-link-active-bg; - } - } - > .disabled > a { - &, - &:hover, - &:focus { - color: @navbar-link-disabled-color; - background-color: @navbar-link-disabled-bg; - } - } +// Navbar heading +// +// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy +// styling of responsive aspects. - // Right aligned contents - // Make them full width first so that they align properly on mobile - &.pull-right { - width: 100%; +.navbar-header { + padding-left: @navbar-padding-horizontal; + padding-right: @navbar-padding-horizontal; + .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 { + padding: 5px @navbar-padding-horizontal; + border-top: 1px solid darken(@navbar-bg, 7%); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1); + // Clear floated elements and prevent collapsing of padding + .clearfix(); + + // This is not automatically added to the `.navbar-fixed-top` because it causes + // z-index bugs in iOS7 (possibly earlier). + max-height: 360px; + overflow-x: visible; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + + @media (min-width: @grid-float-breakpoint) { + width: auto; + padding-top: 0; + padding-bottom: 0; + border-top: 0; + } +} + // // Navbar alignment options -// -------------------------------------------------- +// +// Display the navbar across the entirity of the page or fixed it to the top or +// bottom of the page. -// Static navbar +// Static top (unfixed, but 100% wide) navbar .navbar-static-top { - border-radius: 0; + @media (min-width: @grid-float-breakpoint) { + border-width: 0 0 1px; + border-radius: 0; + } } // Fix the top/bottom navbars when screen real estate supports it @@ -74,7 +94,12 @@ right: 0; left: 0; z-index: @zindex-navbar-fixed; - border-radius: 0; + border-width: 0 0 1px; + + // Undo the rounded corners + @media (min-width: @grid-float-breakpoint) { + border-radius: 0; + } } .navbar-fixed-top { top: 0; @@ -84,51 +109,12 @@ margin-bottom: 0; // override .navbar defaults } -.nav-collapse { - // Prevent overlap of `.navbar-brand` and `.navbar-toggle` - clear: both; - // Space out collapsed contents within the mobile navbar - padding-bottom: @navbar-padding-vertical; - // Clear floated elements and prevent collapsing of padding - .clearfix(); - - // When there is no `.navbar-brand` present (which normally sits between the - // navbar brand and toggle), prevent the nav from overlapping the toggle. - .navbar-toggle + & { - width: 100%; - margin-top: @navbar-height; - } -} - - -// Scrollable navbar navigation -// -// Sometimes you might have too many links in your fixed navbar and you need to -// maintain access to all that content. To help, add `.nav-collapse-scrollable` -// to your `.nav-collapse` to prevent the the content from flowing past the max- -// height of your browser. -// -// This is not automatically added to the `.navbar-fixed-top` because it causes -// z-index bugs in iOS7 (possibly earlier). - -@media (max-width: @screen-small) { - .nav-collapse-scrollable { - margin-bottom: @navbar-padding-vertical; - max-height: 360px; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; - } -} - - -// -// Navbar optional components -// -------------------------------------------------- // Brand/project name + .navbar-brand { float: left; - margin-right: 15px; + margin-right: (@navbar-padding-horizontal / 2); padding-top: @navbar-padding-vertical; padding-bottom: @navbar-padding-vertical; font-size: @font-size-large; @@ -142,13 +128,17 @@ } } -// Collapsible navbar toggle + +// Navbar toggle +// +// Custom button for toggling the `.navbar-collapse`, powered by the collapse +// JavaScript plugin. + .navbar-toggle { position: relative; float: right; padding: 9px 10px; .navbar-vertical-align(34px); - margin-right: -10px; background-color: transparent; border: 1px solid @navbar-toggle-border-color; border-radius: @border-radius-base; @@ -171,12 +161,134 @@ } } + +// Navbar nav links +// +// Builds on top of the `.nav` components with it's own modifier class to make +// the nav the full height of the horizontal nav (above 768px). + +.navbar-nav { + margin-left: -@navbar-padding-horizontal; + margin-right: -@navbar-padding-horizontal; + + @media (min-width: @grid-float-breakpoint) { + margin-left: 0; + margin-right: 0; + } + + > li > a { + padding-top: 10px; + padding-bottom: 10px; + color: @navbar-link-color; + line-height: @line-height-computed; + &:hover, + &:focus { + color: @navbar-link-hover-color; + background-color: @navbar-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-link-active-color; + background-color: @navbar-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-link-disabled-color; + background-color: @navbar-link-disabled-bg; + } + } + + // Right aligned contents + // Make them full width first so that they align properly on mobile + &.pull-right { + width: 100%; + } + + @media (max-width: @screen-phone-max) { + // Dropdowns get custom display + .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 { + color: @navbar-link-color; + line-height: @line-height-computed; + &:hover, + &:focus { + color: @navbar-link-hover-color; + background-color: @navbar-link-hover-bg; + background-image: none; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-link-active-color; + background-color: @navbar-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-link-disabled-color; + background-color: @navbar-link-disabled-bg; + } + } + } + } + +} + + // Navbar form +// +// Extension of the `.form-inline` with some extra flavor for optimum display in +// our navbars. + .navbar-form { + width: 100%; // Counteract the float from `.pull-` classes + padding: 10px @navbar-padding-horizontal; + border-top: 1px solid darken(@navbar-bg, 7%); + border-bottom: 1px solid darken(@navbar-bg, 7%); + + // Mixin behavior for optimum display .form-inline(); - .navbar-vertical-align(@input-height-base); // Vertically center in navbar + + .form-group { + @media (max-width: @screen-phone-max) { + margin-bottom: 5px; + } + } + + // 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; + padding-top: 0; + padding-bottom: 0; + } } + // Dropdown menus // Menu position and menu carets @@ -231,6 +343,7 @@ .navbar-inverse { background-color: @navbar-inverse-bg; + border-color: @navbar-inverse-border; .navbar-brand { color: @navbar-inverse-brand-color; @@ -285,6 +398,10 @@ } } + .navbar-collapse { + border-top-color: darken(@navbar-inverse-bg, 7%); + } + // Dropdowns .navbar-nav { > .open > a { @@ -313,7 +430,38 @@ } } } + + @media (max-width: @screen-phone-max) { + // Dropdowns get custom display + .open .dropdown-menu { + > 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; + } + } + } + } } + } @@ -323,11 +471,6 @@ @media screen and (min-width: @grid-float-breakpoint) { - // Undo clearing to keep nav and brand horizontal - .nav-collapse { - clear: none; - } - .navbar-nav { float: left; // undo margin to make nav extend full height of navbar @@ -337,7 +480,8 @@ > li { float: left; > a { - border-radius: 0; + padding-top: ((@navbar-height - @line-height-computed) / 2); + padding-bottom: ((@navbar-height - @line-height-computed) / 2); } } @@ -353,7 +497,7 @@ left: auto; display: none; } - .nav-collapse.collapse { + .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; // Override default setting @@ -380,7 +524,6 @@ .navbar-text { float: left; - padding: 0 @navbar-padding-horizontal; .navbar-vertical-align(@line-height-computed); } diff --git a/less/variables.less b/less/variables.less index 4bdf54905..089f4fb19 100644 --- a/less/variables.less +++ b/less/variables.less @@ -231,9 +231,10 @@ // Basics of a navbar @navbar-height: 50px; -@navbar-color: #777; -@navbar-bg: #eee; @navbar-margin-bottom: @line-height-computed; +@navbar-color: #777; +@navbar-bg: #f8f8f8; +@navbar-border: darken(@navbar-bg, 6.5%); @navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @@ -243,7 +244,7 @@ @navbar-link-hover-color: #333; @navbar-link-hover-bg: transparent; @navbar-link-active-color: #555; -@navbar-link-active-bg: darken(@navbar-bg, 10%); +@navbar-link-active-bg: darken(@navbar-bg, 6.5%); @navbar-link-disabled-color: #ccc; @navbar-link-disabled-bg: transparent; @@ -263,6 +264,7 @@ // Reset inverted navbar basics @navbar-inverse-color: @gray-light; @navbar-inverse-bg: #222; +@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); // Inverted navbar links @navbar-inverse-link-color: @gray-light; |