mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-25 15:39:59 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge 226973d43b into 3ef254d6bd

Browse Source
This commit is contained in:
wallter 2016-02-24 20:51:40 +00:00
commit dbd6988e4b
6 changed files with 65 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

15
bootstrap-elements.html
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>

2
dist/js/material.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/material.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

9
index.html
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>

54
less/_navbar.less
View File

@ -171,13 +171,14 @@
color: inherit;
padding: 0;
margin: 0;
margin-top: 4px;
// re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
//---
//height: @mdb-input-height-base;
@bs-line-height-base: 1.428571429;
@bs-line-height-computed: floor((@font-size-base * @bs-line-height-base)); // ~20px
height: (@bs-line-height-computed + 8px);
height: (@bs-line-height-computed + 2px);
font-size: @font-size-base;
line-height: @bs-line-height-base;
//---
@ -188,13 +189,52 @@
.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 {
&.is-focused .form-control {
background-image: linear-gradient(@variation-color-text, @variation-color-text), linear-gradient(@variation-color-text, @variation-color-text);
}
&.label-floating,
&.label-placeholder {
label.control-label {
color: @variation-color-text;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
opacity: 0.87;
font-size: 0.9em;
}
&.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 {