diff options
Diffstat (limited to '')
| -rw-r--r-- | assets/css/bootstrap-3.3.2/navbar.less (renamed from assets/css/lib/bootstrap/_navbar.scss) | 302 |
1 files changed, 152 insertions, 150 deletions
diff --git a/assets/css/lib/bootstrap/_navbar.scss b/assets/css/bootstrap-3.3.2/navbar.less index 3b94d6f..0c83503 100644 --- a/assets/css/lib/bootstrap/_navbar.scss +++ b/assets/css/bootstrap-3.3.2/navbar.less @@ -10,15 +10,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; + 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(); + &:extend(.clearfix all); - @media (min-width: $grid-float-breakpoint) { - border-radius: $navbar-border-radius; + @media (min-width: @grid-float-breakpoint) { + border-radius: @navbar-border-radius; } } @@ -29,9 +29,9 @@ // styling of responsive aspects. .navbar-header { - @include clearfix(); + &:extend(.clearfix all); - @media (min-width: $grid-float-breakpoint) { + @media (min-width: @grid-float-breakpoint) { float: left; } } @@ -49,24 +49,25 @@ .navbar-collapse { overflow-x: visible; - padding-right: $navbar-padding-horizontal; - padding-left: $navbar-padding-horizontal; + 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); - @include clearfix(); + &:extend(.clearfix all); -webkit-overflow-scrolling: touch; &.in { overflow-y: auto; } - @media (min-width: $grid-float-breakpoint) { + @media (min-width: @grid-float-breakpoint) { width: auto; border-top: 0; box-shadow: none; &.collapse { display: block !important; + visibility: visible !important; height: auto !important; padding-bottom: 0; // Override default setting overflow: visible !important; @@ -90,9 +91,9 @@ .navbar-fixed-top, .navbar-fixed-bottom { .navbar-collapse { - max-height: $navbar-collapse-max-height; + max-height: @navbar-collapse-max-height; - @media (max-width: $screen-xs-min) and (orientation: landscape) { + @media (max-device-width: @screen-xs-min) and (orientation: landscape) { max-height: 200px; } } @@ -107,10 +108,10 @@ .container-fluid { > .navbar-header, > .navbar-collapse { - margin-right: -$navbar-padding-horizontal; - margin-left: -$navbar-padding-horizontal; + margin-right: -@navbar-padding-horizontal; + margin-left: -@navbar-padding-horizontal; - @media (min-width: $grid-float-breakpoint) { + @media (min-width: @grid-float-breakpoint) { margin-right: 0; margin-left: 0; } @@ -126,10 +127,10 @@ // Static top (unfixed, but 100% wide) navbar .navbar-static-top { - z-index: $zindex-navbar; + z-index: @zindex-navbar; border-width: 0 0 1px; - @media (min-width: $grid-float-breakpoint) { + @media (min-width: @grid-float-breakpoint) { border-radius: 0; } } @@ -140,11 +141,10 @@ position: fixed; right: 0; left: 0; - z-index: $zindex-navbar-fixed; - @include translate3d(0, 0, 0); + z-index: @zindex-navbar-fixed; // Undo the rounded corners - @media (min-width: $grid-float-breakpoint) { + @media (min-width: @grid-float-breakpoint) { border-radius: 0; } } @@ -163,20 +163,24 @@ .navbar-brand { float: left; - padding: $navbar-padding-vertical $navbar-padding-horizontal; - font-size: $font-size-large; - line-height: $line-height-computed; - height: $navbar-height; + 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; } - @media (min-width: $grid-float-breakpoint) { + > img { + display: block; + } + + @media (min-width: @grid-float-breakpoint) { .navbar > .container &, .navbar > .container-fluid & { - margin-left: -$navbar-padding-horizontal; + margin-left: -@navbar-padding-horizontal; } } } @@ -190,13 +194,13 @@ .navbar-toggle { position: relative; float: right; - margin-right: $navbar-padding-horizontal; + margin-right: @navbar-padding-horizontal; padding: 9px 10px; - @include navbar-vertical-align(34px); + .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; + border-radius: @border-radius-base; // We remove the `outline` here, but later compensate by attaching `:hover` // styles to `:focus`. @@ -215,7 +219,7 @@ margin-top: 4px; } - @media (min-width: $grid-float-breakpoint) { + @media (min-width: @grid-float-breakpoint) { display: none; } } @@ -227,15 +231,15 @@ // the nav the full height of the horizontal nav (above 768px). .navbar-nav { - margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal); + margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal; > li > a { padding-top: 10px; padding-bottom: 10px; - line-height: $line-height-computed; + line-height: @line-height-computed; } - @media (max-width: $grid-float-breakpoint-max) { + @media (max-width: @grid-float-breakpoint-max) { // Dropdowns get custom display when collapsed .open .dropdown-menu { position: static; @@ -250,7 +254,7 @@ padding: 5px 15px 5px 25px; } > li > a { - line-height: $line-height-computed; + line-height: @line-height-computed; &:hover, &:focus { background-image: none; @@ -260,37 +264,17 @@ } // Uncollapse the nav - @media (min-width: $grid-float-breakpoint) { + @media (min-width: @grid-float-breakpoint) { float: left; margin: 0; > li { float: left; > a { - padding-top: $navbar-padding-vertical; - padding-bottom: $navbar-padding-vertical; + padding-top: @navbar-padding-vertical; + padding-bottom: @navbar-padding-vertical; } } - - &.navbar-right:last-child { - 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. - -@media (min-width: $grid-float-breakpoint) { - .navbar-left { - float: left !important; - } - .navbar-right { - float: right !important; } } @@ -301,40 +285,39 @@ // our navbars. .navbar-form { - margin-left: -$navbar-padding-horizontal; - margin-right: -$navbar-padding-horizontal; - padding: 10px $navbar-padding-horizontal; + 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); + @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 - @extend .form-inline; + .form-inline(); .form-group { - @media (max-width: $grid-float-breakpoint-max) { + @media (max-width: @grid-float-breakpoint-max) { margin-bottom: 5px; + + &:last-child { + margin-bottom: 0; + } } } // Vertically center in expanded, horizontal navbar - @include navbar-vertical-align($input-height-base); + .navbar-vertical-align(@input-height-base); // Undo 100% width for pull classes - @media (min-width: $grid-float-breakpoint) { + @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); - - // Outdent the form if last child to line up with content down the page - &.navbar-right:last-child { - margin-right: -$navbar-padding-horizontal; - } + .box-shadow(none); } } @@ -344,11 +327,13 @@ // Menu position and menu carets .navbar-nav > li > .dropdown-menu { margin-top: 0; - @include border-top-radius(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 { - @include border-bottom-radius(0); + margin-bottom: 0; + .border-top-radius(@navbar-border-radius); + .border-bottom-radius(0); } @@ -357,13 +342,13 @@ // Vertically center a button within a navbar (when *not* in a form). .navbar-btn { - @include navbar-vertical-align($input-height-base); + .navbar-vertical-align(@input-height-base); &.btn-sm { - @include navbar-vertical-align($input-height-small); + .navbar-vertical-align(@input-height-small); } &.btn-xs { - @include navbar-vertical-align(22); + .navbar-vertical-align(22); } } @@ -373,83 +358,100 @@ // Add a class to make any element properly align itself vertically within the navbars. .navbar-text { - @include navbar-vertical-align($line-height-computed); + .navbar-vertical-align(@line-height-computed); - @media (min-width: $grid-float-breakpoint) { + @media (min-width: @grid-float-breakpoint) { float: left; - margin-left: $navbar-padding-horizontal; - margin-right: $navbar-padding-horizontal; + margin-left: @navbar-padding-horizontal; + margin-right: @navbar-padding-horizontal; + } +} + - // Outdent the form if last child to line up with content down the page - &.navbar-right:last-child { +// 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; + background-color: @navbar-default-bg; + border-color: @navbar-default-border; .navbar-brand { - color: $navbar-default-brand-color; + color: @navbar-default-brand-color; &:hover, &:focus { - color: $navbar-default-brand-hover-color; - background-color: $navbar-default-brand-hover-bg; + color: @navbar-default-brand-hover-color; + background-color: @navbar-default-brand-hover-bg; } } .navbar-text { - color: $navbar-default-color; + color: @navbar-default-color; } .navbar-nav { > li > a { - color: $navbar-default-link-color; + color: @navbar-default-link-color; &:hover, &:focus { - color: $navbar-default-link-hover-color; - background-color: $navbar-default-link-hover-bg; + 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; + 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; + color: @navbar-default-link-disabled-color; + background-color: @navbar-default-link-disabled-bg; } } } .navbar-toggle { - border-color: $navbar-default-toggle-border-color; + border-color: @navbar-default-toggle-border-color; &:hover, &:focus { - background-color: $navbar-default-toggle-hover-bg; + background-color: @navbar-default-toggle-hover-bg; } .icon-bar { - background-color: $navbar-default-toggle-icon-bar-bg; + background-color: @navbar-default-toggle-icon-bar-bg; } } .navbar-collapse, .navbar-form { - border-color: $navbar-default-border; + border-color: @navbar-default-border; } // Dropdown menu items @@ -459,36 +461,36 @@ &, &:hover, &:focus { - background-color: $navbar-default-link-active-bg; - color: $navbar-default-link-active-color; + background-color: @navbar-default-link-active-bg; + color: @navbar-default-link-active-color; } } - @media (max-width: $grid-float-breakpoint-max) { + @media (max-width: @grid-float-breakpoint-max) { // Dropdowns get custom display when collapsed .open .dropdown-menu { > li > a { - color: $navbar-default-link-color; + color: @navbar-default-link-color; &:hover, &:focus { - color: $navbar-default-link-hover-color; - background-color: $navbar-default-link-hover-bg; + 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; + 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; + color: @navbar-default-link-disabled-color; + background-color: @navbar-default-link-disabled-bg; } } } @@ -501,23 +503,23 @@ // Add a class to ensure links outside the navbar nav are colored correctly. .navbar-link { - color: $navbar-default-link-color; + color: @navbar-default-link-color; &:hover { - color: $navbar-default-link-hover-color; + color: @navbar-default-link-hover-color; } } .btn-link { - color: $navbar-default-link-color; + color: @navbar-default-link-color; &:hover, &:focus { - color: $navbar-default-link-hover-color; + color: @navbar-default-link-hover-color; } &[disabled], fieldset[disabled] & { &:hover, &:focus { - color: $navbar-default-link-disabled-color; + color: @navbar-default-link-disabled-color; } } } @@ -526,65 +528,65 @@ // Inverse navbar .navbar-inverse { - background-color: $navbar-inverse-bg; - border-color: $navbar-inverse-border; + background-color: @navbar-inverse-bg; + border-color: @navbar-inverse-border; .navbar-brand { - color: $navbar-inverse-brand-color; + color: @navbar-inverse-brand-color; &:hover, &:focus { - color: $navbar-inverse-brand-hover-color; - background-color: $navbar-inverse-brand-hover-bg; + color: @navbar-inverse-brand-hover-color; + background-color: @navbar-inverse-brand-hover-bg; } } .navbar-text { - color: $navbar-inverse-color; + color: @navbar-inverse-color; } .navbar-nav { > li > a { - color: $navbar-inverse-link-color; + color: @navbar-inverse-link-color; &:hover, &:focus { - color: $navbar-inverse-link-hover-color; - background-color: $navbar-inverse-link-hover-bg; + 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; + 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; + 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; + border-color: @navbar-inverse-toggle-border-color; &:hover, &:focus { - background-color: $navbar-inverse-toggle-hover-bg; + background-color: @navbar-inverse-toggle-hover-bg; } .icon-bar { - background-color: $navbar-inverse-toggle-icon-bar-bg; + background-color: @navbar-inverse-toggle-icon-bar-bg; } } .navbar-collapse, .navbar-form { - border-color: darken($navbar-inverse-bg, 7%); + border-color: darken(@navbar-inverse-bg, 7%); } // Dropdowns @@ -593,42 +595,42 @@ &, &:hover, &:focus { - background-color: $navbar-inverse-link-active-bg; - color: $navbar-inverse-link-active-color; + background-color: @navbar-inverse-link-active-bg; + color: @navbar-inverse-link-active-color; } } - @media (max-width: $grid-float-breakpoint-max) { + @media (max-width: @grid-float-breakpoint-max) { // Dropdowns get custom display .open .dropdown-menu { > .dropdown-header { - border-color: $navbar-inverse-border; + border-color: @navbar-inverse-border; } .divider { - background-color: $navbar-inverse-border; + background-color: @navbar-inverse-border; } > li > a { - color: $navbar-inverse-link-color; + color: @navbar-inverse-link-color; &:hover, &:focus { - color: $navbar-inverse-link-hover-color; - background-color: $navbar-inverse-link-hover-bg; + 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; + 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; + color: @navbar-inverse-link-disabled-color; + background-color: @navbar-inverse-link-disabled-bg; } } } @@ -636,23 +638,23 @@ } .navbar-link { - color: $navbar-inverse-link-color; + color: @navbar-inverse-link-color; &:hover { - color: $navbar-inverse-link-hover-color; + color: @navbar-inverse-link-hover-color; } } .btn-link { - color: $navbar-inverse-link-color; + color: @navbar-inverse-link-color; &:hover, &:focus { - color: $navbar-inverse-link-hover-color; + color: @navbar-inverse-link-hover-color; } &[disabled], fieldset[disabled] & { &:hover, &:focus { - color: $navbar-inverse-link-disabled-color; + color: @navbar-inverse-link-disabled-color; } } } |