mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-29 04:54:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Solves #730 and #636 -

Browse Source 
- labels adjusted for horizontal forms, and generic labels now set in inputs.less
- js added to set is-focused on checkbox form-groups when hovering
- markup samples for right, left checkbox labels plus help-blocks
This commit is contained in:
Kevin Ross 2015-11-20 10:17:12 -06:00
parent 25a0a4fe95
commit 6da08062b4
29 changed files with 619 additions and 549 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
bootstrap-elements.html
View File

@ -1891,6 +1891,7 @@
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<!--
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
@ -1906,6 +1907,28 @@
<input type="checkbox" checked> Toggle button
</label>
</div>
-->
</div>
</div>
<div class="form-group" style="margin-top: 0;"> <!-- inline style is just to demo custom css to put checkbox below input above -->
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
</label>
<label>
<input type="checkbox" disabled> Disabled Checkbox
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="togglebutton">
<label>
<input type="checkbox" checked> Toggle button
</label>
</div>
</div>
</div>
<div class="form-group">

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

File diff suppressed because it is too large Load Diff

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

169
dist/css/material.css vendored
View File

@ -2571,7 +2571,7 @@ Then, run this script to get the list.
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
}
body {
background-color: #EEEEEE;
background-color: #eeeeee;
}
body.inverse {
background: #333333;
@ -2655,7 +2655,7 @@ body .well-default,
body .jumbotron-default,
.container .jumbotron-default,
.container-fluid .jumbotron-default {
background-color: #FFF;
background-color: #ffffff;
}
body .well-black,
.container .well-black,
@ -3874,21 +3874,6 @@ body .jumbotron-material-blue-grey,
.form-horizontal .checkbox {
padding-top: 20px;
}
.form-group .checkbox label {
font-size: 16px;
line-height: 1.42857143;
font-weight: normal;
}
.form-group.form-group-sm .checkbox label {
font-size: 11px;
line-height: 1.5;
font-weight: normal;
}
.form-group.form-group-lg .checkbox label {
font-size: 18px;
line-height: 1.3333333;
font-weight: normal;
}
.form-group .checkbox label {
cursor: pointer;
padding-left: 0;
@ -4493,21 +4478,6 @@ fieldset[disabled] .form-group .checkbox input[type=checkbox],
opacity: 0;
}
}
.form-group .togglebutton label {
font-size: 16px;
line-height: 1.42857143;
font-weight: normal;
}
.form-group.form-group-sm .togglebutton label {
font-size: 11px;
line-height: 1.5;
font-weight: normal;
}
.form-group.form-group-lg .togglebutton label {
font-size: 18px;
line-height: 1.3333333;
font-weight: normal;
}
.form-group .togglebutton {
vertical-align: middle;
}
@ -4537,7 +4507,7 @@ fieldset[disabled] .form-group .checkbox input[type=checkbox],
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 10px;
margin-right: 15px;
transition: background 0.3s ease;
vertical-align: middle;
}
@ -4823,21 +4793,6 @@ fieldset[disabled] .form-group .checkbox input[type=checkbox],
.form-horizontal .radio {
margin-bottom: 10px;
}
.form-group .radio label {
font-size: 16px;
line-height: 1.42857143;
font-weight: normal;
}
.form-group.form-group-sm .radio label {
font-size: 11px;
line-height: 1.5;
font-weight: normal;
}
.form-group.form-group-lg .radio label {
font-size: 18px;
line-height: 1.3333333;
font-weight: normal;
}
.radio label {
cursor: pointer;
padding-left: 45px;
@ -5259,7 +5214,7 @@ output {
}
.form-group .form-control {
border: 0;
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
@ -5270,15 +5225,15 @@ output {
border-radius: 0;
}
.form-group .form-control::-moz-placeholder {
color: #BDBDBD;
color: #bdbdbd;
font-weight: normal;
}
.form-group .form-control:-ms-input-placeholder {
color: #BDBDBD;
color: #bdbdbd;
font-weight: normal;
}
.form-group .form-control::-webkit-input-placeholder {
color: #BDBDBD;
color: #bdbdbd;
font-weight: normal;
}
.form-group .form-control[readonly],
@ -5289,11 +5244,11 @@ fieldset[disabled] .form-group .form-control {
.form-group .form-control[disabled],
fieldset[disabled] .form-group .form-control {
background-image: none;
border-bottom: 1px dotted #D2D2D2;
border-bottom: 1px dotted #d2d2d2;
}
.form-group.is-focused .form-control {
outline: none;
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
@ -5308,9 +5263,12 @@ fieldset[disabled] .form-group .form-control {
pointer-events: none;
transition: 0.3s ease all;
}
.form-group label,
.form-group label.control-label {
color: #BDBDBD;
color: #bdbdbd;
font-weight: normal;
}
.form-group label.control-label {
margin: 16px 0 0 0;
}
.form-group.label-placeholder:not(.is-empty) label.control-label {
@ -5318,7 +5276,7 @@ fieldset[disabled] .form-group .form-control {
}
.form-group label.control-label,
.form-group-default label.control-label {
color: #BDBDBD;
color: #bdbdbd;
}
.form-group-black label.control-label {
color: #000000;
@ -5488,7 +5446,7 @@ fieldset[disabled] .form-group .form-control {
}
.form-group.is-focused.label-placeholder label.control-label,
.form-group-default.is-focused.label-placeholder label.control-label {
color: #BDBDBD;
color: #bdbdbd;
}
.form-group-black.is-focused.label-placeholder label.control-label {
color: #000000;
@ -5587,6 +5545,11 @@ fieldset[disabled] .form-group .form-control {
margin-top: 0px;
font-size: 12px;
}
.form-group label {
font-size: 16px;
line-height: 1.42857143;
font-weight: normal;
}
.form-group label.control-label {
font-size: 12px;
line-height: 1.07142857;
@ -5630,6 +5593,11 @@ fieldset[disabled] .form-group .form-control {
margin-top: 0px;
font-size: 9px;
}
.form-group.form-group-sm label {
font-size: 11px;
line-height: 1.5;
font-weight: normal;
}
.form-group.form-group-sm label.control-label {
font-size: 9px;
line-height: 1.125;
@ -5673,6 +5641,11 @@ fieldset[disabled] .form-group .form-control {
margin-top: 0px;
font-size: 14px;
}
.form-group.form-group-lg label {
font-size: 18px;
line-height: 1.3333333;
font-weight: normal;
}
.form-group.form-group-lg label.control-label {
font-size: 14px;
line-height: 0.99999998;
@ -5705,94 +5678,94 @@ fieldset[disabled] .form-group .form-control {
}
.form-group.is-focused .form-control,
.form-group-default.is-focused .form-control {
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-black.is-focused .form-control {
background-image: linear-gradient(#000000, #000000), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#000000, #000000), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-white.is-focused .form-control {
background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-inverse.is-focused .form-control {
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-primary.is-focused .form-control {
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-success.is-focused .form-control {
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-info.is-focused .form-control {
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-warning.is-focused .form-control {
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-danger.is-focused .form-control {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-red.is-focused .form-control {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-pink.is-focused .form-control {
background-image: linear-gradient(#e91e63, #e91e63), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#e91e63, #e91e63), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-purple.is-focused .form-control {
background-image: linear-gradient(#9c27b0, #9c27b0), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#9c27b0, #9c27b0), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-deep-purple.is-focused .form-control {
background-image: linear-gradient(#673ab7, #673ab7), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#673ab7, #673ab7), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-indigo.is-focused .form-control {
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-blue.is-focused .form-control {
background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-light-blue.is-focused .form-control {
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-cyan.is-focused .form-control {
background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-teal.is-focused .form-control {
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-green.is-focused .form-control {
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-light-green.is-focused .form-control {
background-image: linear-gradient(#8bc34a, #8bc34a), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#8bc34a, #8bc34a), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-lime.is-focused .form-control {
background-image: linear-gradient(#cddc39, #cddc39), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#cddc39, #cddc39), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-yellow.is-focused .form-control {
background-image: linear-gradient(#ffeb3b, #ffeb3b), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#ffeb3b, #ffeb3b), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-amber.is-focused .form-control {
background-image: linear-gradient(#ffc107, #ffc107), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#ffc107, #ffc107), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-orange.is-focused .form-control {
background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-deep-orange.is-focused .form-control {
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-brown.is-focused .form-control {
background-image: linear-gradient(#795548, #795548), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#795548, #795548), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-grey.is-focused .form-control {
background-image: linear-gradient(#9e9e9e, #9e9e9e), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#9e9e9e, #9e9e9e), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-blue-grey.is-focused .form-control {
background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group.has-warning .form-control {
box-shadow: none;
}
.form-group.has-warning.is-focused .form-control {
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group.has-warning label.control-label,
.form-group.has-warning .help-block {
@ -5802,7 +5775,7 @@ fieldset[disabled] .form-group .form-control {
box-shadow: none;
}
.form-group.has-error.is-focused .form-control {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group.has-error label.control-label,
.form-group.has-error .help-block {
@ -5812,7 +5785,7 @@ fieldset[disabled] .form-group .form-control {
box-shadow: none;
}
.form-group.has-success.is-focused .form-control {
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group.has-success label.control-label,
.form-group.has-success .help-block {
@ -5822,7 +5795,7 @@ fieldset[disabled] .form-group .form-control {
box-shadow: none;
}
.form-group.has-info.is-focused .form-control {
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group.has-info label.control-label,
.form-group.has-info .help-block {
@ -5847,7 +5820,7 @@ select.form-control {
}
.form-group.is-focused select.form-control {
box-shadow: none;
border-color: #D2D2D2;
border-color: #d2d2d2;
}
select.form-control[multiple],
.form-group.is-focused select.form-control[multiple] {
@ -5880,6 +5853,18 @@ select.form-control[multiple],
height: 100%;
z-index: 100;
}
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 0px;
}
.form-horizontal label {
text-align: right;
}
.form-horizontal label.control-label {
margin: 0;
}
legend {
border-bottom: 0;
}
@ -7911,7 +7896,7 @@ icon-material-blue-grey {
/**************************************************************************/
border-radius: 2px;
color: rgba(0, 0, 0, 0.84);
background: #fff;
background: #ffffff;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card .card-height-indicator {
@ -7940,7 +7925,7 @@ icon-material-blue-grey {
position: absolute;
bottom: 16px;
left: 18px;
color: #fff;
color: #ffffff;
font-size: 2em;
}
.card .card-body {

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

26
dist/js/material.js vendored
View File

@ -19,6 +19,14 @@
return false;
}
function _addFormGroupFocus(element){
$(element).closest(".form-group").addClass("is-focused");
}
function _removeFormGroupFocus(element){
$(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group
}
$.material = {
"options": {
// These options set what will be started by $.material.init()
@ -49,21 +57,21 @@
$((selector) ? selector : this.options.checkboxElements)
.filter(":notmdproc")
.data("mdproc", true)
.after("<span class=checkbox-material><span class=check></span></span>");
.after("<span class='checkbox-material'><span class='check'></span></span>");
},
"togglebutton": function(selector) {
// Add fake-checkbox to material checkboxes
$((selector) ? selector : this.options.togglebuttonElements)
.filter(":notmdproc")
.data("mdproc", true)
.after("<span class=toggle></span>");
.after("<span class='toggle'></span>");
},
"radio": function(selector) {
// Add fake-radio to material radios
$((selector) ? selector : this.options.radioElements)
.filter(":notmdproc")
.data("mdproc", true)
.after("<span class=circle></span><span class=check></span>");
.after("<span class='circle'></span><span class='check'></span>");
},
"input": function(selector) {
$((selector) ? selector : this.options.inputElements)
@ -125,6 +133,14 @@
});
},
"attachInputEventHandlers": function() {
// checkboxes didn't appear to bubble to the document, so we'll bind these directly
$(".form-group .checkbox label").hover(function() {
_addFormGroupFocus(this);
}, function() {
_removeFormGroupFocus(this);
});
$(document)
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
.on("keydown paste", ".form-control", function(e) {
@ -158,10 +174,10 @@
}
})
.on("focus", ".form-control, .form-group.is-fileinput", function() {
$(this).closest(".form-group").addClass("is-focused"); // add class to form-group
_addFormGroupFocus(this);
})
.on("blur", ".form-control, .form-group.is-fileinput", function() {
$(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
_removeFormGroupFocus(this);
})
// make sure empty is added back when there is a programmatic value change.
// NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')

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

@ -1 +1 @@
{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$input","$formGroup","closest","length","wrap","attr","removeAttr","legacySizes","input-lg","input-sm","legacySize","standardSize","hasClass","removeClass","addClass","placeholder","id","forAttribute","val","append","find","attachInputEventHandlers","document","on","blur","e","isValid","checkValidity","value","files","i","file","name","substring","loading","setInterval","$this","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}
{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","_addFormGroupFocus","element","closest","addClass","_removeFormGroupFocus","removeClass","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$input","$formGroup","length","wrap","attr","removeAttr","legacySizes","input-lg","input-sm","legacySize","standardSize","hasClass","placeholder","id","forAttribute","val","append","find","attachInputEventHandlers","hover","document","on","blur","e","isValid","checkValidity","value","files","i","file","name","substring","loading","setInterval","$this","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}

75
index.html
View File

@ -218,72 +218,65 @@
<pre><code>$.material.init()</code></pre>
</div>
<div class="well page" id="checkbox">
<h1 class="header">Checkbox</h1>
<h1 class="header">Checkbox <small>default checkboxes</small></h1>
<!-- Simple checkbox with label -->
<div class="sample1">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Notifications
</label>
</div>
<p class="hint">Notify me about updates to apps or games that I've downloaded</p>
<p class="help-block">Notify me about updates to apps or games that I've downloaded</p>
</div>
<!-- Simple checkbox with label, checked -->
<div class="sample1">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" checked> Auto-updates
</label>
</div>
<p class="hint">Auto-update apps over wifi only</p>
<p class="help-block">Auto-update apps over wifi only</p>
</div>
<!-- Simple checkbox with label -->
<div class="sample1">
<div class="checkbox">
<label>
<input type="checkbox"> Clear search history
</label>
</div>
<p class="hint">Remove all the searches you have ever performed</p>
</div>
<h2>Sound</h2>
<h2>Sound <small>horizontal form with column label variations and <code>checkbox-primary</code> color</small></h2>
<!-- Checkboxes with labels on the left -->
<div class="sample2">
<div class="text">Touch sounds</div>
<div class="checkbox checkbox-primary">
<label>
<input type="checkbox" checked>
</label>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" for="ch1">Touch sounds</label>
<div class="col-sm-10">
<div class="checkbox checkbox-primary">
<label>
<input id="ch1" type="checkbox" checked>
</label>
</div>
<p class="help-block">This shows the generic label variant.</p>
</div>
</div>
</div>
<div class="sample2">
<div class="text">Screen lock sound</div>
<div class="checkbox checkbox-primary">
<label>
<input type="checkbox">
</label>
<div class="form-group">
<label class="col-sm-2 control-label" for="ch3">Vibrate on touch</label>
<div class="col-sm-10">
<div class="checkbox checkbox-primary">
<label>
<input id="ch3" type="checkbox">
</label>
</div>
<p class="help-block">This shows the <code>control-label</code> variant.</p>
</div>
</div>
</div>
<div class="sample2">
<div class="text">Vibrate on touch</div>
<div class="checkbox checkbox-primary">
<label>
<input type="checkbox">
</label>
</div>
</div>
</form>
</div>
<div class="well page" id="radio-button">
<h1 class="header">Checkbox</h1>
<h2>Keep Wi-Fi on during sleep</h2>
<div class="sample1">
<div class="form-group">
<div class="radio radio-success">
<label>
<input type="radio" name="sample1" value="option1" checked="">
@ -373,6 +366,7 @@
<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>
@ -391,6 +385,7 @@
<form>
<div class="form-group">
<label for="i5ps" class="control-label col-lg-2">Column label</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="i5ps" placeholder="placeholder attribute">
<span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
@ -532,11 +527,13 @@
<div class="form-group label-floating">
<label for="555" class="control-label">label</label>
<input type="text" class="form-control" id="555">
<p class="help-block">Some helpful hint</p>
</div>
<div class="form-group label-floating">
<label for="676" class="control-label">label</label>
<input type="email" class="form-control" id="676">
<p class="help-block">A valid email contains an @ character</p>
</div>

8
less/_checkboxes.less
View File

@ -5,17 +5,13 @@
.form-group-checkbox-variant(@placeholder-font-size, @line-height){
.checkbox {
label {
font-size: @placeholder-font-size;
line-height: @line-height;
font-weight: normal;
}
// Label is set in _inputs.less
}
}
.form-group {
// default label size/location
//// default label size/location
.form-group-checkbox-variant(@md-input-font-size-base, @md-input-line-height-base);
// sm label size/location

18
less/_form.less Normal file
View File

@ -0,0 +1,18 @@
.form-horizontal {
// Consistent vertical alignment of radios and checkboxes
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
padding-top: 0px;
}
label {
text-align: right;
}
label.control-label {
margin: 0;
}
}

2
less/_inputs-size.less
View File

@ -1,6 +1,8 @@
//
// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
//
// LEAVE THIS IDENTICAL TO THE BOOTSTRAP FILE - DO NOT CUSTOMIZE HERE.
//
// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
// to identify differences in sizing approaches to form inputs.
// --------------------------------------------------

15
less/_inputs.less
View File

@ -46,13 +46,20 @@
font-size: @help-block-font-size;
}
// generic labels used anywhere in the form (not control-label)
label {
font-size: @placeholder-font-size;
line-height: @line-height;
font-weight: normal;
}
// smaller focused or static size
label.control-label {
font-size: @static-font-size;
line-height: @static-line-height;
}
// larger labels as placeholders
// larger labels as placeholders
&.label-floating,
&.label-placeholder {
label.control-label {
@ -151,10 +158,16 @@
}
}
// generic labels and control labels
label,
label.control-label {
// same label properties as form-group placeholder
color: @input-placeholder-color;
font-weight: normal;
}
label.control-label {
// same label properties as form-group placeholder
margin: 16px 0 0 0; // std and lg
}

2
less/_material.less
View File

@ -50,6 +50,8 @@ a, a:hover, a:focus {
// Text inputs
@import "_inputs.less";
@import "_form.less";
legend {
border-bottom: 0;
}

6
less/_radios.less
View File

@ -4,11 +4,7 @@
.form-group-radio-variant(@placeholder-font-size, @line-height){
.radio {
label {
font-size: @placeholder-font-size;
line-height: @line-height;
font-weight: normal;
}
// Label is set in _inputs.less
}
}

10
less/_togglebutton.less
View File

@ -1,16 +1,12 @@
.form-group-toggle-variant(@placeholder-font-size, @line-height){
.togglebutton {
label {
font-size: @placeholder-font-size;
line-height: @line-height;
font-weight: normal;
}
// Label is set in _inputs.less
}
}
.form-group {
// default label size/location
//// default label size/location
.form-group-toggle-variant(@md-input-font-size-base, @md-input-line-height-base);
// sm label size/location
@ -47,7 +43,7 @@
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 10px;
margin-right: 15px;
transition: background 0.3s ease;
vertical-align: middle;
}

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bootstrap-material-design",
"version": "0.4.1",
"version": "0.4.2",
"description": "Material Design for Bootstrap 3",
"main": "scripts/index.js",
"scripts": {

8
sass/_checkboxes.scss
View File

@ -7,17 +7,13 @@
@mixin form-group-checkbox-variant($placeholder-font-size, $line-height){
.checkbox {
label {
font-size: $placeholder-font-size;
line-height: $line-height;
font-weight: normal;
}
// Label is set in _inputs.less
}
}
.form-group {
// default label size/location
//// default label size/location
@include form-group-checkbox-variant($md-input-font-size-base, $md-input-line-height-base);
// sm label size/location

20
sass/_form.scss Normal file
View File

@ -0,0 +1,20 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.form-horizontal {
// Consistent vertical alignment of radios and checkboxes
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
padding-top: 0px;
}
label {
text-align: right;
}
label.control-label {
margin: 0;
}
}

2
sass/_inputs-size.scss
View File

@ -3,6 +3,8 @@
//
// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
//
// LEAVE THIS IDENTICAL TO THE BOOTSTRAP FILE - DO NOT CUSTOMIZE HERE.
//
// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
// to identify differences in sizing approaches to form inputs.
// --------------------------------------------------

17
sass/_inputs.scss
View File

@ -49,13 +49,20 @@
font-size: $help-block-font-size;
}
// generic labels used anywhere in the form (not control-label)
label {
font-size: $placeholder-font-size;
line-height: $line-height;
font-weight: normal;
}
// smaller focused or static size
label.control-label {
font-size: $static-font-size;
line-height: $static-line-height;
}
// larger labels as placeholders
// larger labels as placeholders
&.label-floating,
&.label-placeholder {
label.control-label {
@ -70,7 +77,7 @@
&.label-floating.is-focused,
&.label-floating:not(.is-empty),
&.label-floating input.form-control:-webkit-autofill {
& ~ label.control-label, // #559 webkit chrome autofill - input.form-control:-webkit-autofill ~ label.control-label
& ~ label.control-label, // #559 webkit chrome autofill `.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label`
label.control-label {
top: $label-top;
left: 0;
@ -155,10 +162,16 @@
}
}
// generic labels and control labels
label,
label.control-label {
// same label properties as form-group placeholder
color: $input-placeholder-color;
font-weight: normal;
}
label.control-label {
// same label properties as form-group placeholder
margin: 16px 0 0 0; // std and lg
}

2
sass/_material.scss
View File

@ -52,6 +52,8 @@ a, a:hover, a:focus {
// Text inputs
@import '_inputs';
@import '_form';
legend {
border-bottom: 0;
}

6
sass/_radios.scss
View File

@ -6,11 +6,7 @@
@mixin form-group-radio-variant($placeholder-font-size, $line-height){
.radio {
label {
font-size: $placeholder-font-size;
line-height: $line-height;
font-weight: normal;
}
// Label is set in _inputs.less
}
}

10
sass/_togglebutton.scss
View File

@ -2,17 +2,13 @@
@mixin form-group-toggle-variant($placeholder-font-size, $line-height){
.togglebutton {
label {
font-size: $placeholder-font-size;
line-height: $line-height;
font-weight: normal;
}
// Label is set in _inputs.less
}
}
.form-group {
// default label size/location
//// default label size/location
@include form-group-toggle-variant($md-input-font-size-base, $md-input-line-height-base);
// sm label size/location
@ -49,7 +45,7 @@
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 10px;
margin-right: 15px;
transition: background 0.3s ease;
vertical-align: middle;
}

26
scripts/material.js
View File

@ -19,6 +19,14 @@
return false;
}
function _addFormGroupFocus(element){
$(element).closest(".form-group").addClass("is-focused");
}
function _removeFormGroupFocus(element){
$(element).closest(".form-group").removeClass("is-focused"); // remove class from form-group
}
$.material = {
"options": {
// These options set what will be started by $.material.init()
@ -49,21 +57,21 @@
$((selector) ? selector : this.options.checkboxElements)
.filter(":notmdproc")
.data("mdproc", true)
.after("<span class=checkbox-material><span class=check></span></span>");
.after("<span class='checkbox-material'><span class='check'></span></span>");
},
"togglebutton": function(selector) {
// Add fake-checkbox to material checkboxes
$((selector) ? selector : this.options.togglebuttonElements)
.filter(":notmdproc")
.data("mdproc", true)
.after("<span class=toggle></span>");
.after("<span class='toggle'></span>");
},
"radio": function(selector) {
// Add fake-radio to material radios
$((selector) ? selector : this.options.radioElements)
.filter(":notmdproc")
.data("mdproc", true)
.after("<span class=circle></span><span class=check></span>");
.after("<span class='circle'></span><span class='check'></span>");
},
"input": function(selector) {
$((selector) ? selector : this.options.inputElements)
@ -125,6 +133,14 @@
});
},
"attachInputEventHandlers": function() {
// checkboxes didn't appear to bubble to the document, so we'll bind these directly
$(".form-group .checkbox label").hover(function() {
_addFormGroupFocus(this);
}, function() {
_removeFormGroupFocus(this);
});
$(document)
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
.on("keydown paste", ".form-control", function(e) {
@ -158,10 +174,10 @@
}
})
.on("focus", ".form-control, .form-group.is-fileinput", function() {
$(this).closest(".form-group").addClass("is-focused"); // add class to form-group
_addFormGroupFocus(this);
})
.on("blur", ".form-control, .form-group.is-fileinput", function() {
$(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
_removeFormGroupFocus(this);
})
// make sure empty is added back when there is a programmatic value change.
// NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')