mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-10-31 07:57:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

standardized checkbox sizing variants and colors to spec

Browse Source
This commit is contained in:
Kevin Ross 2015-11-18 14:20:12 -06:00
parent 86da848e06
commit 55e204cd0c
22 changed files with 2758 additions and 1385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bootstrap-elements.html
View File

@ -1895,6 +1895,9 @@
<label> <label>
<input type="checkbox"> Checkbox <input type="checkbox"> Checkbox
</label> </label>
<label>
<input type="checkbox" disabled> Disabled Checkbox
</label>
</div> </div>
<br> <br>

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

404
dist/css/material.css vendored
View File

@ -3874,15 +3874,28 @@ body .jumbotron-material-blue-grey,
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 20px; 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); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
} }
.checkbox label { .form-group .checkbox label {
cursor: pointer; cursor: pointer;
padding-left: 0; padding-left: 0;
color: rgba(0, 0, 0, 0.54);
} }
.checkbox input[type=checkbox] { .form-group .checkbox input[type=checkbox] {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
margin: 0; margin: 0;
@ -3893,12 +3906,12 @@ body .jumbotron-material-blue-grey,
left: 0; left: 0;
pointer-events: none; pointer-events: none;
} }
.checkbox .checkbox-material { .form-group .checkbox .checkbox-material {
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
top: 3px; top: 3px;
} }
.checkbox .checkbox-material:before { .form-group .checkbox .checkbox-material:before {
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
@ -3913,17 +3926,17 @@ body .jumbotron-material-blue-grey,
-webkit-transform: scale3d(2.3, 2.3, 1); -webkit-transform: scale3d(2.3, 2.3, 1);
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; position: relative;
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid; border: 2px solid rgba(0, 0, 0, 0.54);
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
} }
.checkbox .checkbox-material .check:before { .form-group .checkbox .checkbox-material .check:before {
position: absolute; position: absolute;
content: ""; content: "";
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
@ -3935,304 +3948,392 @@ body .jumbotron-material-blue-grey,
width: 0; width: 0;
height: 0; height: 0;
box-shadow: 0 0 0 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,
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 inset;
-webkit-animation: checkbox-off 0.3s forwards; -webkit-animation: checkbox-off 0.3s forwards;
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; 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; 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; -webkit-animation: checkbox-on 0.3s forwards;
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; -webkit-animation: rippleOff 500ms;
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; -webkit-animation: rippleOn 500ms;
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; -webkit-animation: rippleOff 500ms forwards;
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; -webkit-animation: rippleOn 500ms forwards;
animation: rippleOn 500ms forwards; animation: rippleOn 500ms forwards;
} }
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before, fieldset[disabled] .form-group .checkbox,
.checkbox input[type=checkbox][disabled] + .circle { 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; 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); background-color: rgba(0, 0, 0, 0.84);
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after, .form-group .checkbox input[type=checkbox]:checked + .checkbox-material .check:after,
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check:after { .form-group .checkbox-default input[type=checkbox]:checked + .checkbox-material .check:after {
background-color: #4caf50; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; background-color: #607d8b;
} }
.checkbox input[type=checkbox]:checked + .checkbox-material .check:before, .form-group .checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check:before { .form-group .checkbox-default input[type=checkbox]:checked + .checkbox-material .check:before {
color: #4caf50; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; color: #607d8b;
} }
.checkbox input[type=checkbox]:checked + .checkbox-material .check, .form-group .checkbox input[type=checkbox]:checked + .checkbox-material .check,
.checkbox-default input[type=checkbox]:checked + .checkbox-material .check { .form-group .checkbox-default input[type=checkbox]:checked + .checkbox-material .check {
color: #4caf50; color: #4caf50;
} }
.checkbox-black input[type=checkbox]:checked + .checkbox-material .check { .form-group .checkbox-black input[type=checkbox]:checked + .checkbox-material .check {
color: #000000; color: #000000;
} }
.checkbox-white input[type=checkbox]:checked + .checkbox-material .check { .form-group .checkbox-white input[type=checkbox]:checked + .checkbox-material .check {
color: #ffffff; color: #ffffff;
} }
.checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check { .form-group .checkbox-inverse input[type=checkbox]:checked + .checkbox-material .check {
color: #3f51b5; color: #3f51b5;
} }
.checkbox-primary input[type=checkbox]:checked + .checkbox-material .check { .form-group .checkbox-primary input[type=checkbox]:checked + .checkbox-material .check {
color: #009688; color: #009688;
} }
.checkbox-success input[type=checkbox]:checked + .checkbox-material .check { .form-group .checkbox-success input[type=checkbox]:checked + .checkbox-material .check {
color: #4caf50; color: #4caf50;
} }
.checkbox-info input[type=checkbox]:checked + .checkbox-material .check { .form-group .checkbox-info input[type=checkbox]:checked + .checkbox-material .check {
color: #03a9f4; color: #03a9f4;
} }
.checkbox-warning input[type=checkbox]:checked + .checkbox-material .check { .form-group .checkbox-warning input[type=checkbox]:checked + .checkbox-material .check {
color: #ff5722; color: #ff5722;
} }
.checkbox-danger input[type=checkbox]:checked + .checkbox-material .check { .form-group .checkbox-danger input[type=checkbox]:checked + .checkbox-material .check {
color: #f44336; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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; 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 { @-webkit-keyframes checkbox-on {
0% { 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; 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; font-size: 11px;
} }
} }
.form-control { .form-group {
position: relative;
margin: 28px 0 0 0;
padding-bottom: 7px;
}
.form-group .form-control {
border: 0; border: 0;
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2); background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
background-size: 0 2px, 100% 1px; background-size: 0 2px, 100% 1px;
@ -5129,47 +5235,10 @@ output {
background-position: center bottom, center calc(100% - 1px); background-position: center bottom, center calc(100% - 1px);
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out; 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; float: none;
border: 0;
box-shadow: none; box-shadow: none;
border-radius: 0; 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 { .form-group .form-control::-moz-placeholder {
color: #BDBDBD; color: #BDBDBD;
font-weight: normal; font-weight: normal;
@ -5182,6 +5251,26 @@ fieldset[disabled] .form-control {
color: #BDBDBD; color: #BDBDBD;
font-weight: normal; 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-static label.control-label,
.form-group.label-placeholder label.control-label, .form-group.label-placeholder label.control-label,
.form-group.label-floating label.control-label { .form-group.label-floating label.control-label {
@ -5698,12 +5787,12 @@ fieldset[disabled] .form-control {
.form-group textarea ~ .form-control-highlight { .form-group textarea ~ .form-control-highlight {
margin-top: -11px; margin-top: -11px;
} }
.form-group select ~ .material-input:after {
display: none;
}
.form-group select { .form-group select {
appearance: none; appearance: none;
} }
.form-group select ~ .material-input:after {
display: none;
}
select.form-control { select.form-control {
border: 0; border: 0;
box-shadow: none; box-shadow: none;
@ -5711,7 +5800,7 @@ select.form-control {
} }
.form-group.is-focused select.form-control { .form-group.is-focused select.form-control {
box-shadow: none; box-shadow: none;
border-color: #757575; border-color: #D2D2D2;
} }
select.form-control[multiple], select.form-control[multiple],
.form-group.is-focused select.form-control[multiple] { .form-group.is-focused select.form-control[multiple] {
@ -5744,17 +5833,6 @@ select.form-control[multiple],
height: 100%; height: 100%;
z-index: 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 { legend {
border-bottom: 0; border-bottom: 0;
} }

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

41
dist/css/ripples.css vendored Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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"}

248
less/_checkboxes.less
View File

@ -2,120 +2,150 @@
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 20px; padding-top: 20px;
} }
.checkbox {
transform: translateZ(0); // Force 3d rendering
label {
cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule
}
// Hide native checkbox .form-group-checkbox-variant(@placeholder-font-size, @line-height){
input[type=checkbox] { .checkbox {
opacity: 0; label {
position: absolute; font-size: @placeholder-font-size;
margin: 0; line-height: @line-height;
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;
} }
} }
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 { @keyframes checkbox-on {
0% { 0% {

3
less/_variables.less
View File

@ -156,6 +156,9 @@
@checkbox-size: 20px; @checkbox-size: 20px;
@checkbox-animation-ripple: 500ms; @checkbox-animation-ripple: 500ms;
@checkbox-animation-check: 0.3s; @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 // Popovers and Popups
@popover-background: rgba(101, 101, 101, 0.9); @popover-background: rgba(101, 101, 101, 0.9);

6
sass/_checkboxes.scss
View File

@ -1,5 +1,6 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // 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 { .form-horizontal .checkbox {
padding-top: 20px; padding-top: 20px;
} }
@ -27,7 +28,7 @@
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
top: 3px; top: 3px;
&:before { &:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
@ -48,6 +49,7 @@
width: $checkbox-size; width: $checkbox-size;
height: $checkbox-size; height: $checkbox-size;
border: 2px solid; border: 2px solid;
border-color: rgba(0,0,0,.54);
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
@ -103,6 +105,7 @@
} }
// Style for disabled inputs // Style for disabled inputs
fieldset[disabled] & input[type=checkbox],
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before, input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
input[type=checkbox][disabled] + .circle { input[type=checkbox][disabled] + .circle {
opacity: 0.5; 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: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: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"), color, #4caf50);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, #4caf50);
} }

278
sass/_inputs.scss
View File

@ -19,16 +19,112 @@
} }
} }
.form-control { @mixin form-group-size-variant($placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
border: 0; $static-font-size: ceil(($label-floating-size-ratio * $placeholder-font-size)) !default;
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color); $static-line-height: ($label-floating-size-ratio * $line-height) !default;
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;
.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; outline: none;
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color); background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
background-size: 100% 2px, 100% 1px; 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 // Labels
// //
// Reference http://www.google.com/design/spec/components/text-fields.html // Reference http://www.google.com/design/spec/components/text-fields.html
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
&.label-static,
&.label-placeholder,
&.label-floating {
label.control-label { // static label label.control-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 {
position: absolute; position: absolute;
pointer-events: none;
left: 0px; left: 0px;
pointer-events: none;
transition: 0.3s ease all; 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(" 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.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 // 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 // sm floating size/location
&.form-group-sm { &.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 // lg floating size/location
&.form-group-lg { &.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 { .help-block {
position: absolute; position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
display: none; display: none;
} }
@ -189,18 +206,17 @@
textarea { textarea {
resize: none; resize: none;
} & ~ .form-control-highlight {
textarea ~ .form-control-highlight { margin-top: -11px;
margin-top: -11px; }
} }
select ~ .material-input:after {
display: none;
}
// Fix for OS X
select { 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 & { .form-group.is-focused & {
box-shadow: none; box-shadow: none;
border-color: #757575; border-color: $input-underline-color;
} }
&[multiple] { &[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] { .form-group input[type=file] {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
@ -277,15 +293,3 @@ select.form-control {
z-index: 100; 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;
}

2
sass/_plugin-selectize.scss
View File

@ -39,7 +39,7 @@
border: 0px; border: 0px;
background: transparent; background: transparent;
} }
&.floating-label-fix input { &.label-floating-fix input {
opacity: 0; opacity: 0;
} }
> div, > .item { > div, > .item {

17
sass/_variables.scss
View File

@ -86,7 +86,7 @@ $material-border-radius: 2px !default;
// -------------------- // --------------------
// inputs // inputs
$input-placeholder-color: #BDBDBD !default; $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; $help-block-size-ratio: 75 / 100 !default;
$input-underline-color: #D2D2D2 !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 $md-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
// size when static or floating with focus i.e. 16px // 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-base: ceil(($label-floating-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-small:ceil(( $label-floating-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-large: ceil(($label-floating-size-ratio * $md-input-font-size-large)) !default;
//** Unit-less `line-height` for use in components like buttons. //** Unit-less `line-height` for use in components like buttons.
$md-input-line-height-base: 1.428571429 !default; // 20/14 $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; $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). //## 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-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-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-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-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-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-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-vertical: 2px !default; // 1
$md-input-padding-xs-horizontal: 0px !default; // 5 $md-input-padding-xs-horizontal: 0px !default; // 5