Skip to content

Commit 50a7926

Browse files
author
Federico Zivolo
committed
1 parent 484b69c commit 50a7926

4 files changed

Lines changed: 772 additions & 124 deletions

File tree

‎css-compiled/material-wfont.css‎

Lines changed: 200 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -800,6 +800,15 @@ h6,
800800
100% {
801801
opacity: 0;
802802
}
803+
0% {
804+
opacity: 0;
805+
}
806+
50% {
807+
opacity: 0.2;
808+
}
809+
100% {
810+
opacity: 0;
811+
}
803812
}
804813
@-ms-keyframes rippleOn {
805814
0% {
@@ -811,6 +820,15 @@ h6,
811820
100% {
812821
opacity: 0;
813822
}
823+
0% {
824+
opacity: 0;
825+
}
826+
50% {
827+
opacity: 0.2;
828+
}
829+
100% {
830+
opacity: 0;
831+
}
814832
}
815833
@keyframes rippleOn {
816834
0% {
@@ -822,6 +840,15 @@ h6,
822840
100% {
823841
opacity: 0;
824842
}
843+
0% {
844+
opacity: 0;
845+
}
846+
50% {
847+
opacity: 0.2;
848+
}
849+
100% {
850+
opacity: 0;
851+
}
825852
}
826853
@-webkit-keyframes rippleOff {
827854
0% {
@@ -833,6 +860,15 @@ h6,
833860
100% {
834861
opacity: 0;
835862
}
863+
0% {
864+
opacity: 0;
865+
}
866+
50% {
867+
opacity: 0.2;
868+
}
869+
100% {
870+
opacity: 0;
871+
}
836872
}
837873
@-ms-keyframes rippleOn {
838874
0% {
@@ -844,6 +880,15 @@ h6,
844880
100% {
845881
opacity: 0;
846882
}
883+
0% {
884+
opacity: 0;
885+
}
886+
50% {
887+
opacity: 0.2;
888+
}
889+
100% {
890+
opacity: 0;
891+
}
847892
}
848893
@keyframes rippleOff {
849894
0% {
@@ -855,6 +900,15 @@ h6,
855900
100% {
856901
opacity: 0;
857902
}
903+
0% {
904+
opacity: 0;
905+
}
906+
50% {
907+
opacity: 0.2;
908+
}
909+
100% {
910+
opacity: 0;
911+
}
858912
}
859913
.form-horizontal .radio {
860914
margin-bottom: 10px;
@@ -872,26 +926,6 @@ h6,
872926
-webkit-transition-duration: 0.2s;
873927
transition-duration: 0.2s;
874928
}
875-
.radio label .ripple {
876-
background-color: rgba(0, 0, 0, 0.84);
877-
left: 0;
878-
top: -8px;
879-
height: 34px;
880-
width: 34px;
881-
border-radius: 100%;
882-
-webkit-transform: scale(0);
883-
transform: scale(0);
884-
-webkit-transition: -webkit-transform .1s, opacity 0.2s 0.4s;
885-
transition: transform .1s, opacity 0.2s 0.4s;
886-
z-index: 1;
887-
opacity: 0.2;
888-
margin: 0;
889-
}
890-
.radio label .ripple.animate {
891-
-webkit-transform: scale(1);
892-
transform: scale(1);
893-
opacity: 0;
894-
}
895929
.radio label .circle {
896930
border: 2px solid rgba(0, 0, 0, 0.84);
897931
height: 15px;
@@ -906,6 +940,32 @@ h6,
906940
-webkit-transform: scale(0);
907941
transform: scale(0);
908942
}
943+
.radio label .check:after {
944+
display: block;
945+
position: absolute;
946+
content: "";
947+
background-color: rgba(0, 0, 0, 0.84);
948+
left: -18px;
949+
top: -18px;
950+
height: 50px;
951+
width: 50px;
952+
border-radius: 100%;
953+
z-index: 1;
954+
opacity: 0;
955+
margin: 0;
956+
-webkit-transform: scale(1.5);
957+
transform: scale(1.5);
958+
}
959+
.radio label input[type=radio]:not(:checked) ~ .check:after {
960+
-webkit-animation: rippleOff 500ms;
961+
-ms-animation: rippleOff 500ms;
962+
animation: rippleOff 500ms;
963+
}
964+
.radio label input[type=radio]:checked ~ .check:after {
965+
-webkit-animation: rippleOn 500ms;
966+
-ms-animation: rippleOn 500ms;
967+
animation: rippleOn 500ms;
968+
}
909969
.radio input[type=radio]:checked ~ .check,
910970
.radio-default input[type=radio]:checked ~ .check {
911971
background-color: rgba(0, 0, 0, 0.84);
@@ -1063,6 +1123,126 @@ h6,
10631123
.radio input[type=radio][disabled] ~ .check {
10641124
background-color: rgba(0, 0, 0, 0.84);
10651125
}
1126+
@-webkit-keyframes rippleOn {
1127+
0% {
1128+
opacity: 0;
1129+
}
1130+
50% {
1131+
opacity: 0.2;
1132+
}
1133+
100% {
1134+
opacity: 0;
1135+
}
1136+
0% {
1137+
opacity: 0;
1138+
}
1139+
50% {
1140+
opacity: 0.2;
1141+
}
1142+
100% {
1143+
opacity: 0;
1144+
}
1145+
}
1146+
@-ms-keyframes rippleOn {
1147+
0% {
1148+
opacity: 0;
1149+
}
1150+
50% {
1151+
opacity: 0.2;
1152+
}
1153+
100% {
1154+
opacity: 0;
1155+
}
1156+
0% {
1157+
opacity: 0;
1158+
}
1159+
50% {
1160+
opacity: 0.2;
1161+
}
1162+
100% {
1163+
opacity: 0;
1164+
}
1165+
}
1166+
@keyframes rippleOn {
1167+
0% {
1168+
opacity: 0;
1169+
}
1170+
50% {
1171+
opacity: 0.2;
1172+
}
1173+
100% {
1174+
opacity: 0;
1175+
}
1176+
0% {
1177+
opacity: 0;
1178+
}
1179+
50% {
1180+
opacity: 0.2;
1181+
}
1182+
100% {
1183+
opacity: 0;
1184+
}
1185+
}
1186+
@-webkit-keyframes rippleOff {
1187+
0% {
1188+
opacity: 0;
1189+
}
1190+
50% {
1191+
opacity: 0.2;
1192+
}
1193+
100% {
1194+
opacity: 0;
1195+
}
1196+
0% {
1197+
opacity: 0;
1198+
}
1199+
50% {
1200+
opacity: 0.2;
1201+
}
1202+
100% {
1203+
opacity: 0;
1204+
}
1205+
}
1206+
@-ms-keyframes rippleOn {
1207+
0% {
1208+
opacity: 0;
1209+
}
1210+
50% {
1211+
opacity: 0.2;
1212+
}
1213+
100% {
1214+
opacity: 0;
1215+
}
1216+
0% {
1217+
opacity: 0;
1218+
}
1219+
50% {
1220+
opacity: 0.2;
1221+
}
1222+
100% {
1223+
opacity: 0;
1224+
}
1225+
}
1226+
@keyframes rippleOff {
1227+
0% {
1228+
opacity: 0;
1229+
}
1230+
50% {
1231+
opacity: 0.2;
1232+
}
1233+
100% {
1234+
opacity: 0;
1235+
}
1236+
0% {
1237+
opacity: 0;
1238+
}
1239+
50% {
1240+
opacity: 0.2;
1241+
}
1242+
100% {
1243+
opacity: 0;
1244+
}
1245+
}
10661246
fieldset[disabled] .form-control,
10671247
.form-control-wrapper .form-control,
10681248
.form-control,

0 commit comments

Comments
 (0)