fix: variable styles (#1167)

Co-authored-by: sealday <sealday@gmail.com>
Reviewed-on: daoyoucloud/tachybase#1167
This commit is contained in:
sealday 2024-06-13 01:17:33 +08:00
parent b213c7fc49
commit c6a7cabfa8
2 changed files with 25 additions and 28 deletions

View File

@ -357,7 +357,7 @@ export function TextArea(props) {
const disabled = props.disabled || form.disabled; const disabled = props.disabled || form.disabled;
return ( return (
<Space.Compact className={cx(styles.outerContainer, styles.container)}> <Space.Compact className={cx(styles.fixInput, styles.outerContainer, styles.container)}>
<div <div
role="button" role="button"
aria-label="textbox" aria-label="textbox"

View File

@ -1,6 +1,7 @@
import { unit } from '@ant-design/cssinjs';
import { createStyles } from 'antd-style'; import { createStyles } from 'antd-style';
export const useStyles = createStyles(({ token, css }, { multiline, disabled }) => { export const useStyles = createStyles(({ token, css, prefixCls }, { multiline, disabled }) => {
const { lineWidth, colorFillQuaternary } = token; const { lineWidth, colorFillQuaternary } = token;
const inputPaddingHorizontalBase = token.paddingSM - 1; const inputPaddingHorizontalBase = token.paddingSM - 1;
const tagPaddingHorizontal = 8; // Fixed padding. const tagPaddingHorizontal = 8; // Fixed padding.
@ -11,22 +12,20 @@ export const useStyles = createStyles(({ token, css }, { multiline, disabled })
return { return {
fixInput: css` fixInput: css`
.ant-input { .${prefixCls}-input {
box-sizing: border-box;
margin: 0;
padding: 3px 7px; padding: 3px 7px;
color: rgba(0, 0, 0, 0.88); border-width: ${unit(token.lineWidth)};
font-size: 12px; border-style: ${token.lineType};
line-height: 1.6666666666666667; border-color: ${token.colorBorder};
list-style: none; font-size: ${unit(token.fontSize)};
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', line-height: ${token.lineHeight};
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; &:hover {
position: relative; border-color: ${token.colorPrimaryBorderHover};
display: inline-block; }
width: 100%; &:focus {
min-width: 0; border-color: ${token.colorPrimaryBorderHover};
border-radius: 0; outline: none;
transition: all 0.1s; }
} }
`, `,
outerContainer: { outerContainer: {
@ -115,17 +114,15 @@ export const useStyles = createStyles(({ token, css }, { multiline, disabled })
}, },
}, },
container: css` container: css`
&.ant-input-group.ant-input-group-compact { display: flex;
display: flex; .ant-input {
.ant-input { flex-grow: 1;
flex-grow: 1; min-width: 200px;
min-width: 200px; }
} .ant-input-disabled {
.ant-input-disabled { .ant-tag {
.ant-tag { color: #bfbfbf;
color: #bfbfbf; border-color: #d9d9d9;
border-color: #d9d9d9;
}
} }
} }