mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-23 01:57:06 +03:00
Solves #734 Generic label styles need to be applied outside of .form-group
This commit is contained in:
Kevin Ross
parent
d27ca1bc41
commit
2de3250390
|
|
@ -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">×</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">×</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">×</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
12
index.html
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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,39 +75,23 @@
|
|||
@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
|
||||
// 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);
|
||||
|
||||
// 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;
|
||||
|
||||
.help-block {
|
||||
margin-top: 0px; // allow the input margin to set-off the top of the help-block
|
||||
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;
|
||||
}
|
||||
// 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;
|
||||
|
||||
// larger labels as placeholders
|
||||
&.label-floating,
|
||||
|
|
@ -85,24 +107,23 @@
|
|||
&.label-static,
|
||||
&.label-floating.is-focused,
|
||||
&.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
|
||||
&.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
|
||||
//
|
||||
// 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-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;
|
||||
|
|
@ -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;
|
||||
background-image: linear-gradient(@brand-primary, @brand-primary), linear-gradient(@mdb-input-underline-color, @mdb-input-underline-color);
|
||||
background-size: 100% 2px, 100% 1px;
|
||||
|
|
@ -150,66 +211,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
// -----
|
||||
// Labels
|
||||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// generic labels and control labels
|
||||
//.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 {
|
||||
// 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{
|
||||
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 {
|
||||
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user