Simple for navbar inputs with Floating Labels - also added floating input search bar in docs.

This commit is contained in:
Tyler Wall 2016-02-24 11:04:22 -07:00
parent 3ef254d6bd
commit 3ab9bd46b3
10 changed files with 268 additions and 66 deletions

2
.gitignore vendored
View File

@ -15,7 +15,7 @@ Thumbs.db
.DS_Store
/node_modules/
.grunt/
/bower_components/
/app/
.build*
/_SpecRunner.html
Gemfile.lock

View File

@ -437,8 +437,9 @@
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-md-8" placeholder="Search">
<div class="form-group label-floating">
<label class="control-label" for="navbar-light-blue-search">Search - floating label</label>
<input id="navbar-light-blue-search" type="text" class="form-control col-sm-8">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
@ -534,7 +535,7 @@
<a href="javascript:void(0)" class="btn btn-raised btn-link">Link</a>
</p>
</fieldset>
<h3>Button sizes</h3>
<p class="bs-component">
@ -658,9 +659,9 @@
</div>
</div>
</div>
<h3><small><code>btn-lg.btn-block.btn-raised</code></small></h3>
<div class="bs-component">
<a href="javascript:void(0)" class="btn btn-default btn-lg btn-block btn-raised">Block level button</a>
@ -732,7 +733,7 @@
</div>
</div>
</div>
</div>
</div>

View File

