mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-11-04 09:57:36 +03:00
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.
This commit is contained in:
Kevin Ross
parent
ade1673c62
commit
a74bdccf2b
|
|
@ -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,6 +293,7 @@
|
|||
|
||||
<div class="bs-component">
|
||||
<div class="navbar navbar-default">
|
||||
<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>
|
||||
|
|
@ -318,7 +321,9 @@
|
|||
</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>
|
||||
|
|
@ -337,9 +342,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bs-component">
|
||||
<div class="navbar navbar-warning">
|
||||
<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>
|
||||
|
|
@ -367,7 +374,9 @@
|
|||
</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>
|
||||
|
|
@ -385,10 +394,12 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
|
||||
<div class="bs-component">
|
||||
<div class="navbar navbar-inverse">
|
||||
<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>
|
||||
|
|
@ -416,7 +427,9 @@
|
|||
</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>
|
||||
|
|
@ -434,6 +447,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
|
||||
</div>
|
||||
|
|
@ -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">×</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">×</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">×</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">×</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,6 +2376,7 @@
|
|||
<h1 id="slider">Sliders <span style="font-size: 50%">(with noUiSlider)</span></h1>
|
||||
</div>
|
||||
<div class="bs-component">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="slider shor"></div>
|
||||
<div class="slider shor slider-success"></div>
|
||||
|
|
@ -2373,6 +2388,7 @@
|
|||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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
215
dist/css/material-fullpalette.css
vendored
|
|
@ -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
2
dist/css/material-fullpalette.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css
vendored
2
dist/css/material-fullpalette.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css.map
vendored
2
dist/css/material-fullpalette.min.css.map
vendored
File diff suppressed because one or more lines are too long
215
dist/css/material.css
vendored
215
dist/css/material.css
vendored
|
|
@ -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
2
dist/css/material.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css.map
vendored
2
dist/css/material.min.css.map
vendored
File diff suppressed because one or more lines are too long
94
index.html
94
index.html
|
|
@ -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">×</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">×</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
213
less/_inputs-size.less
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user