This commit is contained in:
Kevin Ross 2016-05-09 10:37:53 -05:00
parent 2671c73cea
commit 8667184340
9 changed files with 91 additions and 132 deletions

View File

@ -859,6 +859,7 @@ label.checkbox-inline .checkbox-material {
label.checkbox-inline .checkbox-material:before { label.checkbox-inline .checkbox-material:before {
display: block; display: block;
position: absolute; position: absolute;
top: -5px;
left: 0; left: 0;
content: ""; content: "";
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
@ -909,14 +910,47 @@ label.checkbox-inline .checkbox-material .check:before {
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;
-o-animation: checkbox-off;
animation: checkbox-off;
} }
.checkbox input[type=checkbox]:focus + .checkbox-material .check:after, .checkbox input[type=checkbox]:focus + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:focus + .checkbox-material .check:after { label.checkbox-inline input[type=checkbox]:focus + .checkbox-material .check:after {
opacity: 0.2; opacity: 0.2;
} }
.checkbox input[type=checkbox]:focus:checked + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material:before {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.checkbox input[type=checkbox]:focus:checked + .checkbox-material .check:before,
label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material .check:before {
-webkit-animation: checkbox-on 0.3s forwards;
-o-animation: checkbox-on 0.3s forwards;
animation: checkbox-on 0.3s forwards;
}
.checkbox input[type=checkbox]:focus:checked + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material .check:after {
-webkit-animation: rippleOn 500ms forwards;
-o-animation: rippleOn 500ms forwards;
animation: rippleOn 500ms forwards;
}
.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:before,
label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:before {
-webkit-animation: checkbox-off 0.3s forwards;
-o-animation: checkbox-off 0.3s forwards;
animation: checkbox-off 0.3s forwards;
}
.checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:after {
-webkit-animation: rippleOff 500ms forwards;
-o-animation: rippleOff 500ms forwards;
animation: rippleOff 500ms forwards;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check, .checkbox input[type=checkbox]:checked + .checkbox-material .check,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check { label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check {
color: #009688; color: #009688;
@ -927,33 +961,6 @@ label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check:b
color: #009688; color: #009688;
-webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 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 0 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 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-webkit-animation: checkbox-on 0.3s forwards;
-o-animation: checkbox-on 0.3s forwards;
animation: checkbox-on 0.3s forwards;
}
.checkbox input[type=checkbox]:checked + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn;
-o-animation: rippleOn;
animation: rippleOn;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check:after {
-webkit-animation: rippleOn 500ms forwards;
-o-animation: rippleOn 500ms forwards;
animation: rippleOn 500ms forwards;
}
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before,
label.checkbox-inline input[type=checkbox]:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff;
-o-animation: rippleOff;
animation: rippleOff;
}
.checkbox input[type=checkbox]:not(:checked) + .checkbox-material .check:after,
label.checkbox-inline input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
-webkit-animation: rippleOff 500ms forwards;
-o-animation: rippleOff 500ms forwards;
animation: rippleOff 500ms forwards;
} }
fieldset[disabled] .checkbox, fieldset[disabled] .checkbox,
fieldset[disabled] label.checkbox-inline, fieldset[disabled] label.checkbox-inline,
@ -975,24 +982,6 @@ label.checkbox-inline input[type=checkbox][disabled] + .checkbox-material .check
-o-transform: rotate(-45deg); -o-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.is-focused .checkbox .checkbox-material .check:before,
.is-focused label.checkbox-inline .checkbox-material .check:before {
-webkit-animation: checkbox-off 0.3s forwards;
-o-animation: checkbox-off 0.3s forwards;
animation: checkbox-off 0.3s forwards;
}
.is-focused .checkbox input[type=checkbox]:checked + .checkbox-material:before,
.is-focused label.checkbox-inline input[type=checkbox]:checked + .checkbox-material:before {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.is-focused .checkbox input[type=checkbox]:not(:checked) + .checkbox-material:before,
.is-focused label.checkbox-inline input[type=checkbox]:not(:checked) + .checkbox-material:before {
-webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
@-webkit-keyframes checkbox-on { @-webkit-keyframes checkbox-on {
0% { 0% {
-webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
@ -1426,17 +1415,17 @@ label.radio-inline .check:after {
-webkit-transform: scale3d(1.5, 1.5, 1); -webkit-transform: scale3d(1.5, 1.5, 1);
transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1);
} }
.radio input[type=radio]:not(:checked) ~ .check:after, .radio input[type=radio]:focus:not(:checked) ~ .check:after,
label.radio-inline input[type=radio]:not(:checked) ~ .check:after { label.radio-inline input[type=radio]:focus:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms; -webkit-animation: rippleOff 500ms;
-o-animation: rippleOff 500ms; -o-animation: rippleOff 500ms;
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
.radio input[type=radio]:checked ~ .check:after, .radio input[type=radio]:focus:checked ~ .check:after,
label.radio-inline input[type=radio]:checked ~ .check:after { label.radio-inline input[type=radio]:focus:checked ~ .check:after {
-webkit-animation: rippleOn; -webkit-animation: rippleOn 500ms;
-o-animation: rippleOn; -o-animation: rippleOn 500ms;
animation: rippleOn; animation: rippleOn 500ms;
} }
.radio input[type=radio], .radio input[type=radio],
label.radio-inline input[type=radio] { label.radio-inline input[type=radio] {
@ -1492,12 +1481,6 @@ label.radio-inline input[type=radio][disabled] ~ .circle {
.theme-dark label.radio-inline input[type=radio][disabled] ~ .circle { .theme-dark label.radio-inline input[type=radio][disabled] ~ .circle {
border-color: #ffffff; border-color: #ffffff;
} }
.is-focused .radio input[type=radio]:checked ~ .check:after,
.is-focused label.radio-inline input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-o-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

3
dist/js/material.js vendored
View File

@ -165,9 +165,6 @@
var validate = this.options.validate; var validate = this.options.validate;
$(document) $(document)
.on("change", ".checkbox input[type=checkbox]", function () {
$(this).blur();
})
.on("keydown paste", ".form-control", function (e) { .on("keydown paste", ".form-control", function (e) {
if (_isChar(e)) { if (_isChar(e)) {
$(this).closest(".form-group").removeClass("is-empty"); $(this).closest(".form-group").removeClass("is-empty");

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,8 +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 // http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
.form-group {
}
.checkbox label, .checkbox label,
label.checkbox-inline { label.checkbox-inline {
@ -31,12 +29,13 @@ label.checkbox-inline {
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
top: 3px; top: 3px;
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome) &:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
display: block; display: block;
position: absolute; position: absolute;
top:-5px;
left: 0; left: 0;
content: ""; content: "";
background-color: rgba(0,0,0,.84); background-color: rgba(0, 0, 0, .84);
height: $mdb-checkbox-size; height: $mdb-checkbox-size;
width: $mdb-checkbox-size; width: $mdb-checkbox-size;
border-radius: 100%; border-radius: 100%;
@ -73,7 +72,6 @@ label.checkbox-inline {
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;
animation: checkbox-off;
} }
} }
@ -82,7 +80,36 @@ label.checkbox-inline {
&:focus + .checkbox-material .check:after { &:focus + .checkbox-material .check:after {
opacity: 0.2; opacity: 0.2;
} }
&:focus{
&:checked{
& + .checkbox-material:before {
animation: rippleOn 500ms;
}
& + .checkbox-material .check:before {
animation: checkbox-on $mdb-checkbox-animation-check forwards;
}
& + .checkbox-material .check:after {
animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff 500ms;
}
& + .checkbox-material .check:before {
animation: checkbox-off $mdb-checkbox-animation-check forwards;
}
& + .checkbox-material .check:after {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
}
}
}
&:checked { &:checked {
// FIXME: once working - combine further to reduce code // FIXME: once working - combine further to reduce code
@ -93,32 +120,17 @@ label.checkbox-inline {
& + .checkbox-material .check:before { & + .checkbox-material .check:before {
color: $mdb-checkbox-checked-color; color: $mdb-checkbox-checked-color;
box-shadow: 0 0 0 10px, box-shadow:
0 0 0 10px,
10px -10px 0 10px, 10px -10px 0 10px,
32px 0 0 20px, 32px 0 0 20px,
0px 32px 0 20px, 0px 32px 0 20px,
-5px 5px 0 10px, -5px 5px 0 10px,
20px -12px 0 11px; 20px -12px 0 11px;
animation: checkbox-on $mdb-checkbox-animation-check forwards;
}
& + .checkbox-material:before {
animation: rippleOn;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
//background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff;
}
& + .checkbox-material .check:after {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
} }
} }
} }
@ -137,30 +149,6 @@ label.checkbox-inline {
} }
} }
// Prevent checkbox animation and ripple effect on page load
.is-focused {
.checkbox,
label.checkbox-inline {
.checkbox-material {
.check:before {
animation: checkbox-off $mdb-checkbox-animation-check forwards;
}
}
input[type=checkbox] {
&:checked {
& + .checkbox-material:before {
animation: rippleOn $mdb-checkbox-animation-ripple;
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff $mdb-checkbox-animation-ripple;
}
}
}
}
}
@keyframes checkbox-on { @keyframes checkbox-on {
0% { 0% {
box-shadow: box-shadow:

View File

@ -59,11 +59,12 @@
margin: 0; margin: 0;
transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1);
} }
input[type=radio]:not(:checked) ~ .check:after {
input[type=radio]:focus:not(:checked) ~ .check:after {
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
input[type=radio]:checked ~ .check:after { input[type=radio]:focus:checked ~ .check:after {
animation: rippleOn; animation: rippleOn 500ms;
} }
input[type=radio] { input[type=radio] {
@ -92,15 +93,6 @@
} }
} }
// Prevent ripple effect on page load
.is-focused {
.radio, label.radio-inline {
input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms;
}
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -112,7 +104,6 @@
opacity: 0; opacity: 0;
} }
} }
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;