@ -2334,24 +2334,54 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #009688;
color: rgba(255,255,255, 0.84);
}
.navbar .navbar-form .form-group input.form-control::-moz-placeholder,
.navbar.navbar-default .navbar-form .form-group input.form-control::-moz-placeholder,
.navbar .navbar-form input.form-control::-moz-placeholder,
.navbar.navbar-default .navbar-form input.form-control::-moz-placeholder {
.navbar.navbar-default .navbar-form input.form-control::-moz-placeholder,
.navbar .navbar-form .form-group input.form-control::-moz-placeholder,
.navbar.navbar-default .navbar-form .form-group input.form-control::-moz-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar .navbar-form .form-group input.form-control:-ms-input-placeholder,
.navbar.navbar-default .navbar-form .form-group input.form-control:-ms-input-placeholder,
.navbar .navbar-form input.form-control:-ms-input-placeholder,
.navbar.navbar-default .navbar-form input.form-control:-ms-input-placeholder {
.navbar.navbar-default .navbar-form input.form-control:-ms-input-placeholder,
.navbar .navbar-form .form-group input.form-control:-ms-input-placeholder,
.navbar.navbar-default .navbar-form .form-group input.form-control:-ms-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar .navbar-form .form-group input.form-control::-webkit-input-placeholder,
.navbar.navbar-default .navbar-form .form-group input.form-control::-webkit-input-placeholder,
.navbar .navbar-form input.form-control::-webkit-input-placeholder,
.navbar.navbar-default .navbar-form input.form-control::-webkit-input-placeholder {
.navbar.navbar-default .navbar-form input.form-control::-webkit-input-placeholder,
.navbar .navbar-form .form-group input.form-control::-webkit-input-placeholder,
.navbar.navbar-default .navbar-form .form-group input.form-control::-webkit-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar .navbar-form .form-group.label-floating label.control-label,
.navbar.navbar-default .navbar-form .form-group.label-floating label.control-label,
.navbar .navbar-form .form-group.label-placeholder label.control-label,
.navbar.navbar-default .navbar-form .form-group.label-placeholder label.control-label {
color: rgba(255,255,255, 0.84);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
opacity: 0.87;
}
.navbar .navbar-form .form-group.label-floating.is-empty:not(.is-focused) label.control-label,
.navbar.navbar-default .navbar-form .form-group.label-floating.is-empty:not(.is-focused) label.control-label,
.navbar .navbar-form .form-group.label-placeholder.is-empty:not(.is-focused) label.control-label,
.navbar.navbar-default .navbar-form .form-group.label-placeholder.is-empty:not(.is-focused) label.control-label {
top: -10px;
}
@media (max-width: 1200px) {
.navbar .navbar-form .form-group.label-floating.is-focused label.control-label,
.navbar.navbar-default .navbar-form .form-group.label-floating.is-focused label.control-label,
.navbar .navbar-form .form-group.label-placeholder.is-focused label.control-label,
.navbar.navbar-default .navbar-form .form-group.label-placeholder.is-focused label.control-label,
.navbar .navbar-form .form-group.label-floating:not(.is-empty) label.control-label,
.navbar.navbar-default .navbar-form .form-group.label-floating:not(.is-empty) label.control-label,
.navbar .navbar-form .form-group.label-placeholder:not(.is-empty) label.control-label,
.navbar.navbar-default .navbar-form .form-group.label-placeholder:not(.is-empty) label.control-label {
top: -23px;
line-height: 1.4em;
font-size: 10px;
}
}
.navbar .dropdown-menu,
.navbar.navbar-default .dropdown-menu {
border-radius: 2px;
@ -2383,18 +2413,40 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #3f51b5;
color: #ffffff;
}
.navbar.navbar-inverse .navbar-form .form-group input.form-control::-moz-placeholder,
.navbar.navbar-inverse .navbar-form input.form-control::-moz-placeholder {
.navbar.navbar-inverse .navbar-form input.form-control::-moz-placeholder,
.navbar.navbar-inverse .navbar-form .form-group input.form-control::-moz-placeholder {
color: #ffffff;
}
.navbar.navbar-inverse .navbar-form .form-group input.form-control:-ms-input-placeholder,
.navbar.navbar-inverse .navbar-form input.form-control:-ms-input-placeholder {
.navbar.navbar-inverse .navbar-form input.form-control:-ms-input-placeholder,
.navbar.navbar-inverse .navbar-form .form-group input.form-control:-ms-input-placeholder {
color: #ffffff;
}
.navbar.navbar-inverse .navbar-form .form-group input.form-control::-webkit-input-placeholder,
.navbar.navbar-inverse .navbar-form input.form-control::-webkit-input-placeholder {
.navbar.navbar-inverse .navbar-form input.form-control::-webkit-input-placeholder,
.navbar.navbar-inverse .navbar-form .form-group input.form-control::-webkit-input-placeholder {
color: #ffffff;
}
.navbar.navbar-inverse .navbar-form .form-group.label-floating label.control-label,
.navbar.navbar-inverse .navbar-form .form-group.label-placeholder label.control-label {
color: #ffffff;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
opacity: 0.87;
}
.navbar.navbar-inverse .navbar-form .form-group.label-floating.is-empty:not(.is-focused) label.control-label,
.navbar.navbar-inverse .navbar-form .form-group.label-placeholder.is-empty:not(.is-focused) label.control-label {
top: -10px;
}
@media (max-width: 1200px) {
.navbar.navbar-inverse .navbar-form .form-group.label-floating.is-focused label.control-label,
.navbar.navbar-inverse .navbar-form .form-group.label-placeholder.is-focused label.control-label,
.navbar.navbar-inverse .navbar-form .form-group.label-floating:not(.is-empty) label.control-label,
.navbar.navbar-inverse .navbar-form .form-group.label-placeholder:not(.is-empty) label.control-label {
top: -23px;
line-height: 1.4em;
font-size: 10px;
}
}
.navbar.navbar-inverse .dropdown-menu {
border-radius: 2px;
}
@ -2419,18 +2471,40 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #009688;
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-primary .navbar-form .form-group input.form-control::-moz-placeholder,
.navbar.navbar-primary .navbar-form input.form-control::-moz-placeholder {
.navbar.navbar-primary .navbar-form input.form-control::-moz-placeholder,
.navbar.navbar-primary .navbar-form .form-group input.form-control::-moz-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-primary .navbar-form .form-group input.form-control:-ms-input-placeholder,
.navbar.navbar-primary .navbar-form input.form-control:-ms-input-placeholder {
.navbar.navbar-primary .navbar-form input.form-control:-ms-input-placeholder,
.navbar.navbar-primary .navbar-form .form-group input.form-control:-ms-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-primary .navbar-form .form-group input.form-control::-webkit-input-placeholder,
.navbar.navbar-primary .navbar-form input.form-control::-webkit-input-placeholder {
.navbar.navbar-primary .navbar-form input.form-control::-webkit-input-placeholder,
.navbar.navbar-primary .navbar-form .form-group input.form-control::-webkit-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-primary .navbar-form .form-group.label-floating label.control-label,
.navbar.navbar-primary .navbar-form .form-group.label-placeholder label.control-label {
color: rgba(255,255,255, 0.84);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
opacity: 0.87;
}
.navbar.navbar-primary .navbar-form .form-group.label-floating.is-empty:not(.is-focused) label.control-label,
.navbar.navbar-primary .navbar-form .form-group.label-placeholder.is-empty:not(.is-focused) label.control-label {
top: -10px;
}
@media (max-width: 1200px) {
.navbar.navbar-primary .navbar-form .form-group.label-floating.is-focused label.control-label,
.navbar.navbar-primary .navbar-form .form-group.label-placeholder.is-focused label.control-label,
.navbar.navbar-primary .navbar-form .form-group.label-floating:not(.is-empty) label.control-label,
.navbar.navbar-primary .navbar-form .form-group.label-placeholder:not(.is-empty) label.control-label {
top: -23px;
line-height: 1.4em;
font-size: 10px;
}
}
.navbar.navbar-primary .dropdown-menu {
border-radius: 2px;
}
@ -2455,18 +2529,40 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #4caf50;
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-success .navbar-form .form-group input.form-control::-moz-placeholder,
.navbar.navbar-success .navbar-form input.form-control::-moz-placeholder {
.navbar.navbar-success .navbar-form input.form-control::-moz-placeholder,
.navbar.navbar-success .navbar-form .form-group input.form-control::-moz-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-success .navbar-form .form-group input.form-control:-ms-input-placeholder,
.navbar.navbar-success .navbar-form input.form-control:-ms-input-placeholder {
.navbar.navbar-success .navbar-form input.form-control:-ms-input-placeholder,
.navbar.navbar-success .navbar-form .form-group input.form-control:-ms-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-success .navbar-form .form-group input.form-control::-webkit-input-placeholder,
.navbar.navbar-success .navbar-form input.form-control::-webkit-input-placeholder {
.navbar.navbar-success .navbar-form input.form-control::-webkit-input-placeholder,
.navbar.navbar-success .navbar-form .form-group input.form-control::-webkit-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-success .navbar-form .form-group.label-floating label.control-label,
.navbar.navbar-success .navbar-form .form-group.label-placeholder label.control-label {
color: rgba(255,255,255, 0.84);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
opacity: 0.87;
}
.navbar.navbar-success .navbar-form .form-group.label-floating.is-empty:not(.is-focused) label.control-label,
.navbar.navbar-success .navbar-form .form-group.label-placeholder.is-empty:not(.is-focused) label.control-label {
top: -10px;
}
@media (max-width: 1200px) {
.navbar.navbar-success .navbar-form .form-group.label-floating.is-focused label.control-label,
.navbar.navbar-success .navbar-form .form-group.label-placeholder.is-focused label.control-label,
.navbar.navbar-success .navbar-form .form-group.label-floating:not(.is-empty) label.control-label,
.navbar.navbar-success .navbar-form .form-group.label-placeholder:not(.is-empty) label.control-label {
top: -23px;
line-height: 1.4em;
font-size: 10px;
}
}
.navbar.navbar-success .dropdown-menu {
border-radius: 2px;
}
@ -2491,18 +2587,40 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #03a9f4;
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-info .navbar-form .form-group input.form-control::-moz-placeholder,
.navbar.navbar-info .navbar-form input.form-control::-moz-placeholder {
.navbar.navbar-info .navbar-form input.form-control::-moz-placeholder,
.navbar.navbar-info .navbar-form .form-group input.form-control::-moz-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-info .navbar-form .form-group input.form-control:-ms-input-placeholder,
.navbar.navbar-info .navbar-form input.form-control:-ms-input-placeholder {
.navbar.navbar-info .navbar-form input.form-control:-ms-input-placeholder,
.navbar.navbar-info .navbar-form .form-group input.form-control:-ms-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-info .navbar-form .form-group input.form-control::-webkit-input-placeholder,
.navbar.navbar-info .navbar-form input.form-control::-webkit-input-placeholder {
.navbar.navbar-info .navbar-form input.form-control::-webkit-input-placeholder,
.navbar.navbar-info .navbar-form .form-group input.form-control::-webkit-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-info .navbar-form .form-group.label-floating label.control-label,
.navbar.navbar-info .navbar-form .form-group.label-placeholder label.control-label {
color: rgba(255,255,255, 0.84);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
opacity: 0.87;
}
.navbar.navbar-info .navbar-form .form-group.label-floating.is-empty:not(.is-focused) label.control-label,
.navbar.navbar-info .navbar-form .form-group.label-placeholder.is-empty:not(.is-focused) label.control-label {
top: -10px;
}
@media (max-width: 1200px) {
.navbar.navbar-info .navbar-form .form-group.label-floating.is-focused label.control-label,
.navbar.navbar-info .navbar-form .form-group.label-placeholder.is-focused label.control-label,
.navbar.navbar-info .navbar-form .form-group.label-floating:not(.is-empty) label.control-label,
.navbar.navbar-info .navbar-form .form-group.label-placeholder:not(.is-empty) label.control-label {
top: -23px;
line-height: 1.4em;
font-size: 10px;
}
}
.navbar.navbar-info .dropdown-menu {
border-radius: 2px;
}
@ -2527,18 +2645,40 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #ff5722;
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-warning .navbar-form .form-group input.form-control::-moz-placeholder,
.navbar.navbar-warning .navbar-form input.form-control::-moz-placeholder {
.navbar.navbar-warning .navbar-form input.form-control::-moz-placeholder,
.navbar.navbar-warning .navbar-form .form-group input.form-control::-moz-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-warning .navbar-form .form-group input.form-control:-ms-input-placeholder,
.navbar.navbar-warning .navbar-form input.form-control:-ms-input-placeholder {
.navbar.navbar-warning .navbar-form input.form-control:-ms-input-placeholder,
.navbar.navbar-warning .navbar-form .form-group input.form-control:-ms-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-warning .navbar-form .form-group input.form-control::-webkit-input-placeholder,
.navbar.navbar-warning .navbar-form input.form-control::-webkit-input-placeholder {
.navbar.navbar-warning .navbar-form input.form-control::-webkit-input-placeholder,
.navbar.navbar-warning .navbar-form .form-group input.form-control::-webkit-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-warning .navbar-form .form-group.label-floating label.control-label,
.navbar.navbar-warning .navbar-form .form-group.label-placeholder label.control-label {
color: rgba(255,255,255, 0.84);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
opacity: 0.87;
}
.navbar.navbar-warning .navbar-form .form-group.label-floating.is-empty:not(.is-focused) label.control-label,
.navbar.navbar-warning .navbar-form .form-group.label-placeholder.is-empty:not(.is-focused) label.control-label {
top: -10px;
}
@media (max-width: 1200px) {
.navbar.navbar-warning .navbar-form .form-group.label-floating.is-focused label.control-label,
.navbar.navbar-warning .navbar-form .form-group.label-placeholder.is-focused label.control-label,
.navbar.navbar-warning .navbar-form .form-group.label-floating:not(.is-empty) label.control-label,
.navbar.navbar-warning .navbar-form .form-group.label-placeholder:not(.is-empty) label.control-label {
top: -23px;
line-height: 1.4em;
font-size: 10px;
}
}
.navbar.navbar-warning .dropdown-menu {
border-radius: 2px;
}
@ -2563,18 +2703,40 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #f44336;
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-danger .navbar-form .form-group input.form-control::-moz-placeholder,
.navbar.navbar-danger .navbar-form input.form-control::-moz-placeholder {
.navbar.navbar-danger .navbar-form input.form-control::-moz-placeholder,
.navbar.navbar-danger .navbar-form .form-group input.form-control::-moz-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-danger .navbar-form .form-group input.form-control:-ms-input-placeholder,
.navbar.navbar-danger .navbar-form input.form-control:-ms-input-placeholder {
.navbar.navbar-danger .navbar-form input.form-control:-ms-input-placeholder,
.navbar.navbar-danger .navbar-form .form-group input.form-control:-ms-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-danger .navbar-form .form-group input.form-control::-webkit-input-placeholder,
.navbar.navbar-danger .navbar-form input.form-control::-webkit-input-placeholder {
.navbar.navbar-danger .navbar-form input.form-control::-webkit-input-placeholder,
.navbar.navbar-danger .navbar-form .form-group input.form-control::-webkit-input-placeholder {
color: rgba(255,255,255, 0.84);
}
.navbar.navbar-danger .navbar-form .form-group.label-floating label.control-label,
.navbar.navbar-danger .navbar-form .form-group.label-placeholder label.control-label {
color: rgba(255,255,255, 0.84);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
opacity: 0.87;
}
.navbar.navbar-danger .navbar-form .form-group.label-floating.is-empty:not(.is-focused) label.control-label,
.navbar.navbar-danger .navbar-form .form-group.label-placeholder.is-empty:not(.is-focused) label.control-label {
top: -10px;
}
@media (max-width: 1200px) {
.navbar.navbar-danger .navbar-form .form-group.label-floating.is-focused label.control-label,
.navbar.navbar-danger .navbar-form .form-group.label-placeholder.is-focused label.control-label,
.navbar.navbar-danger .navbar-form .form-group.label-floating:not(.is-empty) label.control-label,
.navbar.navbar-danger .navbar-form .form-group.label-placeholder:not(.is-empty) label.control-label {
top: -23px;
line-height: 1.4em;
font-size: 10px;
}
}
.navbar.navbar-danger .dropdown-menu {
border-radius: 2px;
}

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

File diff suppressed because one or more lines are too long

View File

@ -727,9 +727,14 @@
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-sm-8" placeholder="Search">
<div class="form-group label-floating">
<label class="control-label" for="navbar-light-blue-search">Search - floating label</label>
<input id="navbar-light-blue-search" type="text" class="form-control col-sm-8">
</div>
<!-- <div class="form-group">
<input type="text" class="form-control col-sm-8" placeholder="Search">
</div> -->
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)">Link</a></li>

View File

@ -188,13 +188,47 @@
.generic-variations(~".navbar", ~"", @brand-primary, {
background-color: @variation-color;
color: @variation-color-text;
// deeply defined to override welljumbo class without !impotant need
.navbar-form .form-group input.form-control,
.navbar-form input.form-control {
.material-placeholder({
color: @variation-color-text;
});
.navbar-form {
input.form-control,
.form-group input.form-control {
.material-placeholder({
color: @variation-color-text;
});
}
.form-group {
&.label-floating,
&.label-placeholder {
label.control-label {
color: @variation-color-text;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
opacity: 0.87;
}
&.is-empty:not(.is-focused) label.control-label {
top: -10px;
}
}
// Navbars change height slightly, this also fixes inputs in collapsed navbars
@media (max-width: @screen-lg) {
&.label-floating,
&.label-placeholder {
&.is-focused,
&:not(.is-empty) {
label.control-label {
top: -23px;
line-height: 1.4em;
font-size: 10px;
}
}
}
}
}
}
.dropdown-menu {
border-radius: @border-radius-base;
li > a {