mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-10 19:57:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

Allow floating labels to be used with input groups that have a left input. Update readme.

Browse Source
This commit is contained in:
Kevin Ross 2015-11-18 16:43:19 -06:00
parent ac150abd0c
commit abfb2f09b8
14 changed files with 142 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
README.md
View File

@ -1,3 +1,5 @@
# bootstrap-material-design
[![build status](https://travis-ci.org/FezVrasta/bootstrap-material-design.svg?branch=master)](https://travis-ci.org/FezVrasta/bootstrap-material-design)
[![gratipay](https://img.shields.io/gratipay/FezVrasta.svg)](https://gratipay.com/FezVrasta)
[![Bower version](https://badge.fury.io/bo/bootstrap-material-design.svg)](https://github.com/FezVrasta/bootstrap-material-design)
@ -29,11 +31,11 @@ If you prefer, you can include this framework in your project using our official
Navigate to the `dist/` folder in this repository, and you will see the `test.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes.
You need to copy the `dist/` folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes.
#### material-fullpalette.css or material.css?
### material-fullpalette.css or material.css?
The only difference is that `material-fullpalette.css` has the full colors palette available, the other one has just the primary colors.
#### Use custom color as primary
### Use custom color as primary
Is often asked how to change the primary color of this theme without edit the bower package directly.
@ -57,10 +59,11 @@ Run the `grunt test` command for browser-based Jasmine unit tests.
Run the `grunt serve` command to build and fire up an http server with live-reload and a watch for development purposes.
### LESS & SASS
## LESS & SASS
Currently only LESS is maintained. The SASS version no longer has a maintainer (#256).
The SASS files are in the source just in case someone wants to update the source from SASS and use these files as a base.
The bootstrap 3.x compatible version (master) is developed using LESS, with an automated conversion to SASS.
The upcoming 4.x version (no branch yet) will be developed using SASS.
## Support me
@ -74,11 +77,12 @@ If you like this project you may support me by donating something on Gittip, sta
Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
# Documentation
## Documentation
Material Design for Bootstrap provides some additional stuff to get the best from Material Design.
Material Design ([spec](http://www.google.com/design/spec/material-design/introduction.html)) for Bootstrap provides
styles for bootstrap based markup to comply with Material Design concepts.
### Variations
### Color Variations
There are 17 additional color variations (in addition to the classic 4 variations) for buttons, inputs, checkboxes, radios, alerts, navbars, tabs, labels, paginations, progress bars and more.
They can be used by adding the class suffix `-material-color` to the desired element and replacing `color` with the desired one.
@ -91,7 +95,7 @@ These colors are taken from the Material Design color palette and are reported b
![palette](demo/imgs/palette.jpg)
To take advantage of all the shades please use `material-fullpalette.css`, be aware of its huge size.
To take advantage of all the shades please use `material-fullpalette.css`, but please be aware of its huge size.
### Buttons
@ -100,18 +104,71 @@ Add `.btn-raised` to a button to add a permanent shadow to it.
### Inputs
Add `.floating-label` to an input field with a `placeholder` to transform the placeholder in a floating label.
All inputs should be surrounded by a standard `.form-group`, and as such `material.js` will enforce this. The `.form-group` is
used to signal different input styles and variations.
Add `data-hint="some hint"` to show an hint under the input when the user focus it.
Labels:
Remember to use the proper HTML markup to get radio and checkboxes styled correctly (choose between *radio* or *checkbox*):
- `.label-floating` - renders label as a placeholder, that animates above the field upon focus
- `.label-static` - renders label above the field. `input placeholder` attribute can also be used in conjunction
- `.label-placeholder` - renders a label as a placeholder only
- no label, but use of `input placeholder` attribute - same rendering as `.label-placeholder`
<div class="radio/checkbox radio-primary">
Hints:
Upon focus, a hint can be displayed. Use any `p | span` with `.help-block`.
Examples:
```html
<div class="form-group label-static">
<label for="i2" class="control-label">label-static</label>
<input type="email" class="form-control" id="i2" placeholder="placeholder attribute">
<p class="help-block">This is a hint as a <code>p.help-block.hint</code></p>
</div>
<div class="form-group label-floating">
<label for="i5" class="control-label">label-floating</label>
<input type="email" class="form-control" id="i5">
<span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
</div>
<div class="form-group label-placeholder">
<label for="i5p" class="control-label">label-placeholder</label>
<input type="email" class="form-control" id="i5p">
<span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
</div>
```
### Radio, Checkbox, Toggle
Be sure to inspect the source of the demos to find proper markup examples. Remember to use the proper HTML markup.
Radio example:
```html
<div class="form-group">
<label class="col-lg-2 control-label">Radios</label>
<div class="col-lg-10">
<div class="radio radio-primary">
<label>
<input type="radio/checkbox" checked>
Option one is this
<input type="radio" name="optionsRadios" checked="">
Option one
</label>
</div>
<div class="radio radio-primary">
<label>
<input type="radio" name="optionsRadios">
Option two
</label>
</div>
</div>
</div>
```
### Icons
@ -131,6 +188,7 @@ A card will expand to fill all of the available width (e.g. column's width). Car
Here is an example on how to use it:
```html
<div class="card">
<div class="card-height-indicator"></div>
@ -154,6 +212,8 @@ Here is an example on how to use it:
</div>
</div>
```
Cards will adapt to column's width. The card below will have width equal to col-lg-6:
<div class="row">

39
bootstrap-elements.html
View File

@ -2028,7 +2028,7 @@
</div>
<div class="form-group">
<label class="control-label" for="addon1">Input addons</label>
<label class="control-label" for="addon1">Default label w/input addons</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" id="addon1" class="form-control">
@ -2039,14 +2039,45 @@
</div>
<div class="form-group label-floating">
<label class="control-label" for="addon2">Floating label addon <small>(right only)</small></label>
<div class="input-group">
<input type="text" id="addon2" class="form-control">
<span class="input-group-addon">$</span>
<label class="control-label" for="addon3a">Floating label w/2 addons</label>
<input type="text" id="addon3a" class="form-control">
<p class="help-block">The label is inside the <code>input-group</code> so that it is positioned properly as a placeholder.</p>
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Button</button>
<button type="button" class="btn btn-fab btn-fab-mini">
<i class="mdi-content-send"></i>
</button>
</span>
</div>
</div>
<div class="form-group label-floating">
<label class="control-label" for="addon2">Floating label w/right addon</label>
<div class="input-group">
<input type="text" id="addon2" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-fab-mini">
<i class="mdi-editor-functions"></i>
</button>
</span>
</div>
</div>
<div class="form-group">
<input type="file" id="inputFile4" multiple>
<div class="input-group">
<input type="text" readonly class="form-control" placeholder="Placeholder w/file chooser...">
<span class="input-group-btn input-group-sm">
<button type="button" class="btn btn-fab btn-fab-mini">
<i class="mdi-editor-attach-file"></i>
</button>
</span>
</div>
</div>
</form>
</div>

4
dist/css/material-fullpalette.css vendored
View File

@ -22599,7 +22599,6 @@ fieldset[disabled] .form-group .form-control {
.form-group.label-placeholder label.control-label,
.form-group.label-floating label.control-label {
position: absolute;
left: 0px;
pointer-events: none;
transition: 0.3s ease all;
}
@ -25290,6 +25289,7 @@ fieldset[disabled] .form-group .form-control {
.form-group.label-floating.is-focused label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label {
top: -30px;
left: 0;
font-size: 12px;
line-height: 1.07142857;
}
@ -25327,6 +25327,7 @@ fieldset[disabled] .form-group .form-control {
.form-group.form-group-sm.label-floating.is-focused label.control-label,
.form-group.form-group-sm.label-floating:not(.is-empty) label.control-label {
top: -25px;
left: 0;
font-size: 9px;
line-height: 1.125;
}
@ -25364,6 +25365,7 @@ fieldset[disabled] .form-group .form-control {
.form-group.form-group-lg.label-floating.is-focused label.control-label,
.form-group.form-group-lg.label-floating:not(.is-empty) label.control-label {
top: -32px;
left: 0;
font-size: 14px;
line-height: 0.99999998;
}

2
dist/css/material-fullpalette.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

4
dist/css/material.css vendored
View File

@ -5309,7 +5309,6 @@ fieldset[disabled] .form-group .form-control {
.form-group.label-placeholder label.control-label,
.form-group.label-floating label.control-label {
position: absolute;
left: 0px;
pointer-events: none;
transition: 0.3s ease all;
}
@ -5606,6 +5605,7 @@ fieldset[disabled] .form-group .form-control {
.form-group.label-floating.is-focused label.control-label,
.form-group.label-floating:not(.is-empty) label.control-label {
top: -30px;
left: 0;
font-size: 12px;
line-height: 1.07142857;
}
@ -5643,6 +5643,7 @@ fieldset[disabled] .form-group .form-control {
.form-group.form-group-sm.label-floating.is-focused label.control-label,
.form-group.form-group-sm.label-floating:not(.is-empty) label.control-label {
top: -25px;
left: 0;
font-size: 9px;
line-height: 1.125;
}
@ -5680,6 +5681,7 @@ fieldset[disabled] .form-group .form-control {
.form-group.form-group-lg.label-floating.is-focused label.control-label,
.form-group.form-group-lg.label-floating:not(.is-empty) label.control-label {
top: -32px;
left: 0;
font-size: 14px;
line-height: 0.99999998;
}

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
index.html
View File

@ -573,7 +573,7 @@
<div class="input-group">
<input type="text" readonly class="form-control" placeholder="Placeholder w/input-group...">
<span class="input-group-btn input-group-sm">
<button type="button" class="btn btn-fab btn-fab-mini btn-raised">
<button type="button" class="btn btn-fab btn-fab-mini">
<i class="mdi-editor-attach-file"></i>
</button>
</span>

2
less/_inputs.less
View File

@ -68,6 +68,7 @@
&.label-floating:not(.is-empty) {
label.control-label {
top: @label-top;
left: 0;
// must repeat because the selector above is more specific than the general label sizing
font-size: @static-font-size;
line-height: @static-line-height;
@ -143,7 +144,6 @@
label.control-label {
position: absolute;
left: 0px;
pointer-events: none;
transition: 0.3s ease all;
}

2
sass/_inputs.scss
View File

@ -71,6 +71,7 @@
&.label-floating:not(.is-empty) {
label.control-label {
top: $label-top;
left: 0;
// must repeat because the selector above is more specific than the general label sizing
font-size: $static-font-size;
line-height: $static-line-height;
@ -147,7 +148,6 @@
label.control-label {
position: absolute;
left: 0px;
pointer-events: none;
transition: 0.3s ease all;
}

154
test.html
View File

@ -1,154 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>TEST Material Design for Bootstrap</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Twitter Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design for Bootstrap -->
<link href="dist/css/roboto.css" rel="stylesheet">
<link href="dist/css/material-fullpalette.css" rel="stylesheet">
<link href="dist/css/ripples.css" rel="stylesheet">
<!-- Dropdown.js -->
<link href="//cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.css" rel="stylesheet">
<!-- Page style -->
<link href="index.css" rel="stylesheet">
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!--<div class="form-group">-->
<!--<label for="inputFile" class="col-lg-2 control-label">File</label>-->
<!--<div class="col-lg-10">-->
<!--<input type="text" readonly class="form-control floating-label" placeholder="Browse...">-->
<!--<input type="file" id="inputFile" multiple>-->
<!--</div>-->
<!--</div>-->
<!--
<div class="fileinput input-group fileinput-new" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="hidden" value="" name=""><input type="file" name="">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
-->
<div class="row">
<div class="form-group">
<label for="inputFile" class="col-lg-2 control-label">Static Label</label>
<div class="col-lg-10">
<input type="text" readonly class="form-control" placeholder="Browse...">
<input type="file" id="inputFile" multiple>
</div>
</div>
</div>
<!-- this works
<div class="form-group">
<input type="file" id="inputFile" multiple>
<input type="text" readonly class="form-control" placeholder="Browse...">
</div>
-->
<!--<h2>File inputs</h2>-->
<!-- http://codepen.io/kybarg/pen/PqaOOg -->
<div class="form-group">
<label class="control-label" for="inputFile2">Static label</label>
<input type="file" id="inputFile2" multiple>
<input type="text" readonly class="form-control" placeholder="Browse2...">
</div>
<div class="form-group">
<!--<label class="control-label" for="inputFile3">File</label>-->
<input type="file" id="inputFile3" multiple>
<input type="text" readonly class="form-control" placeholder="Placeholder only...">
</div>
<div class="form-group">
<input type="file" id="inputFile4" multiple>
<div class="input-group">
<input type="text" readonly class="form-control" placeholder="Placeholder w/input-group...">
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-fab-mini btn-raised btn-sm">
<i class="mdi-editor-attach-file"></i>
</button>
</span>
</div>
</div>
</div>
<!-- Twitter Bootstrap -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Material Design for Bootstrap -->
<script src="dist/js/material.js"></script>
<script src="dist/js/ripples.js"></script>
<script>
$.material.init();
</script>
<!-- Sliders -->
<!--
<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>
<script>
$(function () {
$.material.init();
$(".shor").noUiSlider({
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
}
});
$(".svert").noUiSlider({
orientation: "vertical",
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
}
});
});
</script>
-->
<!-- Dropdown.js -->
<!--
<script src="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js"></script>
<script>
$("#dropdown-menu select").dropdown();
</script>
-->
</body>
</html>