new checkbox style, fix #53 TODO: fix ripple

This commit is contained in:
FezVrasta 2014-10-05 17:37:10 +02:00
parent 8980fc4235
commit 640027abe3
10 changed files with 1466 additions and 1200 deletions

View File

@ -2230,16 +2230,11 @@ body .jumbotron-material-lightgrey,
font-size: 15px; font-size: 15px;
} }
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 15px; padding-top: 20px;
}
.checkbox {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} }
.checkbox label { .checkbox label {
padding-left: 10px;
cursor: pointer; cursor: pointer;
padding-left: 45px;
position: relative; position: relative;
} }
.checkbox label span { .checkbox label span {
@ -2249,6 +2244,17 @@ body .jumbotron-material-lightgrey,
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.checkbox label .check {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
position: relative;
top: 5px;
left: -3px;
}
.checkbox label .check:after { .checkbox label .check:after {
display: block; display: block;
position: absolute; position: absolute;
@ -2264,104 +2270,36 @@ body .jumbotron-material-lightgrey,
margin: 0; margin: 0;
} }
.checkbox label .check:before { .checkbox label .check:before {
display: block; position: absolute;
content: ""; content: "";
border: 2px solid rgba(0, 0, 0, 0.84); -webkit-transform: rotate(45deg);
height: 20px; -ms-transform: rotate(45deg);
width: 20px; transform: rotate(45deg);
-webkit-transition-delay: 0.2s; display: block;
transition-delay: 0.2s; margin-top: -4px;
} margin-left: 6px;
.checkbox .check, width: 0;
.checkbox-default .check { height: 0;
color: #0f9d58; box-shadow: 0 0 0 0,
} 0 0 0 0,
.checkbox-primary .check { 0 0 0 0,
color: #4285f4; 0 0 0 0,
} 0 0 0 0,
.checkbox-success .check { 0 0 0 0,
color: #0f9d58; 0px 0px 0 0px inset;
} -webkit-animation: checkbox-off 0.3s linear forwards;
.checkbox-info .check { animation: checkbox-off 0.3s linear forwards;
color: #03a9f4;
}
.checkbox-warning .check {
color: #ff5722;
}
.checkbox-danger .check {
color: #f44336;
}
.checkbox-material-red .check {
color: #f44336;
}
.checkbox-material-pink .check {
color: #e91e63;
}
.checkbox-material-purple .check {
color: #9c27b0;
}
.checkbox-material-deeppurple .check {
color: #673ab7;
}
.checkbox-material-indigo .check {
color: #3f51b5;
}
.checkbox-material-lightblue .check {
color: #03a9f4;
}
.checkbox-material-cyan .check {
color: #00bcd4;
}
.checkbox-material-teal .check {
color: #009688;
}
.checkbox-material-lightgreen .check {
color: #8bc34a;
}
.checkbox-material-lime .check {
color: #cddc39;
}
.checkbox-material-lightyellow .check {
color: #ffeb3b;
}
.checkbox-material-orange .check {
color: #ff9800;
}
.checkbox-material-deeporange .check {
color: #ff5722;
}
.checkbox-material-grey .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey .check {
color: #607d8b;
}
.checkbox-material-brown .check {
color: #795548;
}
.checkbox-material-lightgrey .check {
color: #ececec;
} }
.checkbox input[type=checkbox] { .checkbox input[type=checkbox] {
opacity: 0; opacity: 0;
} }
.checkbox input[type=checkbox] ~ .check:before {
position: absolute;
top: 2px;
left: 11px;
width: 18px;
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
-webkit-animation: uncheck 300ms ease-out forwards;
animation: uncheck 300ms ease-out forwards;
}
.checkbox input[type=checkbox]:focus ~ .check:after { .checkbox input[type=checkbox]:focus ~ .check:after {
opacity: 0.2; opacity: 0.2;
} }
.checkbox input[type=checkbox]:checked ~ .check:before { .checkbox input[type=checkbox]:checked ~ .check:before {
-webkit-animation: check 300ms ease-out forwards; 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: check 300ms ease-out forwards; -webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards;
} }
.checkbox input[type=checkbox]:not(:checked) ~ .check:after { .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms linear forwards; -webkit-animation: rippleOff 500ms linear forwards;
@ -2455,206 +2393,260 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after { .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
background-color: #ececec; background-color: #ececec;
} }
@-webkit-keyframes uncheck { .checkbox input[type=checkbox]:checked ~ .check:before,
.checkbox-default input[type=checkbox]:checked ~ .check:before {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check:before {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
color: #ececec;
}
.checkbox input[type=checkbox]:checked ~ .check,
.checkbox-default input[type=checkbox]:checked ~ .check {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec;
}
@-webkit-keyframes checkbox-on {
0% { 0% {
top: -3px; 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;
left: 17px; }
width: 10px; 50% {
height: 21px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
border-color: #0f9d58; }
border-left-color: transparent; 100% {
border-top-color: transparent; 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-transform: rotate(45deg); }
transform: rotate(45deg); }
@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;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
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-keyframes checkbox-off {
0% {
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, 0 0 0 0 inset;
}
25% {
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, 0 0 0 0 inset;
} }
50% { 50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
border-color: #0f9d58; margin-top: -4px;
border-left-color: transparent; margin-left: 6px;
border-top-color: transparent; width: 0px;
height: 0px;
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, 0 0 0 0 inset;
} }
51% { 51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
height: 20px;
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,
0px 0px 0 10px inset;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
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,
0px 0px 0 0px inset;
} }
} }
@keyframes uncheck { @keyframes checkbox-off {
0% { 0% {
top: -3px; 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, 0 0 0 0 inset;
left: 17px; }
width: 10px; 25% {
height: 21px; 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, 0 0 0 0 inset;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
} }
50% { 50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
border-color: #0f9d58; margin-top: -4px;
border-left-color: transparent; margin-left: 6px;
border-top-color: transparent; width: 0px;
height: 0px;
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, 0 0 0 0 inset;
} }
51% { 51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
height: 20px;
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,
0px 0px 0 10px inset;
} }
}
@-webkit-keyframes check {
100% { 100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
} height: 20px;
} box-shadow: 0 0 0 0,
@keyframes check { 0 0 0 0,
100% { 0 0 0 0,
top: -3px; 0 0 0 0,
left: 17px; 0 0 0 0,
width: 10px; 0 0 0 0,
height: 21px; 0px 0px 0 0px inset;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
} }
} }
.form-horizontal .radio { .form-horizontal .radio {
@ -2871,6 +2863,17 @@ body .jumbotron-material-lightgrey,
.radio input[type=radio][disabled] ~ .check { .radio input[type=radio][disabled] ~ .check {
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
} }
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -2882,6 +2885,17 @@ body .jumbotron-material-lightgrey,
opacity: 0; opacity: 0;
} }
} }
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;

