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

introduced a new range of @md-input-* variables to get the sizing to the material spec without altering the font-size-base (which would affect absolutely everything). Still some work to be done to differentiate the different densities properly.

Browse Source
This commit is contained in:
Kevin Ross 2015-11-09 13:32:46 -06:00
parent f5f7aea9dd
commit a482c287dc
13 changed files with 889 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

310
bootstrap-elements.html
View File

@ -3,8 +3,10 @@
<!-- MEMO: update me with `git checkout gh-pages && git merge master && git push origin gh-pages` -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Material</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/roboto.min.css" rel="stylesheet">
<link href="dist/css/material-fullpalette.min.css" rel="stylesheet">
<link href="dist/css/ripples.min.css" rel="stylesheet">
@ -246,12 +248,12 @@
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="col-sm-6">
<h1>Material Design</h1>
<p class="lead">Based on Google Material design</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="col-sm-6">
<div class="well infobox">
<p><em>Material Design for Bootstrap</em> is a theme for Bootstrap 3 which lets you use the new
<a href="http://www.google.com/design/spec/material-design/">Google Material Design</a> in your favorite front-end framework.
@ -291,147 +293,159 @@
<div class="bs-component">
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Active</a></li>
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:void(0)">Separated link</a></li>
<li><a href="javascript:void(0)">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Active</a></li>
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:void(0)">Separated link</a></li>
<li><a href="javascript:void(0)">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="bs-component">
<div class="navbar navbar-warning">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-warning-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Active</a></li>
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:void(0)">Separated link</a></li>
<li><a href="javascript:void(0)">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-warning-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Active</a></li>
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:void(0)">Separated link</a></li>
<li><a href="javascript:void(0)">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div><!-- /example -->
<div class="bs-component">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Active</a></li>
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:void(0)">Separated link</a></li>
<li><a href="javascript:void(0)">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)">Brand</a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Active</a></li>
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdown header</li>
<li><a href="javascript:void(0)">Separated link</a></li>
<li><a href="javascript:void(0)">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control col-lg-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:void(0)">Link</a></li>
<li class="dropdown">
<a href="bootstrap-elements.html" data-target="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li><a href="javascript:void(0)">Something else here</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div><!-- /example -->
@ -1948,7 +1962,7 @@
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<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>
</div>
</div>
@ -2207,7 +2221,7 @@
<h2>Alerts</h2>
<div class="bs-component">
<div class="alert alert-dismissable alert-warning">
<div class="alert alert-dismissible alert-warning">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h4>Warning!</h4>
@ -2220,7 +2234,7 @@
<div class="row">
<div class="col-lg-4">
<div class="bs-component">
<div class="alert alert-dismissable alert-danger">
<div class="alert alert-dismissible alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong>
<a href="javascript:void(0)" class="alert-link">Change a few things up</a> and try submitting again.
@ -2229,7 +2243,7 @@
</div>
<div class="col-lg-4">
<div class="bs-component">
<div class="alert alert-dismissable alert-success">
<div class="alert alert-dismissible alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Well done!</strong> You successfully read
<a href="javascript:void(0)" class="alert-link">this important alert message</a>.
@ -2238,7 +2252,7 @@
</div>
<div class="col-lg-4">
<div class="bs-component">
<div class="alert alert-dismissable alert-info">
<div class="alert alert-dismissible alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This
<a href="javascript:void(0)" class="alert-link">alert needs your attention</a>, but it's not super important.
@ -2362,15 +2376,17 @@
<h1 id="slider">Sliders <span style="font-size: 50%">(with noUiSlider)</span></h1>
</div>
<div class="bs-component">
<div class="col-sm-6">
<div class="slider shor"></div>
<div class="slider shor slider-success"></div>
<div class="slider shor slider-material-pink"></div>
</div>
<div class="col-sm-6" style="height: 150px">
<div class="slider svert"></div>
<div class="slider svert slider-success"></div>
<div class="slider svert slider-material-pink"></div>
<div class="row">
<div class="col-sm-6">
<div class="slider shor"></div>
<div class="slider shor slider-success"></div>
<div class="slider shor slider-material-pink"></div>
</div>
<div class="col-sm-6" style="height: 150px">
<div class="slider svert"></div>
<div class="slider svert slider-success"></div>
<div class="slider svert slider-material-pink"></div>
</div>
</div>
</div>
<p>Read more about <a href="http://refreshless.com/nouislider/">noUiSlider here</a>.</p>
@ -2739,7 +2755,7 @@
<br>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
(function () {

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

@ -20563,24 +20563,177 @@ body .jumbotron-material-blue-grey-A700,
opacity: 0;
}
}
legend {
margin-bottom: 22px;
font-size: 24px;
}
output {
padding-top: 5px;
font-size: 16px;
line-height: 1.42857143;
}
.form-control {
height: 32px;
padding: 4px 0px;
font-size: 16px;
line-height: 1.42857143;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
line-height: 32px;
}
input[type="date"].input-sm,
input[type="time"].input-sm,
input[type="datetime-local"].input-sm,
input[type="month"].input-sm,
.input-group-sm input[type="date"],
.input-group-sm input[type="time"],
.input-group-sm input[type="datetime-local"],
.input-group-sm input[type="month"] {
line-height: 22px;
}
input[type="date"].input-lg,
input[type="time"].input-lg,
input[type="datetime-local"].input-lg,
input[type="month"].input-lg,
.input-group-lg input[type="date"],
.input-group-lg input[type="time"],
.input-group-lg input[type="datetime-local"],
.input-group-lg input[type="month"] {
line-height: 42px;
}
}
.radio label,
.checkbox label {
min-height: 22px;
}
.form-control-static {
padding-top: 5px;
padding-bottom: 5px;
min-height: 38px;
}
.input-sm {
height: 22px;
padding: 2px 0px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 22px;
line-height: 22px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
}
.form-group-sm .form-control {
height: 22px;
padding: 2px 0px;
font-size: 11px;
line-height: 1.5;
}
.form-group-sm select.form-control {
height: 22px;
line-height: 22px;
}
.form-group-sm textarea.form-control,
.form-group-sm select[multiple].form-control {
height: auto;
}
.form-group-sm .form-control-static {
height: 22px;
min-height: 33px;
padding: 3px 0px;
font-size: 11px;
line-height: 1.5;
}
.input-lg {
height: 42px;
padding: 8px 0px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
select.input-lg {
height: 42px;
line-height: 42px;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
}
.form-group-lg .form-control {
height: 42px;
padding: 8px 0px;
font-size: 18px;
line-height: 1.3333333;
}
.form-group-lg select.form-control {
height: 42px;
line-height: 42px;
}
.form-group-lg textarea.form-control,
.form-group-lg select[multiple].form-control {
height: auto;
}
.form-group-lg .form-control-static {
height: 42px;
min-height: 40px;
padding: 9px 0px;
font-size: 18px;
line-height: 1.3333333;
}
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 5px;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 27px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
padding-top: 5px;
}
}
@media (min-width: 768px) {
.form-horizontal .form-group-lg .control-label {
padding-top: 11.6666664px;
font-size: 18px;
}
}
@media (min-width: 768px) {
.form-horizontal .form-group-sm .control-label {
padding-top: 3px;
font-size: 11px;
}
}
.form-control {
border: 0;
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
}
.form-control::-webkit-input-placeholder {
color: #bdbdbd;
font-size: 16px;
}
.form-control::-moz-placeholder {
color: #bdbdbd;
font-size: 16px;
}
.form-control:-ms-input-placeholder {
color: #bdbdbd;
font-size: 16px;
}
fieldset[disabled] .form-control:textarea,
.form-control:textarea {
@ -20592,7 +20745,6 @@ fieldset[disabled] .form-control:focus,
.form-control:focus,
fieldset[disabled] .form-control.focus,
.form-control.focus {
padding: 0;
float: none;
border: 0;
box-shadow: none;
@ -20610,7 +20762,6 @@ fieldset[disabled] .form-control.focus:disabled,
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
.form-control:focus,
@ -20631,10 +20782,9 @@ fieldset[disabled] .form-control {
.form-group {
position: relative;
}
.form-group label {
font-size: 9.8px;
.form-group label.control-label {
font-size: 12px;
font-weight: normal;
padding-left: 0px;
}
.form-group .hint {
position: absolute;
@ -20646,7 +20796,7 @@ fieldset[disabled] .form-control {
}
.form-group label.control-label,
.form-group-default label.control-label {
color: rgba(0, 0, 0, 0.84);
color: #bdbdbd;
}
.form-group-black label.control-label {
color: #000000;
@ -22463,16 +22613,10 @@ fieldset[disabled] .form-control {
color: #03a9f4;
}
.form-group.form-group-sm label {
font-size: 8.4px;
}
.form-group.form-group-sm .form-control {
padding-left: 0px;
font-size: 8.25px;
}
.form-group.form-group-lg label {
font-size: 12.6px;
}
.form-group.form-group-lg .form-control {
padding-left: 0px;
font-size: 13.5px;
}
.form-group textarea {
resize: none;
@ -23369,39 +23513,42 @@ fieldset[disabled] .form-control {
.form-group-material-blue-grey-A700 .form-control:focus {
background-image: linear-gradient(#455a64, #455a64), linear-gradient(#d2d2d2, #d2d2d2);
}
label.floating-label {
font-size: 14px;
label.control-label.floating-label {
font-size: 16px;
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
transition: 0.3s ease all;
}
.form-control:focus ~ label.floating-label,
.form-control:not(.empty) ~ label.floating-label {
top: -9.8px;
font-size: 9.8px;
}
.form-control.input-sm ~ label.floating-label {
.form-group.focus label.control-label.floating-label label.control-label {
font-size: 12px;
}
.form-control:focus ~ label.control-label.floating-label,
.form-control:not(.empty) ~ label.control-label.floating-label {
top: -12px;
font-size: 12px;
}
.form-control.input-sm ~ label.control-label.floating-label {
font-size: 11px;
top: 7px;
}
.form-control.input-sm:focus ~ label.floating-label,
.form-control.input-sm:not(.empty) ~ label.floating-label {
top: -8.4px;
font-size: 8.4px;
.form-control.input-sm:focus ~ label.control-label.floating-label,
.form-control.input-sm:not(.empty) ~ label.control-label.floating-label {
top: -8.25px;
font-size: 8.25px;
}
.form-control.input-lg ~ label.floating-label {
.form-control.input-lg ~ label.control-label.floating-label {
font-size: 18px;
top: 7px;
}
.form-control.input-lg:focus ~ label.floating-label,
.form-control.input-lg:not(.empty) ~ label.floating-label {
top: -12.6px;
font-size: 12.6px;
.form-control.input-lg:focus ~ label.control-label.floating-label,
.form-control.input-lg:not(.empty) ~ label.control-label.floating-label {
top: -13.5px;
font-size: 13.5px;
}
.form-control:not(.empty):invalid ~ label.floating-label,
.form-control.focus:invalid ~ label.floating-label {
.form-control:not(.empty):invalid ~ label.control-label.floating-label,
.form-control.focus:invalid ~ label.control-label.floating-label {
color: #f44336;
}
.input-group .form-group {

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

215
dist/css/material.css vendored
View File

@ -4869,24 +4869,177 @@ body .jumbotron-material-blue-grey,
opacity: 0;
}
}
legend {
margin-bottom: 22px;
font-size: 24px;
}
output {
padding-top: 5px;
font-size: 16px;
line-height: 1.42857143;
}
.form-control {
height: 32px;
padding: 4px 0px;
font-size: 16px;
line-height: 1.42857143;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
line-height: 32px;
}
input[type="date"].input-sm,
input[type="time"].input-sm,
input[type="datetime-local"].input-sm,
input[type="month"].input-sm,
.input-group-sm input[type="date"],
.input-group-sm input[type="time"],
.input-group-sm input[type="datetime-local"],
.input-group-sm input[type="month"] {
line-height: 22px;
}
input[type="date"].input-lg,
input[type="time"].input-lg,
input[type="datetime-local"].input-lg,
input[type="month"].input-lg,
.input-group-lg input[type="date"],
.input-group-lg input[type="time"],
.input-group-lg input[type="datetime-local"],
.input-group-lg input[type="month"] {
line-height: 42px;
}
}
.radio label,
.checkbox label {
min-height: 22px;
}
.form-control-static {
padding-top: 5px;
padding-bottom: 5px;
min-height: 38px;
}
.input-sm {
height: 22px;
padding: 2px 0px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 22px;
line-height: 22px;
}
textarea.input-sm,
select[multiple].input-sm {
height: auto;
}
.form-group-sm .form-control {
height: 22px;
padding: 2px 0px;
font-size: 11px;
line-height: 1.5;
}
.form-group-sm select.form-control {
height: 22px;
line-height: 22px;
}
.form-group-sm textarea.form-control,
.form-group-sm select[multiple].form-control {
height: auto;
}
.form-group-sm .form-control-static {
height: 22px;
min-height: 33px;
padding: 3px 0px;
font-size: 11px;
line-height: 1.5;
}
.input-lg {
height: 42px;
padding: 8px 0px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
select.input-lg {
height: 42px;
line-height: 42px;
}
textarea.input-lg,
select[multiple].input-lg {
height: auto;
}
.form-group-lg .form-control {
height: 42px;
padding: 8px 0px;
font-size: 18px;
line-height: 1.3333333;
}
.form-group-lg select.form-control {
height: 42px;
line-height: 42px;
}
.form-group-lg textarea.form-control,
.form-group-lg select[multiple].form-control {
height: auto;
}
.form-group-lg .form-control-static {
height: 42px;
min-height: 40px;
padding: 9px 0px;
font-size: 18px;
line-height: 1.3333333;
}
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: 5px;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
min-height: 27px;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
padding-top: 5px;
}
}
@media (min-width: 768px) {
.form-horizontal .form-group-lg .control-label {
padding-top: 11.6666664px;
font-size: 18px;
}
}
@media (min-width: 768px) {
.form-horizontal .form-group-sm .control-label {
padding-top: 3px;
font-size: 11px;
}
}
.form-control {
border: 0;
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
}
.form-control::-webkit-input-placeholder {
color: #bdbdbd;
font-size: 16px;
}
.form-control::-moz-placeholder {
color: #bdbdbd;
font-size: 16px;
}
.form-control:-ms-input-placeholder {
color: #bdbdbd;
font-size: 16px;
}
fieldset[disabled] .form-control:textarea,
.form-control:textarea {
@ -4898,7 +5051,6 @@ fieldset[disabled] .form-control:focus,
.form-control:focus,
fieldset[disabled] .form-control.focus,
.form-control.focus {
padding: 0;
float: none;
border: 0;
box-shadow: none;
@ -4916,7 +5068,6 @@ fieldset[disabled] .form-control.focus:disabled,
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
.form-control:focus,
@ -4937,10 +5088,9 @@ fieldset[disabled] .form-control {
.form-group {
position: relative;
}
.form-group label {
font-size: 9.8px;
.form-group label.control-label {
font-size: 12px;
font-weight: normal;
padding-left: 0px;
}
.form-group .hint {
position: absolute;
@ -4952,7 +5102,7 @@ fieldset[disabled] .form-control {
}
.form-group label.control-label,
.form-group-default label.control-label {
color: rgba(0, 0, 0, 0.84);
color: #bdbdbd;
}
.form-group-black label.control-label {
color: #000000;
@ -5173,16 +5323,10 @@ fieldset[disabled] .form-control {
color: #03a9f4;
}
.form-group.form-group-sm label {
font-size: 8.4px;
}
.form-group.form-group-sm .form-control {
padding-left: 0px;
font-size: 8.25px;
}
.form-group.form-group-lg label {
font-size: 12.6px;
}
.form-group.form-group-lg .form-control {
padding-left: 0px;
font-size: 13.5px;
}
.form-group textarea {
resize: none;
@ -5281,39 +5425,42 @@ fieldset[disabled] .form-control {
.form-group-material-blue-grey .form-control:focus {
background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#d2d2d2, #d2d2d2);
}
label.floating-label {
font-size: 14px;
label.control-label.floating-label {
font-size: 16px;
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
transition: 0.3s ease all;
}
.form-control:focus ~ label.floating-label,
.form-control:not(.empty) ~ label.floating-label {
top: -9.8px;
font-size: 9.8px;
}
.form-control.input-sm ~ label.floating-label {
.form-group.focus label.control-label.floating-label label.control-label {
font-size: 12px;
}
.form-control:focus ~ label.control-label.floating-label,
.form-control:not(.empty) ~ label.control-label.floating-label {
top: -12px;
font-size: 12px;
}
.form-control.input-sm ~ label.control-label.floating-label {
font-size: 11px;
top: 7px;
}
.form-control.input-sm:focus ~ label.floating-label,
.form-control.input-sm:not(.empty) ~ label.floating-label {
top: -8.4px;
font-size: 8.4px;
.form-control.input-sm:focus ~ label.control-label.floating-label,
.form-control.input-sm:not(.empty) ~ label.control-label.floating-label {
top: -8.25px;
font-size: 8.25px;
}
.form-control.input-lg ~ label.floating-label {
.form-control.input-lg ~ label.control-label.floating-label {
font-size: 18px;
top: 7px;
}
.form-control.input-lg:focus ~ label.floating-label,
.form-control.input-lg:not(.empty) ~ label.floating-label {
top: -12.6px;
font-size: 12.6px;
.form-control.input-lg:focus ~ label.control-label.floating-label,
.form-control.input-lg:not(.empty) ~ label.control-label.floating-label {
top: -13.5px;
font-size: 13.5px;
}
.form-control:not(.empty):invalid ~ label.floating-label,
.form-control.focus:invalid ~ label.floating-label {
.form-control:not(.empty):invalid ~ label.control-label.floating-label,
.form-control.focus:invalid ~ label.control-label.floating-label {
color: #f44336;
}
.input-group .form-group {

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

94
index.html
View File

@ -386,13 +386,13 @@
<div class="form-group form-group-sm has-error">
<label for="i4" class="control-label floating-label">Floating label form-group-sm has-error</label>
<input type="email" class="form-control input-sm" id="i4">
<span class="help-block hint">This is a hint</span>
<span class="help-block hint">Please enter a valid email address <code>span.help-block.hint</code></span>
</div>
<div class="form-group form-group-lg">
<label for="i6" class="control-label floating-label">Floating label input-lg</label>
<label for="i6" class="control-label floating-label">Floating label form-group-lg</label>
<input type="email" class="form-control" id="i6">
<span class="help-block hint">This is a hint</span>
<span class="help-block hint">Please enter a valid email address <code>span.help-block.hint</code></span>
</div>
<h2>Input - static labels
@ -1240,47 +1240,7 @@
<h2>Dialog with header and footer</h2>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#complete-dialog">Open dialog</button>
<div id="simple-dialog" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>E dolore commodo, id anim aute sint cupidatat eu est anim tamen ad possumus,
legam officia firmissimum. Eram deserunt domesticarum, iis ita praetermissum,
nam aliquip quo probant, incididunt et occaecat an nam enim exquisitaque a
nescius velit admodum, non ad cohaerescant, probant o nulla tempor. Aute aut te
quis arbitror ubi ne aliqua consequat aliquip. Ad sunt laborum senserit, de do
quem possumus. Sint tractavissent cupidatat aute possumus ita elit ad cupidatat.
Arbitror ab fabulas o eu e veniam pariatur. Non voluptate comprehenderit ad nisi
id voluptate. Quis distinguantur quibusdam quae mentitum o si minim illum nisi
mandaremus.</p>
</div>
</div>
</div>
</div>
<div id="complete-dialog" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Dialog</h4>
</div>
<div class="modal-body">
<p>Fore aut non quem incididunt, varias reprehenderit deserunt quem offendit,
cillum proident ne reprehenderit, quem ad laborum, quo possumus praetermissum,
si ne illustriora, hic appellat coniunctione, do labore aliqua quo probant. In
probant voluptatibus quo mentitum est laboris. Quorum mandaremus graviterque.
Mentitum id velit, dolor aut litteris, ea varias illustriora, ita commodo ita
ingeniis, iis nulla appellat incurreret, aut irure amet summis pariatur ita ubi
quis dolore veniam proident, consequat sed ingeniis.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
<!-- dialog samples are at the end of the body to avoid z-index conflicts -->
</div>
<div class="well page" id="shadow">
<h1 class="header">Shadow</h1>
@ -1319,14 +1279,50 @@
</div>
</div>
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-fab btn-material-grey-200 opensource"><i class="mdi-action-open-in-new"></i>
</button>
</div>
</div>
<!--Modals-->
<div id="simple-dialog" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>E dolore commodo, id anim aute sint cupidatat eu est anim tamen ad possumus,
legam officia firmissimum. Eram deserunt domesticarum, iis ita praetermissum,
nam aliquip quo probant, incididunt et occaecat an nam enim exquisitaque a
nescius velit admodum, non ad cohaerescant, probant o nulla tempor. Aute aut te
quis arbitror ubi ne aliqua consequat aliquip. Ad sunt laborum senserit, de do
quem possumus. Sint tractavissent cupidatat aute possumus ita elit ad cupidatat.
Arbitror ab fabulas o eu e veniam pariatur. Non voluptate comprehenderit ad nisi
id voluptate. Quis distinguantur quibusdam quae mentitum o si minim illum nisi
mandaremus.</p>
</div>
</div>
</div>
</div>
<div id="complete-dialog" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Dialog</h4>
</div>
<div class="modal-body">
<p>Fore aut non quem incididunt, varias reprehenderit deserunt quem offendit,
cillum proident ne reprehenderit, quem ad laborum, quo possumus praetermissum,
si ne illustriora, hic appellat coniunctione, do labore aliqua quo probant. In
probant voluptatibus quo mentitum est laboris. Quorum mandaremus graviterque.
Mentitum id velit, dolor aut litteris, ea varias illustriora, ita commodo ita
ingeniis, iis nulla appellat incurreret, aut irure amet summis pariatur ita ubi
quis dolore veniam proident, consequat sed ingeniis.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
<!--</div>-->
<!--</div>-->
<div id="source-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">

213
less/_inputs-size.less Normal file
View File

@ -0,0 +1,213 @@
//
// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
//
// NOTE: this is intentionally kept structurally _identical_ to the bootstrap file to make it easier
// to identify differences in sizing approaches to form inputs.
// --------------------------------------------------
legend {
margin-bottom: @md-input-line-height-computed;
font-size: (@md-input-font-size-base * 1.5);
}
// Adjust output element
output {
padding-top: (@md-input-padding-base-vertical + 1);
font-size: @md-input-font-size-base;
line-height: @md-input-line-height-base;
}
.form-control {
height: @md-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @md-input-padding-base-vertical @md-input-padding-base-horizontal;
font-size: @md-input-font-size-base;
line-height: @md-input-line-height-base;
}
// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
&.form-control {
line-height: @md-input-height-base;
}
&.input-sm,
.input-group-sm & {
line-height: @md-input-height-small;
}
&.input-lg,
.input-group-lg & {
line-height: @md-input-height-large;
}
}
}
.radio,
.checkbox {
label {
min-height: @md-input-line-height-computed; // Ensure the input doesn't jump when there is no text
}
}
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
.form-control-static {
// Size it appropriately next to real form controls
padding-top: (@md-input-padding-base-vertical + 1);
padding-bottom: (@md-input-padding-base-vertical + 1);
min-height: (@md-input-line-height-computed + @md-input-font-size-base);
}
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
height: @input-height;
padding: @padding-vertical @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
border-radius: @border-radius;
select& {
height: @input-height;
line-height: @input-height;
}
textarea&,
select[multiple]& {
height: auto;
}
}
// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.input-sm {
.input-size(@md-input-height-small; @md-input-padding-small-vertical; @md-input-padding-small-horizontal; @md-input-font-size-small; @md-input-line-height-small; @md-input-border-radius-small);
}
.form-group-sm {
.form-control {
height: @md-input-height-small;
padding: @md-input-padding-small-vertical @md-input-padding-small-horizontal;
font-size: @md-input-font-size-small;
line-height: @md-input-line-height-small;
}
select.form-control {
height: @md-input-height-small;
line-height: @md-input-height-small;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: @md-input-height-small;
min-height: (@md-input-line-height-computed + @md-input-font-size-small);
padding: (@md-input-padding-small-vertical + 1) @md-input-padding-small-horizontal;
font-size: @md-input-font-size-small;
line-height: @md-input-line-height-small;
}
}
.input-lg {
.input-size(@md-input-height-large; @md-input-padding-large-vertical; @md-input-padding-large-horizontal; @md-input-font-size-large; @md-input-line-height-large; @md-input-border-radius-large);
}
.form-group-lg {
.form-control {
height: @md-input-height-large;
padding: @md-input-padding-large-vertical @md-input-padding-large-horizontal;
font-size: @md-input-font-size-large;
line-height: @md-input-line-height-large;
}
select.form-control {
height: @md-input-height-large;
line-height: @md-input-height-large;
}
textarea.form-control,
select[multiple].form-control {
height: auto;
}
.form-control-static {
height: @md-input-height-large;
min-height: (@md-input-line-height-computed + @md-input-font-size-large);
padding: (@md-input-padding-large-vertical + 1) @md-input-padding-large-horizontal;
font-size: @md-input-font-size-large;
line-height: @md-input-line-height-large;
}
}
.form-horizontal {
// Consistent vertical alignment of radios and checkboxes
//
// Labels also get some reset styles, but that is scoped to a media query below.
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border
}
// Account for padding we're adding to ensure the alignment and of help text
// and other content below items
.radio,
.checkbox {
min-height: (@md-input-line-height-computed + (@md-input-padding-base-vertical + 1));
}
// Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example.
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border
}
}
// Form group sizes
//
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`.
.form-group-lg {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: ((@md-input-padding-large-vertical * @md-input-line-height-large) + 1);
font-size: @md-input-font-size-large;
}
}
}
.form-group-sm {
@media (min-width: @screen-sm-min) {
.control-label {
padding-top: (@md-input-padding-small-vertical + 1);
font-size: @md-input-font-size-small;
}
}
}
}

67
less/_inputs.less
View File

@ -1,3 +1,5 @@
@import '_inputs-size.less';
// usage: .form-group-validation-state(@input-danger);
.form-group-validation-state(@name, @color) {
@ -24,26 +26,31 @@
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(~"100% - 1px");
background-color: transparent;
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
&::-webkit-input-placeholder {
color: @input-placeholder-color;
font-size: @md-input-font-size-base;
}
&::-moz-placeholder {
color: @input-placeholder-color;
font-size: @md-input-font-size-base;
}
&:-ms-input-placeholder {
color: @input-placeholder-color;
font-size: @md-input-font-size-base;
}
fieldset[disabled] &, & {
fieldset[disabled] &,
& {
&:textarea {
height: 40px;
}
&, &:focus, &.focus {
padding: 0;
&,
&:focus,
&.focus {
//padding: 0;
float: none;
border: 0;
box-shadow: none;
@ -58,7 +65,7 @@
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: transparent;
//background-color: transparent;
background-color: rgba(0, 0, 0, 0);
}
@ -84,11 +91,11 @@
.form-group {
position: relative;
label {
label.control-label {
//color: @input-placeholder-color;
font-size: @floating-label-size-ratio * @font-size-base; // same as focused size of floating
font-size: @md-input-label-font-size-base; // 12px same as focused size of floating
font-weight: normal;
padding-left: 0px;
//padding-left: 0px;
}
// Hints
@ -104,7 +111,8 @@
}
}
.variations(~" label.control-label", color, @lightbg-text);
//.variations(~" label.control-label", color, @lightbg-text);
.variations(~" label.control-label", color, @input-placeholder-color);
.variations(~".focus label.control-label", color, @input-default);
.form-group-validation-state(has-warning, @input-warning);
@ -115,21 +123,21 @@
// sm
&.form-group-sm {
label {
font-size: @floating-label-size-ratio * @font-size-small; // same as focused size of floating
}
.form-control {
padding-left: 0px;
font-size: @floating-label-size-ratio * @md-input-font-size-small; // same as focused size of floating
}
//.form-control {
// padding-left: 0px;
//}
}
// lg
&.form-group-lg {
label {
font-size: @floating-label-size-ratio * @font-size-large; // same as focused size of floating
}
.form-control {
padding-left: 0px;
font-size: @floating-label-size-ratio * @md-input-font-size-large; // same as focused size of floating
}
//.form-control {
// padding-left: 0px;
//}
}
textarea {
@ -154,6 +162,9 @@
});
}
// Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
.input-floating-label-size(@name, @size) {
.form-control.@{name} ~ & {
font-size: @size;
@ -167,27 +178,33 @@
}
}
// Do not nest .floating-label inside .form-group - it messes with ~
label.floating-label {
font-size: @font-size-base; // Input sizes
// Do not nest label.floating-label inside .form-group - it messes with ~ selector
label.control-label.floating-label {
font-size: @md-input-font-size-base; // Input sizes
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
transition: 0.3s ease all;
.form-group.focus & {
label.control-label {
font-size: @md-input-label-font-size-base; // 12px
}
}
// sizing
.form-control:focus ~ &,
.form-control:not(.empty) ~ & {
top: @floating-label-size-ratio * -@font-size-base;
font-size: @floating-label-size-ratio * @font-size-base;
top: -1 * @md-input-label-font-size-base;
font-size: @md-input-label-font-size-base;
}
.input-floating-label-size(input-sm, @font-size-small);
.input-floating-label-size(input-lg, @font-size-large);
.input-floating-label-size(input-sm, @md-input-font-size-small);
.input-floating-label-size(input-lg, @md-input-font-size-large);
.form-control:not(.empty):invalid ~ &, // FIXME: where does the invalid class come from? it isnt' bs3.
.form-control:not(.empty):invalid ~ &,
.form-control.focus:invalid ~ & {
color: @input-danger;
}

62
less/_variables.less
View File

@ -74,10 +74,68 @@
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
// Global Material variables
@material-border-radius: 2px;
// --------------------
// inputs
@input-placeholder-color: #BDBDBD;
@floating-label-size-ratio: 75 / 100;
@input-underline-color: #D2D2D2;
@md-input-font-size-base: 16px;
@md-input-font-size-large: ceil((@font-size-base * 1.25)); // ~20px
@md-input-font-size-small: ceil((@font-size-base * 0.75)); // ~12px
// size when static or floating with focus i.e. 16px
@md-input-label-font-size-base: @floating-label-size-ratio * @md-input-font-size-base;
//** Unit-less `line-height` for use in components like buttons.
@md-input-line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@md-input-line-height-computed: floor((@md-input-font-size-base * @md-input-line-height-base)); // ~20px
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@md-input-padding-base-vertical: 4px; // 6
@md-input-padding-base-horizontal: 0px; // 12
@md-input-padding-large-vertical: 8px; // 10
@md-input-padding-large-horizontal: 0px; // 16
@md-input-padding-small-vertical: 2px; // 5
@md-input-padding-small-horizontal: 0px; // 10
@md-input-padding-xs-vertical: 1px; // 1
@md-input-padding-xs-horizontal: 0px; // 5
@md-input-line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@md-input-line-height-small: 1.5;
@md-input-border-radius-base: 4px;
@md-input-border-radius-large: 6px;
@md-input-border-radius-small: 3px;
//** Default `.form-control` height
@md-input-height-base: (@md-input-line-height-computed + (@md-input-padding-base-vertical * 2) + 2);
//** Large `.form-control` height
@md-input-height-large: (ceil(@md-input-font-size-large * @md-input-line-height-large) + (@md-input-padding-large-vertical * 2) + 2);
//** Small `.form-control` height
@md-input-height-small: (floor(@md-input-font-size-small * @md-input-line-height-small) + (@md-input-padding-small-vertical * 2) + 2);
// Card
@card-body-text: @lightbg-text;
@card-body-background: #fff;
@ -95,10 +153,6 @@
@popover-background: rgba(101, 101, 101, 0.9);
@popover-color: #ececec;
// Inputs
@input-placeholder-color: #BDBDBD;
@floating-label-size-ratio: 70 / 100;
// Dropdown Menu
@dropdown-radius: 2px;
@dropdown-font-size: 16px;