0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

Clean up navbar to remove .navbar-toggle, .navbar-collapse, and .navbar-header as they are no longer used; Add .navbar-toggler to .navbar-inverse

This commit is contained in:
Mark Otto 2014-12-01 15:03:09 -08:00
parent 19d15476d8
commit 9180e15e33
9 changed files with 19 additions and 348 deletions

105
dist/css/bootstrap.css vendored
View File

@ -3120,73 +3120,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-radius: .25rem;
}
}
@media (min-width: 48em) {
.navbar-header {
float: left;
}
}
.navbar-collapse {
padding-right: .75rem;
padding-left: .75rem;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
overflow-y: auto;
}
@media (min-width: 48em) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}
@media (max-device-width: 480px) and (orientation: landscape) {
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 200px;
}
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: -.75rem;
margin-left: -.75rem;
}
@media (min-width: 48em) {
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
@ -3256,35 +3189,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.navbar-toggler:focus {
text-decoration: none;
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: .75rem;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: .25rem;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
@media (min-width: 48em) {
.navbar-toggle {
display: none;
}
}
.navbar-nav {
margin: 6.5px -.75rem;
}
@ -3556,12 +3460,15 @@ fieldset[disabled] .navbar-default .btn-link:focus {
background-color: #373a3c;
border-color: #1f2021;
}
.navbar-inverse .navbar-toggler,
.navbar-inverse .navbar-brand > a,
.navbar-inverse .nav-pills > .nav-item > .nav-link {
color: #aab0b5;
}
.navbar-inverse .navbar-toggler:hover,
.navbar-inverse .navbar-brand > a:hover,
.navbar-inverse .nav-pills > .nav-item > .nav-link:hover,
.navbar-inverse .navbar-toggler:focus,
.navbar-inverse .navbar-brand > a:focus,
.navbar-inverse .nav-pills > .nav-item > .nav-link:focus {
color: #fff;
@ -5163,10 +5070,6 @@ button.close {
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.modal-footer:before,
@ -5184,8 +5087,6 @@ button.close {
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.modal-footer:after {
clear: both;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3120,73 +3120,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
border-radius: .25rem;
}
}
@media (min-width: 48em) {
.navbar-header {
float: left;
}
}
.navbar-collapse {
padding-right: .75rem;
padding-left: .75rem;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
overflow-y: auto;
}
@media (min-width: 48em) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}
@media (max-device-width: 480px) and (orientation: landscape) {
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 200px;
}
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: -.75rem;
margin-left: -.75rem;
}
@media (min-width: 48em) {
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
@ -3256,35 +3189,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.navbar-toggler:focus {
text-decoration: none;
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: .75rem;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: .25rem;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
@media (min-width: 48em) {
.navbar-toggle {
display: none;
}
}
.navbar-nav {
margin: 6.5px -.75rem;
}
@ -3556,12 +3460,15 @@ fieldset[disabled] .navbar-default .btn-link:focus {
background-color: #373a3c;
border-color: #1f2021;
}
.navbar-inverse .navbar-toggler,
.navbar-inverse .navbar-brand > a,
.navbar-inverse .nav-pills > .nav-item > .nav-link {
color: #aab0b5;
}
.navbar-inverse .navbar-toggler:hover,
.navbar-inverse .navbar-brand > a:hover,
.navbar-inverse .nav-pills > .nav-item > .nav-link:hover,
.navbar-inverse .navbar-toggler:focus,
.navbar-inverse .navbar-brand > a:focus,
.navbar-inverse .nav-pills > .nav-item > .nav-link:focus {
color: #fff;
@ -5163,10 +5070,6 @@ button.close {
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.modal-footer:before,
@ -5184,8 +5087,6 @@ button.close {
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.modal-footer:after {
clear: both;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -24,102 +24,6 @@
}
// 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;
visibility: visible !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: 480px) 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
//
@ -190,7 +94,12 @@
*/
}
// New hotness
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggler {
float: left;
padding: .55rem .75rem;
@ -208,47 +117,6 @@
}
// 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
@ -553,6 +421,7 @@
background-color: @navbar-inverse-bg;
border-color: @navbar-inverse-border;
.navbar-toggler,
.navbar-brand > a,
.nav-pills > .nav-item > .nav-link {
color: @navbar-inverse-link-color;