File diff suppressed because one or more lines are too long

558
dist/css/material.css vendored
View File

@ -2229,16 +2229,11 @@ body .jumbotron-material-lightgrey,
font-size: 15px; font-size: 15px;
} }
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 15px; padding-top: 20px;
}
.checkbox {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} }
.checkbox label { .checkbox label {
padding-left: 10px;
cursor: pointer; cursor: pointer;
padding-left: 45px;
position: relative; position: relative;
} }
.checkbox label span { .checkbox label span {
@ -2248,6 +2243,17 @@ body .jumbotron-material-lightgrey,
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.checkbox label .check {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
position: relative;
top: 5px;
left: -3px;
}
.checkbox label .check:after { .checkbox label .check:after {
display: block; display: block;
position: absolute; position: absolute;
@ -2263,104 +2269,36 @@ body .jumbotron-material-lightgrey,
margin: 0; margin: 0;
} }
.checkbox label .check:before { .checkbox label .check:before {
display: block; position: absolute;
content: ""; content: "";
border: 2px solid rgba(0, 0, 0, 0.84); -webkit-transform: rotate(45deg);
height: 20px; -ms-transform: rotate(45deg);
width: 20px; transform: rotate(45deg);
-webkit-transition-delay: 0.2s; display: block;
transition-delay: 0.2s; margin-top: -4px;
} margin-left: 6px;
.checkbox .check, width: 0;
.checkbox-default .check { height: 0;
color: #0f9d58; box-shadow: 0 0 0 0,
} 0 0 0 0,
.checkbox-primary .check { 0 0 0 0,
color: #4285f4; 0 0 0 0,
} 0 0 0 0,
.checkbox-success .check { 0 0 0 0,
color: #0f9d58; 0px 0px 0 0px inset;
} -webkit-animation: checkbox-off 0.3s linear forwards;
.checkbox-info .check { animation: checkbox-off 0.3s linear forwards;
color: #03a9f4;
}
.checkbox-warning .check {
color: #ff5722;
}
.checkbox-danger .check {
color: #f44336;
}
.checkbox-material-red .check {
color: #f44336;
}
.checkbox-material-pink .check {
color: #e91e63;
}
.checkbox-material-purple .check {
color: #9c27b0;
}
.checkbox-material-deeppurple .check {
color: #673ab7;
}
.checkbox-material-indigo .check {
color: #3f51b5;
}
.checkbox-material-lightblue .check {
color: #03a9f4;
}
.checkbox-material-cyan .check {
color: #00bcd4;
}
.checkbox-material-teal .check {
color: #009688;
}
.checkbox-material-lightgreen .check {
color: #8bc34a;
}
.checkbox-material-lime .check {
color: #cddc39;
}
.checkbox-material-lightyellow .check {
color: #ffeb3b;
}
.checkbox-material-orange .check {
color: #ff9800;
}
.checkbox-material-deeporange .check {
color: #ff5722;
}
.checkbox-material-grey .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey .check {
color: #607d8b;
}
.checkbox-material-brown .check {
color: #795548;
}
.checkbox-material-lightgrey .check {
color: #ececec;
} }
.checkbox input[type=checkbox] { .checkbox input[type=checkbox] {
opacity: 0; opacity: 0;
} }
.checkbox input[type=checkbox] ~ .check:before {
position: absolute;
top: 2px;
left: 11px;
width: 18px;
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
-webkit-animation: uncheck 300ms ease-out forwards;
animation: uncheck 300ms ease-out forwards;
}
.checkbox input[type=checkbox]:focus ~ .check:after { .checkbox input[type=checkbox]:focus ~ .check:after {
opacity: 0.2; opacity: 0.2;
} }
.checkbox input[type=checkbox]:checked ~ .check:before { .checkbox input[type=checkbox]:checked ~ .check:before {
-webkit-animation: check 300ms ease-out forwards; 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: check 300ms ease-out forwards; -webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards;
} }
.checkbox input[type=checkbox]:not(:checked) ~ .check:after { .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms linear forwards; -webkit-animation: rippleOff 500ms linear forwards;
@ -2454,206 +2392,260 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after { .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
background-color: #ececec; background-color: #ececec;
} }
@-webkit-keyframes uncheck { .checkbox input[type=checkbox]:checked ~ .check:before,
.checkbox-default input[type=checkbox]:checked ~ .check:before {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check:before {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
color: #ececec;
}
.checkbox input[type=checkbox]:checked ~ .check,
.checkbox-default input[type=checkbox]:checked ~ .check {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec;
}
@-webkit-keyframes checkbox-on {
0% { 0% {
top: -3px; 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;
left: 17px; }
width: 10px; 50% {
height: 21px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
border-color: #0f9d58; }
border-left-color: transparent; 100% {
border-top-color: transparent; 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-transform: rotate(45deg); }
transform: rotate(45deg); }
@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;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
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-keyframes checkbox-off {
0% {
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, 0 0 0 0 inset;
}
25% {
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, 0 0 0 0 inset;
} }
50% { 50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
border-color: #0f9d58; margin-top: -4px;
border-left-color: transparent; margin-left: 6px;
border-top-color: transparent; width: 0px;
height: 0px;
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, 0 0 0 0 inset;
} }
51% { 51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
height: 20px;
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,
0px 0px 0 10px inset;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
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,
0px 0px 0 0px inset;
} }
} }
@keyframes uncheck { @keyframes checkbox-off {
0% { 0% {
top: -3px; 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, 0 0 0 0 inset;
left: 17px; }
width: 10px; 25% {
height: 21px; 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, 0 0 0 0 inset;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
} }
50% { 50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
border-color: #0f9d58; margin-top: -4px;
border-left-color: transparent; margin-left: 6px;
border-top-color: transparent; width: 0px;
height: 0px;
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, 0 0 0 0 inset;
} }
51% { 51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
height: 20px;
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,
0px 0px 0 10px inset;
} }
}
@-webkit-keyframes check {
100% { 100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
} height: 20px;
} box-shadow: 0 0 0 0,
@keyframes check { 0 0 0 0,
100% { 0 0 0 0,
top: -3px; 0 0 0 0,
left: 17px; 0 0 0 0,
width: 10px; 0 0 0 0,
height: 21px; 0px 0px 0 0px inset;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
} }
} }
.form-horizontal .radio { .form-horizontal .radio {
@ -2870,6 +2862,17 @@ body .jumbotron-material-lightgrey,
.radio input[type=radio][disabled] ~ .check { .radio input[type=radio][disabled] ~ .check {
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
} }
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -2881,6 +2884,17 @@ body .jumbotron-material-lightgrey,
opacity: 0; opacity: 0;
} }
} }
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;

