@inputNumberPrefixCls: ant-input-number; @import "../mixins/iconfont"; .@{inputNumberPrefixCls} { margin: 0; padding: 0; line-height: 26px; font-size: 12px; height: 26px; display: inline-block; vertical-align: middle; border: 1px solid #D9D9D9; border-radius: 5px; overflow: hidden; &-handler { text-align: center; line-height: 12px; height: 12px; overflow: hidden; } &-handler-up-inner, &-handler-down-inner { color: #666666; user-select: none; -webkit-user-select: none; } &-handler-up-inner { margin-left: -1px; } &:hover { border-color: @primary-color; .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap { border-color: @primary-color; } } &-disabled:hover { border-color: #d9d9d9; .@{inputNumberPrefixCls}-handler-up, .@{inputNumberPrefixCls}-handler-wrap { border-color: #d9d9d9; } } &-input-wrap { overflow: hidden; height: 26px; } &-input { width: 100%; text-align: center; outline: 0; -moz-appearance: textfield; line-height: 26px; height: 22px; transition: all 0.3s ease; color: #666666; border: 0; border-radius: 5px; padding: 0; } &-handler-wrap { float: right; border-left: 1px solid #D9D9D9; width: 20px; height: 26px; margin-top: -1px; } &-handler-up { padding-top: 1px; border-bottom: 1px solid #D9D9D9; cursor: pointer; &-inner { .iconfont-mixin(); transform: rotate(270deg) scale(0.8); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); top:-2px; &:before { content: "\e611"; } } } &-handler-down { cursor: pointer; &-inner { .iconfont-mixin(); transform: rotate(90deg) scale(0.8); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); &:before { content: "\e611"; } } } .handler-disabled() { opacity: 0.72; cursor: default; &:hover { cursor: default; color: #999; border-color: #d9d9d9; } } &-handler-down-disabled, &-handler-up-disabled { .handler-disabled(); } &-disabled { .@{inputNumberPrefixCls}-input { opacity: 0.72; cursor: not-allowed; background-color: #f3f3f3; } .@{inputNumberPrefixCls}-handler { .handler-disabled(); } } }