Skip to content

Commit e4ad7d7

Browse files
author
FezVrasta
committed
minor fix on checkboxes animation
1 parent 8767b54 commit e4ad7d7

3 files changed

Lines changed: 167 additions & 1 deletion

File tree

‎css-compiled/material-wfont.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1001,6 +1001,86 @@ body .jumbotron-material-lightgrey,
10011001
border-top-color: #5a5a5a;
10021002
}
10031003
}
1004+
@-ms-keyframes uncheck {
1005+
0% {
1006+
top: -3px;
1007+
left: 17px;
1008+
width: 10px;
1009+
height: 21px;
1010+
border-color: #0f9d58;
1011+
border-left-color: transparent;
1012+
border-top-color: transparent;
1013+
-ms-transform: rotate(45deg);
1014+
transform: rotate(45deg);
1015+
}
1016+
50% {
1017+
top: 14px;
1018+
left: 17px;
1019+
width: 4px;
1020+
height: 4px;
1021+
-ms-transform: rotate(45deg);
1022+
transform: rotate(45deg);
1023+
border-color: #0f9d58;
1024+
border-left-color: transparent;
1025+
border-top-color: transparent;
1026+
}
1027+
51% {
1028+
border-color: #5a5a5a;
1029+
border-left-color: #5a5a5a;
1030+
border-top-color: #5a5a5a;
1031+
}
1032+
100% {
1033+
top: 1px;
1034+
left: 12px;
1035+
width: 18px;
1036+
height: 18px;
1037+
-ms-transform: rotate(0deg);
1038+
transform: rotate(0deg);
1039+
border-color: #5a5a5a;
1040+
border-left-color: #5a5a5a;
1041+
border-top-color: #5a5a5a;
1042+
}
1043+
}
1044+
@keyframes uncheck {
1045+
0% {
1046+
top: -3px;
1047+
left: 17px;
1048+
width: 10px;
1049+
height: 21px;
1050+
border-color: #0f9d58;
1051+
border-left-color: transparent;
1052+
border-top-color: transparent;
1053+
-webkit-transform: rotate(45deg);
1054+
transform: rotate(45deg);
1055+
}
1056+
50% {
1057+
top: 14px;
1058+
left: 17px;
1059+
width: 4px;
1060+
height: 4px;
1061+
-webkit-transform: rotate(45deg);
1062+
transform: rotate(45deg);
1063+
border-color: #0f9d58;
1064+
border-left-color: transparent;
1065+
border-top-color: transparent;
1066+
}
1067+
51% {
1068+
border-color: #5a5a5a;
1069+
border-left-color: #5a5a5a;
1070+
border-top-color: #5a5a5a;
1071+
}
1072+
100% {
1073+
top: 1px;
1074+
left: 12px;
1075+
width: 18px;
1076+
height: 18px;
1077+
-webkit-transform: rotate(0deg);
1078+
transform: rotate(0deg);
1079+
border-color: #5a5a5a;
1080+
border-left-color: #5a5a5a;
1081+
border-top-color: #5a5a5a;
1082+
}
1083+
}
10041084
@-webkit-keyframes check {
10051085
100% {
10061086
top: -3px;

‎css-compiled/material.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1000,6 +1000,86 @@ body .jumbotron-material-lightgrey,
10001000
border-top-color: #5a5a5a;
10011001
}
10021002
}
1003+
@-ms-keyframes uncheck {
1004+
0% {
1005+
top: -3px;
1006+
left: 17px;
1007+
width: 10px;
1008+
height: 21px;
1009+
border-color: #0f9d58;
1010+
border-left-color: transparent;
1011+
border-top-color: transparent;
1012+
-ms-transform: rotate(45deg);
1013+
transform: rotate(45deg);
1014+
}
1015+
50% {
1016+
top: 14px;
1017+
left: 17px;
1018+
width: 4px;
1019+
height: 4px;
1020+
-ms-transform: rotate(45deg);
1021+
transform: rotate(45deg);
1022+
border-color: #0f9d58;
1023+
border-left-color: transparent;
1024+
border-top-color: transparent;
1025+
}
1026+
51% {
1027+
border-color: #5a5a5a;
1028+
border-left-color: #5a5a5a;
1029+
border-top-color: #5a5a5a;
1030+
}
1031+
100% {
1032+
top: 1px;
1033+
left: 12px;
1034+
width: 18px;
1035+
height: 18px;
1036+
-ms-transform: rotate(0deg);
1037+
transform: rotate(0deg);
1038+
border-color: #5a5a5a;
1039+
border-left-color: #5a5a5a;
1040+
border-top-color: #5a5a5a;
1041+
}
1042+
}
1043+
@keyframes uncheck {
1044+
0% {
1045+
top: -3px;
1046+
left: 17px;
1047+
width: 10px;
1048+
height: 21px;
1049+
border-color: #0f9d58;
1050+
border-left-color: transparent;
1051+
border-top-color: transparent;
1052+
-webkit-transform: rotate(45deg);
1053+
transform: rotate(45deg);
1054+
}
1055+
50% {
1056+
top: 14px;
1057+
left: 17px;
1058+
width: 4px;
1059+
height: 4px;
1060+
-webkit-transform: rotate(45deg);
1061+
transform: rotate(45deg);
1062+
border-color: #0f9d58;
1063+
border-left-color: transparent;
1064+
border-top-color: transparent;
1065+
}
1066+
51% {
1067+
border-color: #5a5a5a;
1068+
border-left-color: #5a5a5a;
1069+
border-top-color: #5a5a5a;
1070+
}
1071+
100% {
1072+
top: 1px;
1073+
left: 12px;
1074+
width: 18px;
1075+
height: 18px;
1076+
-webkit-transform: rotate(0deg);
1077+
transform: rotate(0deg);
1078+
border-color: #5a5a5a;
1079+
border-left-color: #5a5a5a;
1080+
border-top-color: #5a5a5a;
1081+
}
1082+
}
10031083
@-webkit-keyframes check {
10041084
100% {
10051085
top: -3px;

‎less/checkboxes.less‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
}
8686

8787

88-
@-webkit-keyframes uncheck {
88+
.keyframe-uncheck() {
8989
0% {
9090
top: -3px;
9191
left: 17px;
@@ -159,6 +159,12 @@
159159
border-top-color: #5a5a5a;
160160
}
161161
}
162+
@-webkit-keyframes uncheck {.keyframe-uncheck()}
163+
@-moz-keyframes uncheck {.keyframe-uncheck()}
164+
@-ms-keyframes uncheck {.keyframe-uncheck()}
165+
@-o-keyframes uncheck {.keyframe-uncheck()}
166+
@keyframes uncheck {.keyframe-uncheck()}
167+
162168
@-webkit-keyframes check {.keyframe-check()}
163169
@-moz-keyframes check {.keyframe-check()}
164170
@-ms-keyframes check {.keyframe-check()}

0 commit comments

Comments
 (0)