mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-09-21 19:39:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

some tweaks to animations

Browse Source
This commit is contained in:
FezVrasta 2014-09-07 19:54:36 +02:00
parent d5fc6e2bcc
commit bce103ae6f
3 changed files with 98 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
css-compiled/material.css
View File

@ -682,40 +682,6 @@ h6,
border-top-color: #5a5a5a; border-top-color: #5a5a5a;
} }
} }
.keyframe-check 100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
.keyframe-check 51% {
border-left: transparent;
border-top-color: transparent;
}
.keyframe-check 50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
.keyframe-check 0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
@-webkit-keyframes check { @-webkit-keyframes check {
100% { 100% {
top: -3px; top: -3px;
@ -896,15 +862,6 @@ h6,
border-top-color: #5a5a5a; border-top-color: #5a5a5a;
} }
} }
.ripple 0% {
opacity: 0;
}
.ripple 50% {
opacity: 0.2;
}
.ripple 100% {
opacity: 0;
}
@-webkit-keyframes rippleOn { @-webkit-keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -1298,6 +1255,7 @@ h6,
left: 0; left: 0;
pointer-events: none; pointer-events: none;
opacity: 0.9; opacity: 0.9;
transform-origin: left;
} }
.form-control-wrapper .input-lg ~ .material-input:after { .form-control-wrapper .input-lg ~ .material-input:after {
height: 26px; height: 26px;
@ -1313,6 +1271,7 @@ h6,
animation: input-highlight 0.3s ease; animation: input-highlight 0.3s ease;
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
opacity: 0;
} }
.form-control-wrapper select ~ .material-input:before { .form-control-wrapper select ~ .material-input:before {
bottom: 1px; bottom: 1px;
@ -1656,6 +1615,76 @@ select.form-control:focus {
box-shadow: none; box-shadow: none;
border-color: #757575; border-color: #757575;
} }
@-webkit-keyframes input-highlight {
0% {
left: 20%;
transform: scaleX(20%);
}
99% {
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes input-highlight {
0% {
left: 20%;
transform: scaleX(20%);
}
99% {
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@-ms-keyframes input-highlight {
0% {
left: 20%;
transform: scaleX(20%);
}
99% {
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes input-highlight {
0% {
left: 20%;
transform: scaleX(20%);
}
99% {
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes input-highlight {
0% {
left: 20%;
transform: scaleX(20%);
}
99% {
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
legend { legend {
border-bottom: 0; border-bottom: 0;
} }

4
less/checkboxes.less
View File

@ -112,7 +112,7 @@
} }
} }
.keyframe-check { .keyframe-check() {
100% { 100% {
top: -3px; top: -3px;
left: 17px; left: 17px;
@ -154,7 +154,7 @@
@-o-keyframes check {.keyframe-check()} @-o-keyframes check {.keyframe-check()}
@keyframes check {.keyframe-check()} @keyframes check {.keyframe-check()}
.ripple{ .ripple() {
0% { 0% {
opacity: 0; opacity: 0;
} }

24
less/inputs.less
View File

@ -80,6 +80,7 @@
left: 0; left: 0;
pointer-events: none; pointer-events: none;
opacity: 0.9; opacity: 0.9;
transform-origin: left;
} }
.input-lg ~ .material-input:after { .input-lg ~ .material-input:after {
height: 26px; height: 26px;
@ -95,6 +96,7 @@
animation: input-highlight 0.3s ease; animation: input-highlight 0.3s ease;
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
opacity: 0;
} }
select ~ .material-input:before { select ~ .material-input:before {
@ -173,3 +175,25 @@ select.form-control {
border-color: #757575; border-color: #757575;
} }
} }
.keyframe-input-highlight() {
0% {
left: 20%;
transform: scaleX(20%);
}
99% {
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes input-highlight {.keyframe-input-highlight()}
@-moz-keyframes input-highlight {.keyframe-input-highlight()}
@-ms-keyframes input-highlight {.keyframe-input-highlight()}
@-o-keyframes input-highlight {.keyframe-input-highlight()}
@keyframes input-highlight {.keyframe-input-highlight()}