mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-23 01:57:06 +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="bs-docs-section clearfix">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<div class="page-header"> <div class="page-header">
<h1 id="navbar">Navbar</h1> <h1 id="navbar">Navbar</h1>
</div> </div>
@ -322,7 +322,7 @@
</ul> </ul>
<form class="navbar-form navbar-left"> <form class="navbar-form navbar-left">
<div class="form-group"> <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> </div>
</form> </form>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
@ -375,7 +375,7 @@
</ul> </ul>
<form class="navbar-form navbar-left"> <form class="navbar-form navbar-left">
<div class="form-group"> <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> </div>
</form> </form>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
@ -428,7 +428,7 @@
</ul> </ul>
<form class="navbar-form navbar-left"> <form class="navbar-form navbar-left">
<div class="form-group"> <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> </div>
</form> </form>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
@ -460,14 +460,14 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="page-header"> <div class="page-header">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<h1 id="buttons">Buttons</h1> <h1 id="buttons">Buttons</h1>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-md-6">
<h3>Default buttons</h3> <h3>Default buttons</h3>
@ -616,7 +616,7 @@
</p> </p>
</div> </div>
<div class="col-lg-6"> <div class="col-md-6">
<p class="bs-component"> <p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default btn-lg btn-block">Block level button</a> <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="bs-docs-section">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<div class="page-header"> <div class="page-header">
<h1 id="type">Typography</h1> <h1 id="type">Typography</h1>
</div> </div>
@ -691,7 +691,7 @@
<!-- Headings --> <!-- Headings -->
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<h1>Heading 1</h1> <h1>Heading 1</h1>
@ -705,7 +705,7 @@
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<h2>Example body text</h2> <h2>Example body text</h2>
@ -724,7 +724,7 @@
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<h2>Emphasis classes</h2> <h2>Emphasis classes</h2>
@ -747,12 +747,12 @@
<!-- Blockquotes --> <!-- Blockquotes -->
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<h2 id="type-blockquotes">Blockquotes</h2> <h2 id="type-blockquotes">Blockquotes</h2>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-md-6">
<div class="bs-component"> <div class="bs-component">
<blockquote> <blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -760,7 +760,7 @@
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="col-lg-6"> <div class="col-md-6">
<div class="bs-component"> <div class="bs-component">
<blockquote class="pull-right"> <blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <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="bs-docs-section">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<div class="page-header"> <div class="page-header">
<h1 id="icon">Icons</h1> <h1 id="icon">Icons</h1>
@ -1796,7 +1796,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<div class="page-header"> <div class="page-header">
<h1 id="tables">Tables</h1> <h1 id="tables">Tables</h1>
</div> </div>
@ -1865,7 +1865,7 @@
================================================== --> ================================================== -->
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<div class="page-header"> <div class="page-header">
<h1 id="forms">Forms</h1> <h1 id="forms">Forms</h1>
</div> </div>
@ -1873,22 +1873,22 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-md-6">
<div class="well bs-component"> <div class="well bs-component">
<form class="form-horizontal"> <form class="form-horizontal">
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
<div class="form-group"> <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"> <input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div> </div>
</div> </div>
<div class="form-group"> <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"> <input type="password" class="form-control" id="inputPassword" placeholder="Password">
<!-- <!--
@ -1911,7 +1911,7 @@
</div> </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="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"> <div class="checkbox">
<label> <label>
<input type="checkbox"> Checkbox <input type="checkbox"> Checkbox
@ -1923,7 +1923,7 @@
</div> </div>
</div> </div>
<div class="form-group"> <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"> <div class="togglebutton">
<label> <label>
<input type="checkbox" checked> Toggle button <input type="checkbox" checked> Toggle button
@ -1932,25 +1932,25 @@
</div> </div>
</div> </div>
<div class="form-group"> <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="text" readonly class="form-control" placeholder="Browse...">
<input type="file" id="inputFile" multiple> <input type="file" id="inputFile" multiple>
</div> </div>
</div> </div>
<div class="form-group"> <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> <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> <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> </div>
<div class="form-group"> <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"> <div class="radio radio-primary">
<label> <label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked=""> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
@ -1966,9 +1966,9 @@
</div> </div>
</div> </div>
<div class="form-group"> <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"> <select id="select111" class="form-control">
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
@ -1979,9 +1979,9 @@
</div> </div>
</div> </div>
<div class="form-group"> <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"> <select id="select222" multiple="" class="form-control">
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
@ -1992,7 +1992,7 @@
</div> </div>
</div> </div>
<div class="form-group"> <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="button" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</div> </div>
@ -2001,7 +2001,7 @@
</form> </form>
</div> </div>
</div> </div>
<div class="col-lg-4 col-lg-offset-1"> <div class="col-md-4 col-md-offset-1">
<form class="bs-component"> <form class="bs-component">
<div class="form-group label-floating"> <div class="form-group label-floating">
@ -2112,7 +2112,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<div class="page-header"> <div class="page-header">
<h1 id="nav">Navs</h1> <h1 id="nav">Navs</h1>
</div> </div>
@ -2120,7 +2120,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-md-4">
<h2 id="nav-tabs">Tabs</h2> <h2 id="nav-tabs">Tabs</h2>
<div class="bs-component"> <div class="bs-component">
@ -2155,7 +2155,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<h2 id="nav-pills">Pills</h2> <h2 id="nav-pills">Pills</h2>
<div class="bs-component"> <div class="bs-component">
@ -2199,7 +2199,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<h2 id="nav-breadcrumbs">Breadcrumbs</h2> <h2 id="nav-breadcrumbs">Breadcrumbs</h2>
<div class="bs-component"> <div class="bs-component">
@ -2224,7 +2224,7 @@
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-md-4">
<h2 id="pagination">Pagination</h2> <h2 id="pagination">Pagination</h2>
<div class="bs-component"> <div class="bs-component">
@ -2257,7 +2257,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<h2 id="pager">Pager</h2> <h2 id="pager">Pager</h2>
<div class="bs-component"> <div class="bs-component">
@ -2272,7 +2272,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
</div> </div>
</div> </div>
@ -2283,7 +2283,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<div class="page-header"> <div class="page-header">
<h1 id="indicators">Indicators</h1> <h1 id="indicators">Indicators</h1>
</div> </div>
@ -2291,7 +2291,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<h2>Alerts</h2> <h2>Alerts</h2>
<div class="bs-component"> <div class="bs-component">
@ -2306,7 +2306,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="alert alert-dismissible alert-danger"> <div class="alert alert-dismissible alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
@ -2315,7 +2315,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="alert alert-dismissible alert-success"> <div class="alert alert-dismissible alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
@ -2324,7 +2324,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="alert alert-dismissible alert-info"> <div class="alert alert-dismissible alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">&times;</button>
@ -2335,7 +2335,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-md-4">
<h2>Labels</h2> <h2>Labels</h2>
<div class="bs-component" style="margin-bottom: 40px;"> <div class="bs-component" style="margin-bottom: 40px;">
@ -2347,7 +2347,7 @@
<span class="label label-info">Info</span> <span class="label label-info">Info</span>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<h2>Badges</h2> <h2>Badges</h2>
<div class="bs-component"> <div class="bs-component">
@ -2366,7 +2366,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<div class="page-header"> <div class="page-header">
<h1 id="progress">Progress bars</h1> <h1 id="progress">Progress bars</h1>
</div> </div>
@ -2445,7 +2445,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<div class="page-header"> <div class="page-header">
<h1 id="slider">Sliders <span style="font-size: 50%">(with noUiSlider)</span></h1> <h1 id="slider">Sliders <span style="font-size: 50%">(with noUiSlider)</span></h1>
</div> </div>
@ -2473,7 +2473,7 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<div class="page-header"> <div class="page-header">
<h1 id="container">Containers</h1> <h1 id="container">Containers</h1>
</div> </div>
@ -2491,12 +2491,12 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<h2>List groups</h2> <h2>List groups</h2>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="list-group"> <div class="list-group">
<div class="list-group-item"> <div class="list-group-item">
@ -2538,7 +2538,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="list-group"> <div class="list-group">
<div class="list-group-item"> <div class="list-group-item">
@ -2580,7 +2580,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="list-group"> <div class="list-group">
<div class="list-group-item"> <div class="list-group-item">
@ -2623,12 +2623,12 @@
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<h2>Panels</h2> <h2>Panels</h2>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
@ -2651,7 +2651,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="panel panel-primary"> <div class="panel panel-primary">
<div class="panel-heading"> <div class="panel-heading">
@ -2681,7 +2681,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="panel panel-danger"> <div class="panel panel-danger">
<div class="panel-heading"> <div class="panel-heading">
@ -2705,26 +2705,26 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<h2>Wells</h2> <h2>Wells</h2>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="well"> <div class="well">
Look, I'm in a well! Look, I'm in a well!
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="well well-sm"> <div class="well well-sm">
Look, I'm in a small well! Look, I'm in a small well!
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-md-4">
<div class="bs-component"> <div class="bs-component">
<div class="well well-lg"> <div class="well well-lg">
Look, I'm in a large well! Look, I'm in a large well!
@ -2739,14 +2739,14 @@
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-md-12">
<div class="page-header"> <div class="page-header">
<h1 id="dialogs">Dialogs</h1> <h1 id="dialogs">Dialogs</h1>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-md-6">
<h2>Modals</h2> <h2>Modals</h2>
<div class="bs-component"> <div class="bs-component">
@ -2769,7 +2769,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-6"> <div class="col-md-6">
<h2>Popovers</h2> <h2>Popovers</h2>
<div class="bs-component"> <div class="bs-component">
@ -2797,7 +2797,7 @@
</div> </div>
</div> </div>
<div class="row"> <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> <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 <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> <form>
<div class="form-group"> <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"> <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> <span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
</div> </div>
@ -617,7 +617,7 @@
</ul> </ul>
<form class="navbar-form navbar-left"> <form class="navbar-form navbar-left">
<div class="form-group"> <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> </div>
</form> </form>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
@ -668,7 +668,7 @@
</ul> </ul>
<form class="navbar-form navbar-left"> <form class="navbar-form navbar-left">
<div class="form-group"> <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> </div>
</form> </form>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
@ -719,7 +719,7 @@
</ul> </ul>
<form class="navbar-form navbar-left"> <form class="navbar-form navbar-left">
<div class="form-group"> <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> </div>
</form> </form>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
@ -770,7 +770,7 @@
</ul> </ul>
<form class="navbar-form navbar-left"> <form class="navbar-form navbar-left">
<div class="form-group"> <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> </div>
</form> </form>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">

