fix: variable styles (#1167)
Co-authored-by: sealday <sealday@gmail.com> Reviewed-on: daoyoucloud/tachybase#1167
This commit is contained in:
parent
b213c7fc49
commit
c6a7cabfa8
@ -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"
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user