diff --git a/docs/number-picker/demo/size.md b/docs/number-picker/demo/size.md
index 9be22a06a6..74cb112659 100644
--- a/docs/number-picker/demo/size.md
+++ b/docs/number-picker/demo/size.md
@@ -14,10 +14,19 @@ import { NumberPicker } from '@alifd/next';
ReactDOM.render(
+
+
+
+
,
mountNode
);
````
+````css
+.next-number-picker {
+ margin-right: 10px;
+}
+````
diff --git a/src/number-picker/main.scss b/src/number-picker/main.scss
index d0a2d51518..e9d05b9657 100644
--- a/src/number-picker/main.scss
+++ b/src/number-picker/main.scss
@@ -72,6 +72,25 @@
opacity: 0;
}
+ &.#{$css-prefix}small {
+ width: 68px;
+ .#{$css-prefix}btn {
+ width: $number-picker-normal-s-button-width;
+
+ &:first-child {
+ border-top-right-radius: $form-element-small-corner;
+ }
+
+ &:last-child {
+ border-bottom-right-radius: $form-element-small-corner;
+ }
+ }
+
+ .#{$css-prefix}icon {
+ @include icon-size($number-picker-normal-s-button-icon-size);
+ }
+ }
+
&.#{$css-prefix}medium {
.#{$css-prefix}btn {
width: $number-picker-normal-m-button-width;
@@ -118,6 +137,30 @@
padding: 0;
}
+ &.#{$css-prefix}small {
+ width: 68px;
+
+ .#{$css-prefix}icon {
+ @include icon-size($number-picker-inline-s-button-icon-size);
+ }
+
+ .#{$css-prefix}btn {
+ height: $form-element-small-height;
+ }
+
+ .#{$css-prefix}before .#{$css-prefix}btn {
+ margin-right: $number-picker-inline-s-button-margin;
+ border-top-left-radius: $number-picker-inline-s-button-corner;
+ border-bottom-left-radius: $number-picker-inline-s-button-corner;
+ }
+
+ .#{$css-prefix}after .#{$css-prefix}btn {
+ margin-left: $number-picker-inline-s-button-margin;
+ border-top-right-radius: $number-picker-inline-s-button-corner;
+ border-bottom-right-radius: $number-picker-inline-s-button-corner;
+ }
+ }
+
&.#{$css-prefix}medium {
width: 100px;
@@ -167,6 +210,10 @@
}
.#{$css-prefix}btn {
+ &.#{$css-prefix}small {
+ width: $form-element-small-height;
+ }
+
&.#{$css-prefix}medium {
width: $form-element-medium-height;
}
@@ -185,6 +232,10 @@
border-left: 0;
border-top-right-radius: 0;
+ &.#{$css-prefix}small {
+ border-top-left-radius: $form-element-small-corner;
+ }
+
&.#{$css-prefix}medium {
border-top-left-radius: $form-element-medium-corner;
}
@@ -199,6 +250,10 @@
border-left: 0;
border-bottom-right-radius: 0;
+ &.#{$css-prefix}small {
+ border-bottom-left-radius: $form-element-small-corner;
+ }
+
&.#{$css-prefix}medium {
border-bottom-left-radius: $form-element-medium-corner;
}
@@ -218,6 +273,12 @@
.#{$css-prefix}before .#{$css-prefix}btn {
margin-right: 0;
+ &.#{$css-prefix}small {
+ margin-left: $number-picker-inline-s-button-margin;
+ border-top-right-radius: $number-picker-inline-s-button-corner !important;
+ border-bottom-right-radius: $number-picker-inline-s-button-corner !important;
+ }
+
&.#{$css-prefix}medium {
margin-left: $number-picker-inline-m-button-margin;
border-top-right-radius: $number-picker-inline-m-button-corner !important;
@@ -234,6 +295,12 @@
.#{$css-prefix}after .#{$css-prefix}btn {
margin-left: 0;
+ &.#{$css-prefix}small {
+ margin-right: $number-picker-inline-s-button-margin;
+ border-top-left-radius: $number-picker-inline-s-button-corner !important;
+ border-bottom-left-radius: $number-picker-inline-s-button-corner !important;
+ }
+
&.#{$css-prefix}medium {
margin-right: $number-picker-inline-m-button-margin;
border-top-left-radius: $number-picker-inline-m-button-corner !important;
diff --git a/src/number-picker/number-picker.jsx b/src/number-picker/number-picker.jsx
index 58fa7bb50c..dccfe29213 100644
--- a/src/number-picker/number-picker.jsx
+++ b/src/number-picker/number-picker.jsx
@@ -465,7 +465,7 @@ class NumberPicker extends React.Component {
innerAfter,
} = this.props;
- let type = device === 'phone' ? 'inline' : this.props.type;
+ const type = device === 'phone' ? 'inline' : this.props.type;
const prefixCls = `${prefix}number-picker`;
diff --git a/src/number-picker/scss/variable.scss b/src/number-picker/scss/variable.scss
index d7d9103115..437b56957d 100644
--- a/src/number-picker/scss/variable.scss
+++ b/src/number-picker/scss/variable.scss
@@ -15,6 +15,9 @@ $number-picker-prefix: '.#{$css-prefix}number-picker';
// Normal
// --------------------------------------------------
+/// width
+/// @namespace size/button
+$number-picker-normal-s-button-width: $s-5 !default;
/// width
/// @namespace size/button
$number-picker-normal-m-button-width: $s-5 !default;
@@ -22,6 +25,10 @@ $number-picker-normal-m-button-width: $s-5 !default;
/// @namespace size/button
$number-picker-normal-l-button-width: $s-5 !default;
+/// icon
+/// @namespace size/button
+$number-picker-normal-s-button-icon-size: $icon-xxs !default;
+
/// icon
/// @namespace size/button
$number-picker-normal-m-button-icon-size: $icon-xxs !default;
@@ -33,6 +40,16 @@ $number-picker-normal-l-button-icon-size: $icon-xxs !default;
// inline
// --------------------------------------------------
+/// icon
+/// @namespace size/button
+$number-picker-inline-s-button-icon-size: $icon-xs !default;
+/// margin
+/// @type number
+/// @namespace size/button
+$number-picker-inline-s-button-margin: 2px !default;
+/// corner
+/// @namespace size/button
+$number-picker-inline-s-button-corner: $corner-1 !default;
/// icon
/// @namespace size/button
$number-picker-inline-m-button-icon-size: $icon-xs !default;