File diff suppressed because one or more lines are too long

View File

@ -1,13 +1,11 @@
// main: material.less
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 15px; padding-top: 20px;
} }
.checkbox { .checkbox {
transform: rotate(0deg);
label { label {
padding-left: 10px;
cursor: pointer; cursor: pointer;
padding-left: 45px;
position: relative; position: relative;
span { span {
display: block; display: block;
@ -15,6 +13,17 @@
left: 0px; left: 0px;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.check {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
position: relative;
top: 5px;
left: -3px;
}
.check:after { .check:after {
display: block; display: block;
position: absolute; position: absolute;
@ -30,38 +39,46 @@
margin: 0; margin: 0;
} }
.check:before { .check:before {
display: block; position: absolute;
content: ""; content: "";
border: 2px solid @lightbg-text; transform: rotate(45deg);
height: 20px; display: block;
width: 20px; margin-top: -4px;
transition-delay: 0.2s; 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,
0px 0px 0 0px inset;
animation: checkbox-off 0.3s linear forwards;
} }
} }
// Variations
.variations(~" .check", color, @success);
// Hide native checkbox // Hide native checkbox
input[type=checkbox] { opacity: 0; } input[type=checkbox] { opacity: 0; }
input[type=checkbox] ~ .check:before {
position: absolute;
top: 2px;
left: 11px;
width: 18px;
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
animation: uncheck 300ms ease-out forwards;
}
input[type=checkbox]:focus ~ .check:after { input[type=checkbox]:focus ~ .check:after {
opacity: 0.2; opacity: 0.2;
} }
input[type=checkbox]:checked ~ .check {
}
input[type=checkbox]:checked ~ .check:before { input[type=checkbox]:checked ~ .check:before {
animation: check 300ms ease-out forwards; 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 0.3s linear forwards;
} }
// Ripple effect on click // Ripple effect on click
@ -89,103 +106,105 @@
} }
.variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success); .variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success);
.variations(~" input[type=checkbox]:checked ~ .check:before", color, #4caf50);
.variations(~" input[type=checkbox]:checked ~ .check", color, #4caf50);
} }
@keyframes uncheck {
@keyframes checkbox-on {
0% { 0% {
top: -3px; box-shadow:
left: 17px; 0 0 0 10px,
width: 10px; 10px -10px 0 10px,
height: 21px; 32px 0px 0 20px,
border-color: #0f9d58; 0px 32px 0 20px,
border-left-color: transparent; -5px 5px 0 10px,
border-top-color: transparent; 15px 2px 0 11px;
transform: rotate(45deg); }
50% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px 2px 0 11px;
}
100% {
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;
}
}
@keyframes checkbox-off {
0% {
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,
0 0 0 0 inset;
}
25% {
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,
0 0 0 0 inset;
} }
50% { 50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
transform: rotate(45deg); transform: rotate(45deg);
border-color: #0f9d58; margin-top: -4px;
border-left-color: transparent; margin-left: 6px;
border-top-color: transparent; width: 0px;
height: 0px;
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,
0 0 0 0 inset;
} }
51% { 51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
height: 20px;
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,
0px 0px 0 10px inset;
} }
}
@keyframes check {
100% { 100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
} height: 20px;
} box-shadow:
0 0 0 0,
@keyframes rippleOn { 0 0 0 0,
0% { 0 0 0 0,
opacity: 0; 0 0 0 0,
} 0 0 0 0,
50% { 0 0 0 0,
opacity: 0.2; 0px 0px 0 0px inset;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
} }
} }

