Fix validator animation style

This commit is contained in:
afc163 2015-11-18 15:41:30 +08:00
parent 0e13be7500
commit 3bc76922d7
2 changed files with 33 additions and 7 deletions

View File

@ -268,14 +268,22 @@ form {
.animation(zoomIn .3s @ease-out-back); .animation(zoomIn .3s @ease-out-back);
} }
} }
.has-error{
.has-success {
&.has-feedback:after { &.has-feedback:after {
animation-name: zoomIn2 !important; animation-name: diffZoomIn1 !important;
} }
} }
.has-warning{
.has-error {
&.has-feedback:after { &.has-feedback:after {
animation-name: zoomIn3 !important; animation-name: diffZoomIn2 !important;
}
}
.has-warning {
&.has-feedback:after {
animation-name: diffZoomIn3 !important;
} }
} }
@ -320,6 +328,9 @@ form {
.@{input-number-prefix-cls} { .@{input-number-prefix-cls} {
border-color: @warning-color; border-color: @warning-color;
box-shadow: 0 0 0 2px tint(@warning-color, 80%); box-shadow: 0 0 0 2px tint(@warning-color, 80%);
&:not([disabled]):hover {
border-color: @warning-color;
}
} }
} }
@ -352,6 +363,9 @@ form {
.@{input-number-prefix-cls} { .@{input-number-prefix-cls} {
border-color: @error-color; border-color: @error-color;
box-shadow: 0 0 0 2px tint(@error-color, 80%); box-shadow: 0 0 0 2px tint(@error-color, 80%);
&:not([disabled]):hover {
border-color: @error-color;
}
} }
} }
@ -363,7 +377,9 @@ form {
} }
} }
@keyframes zoomIn2 { // need there different zoom animation
// otherwise won't trigger anim
@keyframes diffZoomIn1 {
0%{ 0%{
transform: scale(0); transform: scale(0);
} }
@ -371,7 +387,17 @@ form {
transform: scale(1); transform: scale(1);
} }
} }
@keyframes zoomIn3 {
@keyframes diffZoomIn2 {
0%{
transform: scale(0);
}
100%{
transform: scale(1);
}
}
@keyframes diffZoomIn3 {
0%{ 0%{
transform: scale(0); transform: scale(0);
} }

View File

@ -6,7 +6,7 @@
.@{css-prefix}input { .@{css-prefix}input {
border-color: @border-color; border-color: @border-color;
box-shadow: 0 0 0 2px tint(@border-color, 80%); box-shadow: 0 0 0 2px tint(@border-color, 80%);
&:not([disabled]):hover { &:not([disabled]):hover {
border-color: @border-color; border-color: @border-color;
} }