216
less/_inputs.less
View File

@ -1,7 +1,7 @@
@import '_inputs-size.less'; @import '_inputs-size.less';
// must be broken out for reuse - webkit selector breaks firefox // 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 { label.control-label {
top: @label-top; top: @label-top;
left: 0; 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) { .form-group-validation-state(@name, @color) {
&.@{name} { // e.g. has-error &.@{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-font-size: ceil((@mdb-label-static-size-ratio * @placeholder-font-size));
@static-line-height: (@mdb-label-static-size-ratio * @line-height); @static-line-height: (@mdb-label-static-size-ratio * @line-height);
@ -37,39 +75,23 @@
@help-block-font-size: ceil((@mdb-help-block-size-ratio * @placeholder-font-size)); @help-block-font-size: ceil((@mdb-help-block-size-ratio * @placeholder-font-size));
@help-block-line-height: (@mdb-help-block-size-ratio * @line-height); @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 // this is outside a form-group
margin: (@label-top-margin + @static-font-size) 0 0 0; & when not (isstring(@parent)) {
.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;
});
margin-bottom: @vertical-padding; // must be specified to give help-block vertical space
} }
// upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin // this is inside a form-group, may be .form-group.form-group-sm or .form-group.form-group-lg
// must also be expressed as form-group padding & when (isstring(@parent)) {
@{parent} {
.label-size-variant(@placeholder-font-size, @vertical-padding, @line-height, @static-font-size, @static-line-height, @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; padding-bottom: @vertical-padding;
.help-block { // form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
margin-top: 0px; // allow the input margin to set-off the top of the help-block margin: (@label-top-margin + @static-font-size) 0 0 0;
font-size: @help-block-font-size;
}
// 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;
}
// 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-floating,
@ -85,24 +107,23 @@
&.label-static, &.label-static,
&.label-floating.is-focused, &.label-floating.is-focused,
&.label-floating:not(.is-empty) { &.label-floating:not(.is-empty) {
.label-position(@label-top, @static-font-size, @static-line-height); .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 // #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-floating input.form-control:-webkit-autofill ~ label.control-label {
.label-position(@label-top, @static-font-size, @static-line-height); .label-static(@label-top, @static-font-size, @static-line-height);
}
}
} }
} }
.form-group {
//border: solid 1px red;
position: relative;
// ----- // -----
// Inputs // Inputs
// //
// Reference http://www.google.com/design/spec/components/text-fields.html // Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.form-control { .form-control,
.form-group .form-control {
border: 0; border: 0;
background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color); 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-size: 0 2px, 100% 1px;
@ -138,7 +159,47 @@
} }
} }
&.is-focused .form-control { // -----
// 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 {
position: relative;
// -----
// 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;
transition: 0.3s ease all;
}
}
// hide label-placeholders when the field is not empty
&.label-placeholder:not(.is-empty){
label.control-label{
display: none;
}
}
// 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; outline: none;
background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color); background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
background-size: 100% 2px, 100% 1px; background-size: 100% 2px, 100% 1px;
@ -150,66 +211,20 @@
} }
} }
// ----- //.variations(~".is-focused label.control-label", color, @brand-primary); // focused label color variations
// Labels label,
// label.control-label {
// Reference http://www.google.com/design/spec/components/text-fields.html color: @brand-primary;
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section }
&.label-static,
&.label-placeholder, //.variations(~".is-focused.label-placeholder label.control-label", color, @mdb-input-placeholder-color); // default label color variations
&.label-floating { &.label-placeholder {
label.control-label {
position: absolute;
pointer-events: none;
transition: 0.3s ease all;
}
}
// generic labels and control labels
label, label,
label.control-label { label.control-label {
// same label properties as form-group placeholder
color: @mdb-input-placeholder-color; 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{
display: none;
} }
} }
.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-block {
position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
display: none;
}
&.is-focused {
.help-block { .help-block {
display: 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 { select.form-control {
border: 0; border: 0;
@ -271,7 +299,7 @@ select.form-control {
// ---------------- // ----------------
// input group/addon related styles // input group/addon related styles
// default margin // default margin - no form-group required
.input-group-button-variation(@mdb-input-padding-base-vertical); .input-group-button-variation(@mdb-input-padding-base-vertical);
.form-group { .form-group {