191
less/_checkboxes_old.less Normal file
View File

@ -0,0 +1,191 @@
// main: material.less
.form-horizontal .checkbox {
padding-top: 15px;
}
.checkbox {
transform: rotate(0deg);
label {
cursor: pointer;
padding-left: 45px;
position: relative;
span {
display: block;
position: absolute;
left: 0px;
transition-duration: 0.2s;
}
.check:after {
display: block;
position: absolute;
content: "";
background-color: @lightbg-text;
left: -5px;
top: -15px;
height: 50px;
width: 50px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
}
.check:before {
display: block;
content: "";
border: 2px solid @lightbg-text;
height: 20px;
width: 20px;
transition-delay: 0.2s;
}
}
// Variations
.variations(~" .check", color, @success);
// Hide native checkbox
input[type=checkbox] { opacity: 0; }
input[type=checkbox] ~ .check:before {
position: absolute;
top: 2px;
left: 11px;
width: 18px;
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
animation: uncheck 300ms ease-out forwards;
}
input[type=checkbox]:focus ~ .check:after {
opacity: 0.2;
}
input[type=checkbox]:checked ~ .check:before {
animation: check 300ms ease-out forwards;
}
// Ripple effect on click
input[type=checkbox]:not(:checked) ~ .check:after {
animation: rippleOff 500ms linear forwards;
}
input[type=checkbox]:checked ~ .check:after {
animation: rippleOn 500ms linear forwards;
}
// Make animate quickly when not hover
&:not(:hover) input[type=checkbox] ~ .check {
&:before, &:after {
animation-duration: 1ms;
}
}
// Style for disabled inputs
input[type=checkbox][disabled]:not(:checked) ~ .check:before {
opacity: 0.5;
}
input[type=checkbox][disabled] ~ .check:after {
background-color: @lightbg-text;
transform: rotate(-45deg);
}
.variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success);
}
@keyframes uncheck {
0% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
transform: rotate(45deg);
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@keyframes check {
100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}

View File

@ -2230,16 +2230,11 @@ body .jumbotron-material-lightgrey,
font-size: 15px; font-size: 15px;
} }
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 15px; padding-top: 20px;
}
.checkbox {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} }
.checkbox label { .checkbox label {
padding-left: 10px;
cursor: pointer; cursor: pointer;
padding-left: 45px;
position: relative; position: relative;
} }
.checkbox label span { .checkbox label span {
@ -2249,6 +2244,17 @@ body .jumbotron-material-lightgrey,
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.checkbox label .check {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
position: relative;
top: 5px;
left: -3px;
}
.checkbox label .check:after { .checkbox label .check:after {
display: block; display: block;
position: absolute; position: absolute;
@ -2264,104 +2270,36 @@ body .jumbotron-material-lightgrey,
margin: 0; margin: 0;
} }
.checkbox label .check:before { .checkbox label .check:before {
display: block; position: absolute;
content: ""; content: "";
border: 2px solid rgba(0, 0, 0, 0.84); -webkit-transform: rotate(45deg);
height: 20px; -ms-transform: rotate(45deg);
width: 20px; transform: rotate(45deg);
-webkit-transition-delay: 0.2s; display: block;
transition-delay: 0.2s; margin-top: -4px;
} margin-left: 6px;
.checkbox .check, width: 0;
.checkbox-default .check { height: 0;
color: #0f9d58; box-shadow: 0 0 0 0,
} 0 0 0 0,
.checkbox-primary .check { 0 0 0 0,
color: #4285f4; 0 0 0 0,
} 0 0 0 0,
.checkbox-success .check { 0 0 0 0,
color: #0f9d58; 0px 0px 0 0px inset;
} -webkit-animation: checkbox-off 0.3s linear forwards;
.checkbox-info .check { animation: checkbox-off 0.3s linear forwards;
color: #03a9f4;
}
.checkbox-warning .check {
color: #ff5722;
}
.checkbox-danger .check {
color: #f44336;
}
.checkbox-material-red .check {
color: #f44336;
}
.checkbox-material-pink .check {
color: #e91e63;
}
.checkbox-material-purple .check {
color: #9c27b0;
}
.checkbox-material-deeppurple .check {
color: #673ab7;
}
.checkbox-material-indigo .check {
color: #3f51b5;
}
.checkbox-material-lightblue .check {
color: #03a9f4;
}
.checkbox-material-cyan .check {
color: #00bcd4;
}
.checkbox-material-teal .check {
color: #009688;
}
.checkbox-material-lightgreen .check {
color: #8bc34a;
}
.checkbox-material-lime .check {
color: #cddc39;
}
.checkbox-material-lightyellow .check {
color: #ffeb3b;
}
.checkbox-material-orange .check {
color: #ff9800;
}
.checkbox-material-deeporange .check {
color: #ff5722;
}
.checkbox-material-grey .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey .check {
color: #607d8b;
}
.checkbox-material-brown .check {
color: #795548;
}
.checkbox-material-lightgrey .check {
color: #ececec;
} }
.checkbox input[type=checkbox] { .checkbox input[type=checkbox] {
opacity: 0; opacity: 0;
} }
.checkbox input[type=checkbox] ~ .check:before {
position: absolute;
top: 2px;
left: 11px;
width: 18px;
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
-webkit-animation: uncheck 300ms ease-out forwards;
animation: uncheck 300ms ease-out forwards;
}
.checkbox input[type=checkbox]:focus ~ .check:after { .checkbox input[type=checkbox]:focus ~ .check:after {
opacity: 0.2; opacity: 0.2;
} }
.checkbox input[type=checkbox]:checked ~ .check:before { .checkbox input[type=checkbox]:checked ~ .check:before {
-webkit-animation: check 300ms ease-out forwards; 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: check 300ms ease-out forwards; -webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards;
} }
.checkbox input[type=checkbox]:not(:checked) ~ .check:after { .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms linear forwards; -webkit-animation: rippleOff 500ms linear forwards;
@ -2455,206 +2393,260 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after { .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
background-color: #ececec; background-color: #ececec;
} }
@-webkit-keyframes uncheck { .checkbox input[type=checkbox]:checked ~ .check:before,
.checkbox-default input[type=checkbox]:checked ~ .check:before {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check:before {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
color: #ececec;
}
.checkbox input[type=checkbox]:checked ~ .check,
.checkbox-default input[type=checkbox]:checked ~ .check {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec;
}
@-webkit-keyframes checkbox-on {
0% { 0% {
top: -3px; 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;
left: 17px; }
width: 10px; 50% {
height: 21px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
border-color: #0f9d58; }
border-left-color: transparent; 100% {
border-top-color: transparent; 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-transform: rotate(45deg); }
transform: rotate(45deg); }
@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;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
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-keyframes checkbox-off {
0% {
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, 0 0 0 0 inset;
}
25% {
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, 0 0 0 0 inset;
} }
50% { 50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
border-color: #0f9d58; margin-top: -4px;
border-left-color: transparent; margin-left: 6px;
border-top-color: transparent; width: 0px;
height: 0px;
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, 0 0 0 0 inset;
} }
51% { 51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
height: 20px;
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,
0px 0px 0 10px inset;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
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,
0px 0px 0 0px inset;
} }
} }
@keyframes uncheck { @keyframes checkbox-off {
0% { 0% {
top: -3px; 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, 0 0 0 0 inset;
left: 17px; }
width: 10px; 25% {
height: 21px; 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, 0 0 0 0 inset;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
} }
50% { 50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
border-color: #0f9d58; margin-top: -4px;
border-left-color: transparent; margin-left: 6px;
border-top-color: transparent; width: 0px;
height: 0px;
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, 0 0 0 0 inset;
} }
51% { 51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
height: 20px;
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,
0px 0px 0 10px inset;
} }
}
@-webkit-keyframes check {
100% { 100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
} height: 20px;
} box-shadow: 0 0 0 0,
@keyframes check { 0 0 0 0,
100% { 0 0 0 0,
top: -3px; 0 0 0 0,
left: 17px; 0 0 0 0,
width: 10px; 0 0 0 0,
height: 21px; 0px 0px 0 0px inset;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
} }
} }
.form-horizontal .radio { .form-horizontal .radio {
@ -2871,6 +2863,17 @@ body .jumbotron-material-lightgrey,
.radio input[type=radio][disabled] ~ .check { .radio input[type=radio][disabled] ~ .check {
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
} }
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -2882,6 +2885,17 @@ body .jumbotron-material-lightgrey,
opacity: 0; opacity: 0;
} }
} }
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;

