mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 21:14:13 +03:00
standardized checkbox sizing variants and colors to spec
This commit is contained in:
Kevin Ross
parent
aa17e23572
commit
b8e85cbbad
|
|
@ -1895,6 +1895,9 @@
|
|||
<label>
|
||||
<input type="checkbox"> Checkbox
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" disabled> Disabled Checkbox
|
||||
</label>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
|
|
|
|||
2798
dist/css/material-fullpalette.css
vendored
2798
dist/css/material-fullpalette.css
vendored
File diff suppressed because it is too large
Load Diff
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
404
dist/css/material.css
vendored
404
dist/css/material.css
vendored
|
|
@ -3874,15 +3874,28 @@ body .jumbotron-material-blue-grey,
|
|||
.form-horizontal .checkbox {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.checkbox {
|
||||
.form-group .checkbox label {
|
||||
font-size: 16px;
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
.form-group.form-group-sm .checkbox label {
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.form-group.form-group-lg .checkbox label {
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
}
|
||||
.form-group .checkbox {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.checkbox label {
|
||||
.form-group .checkbox label {
|
||||
cursor: pointer;
|
||||
padding-left: 0;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
.checkbox input[type=checkbox] {
|
||||
.form-group .checkbox input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
|
|
@ -3893,12 +3906,12 @@ body .jumbotron-material-blue-grey,
|
|||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.checkbox .checkbox-material {
|
||||
.form-group .checkbox .checkbox-material {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
.checkbox .checkbox-material:before {
|
||||
.form-group .checkbox .checkbox-material:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -3913,17 +3926,17 @@ body .jumbotron-material-blue-grey,
|
|||
-webkit-transform: scale3d(2.3, 2.3, 1);
|
||||
transform: scale3d(2.3, 2.3, 1);
|
||||
}
|
||||
.checkbox .checkbox-material .check {
|
||||
.form-group .checkbox .checkbox-material .check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid;
|
||||
border: 2px solid rgba(0, 0, 0, 0.54);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.checkbox .checkbox-material .check:before {
|
||||
.form-group .checkbox .checkbox-material .check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
-webkit-transform: rotate(45deg);
|
||||
|
|
@ -3935,304 +3948,392 @@ body .jumbotron-material-blue-grey,
|
|||
width: 0;
|
||||
height: 0;
|
||||
box-shadow: 0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
-webkit-animation: checkbox-off 0.3s forwards;
|
||||
animation: checkbox-off 0.3s forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
.form-group .checkbox input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
|
||||
-webkit-animation: checkbox-on 0.3s forwards;
|
||||
animation: checkbox-on 0.3s forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
.form-group .checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material:before {
|
||||
.form-group .checkbox input[type=checkbox]:checked + .checkbox-material:before {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
.form-group .checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
-webkit-animation: rippleOff 500ms forwards;
|
||||
animation: rippleOff 500ms forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
-webkit-animation: rippleOn 500ms forwards;
|
||||
animation: rippleOn 500ms forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
.checkbox input[type=checkbox][disabled] + .circle {
|
||||
fieldset[disabled] .form-group .checkbox,
|
||||
fieldset[disabled] .form-group .checkbox input[type=checkbox],
|
||||
.form-group .checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
.form-group .checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
|
||||
.form-group .checkbox input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
.form-group .checkbox input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after,
|
||||
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox input[type=checkbox]:checked + .checkbox-material .check:after,
|
||||
.form-group .checkbox-default input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
.checkbox-black input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-black input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #000000;
|
||||
}
|
||||
.checkbox-white input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-white input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #009688;
|
||||
}
|
||||
.checkbox-success input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-success input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
.checkbox-info input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-info input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #e91e63;
|
||||
}
|
||||
.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #9c27b0;
|
||||
}
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #673ab7;
|
||||
}
|
||||
.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #2196f3;
|
||||
}
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #00bcd4;
|
||||
}
|
||||
.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #009688;
|
||||
}
|
||||
.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #8bc34a;
|
||||
}
|
||||
.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #cddc39;
|
||||
}
|
||||
.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ffeb3b;
|
||||
}
|
||||
.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #795548;
|
||||
}
|
||||
.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
.form-group .checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
background-color: #607d8b;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
|
||||
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
|
||||
.form-group .checkbox-default input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-black input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-black input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #000000;
|
||||
}
|
||||
.checkbox-white input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-white input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ffffff;
|
||||
}
|
||||
.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-primary input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #009688;
|
||||
}
|
||||
.checkbox-success input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-success input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-info input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-info input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-warning input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-danger input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #e91e63;
|
||||
}
|
||||
.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #9c27b0;
|
||||
}
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #673ab7;
|
||||
}
|
||||
.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #2196f3;
|
||||
}
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #00bcd4;
|
||||
}
|
||||
.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #009688;
|
||||
}
|
||||
.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #8bc34a;
|
||||
}
|
||||
.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #cddc39;
|
||||
}
|
||||
.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ffeb3b;
|
||||
}
|
||||
.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ffc107;
|
||||
}
|
||||
.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ff9800;
|
||||
}
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #795548;
|
||||
}
|
||||
.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
.form-group .checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
color: #607d8b;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked + .checkbox-material .check,
|
||||
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox input[type=checkbox]:checked + .checkbox-material .check,
|
||||
.form-group .checkbox-default input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-black input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-black input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #000000;
|
||||
}
|
||||
.checkbox-white input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-white input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ffffff;
|
||||
}
|
||||
.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-primary input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #009688;
|
||||
}
|
||||
.checkbox-success input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-success input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-info input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-info input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-warning input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-danger input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #f44336;
|
||||
}
|
||||
.checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #e91e63;
|
||||
}
|
||||
.checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #9c27b0;
|
||||
}
|
||||
.checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #673ab7;
|
||||
}
|
||||
.checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #3f51b5;
|
||||
}
|
||||
.checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #2196f3;
|
||||
}
|
||||
.checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #00bcd4;
|
||||
}
|
||||
.checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #009688;
|
||||
}
|
||||
.checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #4caf50;
|
||||
}
|
||||
.checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #8bc34a;
|
||||
}
|
||||
.checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #cddc39;
|
||||
}
|
||||
.checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ffeb3b;
|
||||
}
|
||||
.checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ffc107;
|
||||
}
|
||||
.checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ff9800;
|
||||
}
|
||||
.checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #ff5722;
|
||||
}
|
||||
.checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #795548;
|
||||
}
|
||||
.checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
.checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check {
|
||||
.form-group .checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check {
|
||||
color: #607d8b;
|
||||
}
|
||||
.form-group .checkbox input[type=checkbox]:checked + .checkbox-material .check,
|
||||
.form-group .checkbox-default input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #4caf50;
|
||||
}
|
||||
.form-group .checkbox-black input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #000000;
|
||||
}
|
||||
.form-group .checkbox-white input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
.form-group .checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #3f51b5;
|
||||
}
|
||||
.form-group .checkbox-primary input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #009688;
|
||||
}
|
||||
.form-group .checkbox-success input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #4caf50;
|
||||
}
|
||||
.form-group .checkbox-info input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #03a9f4;
|
||||
}
|
||||
.form-group .checkbox-warning input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #ff5722;
|
||||
}
|
||||
.form-group .checkbox-danger input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #f44336;
|
||||
}
|
||||
.form-group .checkbox-material-red input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #f44336;
|
||||
}
|
||||
.form-group .checkbox-material-pink input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #e91e63;
|
||||
}
|
||||
.form-group .checkbox-material-purple input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #9c27b0;
|
||||
}
|
||||
.form-group .checkbox-material-deep-purple input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #673ab7;
|
||||
}
|
||||
.form-group .checkbox-material-indigo input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #3f51b5;
|
||||
}
|
||||
.form-group .checkbox-material-blue input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #2196f3;
|
||||
}
|
||||
.form-group .checkbox-material-light-blue input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #03a9f4;
|
||||
}
|
||||
.form-group .checkbox-material-cyan input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #00bcd4;
|
||||
}
|
||||
.form-group .checkbox-material-teal input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #009688;
|
||||
}
|
||||
.form-group .checkbox-material-green input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #4caf50;
|
||||
}
|
||||
.form-group .checkbox-material-light-green input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #8bc34a;
|
||||
}
|
||||
.form-group .checkbox-material-lime input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #cddc39;
|
||||
}
|
||||
.form-group .checkbox-material-yellow input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #ffeb3b;
|
||||
}
|
||||
.form-group .checkbox-material-amber input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #ffc107;
|
||||
}
|
||||
.form-group .checkbox-material-orange input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #ff9800;
|
||||
}
|
||||
.form-group .checkbox-material-deep-orange input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #ff5722;
|
||||
}
|
||||
.form-group .checkbox-material-brown input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #795548;
|
||||
}
|
||||
.form-group .checkbox-material-grey input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #9e9e9e;
|
||||
}
|
||||
.form-group .checkbox-material-blue-grey input[type=checkbox]:checked + .checkbox-material .check {
|
||||
border-color: #607d8b;
|
||||
}
|
||||
@-webkit-keyframes checkbox-on {
|
||||
0% {
|
||||
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
|
||||
|
|
@ -5121,7 +5222,12 @@ output {
|
|||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin: 28px 0 0 0;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.form-group .form-control {
|
||||
border: 0;
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
background-size: 0 2px, 100% 1px;
|
||||
|
|
@ -5129,47 +5235,10 @@ output {
|
|||
background-position: center bottom, center calc(100% - 1px);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transition: background 0s ease-out;
|
||||
}
|
||||
.form-group.is-focused .form-control {
|
||||
outline: none;
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
background-size: 100% 2px, 100% 1px;
|
||||
box-shadow: none;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.form-group.is-focused .form-control .material-input:after {
|
||||
background-color: #009688;
|
||||
}
|
||||
.form-control:textarea,
|
||||
fieldset[disabled] .form-control:textarea {
|
||||
height: 40px;
|
||||
}
|
||||
.form-control,
|
||||
fieldset[disabled] .form-control,
|
||||
.form-group.is-focused .form-control,
|
||||
.form-group.is-focused fieldset[disabled] .form-control {
|
||||
float: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.form-control:disabled,
|
||||
fieldset[disabled] .form-control:disabled,
|
||||
.form-group.is-focused .form-control:disabled,
|
||||
.form-group.is-focused fieldset[disabled] .form-control:disabled {
|
||||
border-style: dashed;
|
||||
border-bottom: 1px solid #757575;
|
||||
}
|
||||
.form-control[disabled],
|
||||
.form-control[readonly],
|
||||
fieldset[disabled] .form-control {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin: 28px 0 0 0;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
.form-group .form-control::-moz-placeholder {
|
||||
color: #BDBDBD;
|
||||
font-weight: normal;
|
||||
|
|
@ -5182,6 +5251,26 @@ fieldset[disabled] .form-control {
|
|||
color: #BDBDBD;
|
||||
font-weight: normal;
|
||||
}
|
||||
.form-group .form-control[readonly],
|
||||
.form-group .form-control[disabled],
|
||||
fieldset[disabled] .form-group .form-control {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.form-group .form-control[disabled],
|
||||
fieldset[disabled] .form-group .form-control {
|
||||
background-image: none;
|
||||
border-bottom: 1px dotted #D2D2D2;
|
||||
}
|
||||
.form-group.is-focused .form-control {
|
||||
outline: none;
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
background-size: 100% 2px, 100% 1px;
|
||||
box-shadow: none;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.form-group.is-focused .form-control .material-input:after {
|
||||
background-color: #009688;
|
||||
}
|
||||
.form-group.label-static label.control-label,
|
||||
.form-group.label-placeholder label.control-label,
|
||||
.form-group.label-floating label.control-label {
|
||||
|
|
@ -5698,12 +5787,12 @@ fieldset[disabled] .form-control {
|
|||
.form-group textarea ~ .form-control-highlight {
|
||||
margin-top: -11px;
|
||||
}
|
||||
.form-group select ~ .material-input:after {
|
||||
display: none;
|
||||
}
|
||||
.form-group select {
|
||||
appearance: none;
|
||||
}
|
||||
.form-group select ~ .material-input:after {
|
||||
display: none;
|
||||
}
|
||||
select.form-control {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
|
@ -5711,7 +5800,7 @@ select.form-control {
|
|||
}
|
||||
.form-group.is-focused select.form-control {
|
||||
box-shadow: none;
|
||||
border-color: #757575;
|
||||
border-color: #D2D2D2;
|
||||
}
|
||||
select.form-control[multiple],
|
||||
.form-group.is-focused select.form-control[multiple] {
|
||||
|
|
@ -5744,17 +5833,6 @@ select.form-control[multiple],
|
|||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
fieldset[disabled] .form-control:disabled,
|
||||
.form-group .form-control:disabled,
|
||||
.form-control:disabled,
|
||||
fieldset[disabled] .form-control:focus:disabled,
|
||||
.form-group .form-control:focus:disabled,
|
||||
.form-control:focus:disabled,
|
||||
.form-group.is-focused fieldset[disabled] .form-control:disabled,
|
||||
.form-group.is-focused .form-group .form-control:disabled,
|
||||
.form-group.is-focused .form-control:disabled {
|
||||
border: 0;
|
||||
}
|
||||
legend {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
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
41
dist/css/ripples.css
vendored
Normal file
41
dist/css/ripples.css
vendored
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
.withripple {
|
||||
position: relative;
|
||||
}
|
||||
.ripple-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ripple {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: -10px;
|
||||
margin-top: -10px;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transform-origin: 50%;
|
||||
-ms-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ripple.ripple-on {
|
||||
transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
||||
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.ripple.ripple-out {
|
||||
transition: opacity 0.1s linear 0s !important;
|
||||
opacity: 0;
|
||||
}
|
||||
/*# sourceMappingURL=ripples.css.map */
|
||||
1
dist/css/ripples.css.map
vendored
Normal file
1
dist/css/ripples.css.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["/less/ripples.less","ripples.css"],"names":[],"mappings":"AAAA;EACI,oBAAA;ECCH;ADCD;EACI,oBAAA;EACA,QAAA;EACA,SAAA;EACA,YAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;EACA,wBAAA;EACA,sBAAA;ECCH;ADCD;EACI,oBAAA;EACA,aAAA;EACA,cAAA;EACA,oBAAA;EACA,mBAAA;EACA,qBAAA;EACA,uCAAA;EACA,6BAAA;MAAA,yBAAA;UAAA,qBAAA;EACA,+BAAA;MAAA,2BAAA;UAAA,uBAAA;EACA,YAAA;EACA,sBAAA;ECCH;ADCD;EACI,gGAAA;EAAA,wFAAA;EACA,cAAA;ECCH;ADCD;EACI,+CAAA;EACA,YAAA;ECCH","file":"ripples.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n",".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0, 0, 0, 0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n/*# sourceMappingURL=ripples.css.map */"]}
|
||||
2
dist/css/ripples.min.css
vendored
Normal file
2
dist/css/ripples.min.css
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:inherit;pointer-events:none}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(.4,0,.2,1) .1s;opacity:.1}.ripple.ripple-out{transition:opacity .1s linear 0s!important;opacity:0}
|
||||
/*# sourceMappingURL=ripples.min.css.map */
|
||||
1
dist/css/ripples.min.css.map
vendored
Normal file
1
dist/css/ripples.min.css.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA,YACI,kBAAA,CAAA,eAGA,kBACA,CAAA,KACA,CAAA,MACA,CAAA,SACA,CAAA,UACA,CAAA,WACA,CAAA,eACA,CAAA,qBACA,CAAA,mBAEJ,CAAA,OACI,kBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,gBACA,CAAA,kBACA,CAAA,gCACA,CAAA,0BAAA,CACA,sBADA,CACA,kBAAA,CAAA,4BAAA,CACA,wBADA,CACA,oBAAA,CAAA,SACA,CAAA,mBAAA,CAAA,iBAGA,qFAAA,CACA,4EAAA,CAAA,UAAA,CAAA,kBAGA,2CACA,CAAA,SAAA,CAAA","file":"ripples.min.css","sourcesContent":[".withripple {\n position: relative;\n}\n.ripple-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n pointer-events: none;\n}\n.ripple {\n position: absolute;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border-radius: 100%;\n background-color: rgba(0,0,0,0.05);\n transform: scale(1);\n transform-origin: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.ripple.ripple-on {\n transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n opacity: 0.1;\n}\n.ripple.ripple-out {\n transition: opacity 0.1s linear 0s !important;\n opacity: 0;\n}\n"]}
|
||||
324
dist/js/ripples.js
vendored
Normal file
324
dist/js/ripples.js
vendored
Normal file
|
|
@ -0,0 +1,324 @@
|
|||
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
||||
/* globals jQuery, navigator */
|
||||
|
||||
(function($, window, document, undefined) {
|
||||
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Define the name of the plugin
|
||||
*/
|
||||
var ripples = "ripples";
|
||||
|
||||
|
||||
/**
|
||||
* Get an instance of the plugin
|
||||
*/
|
||||
var self = null;
|
||||
|
||||
|
||||
/**
|
||||
* Define the defaults of the plugin
|
||||
*/
|
||||
var defaults = {};
|
||||
|
||||
|
||||
/**
|
||||
* Create the main plugin function
|
||||
*/
|
||||
function Ripples(element, options) {
|
||||
self = this;
|
||||
|
||||
this.element = $(element);
|
||||
|
||||
this.options = $.extend({}, defaults, options);
|
||||
|
||||
this._defaults = defaults;
|
||||
this._name = ripples;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Initialize the plugin
|
||||
*/
|
||||
Ripples.prototype.init = function() {
|
||||
var $element = this.element;
|
||||
|
||||
$element.on("mousedown touchstart", function(event) {
|
||||
/**
|
||||
* Verify if the user is just touching on a device and return if so
|
||||
*/
|
||||
if(self.isTouch() && event.type === "mousedown") {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Verify if the current element already has a ripple wrapper element and
|
||||
* creates if it doesn't
|
||||
*/
|
||||
if(!($element.find(".ripple-wrapper").length)) {
|
||||
$element.append("<div class=\"ripple-wrapper\"></div>");
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Find the ripple wrapper
|
||||
*/
|
||||
var $wrapper = $element.children(".ripple-wrapper");
|
||||
|
||||
|
||||
/**
|
||||
* Get relY and relX positions
|
||||
*/
|
||||
var relY = self.getRelY($wrapper, event);
|
||||
var relX = self.getRelX($wrapper, event);
|
||||
|
||||
|
||||
/**
|
||||
* If relY and/or relX are false, return the event
|
||||
*/
|
||||
if(!relY && !relX) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Get the ripple color
|
||||
*/
|
||||
var rippleColor = self.getRipplesColor($element);
|
||||
|
||||
|
||||
/**
|
||||
* Create the ripple element
|
||||
*/
|
||||
var $ripple = $("<div></div>");
|
||||
|
||||
$ripple
|
||||
.addClass("ripple")
|
||||
.css({
|
||||
"left": relX,
|
||||
"top": relY,
|
||||
"background-color": rippleColor
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Append the ripple to the wrapper
|
||||
*/
|
||||
$wrapper.append($ripple);
|
||||
|
||||
|
||||
/**
|
||||
* Make sure the ripple has the styles applied (ugly hack but it works)
|
||||
*/
|
||||
(function() { return window.getComputedStyle($ripple[0]).opacity; })();
|
||||
|
||||
|
||||
/**
|
||||
* Turn on the ripple animation
|
||||
*/
|
||||
self.rippleOn($element, $ripple);
|
||||
|
||||
|
||||
/**
|
||||
* Call the rippleEnd function when the transition "on" ends
|
||||
*/
|
||||
setTimeout(function() {
|
||||
self.rippleEnd($ripple);
|
||||
}, 500);
|
||||
|
||||
|
||||
/**
|
||||
* Detect when the user leaves the element
|
||||
*/
|
||||
$element.on("mouseup mouseleave touchend", function() {
|
||||
$ripple.data("mousedown", "off");
|
||||
|
||||
if($ripple.data("animating") === "off") {
|
||||
self.rippleOut($ripple);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the new size based on the element height/width and the ripple width
|
||||
*/
|
||||
Ripples.prototype.getNewSize = function($element, $ripple) {
|
||||
|
||||
return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the relX
|
||||
*/
|
||||
Ripples.prototype.getRelX = function($wrapper, event) {
|
||||
var wrapperOffset = $wrapper.offset();
|
||||
|
||||
if(!self.isTouch()) {
|
||||
/**
|
||||
* Get the mouse position relative to the ripple wrapper
|
||||
*/
|
||||
return event.pageX - wrapperOffset.left;
|
||||
} else {
|
||||
/**
|
||||
* Make sure the user is using only one finger and then get the touch
|
||||
* position relative to the ripple wrapper
|
||||
*/
|
||||
event = event.originalEvent;
|
||||
|
||||
if(event.touches.length === 1) {
|
||||
return event.touches[0].pageX - wrapperOffset.left;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the relY
|
||||
*/
|
||||
Ripples.prototype.getRelY = function($wrapper, event) {
|
||||
var wrapperOffset = $wrapper.offset();
|
||||
|
||||
if(!self.isTouch()) {
|
||||
/**
|
||||
* Get the mouse position relative to the ripple wrapper
|
||||
*/
|
||||
return event.pageY - wrapperOffset.top;
|
||||
} else {
|
||||
/**
|
||||
* Make sure the user is using only one finger and then get the touch
|
||||
* position relative to the ripple wrapper
|
||||
*/
|
||||
event = event.originalEvent;
|
||||
|
||||
if(event.touches.length === 1) {
|
||||
return event.touches[0].pageY - wrapperOffset.top;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get the ripple color
|
||||
*/
|
||||
Ripples.prototype.getRipplesColor = function($element) {
|
||||
|
||||
var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
|
||||
|
||||
return color;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Verify if the client browser has transistion support
|
||||
*/
|
||||
Ripples.prototype.hasTransitionSupport = function() {
|
||||
var thisBody = document.body || document.documentElement;
|
||||
var thisStyle = thisBody.style;
|
||||
|
||||
var support = (
|
||||
thisStyle.transition !== undefined ||
|
||||
thisStyle.WebkitTransition !== undefined ||
|
||||
thisStyle.MozTransition !== undefined ||
|
||||
thisStyle.MsTransition !== undefined ||
|
||||
thisStyle.OTransition !== undefined
|
||||
);
|
||||
|
||||
return support;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Verify if the client is using a mobile device
|
||||
*/
|
||||
Ripples.prototype.isTouch = function() {
|
||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* End the animation of the ripple
|
||||
*/
|
||||
Ripples.prototype.rippleEnd = function($ripple) {
|
||||
$ripple.data("animating", "off");
|
||||
|
||||
if($ripple.data("mousedown") === "off") {
|
||||
self.rippleOut($ripple);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Turn off the ripple effect
|
||||
*/
|
||||
Ripples.prototype.rippleOut = function($ripple) {
|
||||
$ripple.off();
|
||||
|
||||
if(self.hasTransitionSupport()) {
|
||||
$ripple.addClass("ripple-out");
|
||||
} else {
|
||||
$ripple.animate({"opacity": 0}, 100, function() {
|
||||
$ripple.trigger("transitionend");
|
||||
});
|
||||
}
|
||||
|
||||
$ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
|
||||
$ripple.remove();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Turn on the ripple effect
|
||||
*/
|
||||
Ripples.prototype.rippleOn = function($element, $ripple) {
|
||||
var size = self.getNewSize($element, $ripple);
|
||||
|
||||
if(self.hasTransitionSupport()) {
|
||||
$ripple
|
||||
.css({
|
||||
"-ms-transform": "scale(" + size + ")",
|
||||
"-moz-transform": "scale(" + size + ")",
|
||||
"-webkit-transform": "scale(" + size + ")",
|
||||
"transform": "scale(" + size + ")"
|
||||
})
|
||||
.addClass("ripple-on")
|
||||
.data("animating", "on")
|
||||
.data("mousedown", "on");
|
||||
} else {
|
||||
$ripple.animate({
|
||||
"width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
|
||||
"height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
|
||||
"margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
|
||||
"margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
|
||||
"opacity": 0.2
|
||||
}, 500, function() {
|
||||
$ripple.trigger("transitionend");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Create the jquery plugin function
|
||||
*/
|
||||
$.fn.ripples = function(options) {
|
||||
return this.each(function() {
|
||||
if(!$.data(this, "plugin_" + ripples)) {
|
||||
$.data(this, "plugin_" + ripples, new Ripples(this, options));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery, window, document);
|
||||
2
dist/js/ripples.min.js
vendored
Normal file
2
dist/js/ripples.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
!function(a,b,c,d){"use strict";function e(b,c){g=this,this.element=a(b),this.options=a.extend({},h,c),this._defaults=h,this._name=f,this.init()}var f="ripples",g=null,h={};e.prototype.init=function(){var c=this.element;c.on("mousedown touchstart",function(d){if(!g.isTouch()||"mousedown"!==d.type){c.find(".ripple-wrapper").length||c.append('<div class="ripple-wrapper"></div>');var e=c.children(".ripple-wrapper"),f=g.getRelY(e,d),h=g.getRelX(e,d);if(f||h){var i=g.getRipplesColor(c),j=a("<div></div>");j.addClass("ripple").css({left:h,top:f,"background-color":i}),e.append(j),function(){return b.getComputedStyle(j[0]).opacity}(),g.rippleOn(c,j),setTimeout(function(){g.rippleEnd(j)},500),c.on("mouseup mouseleave touchend",function(){j.data("mousedown","off"),"off"===j.data("animating")&&g.rippleOut(j)})}}})},e.prototype.getNewSize=function(a,b){return Math.max(a.outerWidth(),a.outerHeight())/b.outerWidth()*2.5},e.prototype.getRelX=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageX-c.left:!1):b.pageX-c.left},e.prototype.getRelY=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageY-c.top:!1):b.pageY-c.top},e.prototype.getRipplesColor=function(a){var c=a.data("ripple-color")?a.data("ripple-color"):b.getComputedStyle(a[0]).color;return c},e.prototype.hasTransitionSupport=function(){var a=c.body||c.documentElement,b=a.style,e=b.transition!==d||b.WebkitTransition!==d||b.MozTransition!==d||b.MsTransition!==d||b.OTransition!==d;return e},e.prototype.isTouch=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},e.prototype.rippleEnd=function(a){a.data("animating","off"),"off"===a.data("mousedown")&&g.rippleOut(a)},e.prototype.rippleOut=function(a){a.off(),g.hasTransitionSupport()?a.addClass("ripple-out"):a.animate({opacity:0},100,function(){a.trigger("transitionend")}),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})},e.prototype.rippleOn=function(a,b){var c=g.getNewSize(a,b);g.hasTransitionSupport()?b.css({"-ms-transform":"scale("+c+")","-moz-transform":"scale("+c+")","-webkit-transform":"scale("+c+")",transform:"scale("+c+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):b.animate({width:2*Math.max(a.outerWidth(),a.outerHeight()),height:2*Math.max(a.outerWidth(),a.outerHeight()),"margin-left":-1*Math.max(a.outerWidth(),a.outerHeight()),"margin-top":-1*Math.max(a.outerWidth(),a.outerHeight()),opacity:.2},500,function(){b.trigger("transitionend")})},a.fn.ripples=function(b){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))})}}(jQuery,window,document);
|
||||
//# sourceMappingURL=ripples.min.js.map
|
||||
1
dist/js/ripples.min.js.map
vendored
Normal file
1
dist/js/ripples.min.js.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["ripples.js"],"names":["$","window","document","undefined","Ripples","element","options","self","this","extend","defaults","_defaults","_name","ripples","init","prototype","$element","on","event","isTouch","type","find","append","$wrapper","children","relY","getRelY","relX","getRelX","rippleColor","getRipplesColor","$ripple","addClass","css","left","top","background-color","getComputedStyle","opacity","rippleOn","setTimeout","rippleEnd","data","rippleOut","getNewSize","Math","max","outerWidth","outerHeight","wrapperOffset","offset","originalEvent","touches","length","pageX","pageY","color","hasTransitionSupport","thisBody","body","documentElement","thisStyle","style","support","transition","WebkitTransition","MozTransition","MsTransition","OTransition","test","navigator","userAgent","off","animate","trigger","remove","size","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","fn","each","jQuery"],"mappings":"CAGA,SAAUA,EAAGC,EAAQC,EAAUC,GAE7B,YAuBA,SAASC,GAAQC,EAASC,GACxBC,EAAOC,KAEPA,KAAKH,QAAUL,EAAEK,GAEjBG,KAAKF,QAAUN,EAAES,UAAWC,EAAUJ,GAEtCE,KAAKG,UAAYD,EACjBF,KAAKI,MAAQC,EAEbL,KAAKM,OA5BP,GAAID,GAAU,UAMVN,EAAO,KAMPG,IAuBJN,GAAQW,UAAUD,KAAO,WACvB,GAAIE,GAAYR,KAAKH,OAErBW,GAASC,GAAG,uBAAwB,SAASC,GAI3C,IAAGX,EAAKY,WAA4B,cAAfD,EAAME,KAA3B,CASKJ,EAASK,KAAK,mBAAyB,QAC1CL,EAASM,OAAO,qCAOlB,IAAIC,GAAWP,EAASQ,SAAS,mBAM7BC,EAAOlB,EAAKmB,QAAQH,EAAUL,GAC9BS,EAAOpB,EAAKqB,QAAQL,EAAUL,EAMlC,IAAIO,GAASE,EAAb,CAQA,GAAIE,GAActB,EAAKuB,gBAAgBd,GAMnCe,EAAU/B,EAAE,cAEhB+B,GACCC,SAAS,UACTC,KACCC,KAAQP,EACRQ,IAAOV,EACPW,mBAAoBP,IAOtBN,EAASD,OAAOS,GAMhB,WAAc,MAAO9B,GAAOoC,iBAAiBN,EAAQ,IAAIO,WAMzD/B,EAAKgC,SAASvB,EAAUe,GAMxBS,WAAW,WACTjC,EAAKkC,UAAUV,IACd,KAMHf,EAASC,GAAG,8BAA+B,WACzCc,EAAQW,KAAK,YAAa,OAEO,QAA9BX,EAAQW,KAAK,cACdnC,EAAKoC,UAAUZ,UAWvB3B,EAAQW,UAAU6B,WAAa,SAAS5B,EAAUe,GAEhD,MAAQc,MAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eAAiBjB,EAAQgB,aAAgB,KAO5F3C,EAAQW,UAAUa,QAAU,SAASL,EAAWL,GAC9C,GAAI+B,GAAgB1B,EAAS2B,QAE7B,OAAI3C,GAAKY,WAUPD,EAAQA,EAAMiC,cAEc,IAAzBjC,EAAMkC,QAAQC,OACRnC,EAAMkC,QAAQ,GAAGE,MAAQL,EAAcf,MAGzC,GAZAhB,EAAMoC,MAAQL,EAAcf,MAoBvC9B,EAAQW,UAAUW,QAAU,SAASH,EAAUL,GAC7C,GAAI+B,GAAgB1B,EAAS2B,QAE7B,OAAI3C,GAAKY,WAUPD,EAAQA,EAAMiC,cAEc,IAAzBjC,EAAMkC,QAAQC,OACRnC,EAAMkC,QAAQ,GAAGG,MAAQN,EAAcd,KAGzC,GAZAjB,EAAMqC,MAAQN,EAAcd,KAoBvC/B,EAAQW,UAAUe,gBAAkB,SAASd,GAE3C,GAAIwC,GAAQxC,EAAS0B,KAAK,gBAAkB1B,EAAS0B,KAAK,gBAAkBzC,EAAOoC,iBAAiBrB,EAAS,IAAIwC,KAEjH,OAAOA,IAOTpD,EAAQW,UAAU0C,qBAAuB,WACvC,GAAIC,GAAYxD,EAASyD,MAAQzD,EAAS0D,gBACtCC,EAAYH,EAASI,MAErBC,EACFF,EAAUG,aAAe7D,GACzB0D,EAAUI,mBAAqB9D,GAC/B0D,EAAUK,gBAAkB/D,GAC5B0D,EAAUM,eAAiBhE,GAC3B0D,EAAUO,cAAgBjE,CAG5B,OAAO4D,IAOT3D,EAAQW,UAAUI,QAAU,WAC1B,MAAO,iEAAiEkD,KAAKC,UAAUC,YAOzFnE,EAAQW,UAAU0B,UAAY,SAASV,GACrCA,EAAQW,KAAK,YAAa,OAEO,QAA9BX,EAAQW,KAAK,cACdnC,EAAKoC,UAAUZ,IAQnB3B,EAAQW,UAAU4B,UAAY,SAASZ,GACrCA,EAAQyC,MAELjE,EAAKkD,uBACN1B,EAAQC,SAAS,cAEjBD,EAAQ0C,SAASnC,QAAW,GAAI,IAAK,WACnCP,EAAQ2C,QAAQ,mBAIpB3C,EAAQd,GAAG,mEAAoE,WAC7Ec,EAAQ4C,YAQZvE,EAAQW,UAAUwB,SAAW,SAASvB,EAAUe,GAC9C,GAAI6C,GAAOrE,EAAKqC,WAAW5B,EAAUe,EAElCxB,GAAKkD,uBACN1B,EACCE,KACC4C,gBAAiB,SAAWD,EAAO,IACnCE,iBAAkB,SAAWF,EAAO,IACpCG,oBAAqB,SAAWH,EAAO,IACvCI,UAAa,SAAWJ,EAAO,MAEhC5C,SAAS,aACTU,KAAK,YAAa,MAClBA,KAAK,YAAa,MAEnBX,EAAQ0C,SACNQ,MAAmE,EAA1DpC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eAClDkC,OAAoE,EAA1DrC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACnDmC,cAAyE,GAA1DtC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACxDoC,aAAwE,GAA1DvC,KAAKC,IAAI9B,EAAS+B,aAAc/B,EAASgC,eACvDV,QAAW,IACV,IAAK,WACNP,EAAQ2C,QAAQ,oBAStB1E,EAAEqF,GAAGxE,QAAU,SAASP,GACtB,MAAOE,MAAK8E,KAAK,WACXtF,EAAE0C,KAAKlC,KAAM,UAAYK,IAC3Bb,EAAE0C,KAAKlC,KAAM,UAAYK,EAAS,GAAIT,GAAQI,KAAMF,QAKzDiF,OAAQtF,OAAQC","file":"ripples.min.js"}
|
||||
|
|
@ -2,120 +2,150 @@
|
|||
.form-horizontal .checkbox {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.checkbox {
|
||||
transform: translateZ(0); // Force 3d rendering
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
}
|
||||
|
||||
// Hide native checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkbox-material {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: rgba(0,0,0,.84);
|
||||
height: @checkbox-size;
|
||||
width: @checkbox-size;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
transform: scale3d(2.3, 2.3, 1);
|
||||
}
|
||||
|
||||
.check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
box-shadow:
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off @checkbox-animation-check forwards;
|
||||
.form-group-checkbox-variant(@placeholder-font-size, @line-height){
|
||||
.checkbox {
|
||||
label {
|
||||
font-size: @placeholder-font-size;
|
||||
line-height: @line-height;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0px 0 20px,
|
||||
0px 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px;
|
||||
animation: checkbox-on @checkbox-animation-check forwards;
|
||||
}
|
||||
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
animation: rippleOff @checkbox-animation-ripple;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material:before {
|
||||
animation: rippleOn @checkbox-animation-ripple;
|
||||
}
|
||||
|
||||
// Ripple effect on click
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
animation: rippleOff @checkbox-animation-ripple forwards;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
animation: rippleOn @checkbox-animation-ripple forwards;
|
||||
}
|
||||
|
||||
// Style for disabled inputs
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: @lightbg-text;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, #4caf50);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, #4caf50);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
||||
// default label size/location
|
||||
.form-group-checkbox-variant(@md-input-font-size-base, @md-input-line-height-base);
|
||||
|
||||
// sm label size/location
|
||||
&.form-group-sm {
|
||||
.form-group-checkbox-variant(@md-input-font-size-small, @md-input-line-height-small);
|
||||
}
|
||||
|
||||
// lg label size/location
|
||||
&.form-group-lg {
|
||||
.form-group-checkbox-variant(@md-input-font-size-large, @md-input-line-height-large);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
transform: translateZ(0); // Force 3d rendering
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
color: @checkbox-label-color;
|
||||
}
|
||||
|
||||
// Hide native checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkbox-material {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: rgba(0,0,0,.84);
|
||||
height: @checkbox-size;
|
||||
width: @checkbox-size;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
transform: scale3d(2.3, 2.3, 1);
|
||||
}
|
||||
|
||||
.check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
border: 2px solid @checkbox-border-color;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
box-shadow:
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off @checkbox-animation-check forwards;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0px 0 20px,
|
||||
0px 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px;
|
||||
animation: checkbox-on @checkbox-animation-check forwards;
|
||||
}
|
||||
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
animation: rippleOff @checkbox-animation-ripple;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material:before {
|
||||
animation: rippleOn @checkbox-animation-ripple;
|
||||
}
|
||||
|
||||
// Ripple effect on click
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
animation: rippleOff @checkbox-animation-ripple forwards;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
animation: rippleOn @checkbox-animation-ripple forwards;
|
||||
}
|
||||
|
||||
// Style for disabled inputs
|
||||
fieldset[disabled] &,
|
||||
fieldset[disabled] & input[type=checkbox],
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
|
||||
input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: @lightbg-text;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @checkbox-checked-color);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @checkbox-checked-color);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @checkbox-checked-color);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-on {
|
||||
0% {
|
||||
|
|
|
|||
|
|
@ -156,6 +156,9 @@
|
|||
@checkbox-size: 20px;
|
||||
@checkbox-animation-ripple: 500ms;
|
||||
@checkbox-animation-check: 0.3s;
|
||||
@checkbox-checked-color: #4caf50;
|
||||
@checkbox-border-color: rgba(0, 0, 0, .54);
|
||||
@checkbox-label-color: @checkbox-border-color;
|
||||
|
||||
// Popovers and Popups
|
||||
@popover-background: rgba(101, 101, 101, 0.9);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
|
||||
.form-horizontal .checkbox {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
|
@ -27,7 +28,7 @@
|
|||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
&:before {
|
||||
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -48,6 +49,7 @@
|
|||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
border: 2px solid;
|
||||
border-color: rgba(0,0,0,.54);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
|
@ -103,6 +105,7 @@
|
|||
}
|
||||
|
||||
// Style for disabled inputs
|
||||
fieldset[disabled] & input[type=checkbox],
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
|
|
@ -115,6 +118,7 @@
|
|||
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $success);
|
||||
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, #4caf50);
|
||||
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, #4caf50);
|
||||
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, #4caf50);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,16 +19,112 @@
|
|||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 0;
|
||||
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
|
||||
background-size: 0 2px, 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom, center calc(100% - 1px);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transition: background 0s ease-out;
|
||||
@mixin form-group-size-variant($placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
|
||||
$static-font-size: ceil(($label-floating-size-ratio * $placeholder-font-size)) !default;
|
||||
$static-line-height: ($label-floating-size-ratio * $line-height) !default;
|
||||
|
||||
.form-group.is-focused & {
|
||||
$label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
|
||||
$label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default;
|
||||
|
||||
$help-block-font-size: ceil(($help-block-size-ratio * $placeholder-font-size)) !default;
|
||||
$help-block-line-height: ($help-block-size-ratio * $line-height) !default;
|
||||
|
||||
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
|
||||
margin: ($label-top-margin + $static-font-size) 0 0 0;
|
||||
|
||||
.form-control {
|
||||
@include material-placeholder {
|
||||
font-size: $placeholder-font-size;
|
||||
|
||||
}
|
||||
margin-bottom: $vertical-padding; // must be specified to give help-block vertical space
|
||||
}
|
||||
|
||||
// upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
|
||||
// must also be expressed as form-group padding
|
||||
padding-bottom: $vertical-padding;
|
||||
|
||||
.help-block {
|
||||
margin-top: 0px; // allow the input margin to set-off the top of the help-block
|
||||
font-size: $help-block-font-size;
|
||||
}
|
||||
|
||||
// smaller focused or static size
|
||||
label.control-label {
|
||||
font-size: $static-font-size;
|
||||
line-height: $static-line-height;
|
||||
}
|
||||
|
||||
// larger labels as placeholders
|
||||
&.label-floating,
|
||||
&.label-placeholder {
|
||||
label.control-label {
|
||||
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
|
||||
font-size: $placeholder-font-size;
|
||||
line-height: $line-height;
|
||||
}
|
||||
}
|
||||
|
||||
// static or focused floating labels
|
||||
&.label-static,
|
||||
&.label-floating.is-focused,
|
||||
&.label-floating:not(.is-empty) {
|
||||
label.control-label {
|
||||
top: $label-top;
|
||||
// must repeat because the selector above is more specific than the general label sizing
|
||||
font-size: $static-font-size;
|
||||
line-height: $static-line-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
//border: solid 1px red;
|
||||
position: relative;
|
||||
|
||||
// -----
|
||||
// Inputs
|
||||
//
|
||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
.form-control {
|
||||
border: 0;
|
||||
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
|
||||
background-size: 0 2px, 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom, center calc(100% - 1px);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transition: background 0s ease-out;
|
||||
float: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
|
||||
// Placeholders and and labels-as-placeholders should look the same
|
||||
@include material-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
//&:textarea { // appears to be an invalid selector
|
||||
// height: 40px;
|
||||
//}
|
||||
|
||||
&[readonly],
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-image: none;
|
||||
border-bottom: 1px dotted $input-underline-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-focused .form-control {
|
||||
outline: none;
|
||||
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
|
||||
background-size: 100% 2px, 100% 1px;
|
||||
|
|
@ -40,136 +136,57 @@
|
|||
}
|
||||
}
|
||||
|
||||
&,
|
||||
fieldset[disabled] & {
|
||||
|
||||
&:textarea {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&,
|
||||
.form-group.is-focused & {
|
||||
float: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
&:disabled {
|
||||
border-style: dashed;
|
||||
border-bottom: 1px solid #757575;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
//background-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin form-group-size-variant($placeholder-font-size, $vertical-padding, $line-height, $label-as-placeholder-shim){
|
||||
$static-font-size: ceil(($floating-label-size-ratio * $placeholder-font-size)) !default;
|
||||
$static-line-height: ($floating-label-size-ratio * $line-height) !default;
|
||||
|
||||
$label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
|
||||
//$label-as-placeholder-top: -1 * ($line-height * $static-font-size) !default; way too much on anything but sm
|
||||
|
||||
$help-block-font-size: ceil(($help-block-size-ratio * $placeholder-font-size)) !default;
|
||||
$help-block-line-height: ($help-block-size-ratio * $line-height) !default;
|
||||
|
||||
.form-control {
|
||||
@include material-placeholder {
|
||||
font-size: $placeholder-font-size;
|
||||
|
||||
}
|
||||
margin-bottom: $vertical-padding;
|
||||
|
||||
//border: 1px solid;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
margin-top: 0px; // allow the input margin to set-off the top of the help-block
|
||||
font-size: $help-block-font-size;
|
||||
|
||||
//border: 1px solid;
|
||||
}
|
||||
|
||||
label.control-label { // static label
|
||||
font-size: $static-font-size; // static (smaller of the two)
|
||||
line-height: $static-line-height;
|
||||
&.floating-label {
|
||||
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
|
||||
font-size: $placeholder-font-size; // as placeholder (full size)
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
//border: 1px solid;
|
||||
}
|
||||
|
||||
// sizing of focused/open/labels
|
||||
&.is-focused,
|
||||
&:not(.is-empty) {
|
||||
label.control-label.floating-label {
|
||||
top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding);
|
||||
font-size: $static-font-size;
|
||||
line-height: $static-line-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
|
||||
// ----
|
||||
// Placeholders and and floating-labels should look the same
|
||||
.form-control {
|
||||
@include material-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// -----
|
||||
// Labels
|
||||
//
|
||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
&.label-static,
|
||||
&.label-placeholder,
|
||||
&.label-floating {
|
||||
|
||||
label.control-label { // static label
|
||||
|
||||
// same label properties as form-group placeholder. could be shared with a ruleset but makes sass conversion painful
|
||||
color: $input-placeholder-color;
|
||||
font-weight: normal;
|
||||
margin: 16px 0 0 0; // std and lg
|
||||
|
||||
&.floating-label {
|
||||
label.control-label {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0px;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
}
|
||||
|
||||
label.control-label {
|
||||
// same label properties as form-group placeholder
|
||||
color: $input-placeholder-color;
|
||||
font-weight: normal;
|
||||
margin: 16px 0 0 0; // std and lg
|
||||
}
|
||||
|
||||
// hide label-placeholders when the field is not empty
|
||||
&.label-placeholder:not(.is-empty){
|
||||
label.control-label{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include variations(unquote(" label.control-label"), color, $input-placeholder-color); // default label color variations
|
||||
@include variations(unquote(".is-focused label.control-label"), color, $input-default); // focused label color variations
|
||||
@include variations(unquote(".is-focused.label-placeholder label.control-label"), color, $input-placeholder-color); // default label color variations
|
||||
|
||||
// default floating size/location
|
||||
@include form-group-size-variant($md-input-font-size-base, $md-input-padding-base-vertical, $md-input-line-height-base, $md-label-as-placeholder-shim-base);
|
||||
@include form-group-size-variant($md-input-font-size-base, $md-label-top-margin-base, $md-input-padding-base-vertical, $md-input-line-height-base, $md-label-as-placeholder-shim-base);
|
||||
|
||||
// sm floating size/location
|
||||
&.form-group-sm {
|
||||
@include form-group-size-variant($md-input-font-size-small, $md-input-padding-small-vertical, $md-input-line-height-small, $md-label-as-placeholder-shim-small);
|
||||
@include form-group-size-variant($md-input-font-size-small, $md-label-top-margin-small, $md-input-padding-small-vertical, $md-input-line-height-small, $md-label-as-placeholder-shim-small);
|
||||
}
|
||||
|
||||
// lg floating size/location
|
||||
&.form-group-lg {
|
||||
@include form-group-size-variant($md-input-font-size-large, $md-input-padding-large-vertical, $md-input-line-height-large, $md-label-as-placeholder-shim-large);
|
||||
@include form-group-size-variant($md-input-font-size-large, $md-label-top-margin-large, $md-input-padding-large-vertical, $md-input-line-height-large, $md-label-as-placeholder-shim-large);
|
||||
}
|
||||
|
||||
// Hints
|
||||
// Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
|
||||
.help-block {
|
||||
position: absolute;
|
||||
position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -189,18 +206,17 @@
|
|||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
textarea ~ .form-control-highlight {
|
||||
margin-top: -11px;
|
||||
& ~ .form-control-highlight {
|
||||
margin-top: -11px;
|
||||
}
|
||||
}
|
||||
|
||||
select ~ .material-input:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Fix for OS X
|
||||
select {
|
||||
appearance: none;
|
||||
appearance: none; // Fix for OS X
|
||||
|
||||
& ~ .material-input:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -212,7 +228,7 @@ select.form-control {
|
|||
|
||||
.form-group.is-focused & {
|
||||
box-shadow: none;
|
||||
border-color: #757575;
|
||||
border-color: $input-underline-color;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
|
|
@ -264,7 +280,7 @@ select.form-control {
|
|||
}
|
||||
}
|
||||
|
||||
// Input files (kinda hack)
|
||||
// Input files - hide actual input - requires specific markup in the sample.
|
||||
.form-group input[type=file] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
|
|
@ -277,15 +293,3 @@ select.form-control {
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
// Ugly override of Bootstrap border
|
||||
fieldset[disabled] .form-control:disabled,
|
||||
.form-group .form-control:disabled,
|
||||
.form-control:disabled,
|
||||
fieldset[disabled] .form-control:focus:disabled,
|
||||
.form-group .form-control:focus:disabled,
|
||||
.form-control:focus:disabled,
|
||||
.form-group.is-focused fieldset[disabled] .form-control:disabled,
|
||||
.form-group.is-focused .form-group .form-control:disabled,
|
||||
.form-group.is-focused .form-control:disabled {
|
||||
border: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
border: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
&.floating-label-fix input {
|
||||
&.label-floating-fix input {
|
||||
opacity: 0;
|
||||
}
|
||||
> div, > .item {
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ $material-border-radius: 2px !default;
|
|||
// --------------------
|
||||
// inputs
|
||||
$input-placeholder-color: #BDBDBD !default;
|
||||
$floating-label-size-ratio: 75 / 100 !default;
|
||||
$label-floating-size-ratio: 75 / 100 !default;
|
||||
$help-block-size-ratio: 75 / 100 !default;
|
||||
$input-underline-color: #D2D2D2 !default;
|
||||
|
||||
|
|
@ -95,9 +95,9 @@ $md-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
|
|||
$md-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
|
||||
|
||||
// size when static or floating with focus i.e. 16px
|
||||
//$md-input-label-font-size-base: ceil(($floating-label-size-ratio * $md-input-font-size-base)) !default;
|
||||
//$md-input-label-font-size-small:ceil(( $floating-label-size-ratio * $md-input-font-size-small)) !default;
|
||||
//$md-input-label-font-size-large: ceil(($floating-label-size-ratio * $md-input-font-size-large)) !default;
|
||||
//$md-input-label-font-size-base: ceil(($label-floating-size-ratio * $md-input-font-size-base)) !default;
|
||||
//$md-input-label-font-size-small:ceil(( $label-floating-size-ratio * $md-input-font-size-small)) !default;
|
||||
//$md-input-label-font-size-large: ceil(($label-floating-size-ratio * $md-input-font-size-large)) !default;
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
$md-input-line-height-base: 1.428571429 !default; // 20/14
|
||||
|
|
@ -107,17 +107,20 @@ $md-input-line-height-large: 1.3333333 !default; // extra decimals for W
|
|||
$md-input-line-height-small: 1.5 !default;
|
||||
|
||||
//## 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: 8px !default; // was 6.
|
||||
$md-input-padding-base-vertical: 8px - 1px !default; // was 6.
|
||||
$md-input-padding-base-horizontal: 0px !default; // was 12.
|
||||
$md-label-as-placeholder-shim-base: 0px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$md-label-top-margin-base: 16px !default;
|
||||
|
||||
$md-input-padding-large-vertical: 10px !default; // 10
|
||||
$md-input-padding-large-vertical: 10px - 1px !default; // 10
|
||||
$md-input-padding-large-horizontal: 0px !default; // 16
|
||||
$md-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$md-label-top-margin-large: 16px !default;
|
||||
|
||||
$md-input-padding-small-vertical: 4px !default; // 5
|
||||
$md-input-padding-small-vertical: 4px - 1px !default; // 5
|
||||
$md-input-padding-small-horizontal: 0px !default; // 10
|
||||
$md-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$md-label-top-margin-small: 12px !default;
|
||||
|
||||
$md-input-padding-xs-vertical: 2px !default; // 1
|
||||
$md-input-padding-xs-horizontal: 0px !default; // 5
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user