diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index d46d34659..423c2b51a 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -1159,8 +1159,8 @@ ); --inputNumber-enhance-default-paddingTop: var(--sizes-size-3); --inputNumber-enhance-default-paddingBottom: var(--sizes-size-3); - --inputNumber-enhance-default-paddingLeft: var(--sizes-size-7); - --inputNumber-enhance-default-paddingRight: var(--sizes-size-7); + --inputNumber-enhance-default-paddingLeft: var(--sizes-size-5); + --inputNumber-enhance-default-paddingRight: var(--sizes-size-5); --inputNumber-enhance-default-bg-color: var(--colors-neutral-fill-11); --inputNumber-enhance-hover-top-border-color: var(--colors-brand-5); --inputNumber-enhance-hover-top-border-width: var(--borders-width-2); @@ -1273,6 +1273,12 @@ ); --inputNumber-enhance-leftIcon-default-icon: ''; --inputNumber-enhance-rightIcon-default-icon: ''; + --inputNumber-enhance-mobile-input-width: #{px2rem(56px)}; + --inputNumber-enhance-mobile-icon-width: #{px2rem(28px)}; + --inputNumber-enhance-mobile-icon-height: #{px2rem(28px)}; + --inputNumber-enhance-mobile-icon-inner-width: #{px2rem(27px)}; + --inputNumber-enhance-mobile-icon-inner-height: #{px2rem(27px)}; + --Form-input-onHover-borderColor: var(--colors-brand-5); --Form-input-onFocused-borderColor: var(--colors-brand-5); diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index e1d88192e..e6444ccb8 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -634,6 +634,7 @@ $Table-strip-bg: transparent; --PopOverAble-onHover-iconColor: inherit; --PopUp-cancelAction-color: #666; + --PopUp-confirmAction-color: var(--primary); --Property-title-bg: #f2f2f2; --Property-label-bg: #f7f7f7; diff --git a/packages/amis-ui/scss/components/_calendar.scss b/packages/amis-ui/scss/components/_calendar.scss index a71bf904c..ae3ac0225 100644 --- a/packages/amis-ui/scss/components/_calendar.scss +++ b/packages/amis-ui/scss/components/_calendar.scss @@ -260,6 +260,7 @@ flex-shrink: 0; .date-range-confirm { + width: 100%; height: px2rem(36px); margin: px2rem(7px) 0; border-radius: var(--borderRadiusMd); @@ -267,13 +268,7 @@ justify-content: center; align-items: center; } - .is-disabled { - opacity: 0.5; - color: var(--Button--primary-color); - background: var(--Button--primary-bg); - border-color: var(--Button--primary-bg); - filter: none; - } + &-toolbar { padding: 0 px2rem(16px); } diff --git a/packages/amis-ui/scss/components/_cascader.scss b/packages/amis-ui/scss/components/_cascader.scss index f1a0c60d0..68eb53aa9 100644 --- a/packages/amis-ui/scss/components/_cascader.scss +++ b/packages/amis-ui/scss/components/_cascader.scss @@ -12,7 +12,7 @@ .#{$ns}Cascader-tab { flex: 1; width: calc((100vw - 20px) / 3); - height: px2rem(370px); + height: px2rem(260px); overflow-y: auto; display: inline-block; &::-webkit-scrollbar { diff --git a/packages/amis-ui/scss/components/_city-area.scss b/packages/amis-ui/scss/components/_city-area.scss index 51b501fa8..e047b7212 100644 --- a/packages/amis-ui/scss/components/_city-area.scss +++ b/packages/amis-ui/scss/components/_city-area.scss @@ -1,4 +1,5 @@ .#{$ns}CityArea { + flex: 1; text-align: right; &-popup { @@ -15,6 +16,11 @@ font-size: var(--Form-input-fontSize); display: inline-flex !important; + &.is-focused, + &:hover { + border: none !important; + } + &::placeholder { color: var(--Form-input-placeholderColor); user-select: none; diff --git a/packages/amis-ui/scss/components/_picker-columns.scss b/packages/amis-ui/scss/components/_picker-columns.scss index c4a0aeb40..83e298e35 100644 --- a/packages/amis-ui/scss/components/_picker-columns.scss +++ b/packages/amis-ui/scss/components/_picker-columns.scss @@ -35,11 +35,11 @@ } &-confirm { - color: var(--PickerColumns-confirmAction-color) !important; + color: var(--PickerColumns-confirmAction-color); } &-cancel { - color: var(--PickerColumns-cancelAction-color) !important; + color: var(--PickerColumns-cancelAction-color); } &-title { @@ -94,8 +94,6 @@ } } - - &-mask { position: absolute; top: 0; diff --git a/packages/amis-ui/scss/components/_popup.scss b/packages/amis-ui/scss/components/_popup.scss index d89915f18..e014979bb 100644 --- a/packages/amis-ui/scss/components/_popup.scss +++ b/packages/amis-ui/scss/components/_popup.scss @@ -120,7 +120,9 @@ } &-confirm { + color: var(--PopUp-confirmAction-color); margin-right: var(--gap-sm); + border: none; } &-content { diff --git a/packages/amis-ui/scss/components/_result-box.scss b/packages/amis-ui/scss/components/_result-box.scss index 7785e7fb7..1da8d0f8d 100644 --- a/packages/amis-ui/scss/components/_result-box.scss +++ b/packages/amis-ui/scss/components/_result-box.scss @@ -324,6 +324,11 @@ border: none; justify-content: flex-end; + &.is-focused, + &:hover { + border: none !important; + } + .#{$ns}ResultBox-clear { @include input-clear(); width: px2rem(26px); diff --git a/packages/amis-ui/scss/components/form/_date-range.scss b/packages/amis-ui/scss/components/form/_date-range.scss index 7211d98cc..a88a839fb 100644 --- a/packages/amis-ui/scss/components/form/_date-range.scss +++ b/packages/amis-ui/scss/components/form/_date-range.scss @@ -281,6 +281,11 @@ border: 0; justify-content: flex-end; + &.is-focused, + &:hover { + border: none; + } + span, a { &:focus { diff --git a/packages/amis-ui/scss/components/form/_date.scss b/packages/amis-ui/scss/components/form/_date.scss index 01b2ff932..17df1f16b 100644 --- a/packages/amis-ui/scss/components/form/_date.scss +++ b/packages/amis-ui/scss/components/form/_date.scss @@ -207,15 +207,16 @@ } } -.#{$ns}DatePicker-popup { - height: px2rem(300px); -} - // 移动端输入框样式 .#{$ns}DatePicker.is-mobile { border: 0; justify-content: flex-end; + &.is-focused, + &:hover { + border: none; + } + span, a { &:focus { @@ -245,6 +246,7 @@ } .#{$ns}DatePicker-popup.#{$ns}DatePicker-mobile { + height: px2rem(320px); color: red; .rdt { width: 100%; diff --git a/packages/amis-ui/scss/components/form/_form.scss b/packages/amis-ui/scss/components/form/_form.scss index d7a8b6752..dbacd01bf 100644 --- a/packages/amis-ui/scss/components/form/_form.scss +++ b/packages/amis-ui/scss/components/form/_form.scss @@ -499,167 +499,232 @@ left: 0; border-bottom: var(--Form-input-borderWidth) solid var(--borderColor); } + } - .#{$ns}Form-item { - display: flex; - flex-wrap: wrap; + .#{$ns}Form-item { + display: flex; + flex-wrap: wrap; + margin-bottom: 0; + padding: var(--Form-item-gap) 0; + position: relative; + + &::after { + position: absolute; + box-sizing: border-box; + content: ' '; + pointer-events: none; + right: 0; + bottom: 0; + left: 0; + border-bottom: var(--Form-input-borderWidth) solid var(--borderColor); + } + + .#{$ns}InputGroup-addOn, + .#{$ns}TextControl-addOn { + border: none; + } + + .#{$ns}Form-label { + flex: 0 0 28%; + max-width: 28%; + min-height: 1px; + text-align: left; + padding-right: calc(var(--Form--horizontal-gutterWidth) / 2); + overflow-wrap: break-word; + margin-right: 0; margin-bottom: 0; - padding: var(--Form-item-gap) 0; - position: relative; + font-size: var(--fontSizeLg); + } - &::after { - position: absolute; - box-sizing: border-box; - content: ' '; - pointer-events: none; - right: 0; - bottom: 0; - left: 0; - border-bottom: var(--Form-input-borderWidth) solid var(--borderColor); + .#{$ns}Form-description { + font-size: var(--fontSizeBase); + } + + .#{$ns}TextControl-input { + font-size: var(--fontSizeLg); + + input { + height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg)); } + } - .#{$ns}InputGroup-addOn, - .#{$ns}TextControl-addOn { - border: none; - } - - > .#{$ns}Form-label { - flex: 0 0 28%; - max-width: 28%; - min-height: 1px; - text-align: left; - padding-right: calc(var(--Form--horizontal-gutterWidth) / 2); - overflow-wrap: break-word; - margin-right: 0; - margin-bottom: 0; - font-size: var(--fontSizeLg); - } - - .#{$ns}Form-description { - font-size: var(--fontSizeBase); - } - - .#{$ns}TextControl-input { - font-size: var(--fontSizeLg); - - input { - height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg)); - } - } - - .#{$ns}Form-value, - .#{$ns}Form-control { + .#{$ns}NumberControl { + .#{$ns}Number { flex: 1; - flex-wrap: wrap; - font-size: var(--fontSizeLg); - - &.is-disabled > .#{$ns}TextControl-input { - background: transparent; - } - } - .#{$ns}SelectControl.#{$ns}Form-control { - overflow: hidden; - } - - .#{$ns}Form-hint, - .#{$ns}Form-remark, - .#{$ns}Form-static, - .#{$ns}Form-group--hor .#{$ns}Form-item, - .#{$ns}SwitchControl, - .#{$ns}CheckboxControl, - .#{$ns}RadiosControl, - .#{$ns}CheckboxesControl { - padding-top: 0; - padding-bottom: 0; - } - - .#{$ns}Form-group--horizontal .#{$ns}TextControl-input input { - height: var(--Form-input-height); - } - - .#{$ns}Form-hint { - font-size: var(--fontSizeBase); - margin-left: 0; - color: var(--text--muted-color); - } - - .#{$ns}TextControl-placeholder { - top: 0; - } - - .#{$ns}Form-static { - min-height: 0; - } - - .#{$ns}Form-description, - .#{$ns}Form-feedback { - font-size: var(--fontSizeBase); - } - - .#{$ns}InputGroup { - .#{$ns}Select, - .#{$ns}InputGroup-btn .#{$ns}Button { - border: none; - } - - > .#{$ns}TextControl-input input { - height: var(--Form-input-height); - } - } - - .#{$ns}ColorPicker { - padding: 0; border: none; - .#{$ns}ColorPicker-arrow { + .#{$ns}Number-handler-wrap { display: none; } } - .#{$ns}Form-group--hor .#{$ns}Form-item .#{$ns}Button { - margin-bottom: var(--gap-xs); - } - - .#{$ns}TextareaControl > textarea, - .#{$ns}Form-control > .#{$ns}TextControl-input, - .#{$ns}TextControl.is-focused > .#{$ns}TextControl-input { + .#{$ns}Select { + flex: none; border: none; - padding: 0 var(--Form-input-paddingX) 0 0; - box-shadow: none; + } + } - &:hover, - &:focus, - &.active { - border: none; - outline: none; - outline-style: none; + .#{$ns}Number--enhance { + float: right; + border: none; + + &-left-icon, + &-right-icon { + width: var(--inputNumber-enhance-mobile-icon-width); + height: var(--inputNumber-enhance-mobile-icon-height); + border: var(--Form-input-borderWidth) solid var(--borderColor); + border-radius: var(--Form-input-borderRadius); + user-select: none; + + svg.icon { + top: 0; } } - .#{$ns}Form-control > .#{$ns}TextControl-input--multiple { - padding: 0; - min-height: 0; + .#{$ns}Number-input { + text-align: center; + } + + .#{$ns}Number--enhance-input { + width: var(--inputNumber-enhance-mobile-input-width); + text-align: center; + } + + .#{$ns}InputNumber-enhance-minus, + .#{$ns}InputNumber-enhance-plus { + width: var(--inputNumber-enhance-mobile-icon-inner-width); + height: var(--inputNumber-enhance-mobile-icon-inner-height); + display: flex; + justify-content: center; + align-items: center; + } + + &:hover { + .#{$ns}Number-input { + padding-left: var(--inputNumber-enhance-default-paddingLeft); + padding-right: var(--inputNumber-enhance-default-paddingRight); + } } } - .#{$ns}Form-groupColumn { - margin-bottom: 0; + .#{$ns}Form-value, + .#{$ns}Form-control { + flex: 1; + flex-wrap: wrap; + font-size: var(--fontSizeLg); + + &.is-disabled > .#{$ns}TextControl-input { + background: transparent; + } + } + .#{$ns}SelectControl.#{$ns}Form-control { + overflow: hidden; } - > .#{$ns}Form-item.is-placeholder::after { - display: none; + .#{$ns}Form-hint, + .#{$ns}Form-remark, + .#{$ns}Form-static, + .#{$ns}Form-group--hor .#{$ns}Form-item, + .#{$ns}SwitchControl, + .#{$ns}CheckboxControl, + .#{$ns}RadiosControl, + .#{$ns}CheckboxesControl { + padding-top: 0; + padding-bottom: 0; } - .#{$ns}Divider { - display: none; + .#{$ns}Form-group--horizontal .#{$ns}TextControl-input input { + height: var(--Form-input-height); } - .#{$ns}Tabs-pane { + .#{$ns}Form-hint { + font-size: var(--fontSizeBase); + margin-left: 0; + color: var(--text--muted-color); + } + + .#{$ns}TextControl-placeholder { + top: 0; + } + + .#{$ns}Form-static { + min-height: 0; + } + + .#{$ns}Form-description, + .#{$ns}Form-feedback { + font-size: var(--fontSizeBase); + } + + .#{$ns}InputGroup { + .#{$ns}Select, + .#{$ns}InputGroup-btn .#{$ns}Button { + border: none; + } + + > .#{$ns}TextControl-input input { + height: var(--Form-input-height); + } + } + + .#{$ns}ColorPicker { padding: 0; + border: none; + + .#{$ns}ColorPicker-arrow { + display: none; + } } - .#{$ns}Form-item .#{$ns}Form-groupColumn > .#{$ns}Form-item { - padding-bottom: var(--Form-input-paddingX); + .#{$ns}Form-group--hor .#{$ns}Form-item .#{$ns}Button { + margin-bottom: var(--gap-xs); + } + + .#{$ns}TextareaControl > textarea, + .#{$ns}Form-control > .#{$ns}TextControl-input, + .#{$ns}TextControl.is-focused > .#{$ns}TextControl-input { + border: none; + padding: 0 var(--Form-input-paddingX) 0 0; + box-shadow: none; + + &:hover, + &:focus, + &.active { + border: none; + outline: none; + outline-style: none; + } + } + + .#{$ns}Form-control > .#{$ns}TextControl-input--multiple { + padding: 0; + min-height: 0; } } + + .#{$ns}Form-groupColumn { + margin-bottom: 0; + } + + .#{$ns}Form-item:nth-last-of-type(1) { + &::after { + display: none; + } + } + + .#{$ns}Form-item.is-placeholder::after { + display: none; + } + + .#{$ns}Divider { + display: none; + } + + .#{$ns}Tabs-pane { + padding: 0; + } + + .#{$ns}Form-item .#{$ns}Form-groupColumn > .#{$ns}Form-item { + padding-bottom: var(--Form-input-paddingX); + } } diff --git a/packages/amis-ui/scss/components/form/_nested-select.scss b/packages/amis-ui/scss/components/form/_nested-select.scss index e9d6ae4a0..03ceea1c6 100644 --- a/packages/amis-ui/scss/components/form/_nested-select.scss +++ b/packages/amis-ui/scss/components/form/_nested-select.scss @@ -113,6 +113,6 @@ } } &-popup { - height: px2rem(460px); + height: px2rem(340px); } } diff --git a/packages/amis-ui/src/components/CalendarMobile.tsx b/packages/amis-ui/src/components/CalendarMobile.tsx index 863e062bf..cea3d19f6 100644 --- a/packages/amis-ui/src/components/CalendarMobile.tsx +++ b/packages/amis-ui/src/components/CalendarMobile.tsx @@ -10,6 +10,7 @@ import Calendar from './calendar/Calendar'; import {themeable, ThemeProps} from 'amis-core'; import {LocaleProps, localeable} from 'amis-core'; import {autobind} from 'amis-core'; +import Button from './Button'; export interface CalendarMobileProps extends ThemeProps, LocaleProps { className?: string; @@ -354,22 +355,18 @@ export class CalendarMobile extends React.Component< dateTime: newTime, startDate: endDate ? startDate - : startDate - ?.clone() - .set({ - hour: newTime[0], - minute: newTime[1], - second: newTime[2] || 0 - }), + : startDate?.clone().set({ + hour: newTime[0], + minute: newTime[1], + second: newTime[2] || 0 + }), endDate: !endDate ? endDate - : endDate - ?.clone() - .set({ - hour: newTime[0], - minute: newTime[1], - second: newTime[2] || 0 - }) + : endDate?.clone().set({ + hour: newTime[0], + minute: newTime[1], + second: newTime[2] || 0 + }) }; this.setState(obj, () => { onChange && onChange(this.state); @@ -761,17 +758,17 @@ export class CalendarMobile extends React.Component< {footerExtra} {confirm && !embed && ( - { confirm(startDate, endDate); close && close(); }} > {__('confirm')} - + )} diff --git a/packages/amis-ui/src/components/Cascader.tsx b/packages/amis-ui/src/components/Cascader.tsx index dd894a416..d955972bf 100644 --- a/packages/amis-ui/src/components/Cascader.tsx +++ b/packages/amis-ui/src/components/Cascader.tsx @@ -585,14 +585,14 @@ export class Cascader extends React.Component {