rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

New form control sizing, new navbar condensed variation, update nav and navbar spacing

Browse Source
This commit is contained in:
Mark Otto 2015-04-18 18:12:10 -07:00
parent 7e86bfd9ac
commit 8f94078da8
14 changed files with 275 additions and 382 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
dist/css/bootstrap.css
View File

@ -1802,7 +1802,7 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
padding-left: 0; padding-left: 0;
} }
.input-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn { .form-control-sm {
height: 2rem; height: 2rem;
padding: .3rem .75rem; padding: .3rem .75rem;
font-size: .85rem; font-size: .85rem;
@ -1810,38 +1810,7 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
border-radius: .2rem; border-radius: .2rem;
} }
select.input-sm, .input-group-sm > select.form-control, .input-group-sm > select.input-group-addon, .input-group-sm > .input-group-btn > select.btn { .form-control-lg {
height: 2rem;
line-height: 2rem;
}
textarea.input-sm, .input-group-sm > textarea.form-control, .input-group-sm > textarea.input-group-addon, .input-group-sm > .input-group-btn > textarea.btn, select[multiple].input-sm, .input-group-sm > select[multiple].form-control, .input-group-sm > select[multiple].input-group-addon, .input-group-sm > .input-group-btn > select[multiple].btn {
height: auto;
}
.form-group-sm .form-control {
height: 2rem;
padding: .3rem .75rem;
font-size: .85rem;
line-height: 1.5;
border-radius: .2rem;
}
.form-group-sm select.form-control {
height: 2rem;
line-height: 2rem;
}
.form-group-sm textarea.form-control, .form-group-sm select[multiple].form-control {
height: auto;
}
.form-group-sm .form-control-static {
height: 2rem;
min-height: 1.85rem;
padding: .3rem .75rem;
font-size: .85rem;
line-height: 1.5;
}
.input-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn {
height: 3.291667rem; height: 3.291667rem;
padding: .75rem 1.5rem; padding: .75rem 1.5rem;
font-size: 1.25rem; font-size: 1.25rem;
@ -1849,37 +1818,6 @@ textarea.input-sm, .input-group-sm > textarea.form-control, .input-group-sm > te
border-radius: .3rem; border-radius: .3rem;
} }
select.input-lg, .input-group-lg > select.form-control, .input-group-lg > select.input-group-addon, .input-group-lg > .input-group-btn > select.btn {
height: 3.291667rem;
line-height: 3.291667rem;
}
textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > textarea.input-group-addon, .input-group-lg > .input-group-btn > textarea.btn, select[multiple].input-lg, .input-group-lg > select[multiple].form-control, .input-group-lg > select[multiple].input-group-addon, .input-group-lg > .input-group-btn > select[multiple].btn {
height: auto;
}
.form-group-lg .form-control {
height: 3.291667rem;
padding: .75rem 1.5rem;
font-size: 1.25rem;
line-height: 1.333333;
border-radius: .3rem;
}
.form-group-lg select.form-control {
height: 3.291667rem;
line-height: 3.291667rem;
}
.form-group-lg textarea.form-control, .form-group-lg select[multiple].form-control {
height: auto;
}
.form-group-lg .form-control-static {
height: 3.291667rem;
min-height: 2.25rem;
padding: .75rem 1.5rem;
font-size: 1.25rem;
line-height: 1.333333;
}
.has-feedback { .has-feedback {
position: relative; position: relative;
} }
@ -3015,7 +2953,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
.nav-link { .nav-link {
display: inline-block; display: inline-block;
padding: .6em 1em; padding: .6em 1em;
line-height: 1.5; line-height: 1;
} }
.nav-link:focus, .nav-link:hover { .nav-link:focus, .nav-link:hover {
text-decoration: none; text-decoration: none;
@ -3160,7 +3098,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
.navbar-brand { .navbar-brand {
float: left; float: left;
padding: .725rem .75rem; padding: .95rem .75rem;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.25rem; font-size: 1.25rem;
@ -3236,25 +3174,27 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
@media (min-width: 34em) { .navbar-condensed {
.navbar-text { padding-top: 0;
float: left; padding-bottom: 0;
margin-right: 1rem; }
margin-left: 1rem; .navbar-condensed .form-inline, .navbar-condensed .navbar-form {
} margin-top: .6rem;
} }
@media (min-width: 34em) { .navbar-nav .nav-item {
.navbar-left { float: left;
float: left !important; }
} .navbar-nav .nav-link {
.navbar-right { display: block;
float: right !important; padding-top: .95rem;
margin-right: -1rem; padding-bottom: .95rem;
} line-height: 1.25;
.navbar-right ~ .navbar-right { }
margin-right: 0; .navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:focus, .navbar-nav .open > .nav-link:hover, .navbar-nav .active > .nav-link, .navbar-nav .active > .nav-link:focus, .navbar-nav .active > .nav-link:hover, .navbar-nav .nav-link.open, .navbar-nav .nav-link.open:focus, .navbar-nav .nav-link.open:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-link.active:focus, .navbar-nav .nav-link.active:hover {
} color: #555;
cursor: default;
background-color: #e7e7e7;
} }
.navbar-default { .navbar-default {
@ -3268,55 +3208,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
color: #5e5e5e; color: #5e5e5e;
background-color: transparent; background-color: transparent;
} }
.navbar-default .navbar-text {
color: #777;
}
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:focus, .navbar-default .navbar-nav > .disabled > a:hover {
color: #ccc;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-link {
color: #777;
}
.navbar-default .navbar-link:hover {
color: #333;
}
.navbar-default .btn-link {
color: #777;
}
.navbar-default .btn-link:focus, .navbar-default .btn-link:hover {
color: #333;
}
.navbar-default .btn-link:disabled:focus, .navbar-default .btn-link:disabled:hover, fieldset[disabled] .navbar-default .btn-link:focus, fieldset[disabled] .navbar-default .btn-link:hover {
color: #ccc;
}
.navbar-inverse { .navbar-inverse {
background-color: #373a3c; background-color: #373a3c;

2
dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
docs/_data/nav.yml
View File

@ -10,6 +10,7 @@
- title: Contents - title: Contents
- title: JavaScript - title: JavaScript
- title: Compiling - title: Compiling
- title: Customize
- title: Support - title: Support
# - title: Third party support # - title: Third party support
- title: Accessibility - title: Accessibility

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/docs.min.css.map
View File

File diff suppressed because one or more lines are too long

1
docs/assets/scss/_component-examples.scss
View File

@ -51,6 +51,7 @@
> .nav + .nav, > .nav + .nav,
> .alert + .alert, > .alert + .alert,
> .navbar + .navbar,
> .progress + .progress { > .progress + .progress {
margin-top: 1rem; margin-top: 1rem;
} }

55
docs/components/navbar.md
View File

@ -150,6 +150,61 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a
</nav> </nav>
{% endexample %} {% endexample %}
### Condensed
Condensed navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the padding down, enables full-height navigation, and tweaks vertical alignment for search forms, buttons, and more. It's also available in both default and inverse schemes.
{% example html %}
<nav class="navbar navbar-default navbar-condensed">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button>
</form>
</nav>
<nav class="navbar navbar-inverse navbar-condensed">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button>
</form>
</nav>
{% endexample %}
### Collapsible content ### Collapsible content
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content. Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.

155
docs/dist/css/bootstrap.css
View File

@ -1802,7 +1802,7 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
padding-left: 0; padding-left: 0;
} }
.input-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn { .form-control-sm {
height: 2rem; height: 2rem;
padding: .3rem .75rem; padding: .3rem .75rem;
font-size: .85rem; font-size: .85rem;
@ -1810,38 +1810,7 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
border-radius: .2rem; border-radius: .2rem;
} }
select.input-sm, .input-group-sm > select.form-control, .input-group-sm > select.input-group-addon, .input-group-sm > .input-group-btn > select.btn { .form-control-lg {
height: 2rem;
line-height: 2rem;
}
textarea.input-sm, .input-group-sm > textarea.form-control, .input-group-sm > textarea.input-group-addon, .input-group-sm > .input-group-btn > textarea.btn, select[multiple].input-sm, .input-group-sm > select[multiple].form-control, .input-group-sm > select[multiple].input-group-addon, .input-group-sm > .input-group-btn > select[multiple].btn {
height: auto;
}
.form-group-sm .form-control {
height: 2rem;
padding: .3rem .75rem;
font-size: .85rem;
line-height: 1.5;
border-radius: .2rem;
}
.form-group-sm select.form-control {
height: 2rem;
line-height: 2rem;
}
.form-group-sm textarea.form-control, .form-group-sm select[multiple].form-control {
height: auto;
}
.form-group-sm .form-control-static {
height: 2rem;
min-height: 1.85rem;
padding: .3rem .75rem;
font-size: .85rem;
line-height: 1.5;
}
.input-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn {
height: 3.291667rem; height: 3.291667rem;
padding: .75rem 1.5rem; padding: .75rem 1.5rem;
font-size: 1.25rem; font-size: 1.25rem;
@ -1849,37 +1818,6 @@ textarea.input-sm, .input-group-sm > textarea.form-control, .input-group-sm > te
border-radius: .3rem; border-radius: .3rem;
} }
select.input-lg, .input-group-lg > select.form-control, .input-group-lg > select.input-group-addon, .input-group-lg > .input-group-btn > select.btn {
height: 3.291667rem;
line-height: 3.291667rem;
}
textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > textarea.input-group-addon, .input-group-lg > .input-group-btn > textarea.btn, select[multiple].input-lg, .input-group-lg > select[multiple].form-control, .input-group-lg > select[multiple].input-group-addon, .input-group-lg > .input-group-btn > select[multiple].btn {
height: auto;
}
.form-group-lg .form-control {
height: 3.291667rem;
padding: .75rem 1.5rem;
font-size: 1.25rem;
line-height: 1.333333;
border-radius: .3rem;
}
.form-group-lg select.form-control {
height: 3.291667rem;
line-height: 3.291667rem;
}
.form-group-lg textarea.form-control, .form-group-lg select[multiple].form-control {
height: auto;
}
.form-group-lg .form-control-static {
height: 3.291667rem;
min-height: 2.25rem;
padding: .75rem 1.5rem;
font-size: 1.25rem;
line-height: 1.333333;
}
.has-feedback { .has-feedback {
position: relative; position: relative;
} }
@ -3015,7 +2953,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
.nav-link { .nav-link {
display: inline-block; display: inline-block;
padding: .6em 1em; padding: .6em 1em;
line-height: 1.5; line-height: 1;
} }
.nav-link:focus, .nav-link:hover { .nav-link:focus, .nav-link:hover {
text-decoration: none; text-decoration: none;
@ -3160,7 +3098,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
.navbar-brand { .navbar-brand {
float: left; float: left;
padding: .725rem .75rem; padding: .95rem .75rem;
margin-right: 1rem; margin-right: 1rem;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.25rem; font-size: 1.25rem;
@ -3236,25 +3174,27 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
@media (min-width: 34em) { .navbar-condensed {
.navbar-text { padding-top: 0;
float: left; padding-bottom: 0;
margin-right: 1rem; }
margin-left: 1rem; .navbar-condensed .form-inline, .navbar-condensed .navbar-form {
} margin-top: .6rem;
} }
@media (min-width: 34em) { .navbar-nav .nav-item {
.navbar-left { float: left;
float: left !important; }
} .navbar-nav .nav-link {
.navbar-right { display: block;
float: right !important; padding-top: .95rem;
margin-right: -1rem; padding-bottom: .95rem;
} line-height: 1.25;
.navbar-right ~ .navbar-right { }
margin-right: 0; .navbar-nav .open > .nav-link, .navbar-nav .open > .nav-link:focus, .navbar-nav .open > .nav-link:hover, .navbar-nav .active > .nav-link, .navbar-nav .active > .nav-link:focus, .navbar-nav .active > .nav-link:hover, .navbar-nav .nav-link.open, .navbar-nav .nav-link.open:focus, .navbar-nav .nav-link.open:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-link.active:focus, .navbar-nav .nav-link.active:hover {
} color: #555;
cursor: default;
background-color: #e7e7e7;
} }
.navbar-default { .navbar-default {
@ -3268,55 +3208,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
color: #5e5e5e; color: #5e5e5e;
background-color: transparent; background-color: transparent;
} }
.navbar-default .navbar-text {
color: #777;
}
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:focus, .navbar-default .navbar-nav > .disabled > a:hover {
color: #ccc;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-link {
color: #777;
}
.navbar-default .navbar-link:hover {
color: #333;
}
.navbar-default .btn-link {
color: #777;
}
.navbar-default .btn-link:focus, .navbar-default .btn-link:hover {
color: #333;
}
.navbar-default .btn-link:disabled:focus, .navbar-default .btn-link:disabled:hover, fieldset[disabled] .navbar-default .btn-link:focus, fieldset[disabled] .navbar-default .btn-link:hover {
color: #ccc;
}
.navbar-inverse { .navbar-inverse {
background-color: #373a3c; background-color: #373a3c;

2
docs/dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

48
scss/_forms.scss
View File

@ -228,34 +228,50 @@ input[type="checkbox"] {
// The `.form-group-* form-control` variations are sadly duplicated to avoid the // The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074. // issue documented in https://github.com/twbs/bootstrap/issues/15074.
@include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm); .form-control-sm {
.form-group-sm {
@include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
.form-control-static {
height: $input-height-sm; height: $input-height-sm;
min-height: ($line-height-computed + $font-size-sm);
padding: $padding-sm-vertical $padding-sm-horizontal; padding: $padding-sm-vertical $padding-sm-horizontal;
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: $line-height-sm; line-height: $line-height-sm;
} border-radius: $input-border-radius-sm;
} }
@include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg); .form-control-lg {
.form-group-lg {
@include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
.form-control-static {
height: $input-height-lg; height: $input-height-lg;
min-height: ($line-height-computed + $font-size-lg);
padding: $padding-lg-vertical $padding-lg-horizontal; padding: $padding-lg-vertical $padding-lg-horizontal;
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: $line-height-lg; line-height: $line-height-lg;
} border-radius: $input-border-radius-lg;
} }
// @include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
// .form-group-sm {
// @include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
// .form-control-static {
// height: $input-height-sm;
// min-height: ($line-height-computed + $font-size-sm);
// padding: $padding-sm-vertical $padding-sm-horizontal;
// font-size: $font-size-sm;
// line-height: $line-height-sm;
// }
// }
// @include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
// .form-group-lg {
// @include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
// .form-control-static {
// height: $input-height-lg;
// min-height: ($line-height-computed + $font-size-lg);
// padding: $padding-lg-vertical $padding-lg-horizontal;
// font-size: $font-size-lg;
// line-height: $line-height-lg;
// }
// }
// Form control feedback states // Form control feedback states
// //

2
scss/_nav.scss
View File

@ -21,7 +21,7 @@
.nav-link { .nav-link {
display: inline-block; display: inline-block;
padding: $nav-link-padding; padding: $nav-link-padding;
line-height: $line-height-base; line-height: 1;
@include hover-focus { @include hover-focus {
text-decoration: none; text-decoration: none;

212
scss/_navbar.scss
View File

@ -75,11 +75,11 @@
.navbar-brand { .navbar-brand {
float: left; float: left;
padding: .725rem .75rem; padding: .95rem .75rem;
margin-right: $spacer; margin-right: $spacer;
margin-bottom: 0; // For headings margin-bottom: 0; // For headings
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: $line-height-computed; line-height: 1;
> a { > a {
@include hover-focus { @include hover-focus {
@ -203,15 +203,15 @@
// //
// Add a class to make any element properly align itself vertically within the navbars. // Add a class to make any element properly align itself vertically within the navbars.
.navbar-text { // .navbar-text {
// @include navbar-vertical-align($line-height-computed); // // @include navbar-vertical-align($line-height-computed);
@include media-breakpoint-up(sm) { // @include media-breakpoint-up(sm) {
float: left; // float: left;
margin-right: $navbar-padding-horizontal; // margin-right: $navbar-padding-horizontal;
margin-left: $navbar-padding-horizontal; // margin-left: $navbar-padding-horizontal;
} // }
} // }
// Component alignment // Component alignment
@ -222,16 +222,52 @@
// //
// Declared after the navbar components to ensure more specificity on the margins. // Declared after the navbar components to ensure more specificity on the margins.
@include media-breakpoint-up(sm) { // @include media-breakpoint-up(sm) {
.navbar-left { // .navbar-left {
@include pull-left(); // @include pull-left();
} // }
.navbar-right { // .navbar-right {
@include pull-right(); // @include pull-right();
margin-right: -$navbar-padding-horizontal; // margin-right: -$navbar-padding-horizontal;
~ .navbar-right { // ~ .navbar-right {
margin-right: 0; // margin-right: 0;
// }
// }
// }
// Condensed navbar
.navbar-condensed {
padding-top: 0;
padding-bottom: 0;
.form-inline {
margin-top: .6rem;
}
}
.navbar-nav {
.nav-item {
float: left;
}
.nav-link {
display: block;
padding-top: .95rem;
padding-bottom: .95rem;
line-height: 1.25; // Match the `.navbar-brand`
}
.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
@include plain-hover-focus {
color: $navbar-default-link-active-color;
cursor: default;
background-color: $navbar-default-link-active-bg;
} }
} }
} }
@ -240,6 +276,8 @@
// Alternate navbars // Alternate navbars
// -------------------------------------------------- // --------------------------------------------------
// todo: audit these styles
// Default navbar // Default navbar
.navbar-default { .navbar-default {
background-color: $navbar-default-bg; background-color: $navbar-default-bg;
@ -254,83 +292,83 @@
} }
} }
.navbar-text { // .navbar-text {
color: $navbar-default-color; // color: $navbar-default-color;
} // }
.navbar-nav { // .navbar-nav {
> li > a { // > li > a {
color: $navbar-default-link-color; // color: $navbar-default-link-color;
@include hover-focus { // @include hover-focus {
color: $navbar-default-link-hover-color; // color: $navbar-default-link-hover-color;
background-color: $navbar-default-link-hover-bg; // background-color: $navbar-default-link-hover-bg;
} // }
} // }
> .active > a { // > .active > a {
@include plain-hover-focus { // @include plain-hover-focus {
color: $navbar-default-link-active-color; // color: $navbar-default-link-active-color;
background-color: $navbar-default-link-active-bg; // background-color: $navbar-default-link-active-bg;
} // }
} // }
> .disabled > a { // > .disabled > a {
@include plain-hover-focus { // @include plain-hover-focus {
color: $navbar-default-link-disabled-color; // color: $navbar-default-link-disabled-color;
background-color: $navbar-default-link-disabled-bg; // background-color: $navbar-default-link-disabled-bg;
} // }
} // }
} // }
.navbar-toggle { // .navbar-toggle {
border-color: $navbar-default-toggle-border-color; // border-color: $navbar-default-toggle-border-color;
@include hover-focus { // @include hover-focus {
background-color: $navbar-default-toggle-hover-bg; // background-color: $navbar-default-toggle-hover-bg;
} // }
.icon-bar { // .icon-bar {
background-color: $navbar-default-toggle-icon-bar-bg; // background-color: $navbar-default-toggle-icon-bar-bg;
} // }
} // }
.navbar-collapse, // .navbar-collapse,
.navbar-form { // .navbar-form {
border-color: $navbar-default-border; // border-color: $navbar-default-border;
} // }
// Dropdown menu items // // Dropdown menu items
.navbar-nav { // .navbar-nav {
// Remove background color from open dropdown // // Remove background color from open dropdown
> .open > a { // > .open > a {
@include plain-hover-focus { // @include plain-hover-focus {
color: $navbar-default-link-active-color; // color: $navbar-default-link-active-color;
background-color: $navbar-default-link-active-bg; // background-color: $navbar-default-link-active-bg;
} // }
} // }
} // }
// Links in navbars // // Links in navbars
// // //
// Add a class to ensure links outside the navbar nav are colored correctly. // // Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link { // .navbar-link {
color: $navbar-default-link-color; // color: $navbar-default-link-color;
@include hover { // @include hover {
color: $navbar-default-link-hover-color; // color: $navbar-default-link-hover-color;
} // }
} // }
.btn-link { // .btn-link {
color: $navbar-default-link-color; // color: $navbar-default-link-color;
@include hover-focus { // @include hover-focus {
color: $navbar-default-link-hover-color; // color: $navbar-default-link-hover-color;
} // }
&:disabled, // &:disabled,
fieldset[disabled] & { // fieldset[disabled] & {
@include hover-focus { // @include hover-focus {
color: $navbar-default-link-disabled-color; // color: $navbar-default-link-disabled-color;
} // }
} // }
} // }
} }
// Inverse navbar // Inverse navbar