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