diff --git a/src/components/seal-form/auto-complete.tsx b/src/components/seal-form/auto-complete.tsx index d35287c8..b6bc1927 100644 --- a/src/components/seal-form/auto-complete.tsx +++ b/src/components/seal-form/auto-complete.tsx @@ -79,6 +79,7 @@ const SealAutoComplete: React.FC< return ( span { + display: flex; + align-items: center; + } + } + + &.validate-status-error { + :global(.ant-select-selector) { + border-width: var(--ant-line-width) !important; + border-style: var(--ant-line-type) !important; + border-color: var(--ant-color-error) !important; + + &:hover { + border-color: var(--ant-color-error-border-hover) !important; + } + + &:focus-within { + border-color: var(--ant-color-error) !important; + } + } + } + } + &.seal-input-number { padding-right: 0; } @@ -52,7 +106,7 @@ padding-right: 10px; } - &.validate-status-error { + &.validate-status-error:not(.seal-select-wrapper) { border-width: var(--ant-line-width); border-style: var(--ant-line-type); border-color: var(--ant-color-error); @@ -89,7 +143,7 @@ :local(.wrapper) { @wrapheight: 54px; @inputheight: 32px; - @borderRadius: 8px; + @borderRadius: 4px; @input-inner-padding: 14px; @bgColor: transparent; @@ -153,9 +207,7 @@ :global(.ant-select) { display: flex; align-items: center; - border: none; - box-shadow: none; - height: @inputheight !important; + height: 54px; } :global(.ant-input-number-input-wrap) { @@ -164,14 +216,29 @@ :global(.ant-select-selector) { flex: 1; - border: none !important; - padding-block: 5px; padding-inline: @input-inner-padding !important; + border-width: var(--ant-line-width) !important; + border-style: var(--ant-line-type) !important; + border-color: var(--ant-color-border) !important; + border-radius: @borderRadius !important; + height: 54px !important; + padding-block: 20px 0 !important; box-shadow: none !important; - background-color: @bgColor !important; + + &:hover { + border-color: var(--ant-input-hover-border-color) !important; + transition: all 0.2s ease; + } + + &:focus-within { + border-color: var(--ant-input-active-border-color) !important; + outline: 0; + background-color: var(--ant-input-active-bg); + } } :global(.ant-select-selection-search) { + top: 20px !important; inset-inline-start: @input-inner-padding; } @@ -195,7 +262,7 @@ } :global(.ant-select-arrow) { - top: 10px; + top: 32px; } &.no-label { diff --git a/src/components/seal-form/components/wrapper.tsx b/src/components/seal-form/components/wrapper.tsx index 5f78552d..8bc7c5cc 100644 --- a/src/components/seal-form/components/wrapper.tsx +++ b/src/components/seal-form/components/wrapper.tsx @@ -38,6 +38,7 @@ const Wrapper: React.FC = ({ return (
= ({ > {extra &&
{extra}
} -
{children}
+
+ {children} +
{addAfter &&
{addAfter}
} diff --git a/src/components/seal-form/seal-cascader.tsx b/src/components/seal-form/seal-cascader.tsx index 46c2b1cc..2c45d535 100644 --- a/src/components/seal-form/seal-cascader.tsx +++ b/src/components/seal-form/seal-cascader.tsx @@ -86,27 +86,26 @@ const SealCascader: React.FC = ( const Boxer = styled.div``; return ( - <> - - - - + + + ); }; diff --git a/src/components/seal-form/seal-select.tsx b/src/components/seal-form/seal-select.tsx index 74206264..4e883af5 100644 --- a/src/components/seal-form/seal-select.tsx +++ b/src/components/seal-form/seal-select.tsx @@ -82,6 +82,7 @@ const SealSelect: React.FC = (props) => { return (