2019-05-06 12:04:39 +08:00
|
|
|
@import '../../style/themes/index';
|
2018-12-07 20:02:01 +08:00
|
|
|
@import '../../style/mixins/index';
|
|
|
|
@import '../../input/style/mixin';
|
2021-10-30 22:25:12 +08:00
|
|
|
@import './affix';
|
2022-02-16 11:48:24 +08:00
|
|
|
@import './status';
|
2015-07-01 14:48:47 +08:00
|
|
|
|
2018-12-07 20:02:01 +08:00
|
|
|
@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
|
2020-01-03 19:00:01 +08:00
|
|
|
@form-item-prefix-cls: ~'@{ant-prefix}-form-item';
|
2015-07-01 14:48:47 +08:00
|
|
|
|
2015-08-20 16:55:42 +08:00
|
|
|
.@{input-number-prefix-cls} {
|
2020-12-22 11:08:12 +08:00
|
|
|
.reset-component();
|
|
|
|
.input();
|
2019-04-15 10:52:00 +08:00
|
|
|
|
2021-08-31 13:09:03 +08:00
|
|
|
//== Style for input-group: input with label, with button or dropdown...
|
|
|
|
&-group {
|
|
|
|
.reset-component();
|
|
|
|
.input-group(~'@{input-number-prefix-cls}');
|
2021-10-13 15:38:59 +08:00
|
|
|
|
2021-08-31 13:09:03 +08:00
|
|
|
&-wrapper {
|
|
|
|
display: inline-block;
|
|
|
|
text-align: start;
|
|
|
|
vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-02-15 10:48:07 +08:00
|
|
|
display: inline-block;
|
|
|
|
width: 90px;
|
2015-07-01 14:48:47 +08:00
|
|
|
margin: 0;
|
2016-09-19 16:16:13 +08:00
|
|
|
padding: 0;
|
2022-08-17 14:51:20 +08:00
|
|
|
border: @border-width-base @border-style-base @input-border-color;
|
|
|
|
border-radius: @control-border-radius;
|
2015-07-01 14:48:47 +08:00
|
|
|
|
|
|
|
&-handler {
|
2015-09-23 20:48:08 +08:00
|
|
|
position: relative;
|
2015-10-14 16:27:06 +08:00
|
|
|
display: block;
|
|
|
|
width: 100%;
|
2019-02-15 10:48:07 +08:00
|
|
|
height: 50%;
|
|
|
|
overflow: hidden;
|
|
|
|
color: @text-color-secondary;
|
2016-08-29 20:57:42 +08:00
|
|
|
font-weight: bold;
|
2019-02-15 10:48:07 +08:00
|
|
|
line-height: 0;
|
|
|
|
text-align: center;
|
2021-07-08 12:10:32 +08:00
|
|
|
border-left: @border-width-base @border-style-base @input-number-handler-border-color;
|
2019-02-15 10:48:07 +08:00
|
|
|
transition: all 0.1s linear;
|
2021-10-13 15:38:59 +08:00
|
|
|
|
2016-08-29 20:57:42 +08:00
|
|
|
&:active {
|
2018-12-04 13:11:31 +08:00
|
|
|
background: @input-number-handler-active-bg;
|
2015-09-23 20:48:08 +08:00
|
|
|
}
|
2021-10-13 15:38:59 +08:00
|
|
|
|
2015-07-20 20:03:45 +08:00
|
|
|
&:hover &-up-inner,
|
2015-07-20 19:25:34 +08:00
|
|
|
&:hover &-down-inner {
|
2019-08-29 10:29:58 +08:00
|
|
|
color: @input-number-handler-hover-bg;
|
2015-07-15 15:50:44 +08:00
|
|
|
}
|
2015-07-01 14:48:47 +08:00
|
|
|
}
|
|
|
|
|
2015-11-26 19:32:55 +08:00
|
|
|
&-handler-up-inner,
|
|
|
|
&-handler-down-inner {
|
2015-07-09 20:06:03 +08:00
|
|
|
.iconfont-mixin();
|
2019-04-15 10:52:00 +08:00
|
|
|
|
2015-07-09 20:06:03 +08:00
|
|
|
position: absolute;
|
2019-02-15 10:48:07 +08:00
|
|
|
right: 4px;
|
2015-07-09 20:06:03 +08:00
|
|
|
width: 12px;
|
|
|
|
height: 12px;
|
2016-11-08 20:45:56 +08:00
|
|
|
color: @text-color-secondary;
|
2019-02-15 10:48:07 +08:00
|
|
|
line-height: 12px;
|
|
|
|
transition: all 0.1s linear;
|
|
|
|
user-select: none;
|
2015-07-07 17:30:24 +08:00
|
|
|
}
|
|
|
|
|
2015-07-01 14:48:47 +08:00
|
|
|
&:hover {
|
2019-11-04 11:23:29 +08:00
|
|
|
.hover(@input-number-hover-border-color);
|
2020-01-03 19:00:01 +08:00
|
|
|
& + .@{form-item-prefix-cls}-children-icon {
|
|
|
|
opacity: 0;
|
|
|
|
transition: opacity 0.24s linear 0.24s;
|
|
|
|
}
|
2015-07-01 14:48:47 +08:00
|
|
|
}
|
|
|
|
|
2015-07-09 20:06:03 +08:00
|
|
|
&-focused {
|
|
|
|
.active();
|
|
|
|
}
|
2015-07-01 14:48:47 +08:00
|
|
|
|
2015-07-09 20:06:03 +08:00
|
|
|
&-disabled {
|
|
|
|
.disabled();
|
2017-11-29 21:00:16 +08:00
|
|
|
.@{input-number-prefix-cls}-input {
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
.@{input-number-prefix-cls}-handler-wrap {
|
|
|
|
display: none;
|
|
|
|
}
|
2015-07-01 14:48:47 +08:00
|
|
|
}
|
|
|
|
|
2020-08-04 10:42:08 +08:00
|
|
|
&-readonly {
|
|
|
|
.@{input-number-prefix-cls}-handler-wrap {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-07-01 14:48:47 +08:00
|
|
|
&-input {
|
|
|
|
width: 100%;
|
2017-02-15 11:47:22 +08:00
|
|
|
height: @input-height-base - 2px;
|
2019-02-15 10:48:07 +08:00
|
|
|
padding: 0 @control-padding-horizontal - 1px;
|
|
|
|
text-align: left;
|
2018-06-13 17:31:26 +08:00
|
|
|
background-color: transparent;
|
2015-07-01 14:48:47 +08:00
|
|
|
border: 0;
|
2022-08-17 14:51:20 +08:00
|
|
|
border-radius: @control-border-radius;
|
2019-02-15 10:48:07 +08:00
|
|
|
outline: 0;
|
|
|
|
transition: all 0.3s linear;
|
2021-10-22 13:35:36 +08:00
|
|
|
appearance: textfield !important;
|
2017-03-27 15:20:07 +08:00
|
|
|
.placeholder();
|
2019-06-03 13:44:27 +08:00
|
|
|
|
|
|
|
&[type='number']::-webkit-inner-spin-button,
|
|
|
|
&[type='number']::-webkit-outer-spin-button {
|
|
|
|
margin: 0;
|
2021-10-22 13:35:36 +08:00
|
|
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
2019-06-03 13:44:27 +08:00
|
|
|
-webkit-appearance: none;
|
2021-10-22 13:35:36 +08:00
|
|
|
appearance: none;
|
2019-06-03 13:44:27 +08:00
|
|
|
}
|
2015-07-01 14:48:47 +08:00
|
|
|
}
|
2015-08-20 16:55:42 +08:00
|
|
|
|
2015-08-10 15:39:50 +08:00
|
|
|
&-lg {
|
|
|
|
padding: 0;
|
2017-12-28 15:41:10 +08:00
|
|
|
font-size: @font-size-lg;
|
2015-08-08 17:59:57 +08:00
|
|
|
|
2015-08-10 15:39:50 +08:00
|
|
|
input {
|
2017-02-15 11:47:22 +08:00
|
|
|
height: @input-height-lg - 2px;
|
2015-08-08 17:59:57 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-08-10 15:39:50 +08:00
|
|
|
&-sm {
|
|
|
|
padding: 0;
|
2015-08-08 17:59:57 +08:00
|
|
|
|
2015-08-10 15:39:50 +08:00
|
|
|
input {
|
2017-02-15 11:47:22 +08:00
|
|
|
height: @input-height-sm - 2px;
|
2017-09-27 22:32:49 +08:00
|
|
|
padding: 0 @control-padding-horizontal-sm - 1px;
|
2015-08-08 17:59:57 +08:00
|
|
|
}
|
|
|
|
}
|
2015-07-01 14:48:47 +08:00
|
|
|
|
|
|
|
&-handler-wrap {
|
2016-03-02 18:48:37 +08:00
|
|
|
position: absolute;
|
2016-11-17 12:10:20 +08:00
|
|
|
top: 0;
|
2016-03-02 18:48:37 +08:00
|
|
|
right: 0;
|
2019-02-15 10:48:07 +08:00
|
|
|
width: 22px;
|
|
|
|
height: 100%;
|
2019-08-29 10:29:58 +08:00
|
|
|
background: @input-number-handler-bg;
|
2022-08-17 14:51:20 +08:00
|
|
|
border-radius: 0 @control-border-radius @control-border-radius 0;
|
2019-02-15 10:48:07 +08:00
|
|
|
opacity: 0;
|
2015-10-09 20:52:41 +08:00
|
|
|
transition: opacity 0.24s linear 0.1s;
|
2019-01-16 16:46:55 +08:00
|
|
|
|
|
|
|
// Fix input number inside Menu makes icon too large
|
|
|
|
// We arise the selector priority by nest selector here
|
|
|
|
// https://github.com/ant-design/ant-design/issues/14367
|
|
|
|
.@{input-number-prefix-cls}-handler {
|
|
|
|
.@{input-number-prefix-cls}-handler-up-inner,
|
|
|
|
.@{input-number-prefix-cls}-handler-down-inner {
|
2021-10-09 11:21:39 +08:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2019-01-16 16:46:55 +08:00
|
|
|
min-width: auto;
|
|
|
|
margin-right: 0;
|
2020-10-12 15:50:02 +08:00
|
|
|
font-size: 7px;
|
2019-01-16 16:46:55 +08:00
|
|
|
}
|
|
|
|
}
|
2021-02-01 17:06:20 +08:00
|
|
|
|
|
|
|
.@{input-number-prefix-cls}-borderless & {
|
|
|
|
border-left-width: 0;
|
|
|
|
}
|
2015-09-23 11:40:18 +08:00
|
|
|
}
|
|
|
|
|
2017-02-15 11:47:22 +08:00
|
|
|
&-handler-wrap:hover &-handler {
|
|
|
|
height: 40%;
|
|
|
|
}
|
|
|
|
|
2021-08-26 17:09:10 +08:00
|
|
|
&:hover &-handler-wrap,
|
|
|
|
&-focused &-handler-wrap {
|
2015-09-23 11:40:18 +08:00
|
|
|
opacity: 1;
|
2015-07-01 14:48:47 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
&-handler-up {
|
2022-08-17 14:51:20 +08:00
|
|
|
border-top-right-radius: @control-border-radius;
|
2019-09-16 20:38:20 +08:00
|
|
|
cursor: pointer;
|
2021-10-13 15:38:59 +08:00
|
|
|
|
2015-07-01 14:48:47 +08:00
|
|
|
&-inner {
|
2017-02-15 11:47:22 +08:00
|
|
|
top: 50%;
|
2018-08-21 14:53:53 +08:00
|
|
|
margin-top: -5px;
|
2018-09-03 12:17:20 +08:00
|
|
|
text-align: center;
|
2015-07-01 14:48:47 +08:00
|
|
|
}
|
2021-10-13 15:38:59 +08:00
|
|
|
|
2015-09-23 20:48:08 +08:00
|
|
|
&:hover {
|
2017-08-04 17:58:32 +08:00
|
|
|
height: 60% !important;
|
2015-09-23 20:48:08 +08:00
|
|
|
}
|
2015-07-01 14:48:47 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
&-handler-down {
|
2018-08-21 14:53:53 +08:00
|
|
|
top: 0;
|
2022-08-17 14:51:20 +08:00
|
|
|
border-top: @border-width-base @border-style-base @input-number-handler-border-color;
|
|
|
|
border-bottom-right-radius: @control-border-radius;
|
2015-07-07 17:30:24 +08:00
|
|
|
cursor: pointer;
|
2021-10-13 15:38:59 +08:00
|
|
|
|
2015-07-01 14:48:47 +08:00
|
|
|
&-inner {
|
2017-02-15 11:47:22 +08:00
|
|
|
top: 50%;
|
2018-07-25 15:14:16 +08:00
|
|
|
text-align: center;
|
2020-05-19 10:12:13 +08:00
|
|
|
transform: translateY(-50%);
|
2015-07-01 14:48:47 +08:00
|
|
|
}
|
2021-10-13 15:38:59 +08:00
|
|
|
|
2015-09-23 20:48:08 +08:00
|
|
|
&:hover {
|
2017-08-04 17:58:32 +08:00
|
|
|
height: 60% !important;
|
2015-09-23 20:48:08 +08:00
|
|
|
}
|
2021-02-01 17:06:20 +08:00
|
|
|
.@{input-number-prefix-cls}-borderless & {
|
|
|
|
border-top-width: 0;
|
|
|
|
}
|
2015-07-01 14:48:47 +08:00
|
|
|
}
|
2017-12-18 09:55:56 +08:00
|
|
|
|
2022-08-17 14:51:20 +08:00
|
|
|
&:hover:not(.@{input-number-prefix-cls}-borderless) &-handler-down,
|
|
|
|
&-focused:not(.@{input-number-prefix-cls}-borderless) &-handler-down {
|
|
|
|
border-top: @border-width-base @border-style-base @input-number-handler-border-color;
|
|
|
|
}
|
|
|
|
|
2017-12-18 09:55:56 +08:00
|
|
|
&-handler-up-disabled,
|
|
|
|
&-handler-down-disabled {
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
|
|
|
|
&-handler-up-disabled:hover &-handler-up-inner,
|
|
|
|
&-handler-down-disabled:hover &-handler-down-inner {
|
|
|
|
color: @disabled-color;
|
|
|
|
}
|
2021-02-01 17:06:20 +08:00
|
|
|
|
|
|
|
&-borderless {
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
2021-02-22 22:07:19 +08:00
|
|
|
|
|
|
|
// ===================== Out Of Range =====================
|
|
|
|
&-out-of-range {
|
|
|
|
input {
|
|
|
|
color: @error-color;
|
|
|
|
}
|
|
|
|
}
|
2015-07-01 14:48:47 +08:00
|
|
|
}
|
2020-03-20 14:43:32 +08:00
|
|
|
|
|
|
|
@import './rtl';
|