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;