File diff suppressed because one or more lines are too long

View File

@ -2229,16 +2229,11 @@ body .jumbotron-material-lightgrey,
font-size: 15px; font-size: 15px;
} }
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 15px; padding-top: 20px;
}
.checkbox {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} }
.checkbox label { .checkbox label {
padding-left: 10px;
cursor: pointer; cursor: pointer;
padding-left: 45px;
position: relative; position: relative;
} }
.checkbox label span { .checkbox label span {
@ -2248,6 +2243,17 @@ body .jumbotron-material-lightgrey,
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.checkbox label .check {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
position: relative;
top: 5px;
left: -3px;
}
.checkbox label .check:after { .checkbox label .check:after {
display: block; display: block;
position: absolute; position: absolute;
@ -2263,104 +2269,36 @@ body .jumbotron-material-lightgrey,
margin: 0; margin: 0;
} }
.checkbox label .check:before { .checkbox label .check:before {
display: block; position: absolute;
content: ""; content: "";
border: 2px solid rgba(0, 0, 0, 0.84); -webkit-transform: rotate(45deg);
height: 20px; -ms-transform: rotate(45deg);
width: 20px; transform: rotate(45deg);
-webkit-transition-delay: 0.2s; display: block;
transition-delay: 0.2s; margin-top: -4px;
} margin-left: 6px;
.checkbox .check, width: 0;
.checkbox-default .check { height: 0;
color: #0f9d58; box-shadow: 0 0 0 0,
} 0 0 0 0,
.checkbox-primary .check { 0 0 0 0,
color: #4285f4; 0 0 0 0,
} 0 0 0 0,
.checkbox-success .check { 0 0 0 0,
color: #0f9d58; 0px 0px 0 0px inset;
} -webkit-animation: checkbox-off 0.3s linear forwards;
.checkbox-info .check { animation: checkbox-off 0.3s linear forwards;
color: #03a9f4;
}
.checkbox-warning .check {
color: #ff5722;
}
.checkbox-danger .check {
color: #f44336;
}
.checkbox-material-red .check {
color: #f44336;
}
.checkbox-material-pink .check {
color: #e91e63;
}
.checkbox-material-purple .check {
color: #9c27b0;
}
.checkbox-material-deeppurple .check {
color: #673ab7;
}
.checkbox-material-indigo .check {
color: #3f51b5;
}
.checkbox-material-lightblue .check {
color: #03a9f4;
}
.checkbox-material-cyan .check {
color: #00bcd4;
}
.checkbox-material-teal .check {
color: #009688;
}
.checkbox-material-lightgreen .check {
color: #8bc34a;
}
.checkbox-material-lime .check {
color: #cddc39;
}
.checkbox-material-lightyellow .check {
color: #ffeb3b;
}
.checkbox-material-orange .check {
color: #ff9800;
}
.checkbox-material-deeporange .check {
color: #ff5722;
}
.checkbox-material-grey .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey .check {
color: #607d8b;
}
.checkbox-material-brown .check {
color: #795548;
}
.checkbox-material-lightgrey .check {
color: #ececec;
} }
.checkbox input[type=checkbox] { .checkbox input[type=checkbox] {
opacity: 0; opacity: 0;
} }
.checkbox input[type=checkbox] ~ .check:before {
position: absolute;
top: 2px;
left: 11px;
width: 18px;
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
-webkit-animation: uncheck 300ms ease-out forwards;
animation: uncheck 300ms ease-out forwards;
}
.checkbox input[type=checkbox]:focus ~ .check:after { .checkbox input[type=checkbox]:focus ~ .check:after {
opacity: 0.2; opacity: 0.2;
} }
.checkbox input[type=checkbox]:checked ~ .check:before { .checkbox input[type=checkbox]:checked ~ .check:before {
-webkit-animation: check 300ms ease-out forwards; 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: check 300ms ease-out forwards; -webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards;
} }
.checkbox input[type=checkbox]:not(:checked) ~ .check:after { .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms linear forwards; -webkit-animation: rippleOff 500ms linear forwards;
@ -2454,206 +2392,260 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after { .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
background-color: #ececec; background-color: #ececec;
} }
@-webkit-keyframes uncheck { .checkbox input[type=checkbox]:checked ~ .check:before,
.checkbox-default input[type=checkbox]:checked ~ .check:before {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check:before {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
color: #ececec;
}
.checkbox input[type=checkbox]:checked ~ .check,
.checkbox-default input[type=checkbox]:checked ~ .check {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec;
}
@-webkit-keyframes checkbox-on {
0% { 0% {
top: -3px; 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;
left: 17px; }
width: 10px; 50% {
height: 21px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
border-color: #0f9d58; }
border-left-color: transparent; 100% {
border-top-color: transparent; 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-transform: rotate(45deg); }
transform: rotate(45deg); }
@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;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
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-keyframes checkbox-off {
0% {
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, 0 0 0 0 inset;
}
25% {
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, 0 0 0 0 inset;
} }
50% { 50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
border-color: #0f9d58; margin-top: -4px;
border-left-color: transparent; margin-left: 6px;
border-top-color: transparent; width: 0px;
height: 0px;
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, 0 0 0 0 inset;
} }
51% { 51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
height: 20px;
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,
0px 0px 0 10px inset;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
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,
0px 0px 0 0px inset;
} }
} }
@keyframes uncheck { @keyframes checkbox-off {
0% { 0% {
top: -3px; 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, 0 0 0 0 inset;
left: 17px; }
width: 10px; 25% {
height: 21px; 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, 0 0 0 0 inset;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
} }
50% { 50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
border-color: #0f9d58; margin-top: -4px;
border-left-color: transparent; margin-left: 6px;
border-top-color: transparent; width: 0px;
height: 0px;
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, 0 0 0 0 inset;
} }
51% { 51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
height: 20px;
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,
0px 0px 0 10px inset;
} }
}
@-webkit-keyframes check {
100% { 100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
border-color: #5a5a5a; margin-top: -2px;
border-left-color: #5a5a5a; margin-left: -2px;
border-top-color: #5a5a5a; width: 20px;
} height: 20px;
} box-shadow: 0 0 0 0,
@keyframes check { 0 0 0 0,
100% { 0 0 0 0,
top: -3px; 0 0 0 0,
left: 17px; 0 0 0 0,
width: 10px; 0 0 0 0,
height: 21px; 0px 0px 0 0px inset;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
} }
} }
.form-horizontal .radio { .form-horizontal .radio {
@ -2870,6 +2862,17 @@ body .jumbotron-material-lightgrey,
.radio input[type=radio][disabled] ~ .check { .radio input[type=radio][disabled] ~ .check {
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
} }
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -2881,6 +2884,17 @@ body .jumbotron-material-lightgrey,
opacity: 0; opacity: 0;
} }
} }
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;

File diff suppressed because one or more lines are too long