mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-12-01 14:03:45 +03:00
Simple for navbar inputs with Floating Labels - also added floating input search bar in docs.
This commit is contained in:
parent
3ef254d6bd
commit
3ab9bd46b3
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -15,7 +15,7 @@ Thumbs.db
|
|||
.DS_Store
|
||||
/node_modules/
|
||||
.grunt/
|
||||
/bower_components/
|
||||
/app/
|
||||
.build*
|
||||
/_SpecRunner.html
|
||||
Gemfile.lock
|
||||
|
|
|
@ -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>
|
||||
|
|
252
dist/css/bootstrap-material-design.css
vendored
252
dist/css/bootstrap-material-design.css
vendored
|
@ -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;
|
||||
}
|
||||
|
|
2
dist/css/bootstrap-material-design.css.map
vendored
2
dist/css/bootstrap-material-design.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap-material-design.min.css
vendored
2
dist/css/bootstrap-material-design.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
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/material.min.js.map
vendored
2
dist/js/material.min.js.map
vendored
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue
Block a user