From 6613b7781288605fc9309d093dc9b47af0f1c900 Mon Sep 17 00:00:00 2001 From: jacknan Date: Fri, 12 Jan 2024 11:45:22 +0800 Subject: [PATCH] feat(numeric): refresh ui (#1258) * feat(numeric): refresh ui Signed-off-by: jacknan * feat(numeric): refresh ui Signed-off-by: jacknan --------- Signed-off-by: jacknan --- .../sites/demos/mobile/app/numeric/size.vue | 20 -- .../mobile/app/numeric/webdoc/numeric.js | 32 --- packages/theme-mobile/src/numeric/index.less | 218 +++--------------- packages/theme-mobile/src/numeric/vars.less | 28 ++- 4 files changed, 46 insertions(+), 252 deletions(-) delete mode 100644 examples/sites/demos/mobile/app/numeric/size.vue diff --git a/examples/sites/demos/mobile/app/numeric/size.vue b/examples/sites/demos/mobile/app/numeric/size.vue deleted file mode 100644 index 01a9fb7bd..000000000 --- a/examples/sites/demos/mobile/app/numeric/size.vue +++ /dev/null @@ -1,20 +0,0 @@ - - - diff --git a/examples/sites/demos/mobile/app/numeric/webdoc/numeric.js b/examples/sites/demos/mobile/app/numeric/webdoc/numeric.js index 8702cb168..b1459304f 100644 --- a/examples/sites/demos/mobile/app/numeric/webdoc/numeric.js +++ b/examples/sites/demos/mobile/app/numeric/webdoc/numeric.js @@ -98,18 +98,6 @@ export default { }, codeFiles: ['precision.vue'] }, - { - demoId: 'size', - name: { - 'zh-CN': '尺寸', - 'en-US': 'size' - }, - desc: { - 'zh-CN': '

尺寸

', - 'en-US': '

bbutton click

' - }, - codeFiles: ['size.vue'] - }, { demoId: 'step', name: { @@ -218,16 +206,6 @@ export default { }, demoId: 'precision' }, - { - name: 'size', - type: 'Number | String', - defaultValue: '', - desc: { - 'zh-CN': '

计数器尺寸，可选值：larger

', - 'en-US': 'display different button' - }, - demoId: 'precision' - }, { name: 'step', type: 'Number', @@ -248,16 +226,6 @@ export default { }, demoId: 'step' }, - { - name: 'theme', - type: 'String', - defaultValue: '', - desc: { - 'zh-CN': '

设置圆角风格按钮

', - 'en-US': 'display different button' - }, - demoId: '' - }, { name: 'value', diff --git a/packages/theme-mobile/src/numeric/index.less b/packages/theme-mobile/src/numeric/index.less index de646d46b..a36d3e7f0 100644 --- a/packages/theme-mobile/src/numeric/index.less +++ b/packages/theme-mobile/src/numeric/index.less @@ -21,7 +21,7 @@ .@{numeric-prefix-cls} { position: relative; display: inline-block; - width: 100px; + width: var(--ti-mobile-numeric-width); outline: none; &__input { @@ -30,10 +30,8 @@ &.is-disabled &-inner { cursor: not-allowed; pointer-events: none; - border: 1px solid var(--ti-mobile-numeric-input-normal-border-color, #ddd); - color: var(--ti-mobile-numeric-input-placeholder-color, #999); - background: var(--ti-mobile-numeric-input-disabled-bgcolor, #f5f5f5); - .placeholder(@color: #bfbfbf); + border: none; + color: var(--ti-mobile-numeric-text-color-disabled); } &.is-disabled .@{input-prefix-cls}__icon { @@ -43,30 +41,21 @@ &__input-inner { width: 100%; - height: var(--ti-mobile-numeric-input-normal-height, 24px); - line-height: var(--ti-mobile-numeric-input-normal-height, 24px); - font-size: var(--ti-mobile-numeric-input-font-size, 14px); - color: var(--ti-mobile-numeric-input-normal-color, #333); - caret-color: var(--ti-mobile-numeric-input-caret-color, #039be5); - background: var(--ti-mobile-numeric-input-normal-background, #fff); - border: 1px solid var(--ti-mobile-numeric-input-normal-border-color, #ddd); - border-radius: var(--ti-mobile-numeric-input-radius, 3px); - padding: 0 24px; + height: var(--ti-mobile-numeric-height); + line-height: var(--ti-mobile-numeric-height); + font-size: var(--ti-mobile-numeric-font-size); + font-weight: var(--ti-mobile-numeric-font-weight); + color: var(--ti-mobile-numeric-text-color); + border: none; + padding: 0 var(--ti-mobile-numeric-height); outline: 0; display: inline-block; box-sizing: border-box; - -webkit-appearance: none; + appearance: none; text-align: center; - transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); - .placeholder( - @color: var(--ti-mobile-numeric-input-placeholder-color, #999999) - ); &:focus { outline: 0; - .placeholder( - @color: var(--ti-mobile-numeric-input-placeholder-color, #999999) - ); } &::-ms-clear { @@ -80,203 +69,52 @@ &__increase { position: absolute; z-index: 1; - top: 0px; - width: var(--ti-mobile-numeric-input-normal-height, 24px); - height: var(--ti-mobile-numeric-input-normal-height, 24px); - line-height: var(--ti-mobile-numeric-input-normal-height, 24px); - font-size: 14px; - text-align: center; + top: 0; + width: var(--ti-mobile-numeric-height); + height: var(--ti-mobile-numeric-height); + line-height: var(--ti-mobile-numeric-height); + background-color: var(--ti-mobile-numeric-button-background-color); + border-radius: 999px; + display: flex; + align-items: center; + justify-content: center; cursor: pointer; svg { - fill: var(--ti-mobile-numeric-input-normal-color, #333); + fill: var(--ti-mobile-numeric-icon-color); + width: var(--ti-mobile-numeric-icon-height); + height: var(--ti-mobile-numeric-icon-height); } &.is-disabled { cursor: not-allowed; svg { - fill: var(--ti-mobile-numeric-input-icon-disabled-color, #ccc); + fill: var(--ti-mobile-numeric-icon-color-disabled); } } } &__increase { - right: 1px; - border-radius: 0 3px 3px 0; - border-left: 1px solid var(--ti-mobile-numeric-input-normal-border-color, #ddd); + right: 0; } &__decrease { - left: 0px; - border-radius: 3px 0 0 3px; - border-right: 1px solid var(--ti-mobile-numeric-input-normal-border-color, #ddd); + left: 0; } &.is-disabled &__decrease, &.is-disabled &__increase { svg { - fill: var(--ti-mobile-numeric-input-icon-disabled-color, #ccc); + fill: var(--ti-mobile-numeric-icon-color-disabled); } &:hover { cursor: not-allowed; svg { - fill: var(--ti-mobile-numeric-input-icon-disabled-color, #ccc); + fill: var(--ti-mobile-numeric-icon-color-disabled); } } } - - &--large { - width: 180px; - line-height: 30px; - } - - &--large &__decrease, - &--large &__increase { - width: 30px; - height: 30px; - line-height: 30px; - } - - &--large &__input-inner { - height: 30px; - line-height: 30px; - padding: 0px 30px; - } - - &--medium { - width: 270px; - line-height: 42px; - } - - &--medium &__decrease, - &--medium &__increase { - width: 42px; - height: 42px; - line-height: 42px; - font-size: 16px; - } - - &--medium &__input-inner { - height: 42px; - line-height: 42px; - padding-left: 43px; - padding-right: 43px; - } - - &--small { - width: 200px; - line-height: 36px; - } - - &--small &__decrease, - &--small &__increase { - width: 36px; - height: 36px; - line-height: 36px; - font-size: 14px; - } - - &--small &__input-inner { - height: 36px; - line-height: 36px; - padding-left: 37px; - padding-right: 37px; - } - - &--mini { - width: 130px; - line-height: 24px; - } - - &--mini &__decrease, - &--mini &__increase { - width: 24px; - font-size: 12px; - } - - &--mini &__input-inner { - height: 24px; - line-height: 24px; - padding-left: 35px; - padding-right: 35px; - } - - &.is-without-controls &__input-inner { - padding-left: 15px; - padding-right: 15px; - } - - &.is-controls-right { - .@{numeric-prefix-cls}__input { - display: flex; - } - - .@{numeric-prefix-cls}__input-inner { - padding-left: 8px; - padding-right: 38px; - } - - .@{numeric-prefix-cls}__decrease, - .@{numeric-prefix-cls}__increase { - height: 50%; - line-height: 0; - display: flex; - justify-content: center; - align-items: center; - - svg { - transform: scale(0.8); - } - } - - .@{numeric-prefix-cls}__increase { - right: 0; - border-radius: 0 3px 0 0; - border-bottom: 1px solid var(--ti-mobile-numeric-input-normal-border-color, #ddd); - } - - .@{numeric-prefix-cls}__decrease { - right: 0; - bottom: 0; - top: auto; - left: auto; - border-right: none; - border-left: 1px solid var(--ti-mobile-numeric-input-normal-border-color, #ddd); - border-radius: 0 0 3px; - } - - &[class*='medium'] { - [class*='decrease'], - [class*='increase'] { - line-height: 20px; - } - } - - &[class*='small'] { - [class*='decrease'], - [class*='increase'] { - line-height: 17px; - } - } - - &[class*='mini'] { - [class*='decrease'], - [class*='increase'] { - line-height: 8px; - } - } - } - - &.is-round &__input-inner { - border: none; - } - - &.is-round &__decrease, - &.is-round &__increase { - border: 1px solid var(--ti-mobile-numeric-input-normal-border-color, #ddd); - border-radius: 24px; - } } diff --git a/packages/theme-mobile/src/numeric/vars.less b/packages/theme-mobile/src/numeric/vars.less index 4599ab477..24588edd4 100644 --- a/packages/theme-mobile/src/numeric/vars.less +++ b/packages/theme-mobile/src/numeric/vars.less @@ -1,12 +1,20 @@ :root { - --ti-mobile-numeric-input-radius: var(--ti-mobile-base-radius-large, 3px); - --ti-mobile-numeric-input-normal-border-color: #ddd; - --ti-mobile-numeric-input-normal-color: var(--ti-mobile-base-color-info-normal, #333); - --ti-mobile-numeric-input-normal-background: var(--ti-mobile-base-color-light, #fff); - --ti-mobile-numeric-input-normal-height: var(--ti-mobile-base-size-height-mini, 24px); - --ti-mobile-numeric-input-placeholder-color: var(--ti-mobile-base-color-placeholder, #999); - --ti-mobile-numeric-input-disabled-bgcolor: var(--ti-mobile-base-color-selected-background, #f5f5f5); - --ti-mobile-numeric-input-icon-disabled-color: #ccc; - --ti-mobile-numeric-input-font-size: 14px; - --ti-mobile-numeric-input-caret-color: #039be5; + // 宽度 + --ti-mobile-numeric-width: 108px; + // 高度 + --ti-mobile-numeric-height: 28px; + // icon高度 + --ti-mobile-numeric-icon-height: 16px; + // 按钮背景色 + --ti-mobile-numeric-button-background-color: var(--ti-mobile-color-bg-disabled, #f0f0f0); + // 文字尺寸 + --ti-mobile-numeric-font-size: var(--ti-mobile-font-size-m, 14px); + // 字重 + --ti-mobile-numeric-font-weight: var(--ti-mobile-font-weight-medium, 500); + // 文字颜色 + --ti-mobile-numeric-text-color: var(--ti-mobile-color-text-primary, #191919); + // icon颜色 + --ti-mobile-numeric-icon-color: var(--ti-mobile-color-icon-active, #191919); + // icon颜色-不可用 + --ti-mobile-numeric-icon-color-disabled: var(--ti-mobile-color-icon-disabled, #c2c2c2); }