diff --git a/style/mixins/input.less b/style/mixins/input.less index d4bd78826d..7c85bcabda 100644 --- a/style/mixins/input.less +++ b/style/mixins/input.less @@ -11,6 +11,20 @@ font-size: @input-font-size-sm; } +// input status +// == when focus or actived +.active(@color: @input-hover-border-color) { + border-color: @color; + outline: 0; + box-shadow: 0 0 3px tint(@color, 20%); +} + +// == when hoverd +.hover(@color: @input-hover-border-color ) { + border-color: @color; +} + + // Basic style for input .input() { position: relative; @@ -30,13 +44,11 @@ .transition(~"border .3s @{ease-in-out}, background .3s @{ease-in-out}, box-shadow .3s @{ease-in-out}"); &:hover { - border-color: @input-hover-border-color; + .hover(); } &:focus { - border-color: @input-focus-border-color; - outline: 0; - box-shadow: 0 0 3px tint(@input-focus-border-color, 20%); + .active(); } &[disabled], @@ -44,7 +56,7 @@ background-color: @input-disabled-bg; opacity: 1; &:hover { - border-color: @input-border-color; + .hover(@input-border-color); } }