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
parent
19d15476d8
commit
9180e15e33
|
|
@ -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
|
|
@ -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
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue