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

Solves #734 Generic label styles need to be applied outside of .form-group

Browse Source
This commit is contained in:
Kevin Ross 2015-11-21 15:19:40 -06:00
parent d27ca1bc41
commit 2de3250390
3 changed files with 239 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
bootstrap-elements.html
View File

@ -286,7 +286,7 @@
================================================== -->
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<div class="page-header">
<h1 id="navbar">Navbar</h1>
</div>
@ -322,7 +322,7 @@
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Search">
<input type="text" class="form-control col-md-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
@ -375,7 +375,7 @@
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Search">
<input type="text" class="form-control col-md-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
@ -428,7 +428,7 @@
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Search">
<input type="text" class="form-control col-md-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
@ -460,14 +460,14 @@
<div class="bs-docs-section">
<div class="page-header">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<h1 id="buttons">Buttons</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="col-md-6">
<h3>Default buttons</h3>
@ -616,7 +616,7 @@
</p>
</div>
<div class="col-lg-6">
<div class="col-md-6">
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default btn-lg btn-block">Block level button</a>
@ -681,7 +681,7 @@
================================================== -->
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<div class="page-header">
<h1 id="type">Typography</h1>
</div>
@ -691,7 +691,7 @@
<!-- Headings -->
<div class="row">
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<h1>Heading 1</h1>
@ -705,7 +705,7 @@
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<h2>Example body text</h2>
@ -724,7 +724,7 @@
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<h2>Emphasis classes</h2>
@ -747,12 +747,12 @@
<!-- Blockquotes -->
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<h2 id="type-blockquotes">Blockquotes</h2>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="col-md-6">
<div class="bs-component">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -760,7 +760,7 @@
</blockquote>
</div>
</div>
<div class="col-lg-6">
<div class="col-md-6">
<div class="bs-component">
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -776,7 +776,7 @@
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<div class="page-header">
<h1 id="icon">Icons</h1>
@ -1796,7 +1796,7 @@
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<div class="page-header">
<h1 id="tables">Tables</h1>
</div>
@ -1865,7 +1865,7 @@
================================================== -->
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<div class="page-header">
<h1 id="forms">Forms</h1>
</div>
@ -1873,22 +1873,22 @@
</div>
<div class="row">
<div class="col-lg-6">
<div class="col-md-6">
<div class="well bs-component">
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<label for="inputEmail" class="col-md-2 control-label">Email</label>
<div class="col-lg-10">
<div class="col-md-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<label for="inputPassword" class="col-md-2 control-label">Password</label>
<div class="col-lg-10">
<div class="col-md-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<!--
@ -1911,7 +1911,7 @@
</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="col-md-offset-2 col-md-10">
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
@ -1923,7 +1923,7 @@
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="col-md-offset-2 col-md-10">
<div class="togglebutton">
<label>
<input type="checkbox" checked> Toggle button
@ -1932,25 +1932,25 @@
</div>
</div>
<div class="form-group">
<label for="inputFile" class="col-lg-2 control-label">File</label>
<label for="inputFile" class="col-md-2 control-label">File</label>
<div class="col-lg-10">
<div class="col-md-10">
<input type="text" readonly class="form-control" placeholder="Browse...">
<input type="file" id="inputFile" multiple>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Textarea</label>
<label for="textArea" class="col-md-2 control-label">Textarea</label>
<div class="col-lg-10">
<div class="col-md-10">
<textarea class="form-control" rows="3" id="textArea"></textarea>
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Radios</label>
<label class="col-md-2 control-label">Radios</label>
<div class="col-lg-10">
<div class="col-md-10">
<div class="radio radio-primary">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
@ -1966,9 +1966,9 @@
</div>
</div>
<div class="form-group">
<label for="select111" class="col-lg-2 control-label">Select</label>
<label for="select111" class="col-md-2 control-label">Select</label>
<div class="col-lg-10">
<div class="col-md-10">
<select id="select111" class="form-control">
<option>1</option>
<option>2</option>
@ -1979,9 +1979,9 @@
</div>
</div>
<div class="form-group">
<label for="select222" class="col-lg-2 control-label">Select Multiple</label>
<label for="select222" class="col-md-2 control-label">Select Multiple</label>
<div class="col-lg-10">
<div class="col-md-10">
<select id="select222" multiple="" class="form-control">
<option>1</option>
<option>2</option>
@ -1992,7 +1992,7 @@
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<div class="col-md-10 col-md-offset-2">
<button type="button" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
@ -2001,7 +2001,7 @@
</form>
</div>
</div>
<div class="col-lg-4 col-lg-offset-1">
<div class="col-md-4 col-md-offset-1">
<form class="bs-component">
<div class="form-group label-floating">
@ -2112,7 +2112,7 @@
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<div class="page-header">
<h1 id="nav">Navs</h1>
</div>
@ -2120,7 +2120,7 @@
</div>
<div class="row">
<div class="col-lg-4">
<div class="col-md-4">
<h2 id="nav-tabs">Tabs</h2>
<div class="bs-component">
@ -2155,7 +2155,7 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<h2 id="nav-pills">Pills</h2>
<div class="bs-component">
@ -2199,7 +2199,7 @@
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<h2 id="nav-breadcrumbs">Breadcrumbs</h2>
<div class="bs-component">
@ -2224,7 +2224,7 @@
<div class="row">
<div class="col-lg-4">
<div class="col-md-4">
<h2 id="pagination">Pagination</h2>
<div class="bs-component">
@ -2257,7 +2257,7 @@
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<h2 id="pager">Pager</h2>
<div class="bs-component">
@ -2272,7 +2272,7 @@
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
</div>
</div>
@ -2283,7 +2283,7 @@
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<div class="page-header">
<h1 id="indicators">Indicators</h1>
</div>
@ -2291,7 +2291,7 @@
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<h2>Alerts</h2>
<div class="bs-component">
@ -2306,7 +2306,7 @@
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="alert alert-dismissible alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>
@ -2315,7 +2315,7 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="alert alert-dismissible alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
@ -2324,7 +2324,7 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="alert alert-dismissible alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
@ -2335,7 +2335,7 @@
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="col-md-4">
<h2>Labels</h2>
<div class="bs-component" style="margin-bottom: 40px;">
@ -2347,7 +2347,7 @@
<span class="label label-info">Info</span>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<h2>Badges</h2>
<div class="bs-component">
@ -2366,7 +2366,7 @@
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<div class="page-header">
<h1 id="progress">Progress bars</h1>
</div>
@ -2445,7 +2445,7 @@
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<div class="page-header">
<h1 id="slider">Sliders <span style="font-size: 50%">(with noUiSlider)</span></h1>
</div>
@ -2473,7 +2473,7 @@
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<div class="page-header">
<h1 id="container">Containers</h1>
</div>
@ -2491,12 +2491,12 @@
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<h2>List groups</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="list-group">
<div class="list-group-item">
@ -2538,7 +2538,7 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="list-group">
<div class="list-group-item">
@ -2580,7 +2580,7 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="list-group">
<div class="list-group-item">
@ -2623,12 +2623,12 @@
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<h2>Panels</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="panel panel-default">
<div class="panel-body">
@ -2651,7 +2651,7 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="panel panel-primary">
<div class="panel-heading">
@ -2681,7 +2681,7 @@
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="panel panel-danger">
<div class="panel-heading">
@ -2705,26 +2705,26 @@
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<h2>Wells</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="well">
Look, I'm in a well!
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="well well-sm">
Look, I'm in a small well!
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-md-4">
<div class="bs-component">
<div class="well well-lg">
Look, I'm in a large well!
@ -2739,14 +2739,14 @@
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="col-md-12">
<div class="page-header">
<h1 id="dialogs">Dialogs</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="col-md-6">
<h2>Modals</h2>
<div class="bs-component">
@ -2769,7 +2769,7 @@
</div>
</div>
</div>
<div class="col-lg-6">
<div class="col-md-6">
<h2>Popovers</h2>
<div class="bs-component">
@ -2797,7 +2797,7 @@
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="col-md-6">
<h2>Snackbars and toasts <span style="font-size: 50%">(with SnackbarJS)</span></h2>
<p>SnackbarJS is the ad-hoc developed plugin to create snackbars and toasts, read more about it on the

12
index.html
View File

@ -391,9 +391,9 @@
<form>
<div class="form-group">
<label for="i5ps" class="control-label col-lg-2">Column label</label>
<label for="i5ps" class="control-label col-sm-2">Column label</label>
<div class="col-lg-10">
<div class="col-sm-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>
</div>
@ -617,7 +617,7 @@
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Search">
<input type="text" class="form-control col-sm-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
@ -668,7 +668,7 @@
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Search">
<input type="text" class="form-control col-sm-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
@ -719,7 +719,7 @@
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Search">
<input type="text" class="form-control col-sm-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
@ -770,7 +770,7 @@
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Search">
<input type="text" class="form-control col-sm-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">

300
less/_inputs.less
View File

@ -1,7 +1,7 @@
@import '_inputs-size.less';
// must be broken out for reuse - webkit selector breaks firefox
.label-position(@label-top, @static-font-size, @static-line-height) {
.label-static(@label-top, @static-font-size, @static-line-height) {
label.control-label {
top: @label-top;
left: 0;
@ -11,6 +11,44 @@
}
}
.label-size-variant(@placeholder-font-size, @vertical-padding, @line-height, @static-font-size, @static-line-height, @help-block-font-size){
.form-control {
.material-placeholder({
font-size: @placeholder-font-size;
line-height: @line-height;
color: @mdb-input-placeholder-color;
font-weight: 400;
});
// margin-bottom must be specified to give help-block vertical space.
// @see also form-group padding-bottom (and size variants) re: collapsible margins. These work together.
margin-bottom: @vertical-padding;
}
// generic labels used anywhere in the form (not control-label)
.checkbox label,
.radio label,
label {
font-size: @placeholder-font-size;
line-height: @line-height;
color: @mdb-input-placeholder-color;
font-weight: 400;
}
// smaller focused or static size
label.control-label {
font-size: @static-font-size;
line-height: @static-line-height;
color: @mdb-input-placeholder-color;
font-weight: 400;
margin: 16px 0 0 0; // std and lg
}
.help-block {
margin-top: 0px; // allow the input margin to set-off the top of the help-block
font-size: @help-block-font-size;
}
}
.form-group-validation-state(@name, @color) {
&.@{name} { // e.g. has-error
@ -27,7 +65,7 @@
}
}
.label-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){
.form-group-size-variant(@parent, @placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim) {
@static-font-size: ceil((@mdb-label-static-size-ratio * @placeholder-font-size));
@static-line-height: (@mdb-label-static-size-ratio * @line-height);
@ -37,128 +75,108 @@
@help-block-font-size: ceil((@mdb-help-block-size-ratio * @placeholder-font-size));
@help-block-line-height: (@mdb-help-block-size-ratio * @line-height);
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
margin: (@label-top-margin + @static-font-size) 0 0 0;
.form-control {
.material-placeholder({
font-size: @placeholder-font-size;
});
margin-bottom: @vertical-padding; // must be specified to give help-block vertical space
// this is outside a form-group
& when not (isstring(@parent)) {
.label-size-variant(@placeholder-font-size, @vertical-padding, @line-height, @static-font-size, @static-line-height, @help-block-font-size);
}
// upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
// must also be expressed as form-group padding
padding-bottom: @vertical-padding;
// this is inside a form-group, may be .form-group.form-group-sm or .form-group.form-group-lg
& when (isstring(@parent)) {
@{parent} {
.label-size-variant(@placeholder-font-size, @vertical-padding, @line-height, @static-font-size, @static-line-height, @help-block-font-size);
.help-block {
margin-top: 0px; // allow the input margin to set-off the top of the help-block
font-size: @help-block-font-size;
}
// form-group padding-bottom
// upon collapsing margins, the largest margin is honored which collapses the form-control margin-bottom,
// so the form-control margin-bottom must also be expressed as form-group padding
padding-bottom: @vertical-padding;
// generic labels used anywhere in the form (not control-label)
.checkbox label,
.radio label,
label {
font-size: @placeholder-font-size;
line-height: @line-height;
font-weight: 400;
}
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
margin: (@label-top-margin + @static-font-size) 0 0 0;
// smaller focused or static size
label.control-label {
font-size: @static-font-size;
line-height: @static-line-height;
}
// larger labels as placeholders
&.label-floating,
&.label-placeholder {
label.control-label {
top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
font-size: @placeholder-font-size;
line-height: @line-height;
}
}
// larger labels as placeholders
&.label-floating,
&.label-placeholder {
label.control-label {
top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
font-size: @placeholder-font-size;
line-height: @line-height;
// static, focused, or autofill floating labels
&.label-static,
&.label-floating.is-focused,
&.label-floating:not(.is-empty) {
.label-static(@label-top, @static-font-size, @static-line-height);
}
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
&.label-floating input.form-control:-webkit-autofill ~ label.control-label {
.label-static(@label-top, @static-font-size, @static-line-height);
}
}
}
// static, focused, or autofill floating labels
&.label-static,
&.label-floating.is-focused,
&.label-floating:not(.is-empty) {
.label-position(@label-top, @static-font-size, @static-line-height);
}
// #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
&.label-floating input.form-control:-webkit-autofill ~ label.control-label {
.label-position(@label-top, @static-font-size, @static-line-height);
}
}
// -----
// Inputs
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control,
.form-group .form-control {
border: 0;
background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(~"100% - 1px");
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
float: none;
box-shadow: none;
border-radius: 0;
// Placeholders and and labels-as-placeholders should look the same
.material-placeholder({
color: @mdb-input-placeholder-color;
font-weight: 400;
});
//&:textarea { // appears to be an invalid selector
// height: 40px;
//}
&[readonly],
&[disabled],
fieldset[disabled] & {
background-color: rgba(0, 0, 0, 0);
}
&[disabled],
fieldset[disabled] & {
background-image: none;
border-bottom: 1px dotted @mdb-input-underline-color;
}
}
// -----
// Labels with form-group signalled state
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
//.variations(~" label.control-label", color, @mdb-input-placeholder-color); // default label color variations
.form-group {
//border: solid 1px red;
position: relative;
// -----
// Inputs
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control {
border: 0;
background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(~"100% - 1px");
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
float: none;
box-shadow: none;
border-radius: 0;
// Placeholders and and labels-as-placeholders should look the same
.material-placeholder({
color: @mdb-input-placeholder-color;
font-weight: 400;
});
//&:textarea { // appears to be an invalid selector
// height: 40px;
//}
&[readonly],
&[disabled],
fieldset[disabled] & {
background-color: rgba(0, 0, 0, 0);
}
&[disabled],
fieldset[disabled] & {
background-image: none;
border-bottom: 1px dotted @mdb-input-underline-color;
}
}
&.is-focused .form-control {
outline: none;
background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
.material-input:after {
background-color: @brand-primary;
}
}
// -----
// Labels
// Labels with form-group signalled state
//
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
&.label-static,
&.label-placeholder,
&.label-floating {
label.control-label {
position: absolute;
pointer-events: none;
@ -166,19 +184,6 @@
}
}
// generic labels and control labels
label,
label.control-label {
// same label properties as form-group placeholder
color: @mdb-input-placeholder-color;
font-weight: 400;
}
label.control-label {
// same label properties as form-group placeholder
margin: 16px 0 0 0; // std and lg
}
// hide label-placeholders when the field is not empty
&.label-placeholder:not(.is-empty){
label.control-label{
@ -186,30 +191,40 @@
}
}
.variations(~" label.control-label", color, @mdb-input-placeholder-color); // default label color variations
.variations(~".is-focused label.control-label", color, @brand-primary); // focused label color variations
.variations(~".is-focused.label-placeholder label.control-label", color, @mdb-input-placeholder-color); // default label color variations
// default floating size/location
.label-size-variant(@mdb-input-font-size-base, @mdb-label-top-margin-base, @mdb-input-padding-base-vertical, @mdb-input-line-height-base, @mdb-label-as-placeholder-shim-base);
// sm floating size/location
&.form-group-sm {
.label-size-variant(@mdb-input-font-size-small, @mdb-label-top-margin-small, @mdb-input-padding-small-vertical, @mdb-input-line-height-small, @mdb-label-as-placeholder-shim-small);
}
// lg floating size/location
&.form-group-lg {
.label-size-variant(@mdb-input-font-size-large, @mdb-label-top-margin-large, @mdb-input-padding-large-vertical, @mdb-input-line-height-large, @mdb-label-as-placeholder-shim-large);
}
// Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
// Help blocks - position: absolute approach - uses no vertical space, text wrapping - not so good.
.help-block {
position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
display: none;
}
// form-group is-focused display
&.is-focused {
.form-control {
outline: none;
background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
.material-input:after {
background-color: @brand-primary;
}
}
//.variations(~".is-focused label.control-label", color, @brand-primary); // focused label color variations
label,
label.control-label {
color: @brand-primary;
}
//.variations(~".is-focused.label-placeholder label.control-label", color, @mdb-input-placeholder-color); // default label color variations
&.label-placeholder {
label,
label.control-label {
color: @mdb-input-placeholder-color;
}
}
.help-block {
display: block;
}
@ -241,6 +256,19 @@
}
}
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation)
.form-group-size-variant(null, @mdb-input-font-size-base, @mdb-label-top-margin-base, @mdb-input-padding-base-vertical, @mdb-input-line-height-base, @mdb-label-as-placeholder-shim-base);
// default floating size/location with a form-group (need margin etc from a default form-group)
.form-group-size-variant(~".form-group", @mdb-input-font-size-base, @mdb-label-top-margin-base, @mdb-input-padding-base-vertical, @mdb-input-line-height-base, @mdb-label-as-placeholder-shim-base);
// sm floating size/location
.form-group-size-variant(~".form-group.form-group-sm", @mdb-input-font-size-small, @mdb-label-top-margin-small, @mdb-input-padding-small-vertical, @mdb-input-line-height-small, @mdb-label-as-placeholder-shim-small);
// lg floating size/location
.form-group-size-variant(~".form-group.form-group-lg", @mdb-input-font-size-large, @mdb-label-top-margin-large, @mdb-input-padding-large-vertical, @mdb-input-line-height-large, @mdb-label-as-placeholder-shim-large);
select.form-control {
border: 0;
@ -271,7 +299,7 @@ select.form-control {
// ----------------
// input group/addon related styles
// default margin
// default margin - no form-group required
.input-group-button-variation(@mdb-input-padding-base-vertical);
.form-group {