mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
New form control sizing, new navbar condensed variation, update nav and navbar spacing
This commit is contained in:
Mark Otto
parent
7e86bfd9ac
commit
8f94078da8
@ -1802,7 +1802,7 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
|
||||
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;
|
||||
padding: .3rem .75rem;
|
||||
font-size: .85rem;
|
||||
@ -1810,38 +1810,7 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
|
||||
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 {
|
||||
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 {
|
||||
.form-control-lg {
|
||||
height: 3.291667rem;
|
||||
padding: .75rem 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
@ -1849,37 +1818,6 @@ textarea.input-sm, .input-group-sm > textarea.form-control, .input-group-sm > te
|
||||
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 {
|
||||
position: relative;
|
||||
}
|
||||
@ -3015,7 +2953,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
padding: .6em 1em;
|
||||
line-height: 1.5;
|
||||
line-height: 1;
|
||||
}
|
||||
.nav-link:focus, .nav-link:hover {
|
||||
text-decoration: none;
|
||||
@ -3160,7 +3098,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
padding: .725rem .75rem;
|
||||
padding: .95rem .75rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
@media (min-width: 34em) {
|
||||
.navbar-text {
|
||||
float: left;
|
||||
margin-right: 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.navbar-condensed {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.navbar-condensed .form-inline, .navbar-condensed .navbar-form {
|
||||
margin-top: .6rem;
|
||||
}
|
||||
|
||||
@media (min-width: 34em) {
|
||||
.navbar-left {
|
||||
float: left !important;
|
||||
}
|
||||
.navbar-right {
|
||||
float: right !important;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
.navbar-right ~ .navbar-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
.navbar-nav .nav-item {
|
||||
float: left;
|
||||
}
|
||||
.navbar-nav .nav-link {
|
||||
display: block;
|
||||
padding-top: .95rem;
|
||||
padding-bottom: .95rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.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 {
|
||||
@ -3268,55 +3208,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
color: #5e5e5e;
|
||||
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 {
|
||||
background-color: #373a3c;
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -10,6 +10,7 @@
|
||||
- title: Contents
|
||||
- title: JavaScript
|
||||
- title: Compiling
|
||||
- title: Customize
|
||||
- title: Support
|
||||
# - title: Third party support
|
||||
- title: Accessibility
|
||||
|
||||
2
docs/assets/css/docs.min.css
vendored
2
docs/assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -51,6 +51,7 @@
|
||||
|
||||
> .nav + .nav,
|
||||
> .alert + .alert,
|
||||
> .navbar + .navbar,
|
||||
> .progress + .progress {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@ -150,6 +150,61 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a
|
||||
</nav>
|
||||
{% 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
|
||||
|
||||
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
|
||||
|
||||
@ -1802,7 +1802,7 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
|
||||
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;
|
||||
padding: .3rem .75rem;
|
||||
font-size: .85rem;
|
||||
@ -1810,38 +1810,7 @@ input[type="radio"]:disabled, input[type="radio"].disabled, fieldset[disabled] i
|
||||
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 {
|
||||
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 {
|
||||
.form-control-lg {
|
||||
height: 3.291667rem;
|
||||
padding: .75rem 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
@ -1849,37 +1818,6 @@ textarea.input-sm, .input-group-sm > textarea.form-control, .input-group-sm > te
|
||||
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 {
|
||||
position: relative;
|
||||
}
|
||||
@ -3015,7 +2953,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
padding: .6em 1em;
|
||||
line-height: 1.5;
|
||||
line-height: 1;
|
||||
}
|
||||
.nav-link:focus, .nav-link:hover {
|
||||
text-decoration: none;
|
||||
@ -3160,7 +3098,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
padding: .725rem .75rem;
|
||||
padding: .95rem .75rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
@media (min-width: 34em) {
|
||||
.navbar-text {
|
||||
float: left;
|
||||
margin-right: 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.navbar-condensed {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.navbar-condensed .form-inline, .navbar-condensed .navbar-form {
|
||||
margin-top: .6rem;
|
||||
}
|
||||
|
||||
@media (min-width: 34em) {
|
||||
.navbar-left {
|
||||
float: left !important;
|
||||
}
|
||||
.navbar-right {
|
||||
float: right !important;
|
||||
margin-right: -1rem;
|
||||
}
|
||||
.navbar-right ~ .navbar-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
.navbar-nav .nav-item {
|
||||
float: left;
|
||||
}
|
||||
.navbar-nav .nav-link {
|
||||
display: block;
|
||||
padding-top: .95rem;
|
||||
padding-bottom: .95rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.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 {
|
||||
@ -3268,55 +3208,6 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
|
||||
color: #5e5e5e;
|
||||
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 {
|
||||
background-color: #373a3c;
|
||||
|
||||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -228,34 +228,50 @@ input[type="checkbox"] {
|
||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// 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-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;
|
||||
}
|
||||
.form-control-sm {
|
||||
height: $input-height-sm;
|
||||
padding: $padding-sm-vertical $padding-sm-horizontal;
|
||||
font-size: $font-size-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-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-lg {
|
||||
height: $input-height-lg;
|
||||
padding: $padding-lg-vertical $padding-lg-horizontal;
|
||||
font-size: $font-size-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
|
||||
//
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
padding: $nav-link-padding;
|
||||
line-height: $line-height-base;
|
||||
line-height: 1;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
|
||||
@ -75,11 +75,11 @@
|
||||
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
padding: .725rem .75rem;
|
||||
padding: .95rem .75rem;
|
||||
margin-right: $spacer;
|
||||
margin-bottom: 0; // For headings
|
||||
font-size: $font-size-lg;
|
||||
line-height: $line-height-computed;
|
||||
line-height: 1;
|
||||
|
||||
> a {
|
||||
@include hover-focus {
|
||||
@ -203,15 +203,15 @@
|
||||
//
|
||||
// Add a class to make any element properly align itself vertically within the navbars.
|
||||
|
||||
.navbar-text {
|
||||
// @include navbar-vertical-align($line-height-computed);
|
||||
// .navbar-text {
|
||||
// // @include navbar-vertical-align($line-height-computed);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
float: left;
|
||||
margin-right: $navbar-padding-horizontal;
|
||||
margin-left: $navbar-padding-horizontal;
|
||||
}
|
||||
}
|
||||
// @include media-breakpoint-up(sm) {
|
||||
// float: left;
|
||||
// margin-right: $navbar-padding-horizontal;
|
||||
// margin-left: $navbar-padding-horizontal;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// Component alignment
|
||||
@ -222,16 +222,52 @@
|
||||
//
|
||||
// Declared after the navbar components to ensure more specificity on the margins.
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.navbar-left {
|
||||
@include pull-left();
|
||||
}
|
||||
.navbar-right {
|
||||
@include pull-right();
|
||||
margin-right: -$navbar-padding-horizontal;
|
||||
// @include media-breakpoint-up(sm) {
|
||||
// .navbar-left {
|
||||
// @include pull-left();
|
||||
// }
|
||||
// .navbar-right {
|
||||
// @include pull-right();
|
||||
// margin-right: -$navbar-padding-horizontal;
|
||||
|
||||
~ .navbar-right {
|
||||
margin-right: 0;
|
||||
// ~ .navbar-right {
|
||||
// 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
|
||||
// --------------------------------------------------
|
||||
|
||||
// todo: audit these styles
|
||||
|
||||
// Default navbar
|
||||
.navbar-default {
|
||||
background-color: $navbar-default-bg;
|
||||
@ -254,83 +292,83 @@
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-default-color;
|
||||
}
|
||||
// .navbar-text {
|
||||
// color: $navbar-default-color;
|
||||
// }
|
||||
|
||||
.navbar-nav {
|
||||
> li > a {
|
||||
color: $navbar-default-link-color;
|
||||
// .navbar-nav {
|
||||
// > li > a {
|
||||
// color: $navbar-default-link-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-default-link-hover-color;
|
||||
background-color: $navbar-default-link-hover-bg;
|
||||
}
|
||||
}
|
||||
> .active > a {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-default-link-active-color;
|
||||
background-color: $navbar-default-link-active-bg;
|
||||
}
|
||||
}
|
||||
> .disabled > a {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-default-link-disabled-color;
|
||||
background-color: $navbar-default-link-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include hover-focus {
|
||||
// color: $navbar-default-link-hover-color;
|
||||
// background-color: $navbar-default-link-hover-bg;
|
||||
// }
|
||||
// }
|
||||
// > .active > a {
|
||||
// @include plain-hover-focus {
|
||||
// color: $navbar-default-link-active-color;
|
||||
// background-color: $navbar-default-link-active-bg;
|
||||
// }
|
||||
// }
|
||||
// > .disabled > a {
|
||||
// @include plain-hover-focus {
|
||||
// color: $navbar-default-link-disabled-color;
|
||||
// background-color: $navbar-default-link-disabled-bg;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.navbar-toggle {
|
||||
border-color: $navbar-default-toggle-border-color;
|
||||
@include hover-focus {
|
||||
background-color: $navbar-default-toggle-hover-bg;
|
||||
}
|
||||
.icon-bar {
|
||||
background-color: $navbar-default-toggle-icon-bar-bg;
|
||||
}
|
||||
}
|
||||
// .navbar-toggle {
|
||||
// border-color: $navbar-default-toggle-border-color;
|
||||
// @include hover-focus {
|
||||
// background-color: $navbar-default-toggle-hover-bg;
|
||||
// }
|
||||
// .icon-bar {
|
||||
// background-color: $navbar-default-toggle-icon-bar-bg;
|
||||
// }
|
||||
// }
|
||||
|
||||
.navbar-collapse,
|
||||
.navbar-form {
|
||||
border-color: $navbar-default-border;
|
||||
}
|
||||
// .navbar-collapse,
|
||||
// .navbar-form {
|
||||
// border-color: $navbar-default-border;
|
||||
// }
|
||||
|
||||
// Dropdown menu items
|
||||
.navbar-nav {
|
||||
// Remove background color from open dropdown
|
||||
> .open > a {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-default-link-active-color;
|
||||
background-color: $navbar-default-link-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
// // Dropdown menu items
|
||||
// .navbar-nav {
|
||||
// // Remove background color from open dropdown
|
||||
// > .open > a {
|
||||
// @include plain-hover-focus {
|
||||
// color: $navbar-default-link-active-color;
|
||||
// background-color: $navbar-default-link-active-bg;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// Links in navbars
|
||||
//
|
||||
// Add a class to ensure links outside the navbar nav are colored correctly.
|
||||
// // Links in navbars
|
||||
// //
|
||||
// // Add a class to ensure links outside the navbar nav are colored correctly.
|
||||
|
||||
.navbar-link {
|
||||
color: $navbar-default-link-color;
|
||||
@include hover {
|
||||
color: $navbar-default-link-hover-color;
|
||||
}
|
||||
}
|
||||
// .navbar-link {
|
||||
// color: $navbar-default-link-color;
|
||||
// @include hover {
|
||||
// color: $navbar-default-link-hover-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
.btn-link {
|
||||
color: $navbar-default-link-color;
|
||||
@include hover-focus {
|
||||
color: $navbar-default-link-hover-color;
|
||||
}
|
||||
&:disabled,
|
||||
fieldset[disabled] & {
|
||||
@include hover-focus {
|
||||
color: $navbar-default-link-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .btn-link {
|
||||
// color: $navbar-default-link-color;
|
||||
// @include hover-focus {
|
||||
// color: $navbar-default-link-hover-color;
|
||||
// }
|
||||
// &:disabled,
|
||||
// fieldset[disabled] & {
|
||||
// @include hover-focus {
|
||||
// color: $navbar-default-link-disabled-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// Inverse navbar
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user