mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
fix(input, select): form item style
This commit is contained in:
parent
a348693a9f
commit
bcb257098f
@ -353,23 +353,23 @@ export default defineComponent({
|
||||
'--text-color': textColor,
|
||||
'--text-color-disabled': textColorDisabled,
|
||||
// form warning
|
||||
'color-active-warning': colorActiveWarning,
|
||||
'box-shadow-focus-warning': boxShadowFocusWarning,
|
||||
'box-shadow-active-warning': boxShadowActiveWarning,
|
||||
'box-shadow-hover-warning': boxShadowHoverWarning,
|
||||
'border-warning': borderWarning,
|
||||
'border-focus-warning': borderFocusWarning,
|
||||
'border-hover-warning': borderHoverWarning,
|
||||
'border-active-warning': borderActiveWarning,
|
||||
'--color-active-warning': colorActiveWarning,
|
||||
'--box-shadow-focus-warning': boxShadowFocusWarning,
|
||||
'--box-shadow-active-warning': boxShadowActiveWarning,
|
||||
'--box-shadow-hover-warning': boxShadowHoverWarning,
|
||||
'--border-warning': borderWarning,
|
||||
'--border-focus-warning': borderFocusWarning,
|
||||
'--border-hover-warning': borderHoverWarning,
|
||||
'--border-active-warning': borderActiveWarning,
|
||||
// form error
|
||||
'color-active-error': colorActiveError,
|
||||
'box-shadow-focus-error': boxShadowFocusError,
|
||||
'box-shadow-active-error': boxShadowActiveError,
|
||||
'box-shadow-hover-error': boxShadowHoverError,
|
||||
'border-error': borderError,
|
||||
'border-focus-error': borderFocusError,
|
||||
'border-hover-error': borderHoverError,
|
||||
'border-active-error': borderActiveError
|
||||
'--color-active-error': colorActiveError,
|
||||
'--box-shadow-focus-error': boxShadowFocusError,
|
||||
'--box-shadow-active-error': boxShadowActiveError,
|
||||
'--box-shadow-hover-error': boxShadowHoverError,
|
||||
'--border-error': borderError,
|
||||
'--border-focus-error': borderFocusError,
|
||||
'--border-hover-error': borderHoverError,
|
||||
'--border-active-error': borderActiveError
|
||||
}
|
||||
})
|
||||
}
|
||||
|
@ -818,6 +818,18 @@ export default defineComponent({
|
||||
textColorDisabled,
|
||||
boxShadowFocus,
|
||||
iconSize,
|
||||
colorFocusWarning,
|
||||
boxShadowFocusWarning,
|
||||
boxShadowHoverWarning,
|
||||
borderWarning,
|
||||
borderFocusWarning,
|
||||
borderHoverWarning,
|
||||
colorFocusError,
|
||||
boxShadowFocusError,
|
||||
boxShadowHoverError,
|
||||
borderError,
|
||||
borderFocusError,
|
||||
borderHoverError,
|
||||
[createKey('fontSize', size)]: fontSize,
|
||||
[createKey('height', size)]: height
|
||||
}
|
||||
@ -844,7 +856,21 @@ export default defineComponent({
|
||||
'--color-disabled': colorDisabled,
|
||||
'--color-focus': colorFocus,
|
||||
'--text-color-disabled': textColorDisabled,
|
||||
'--box-shadow-focus': boxShadowFocus
|
||||
'--box-shadow-focus': boxShadowFocus,
|
||||
// form warning
|
||||
'--color-focus-warning': colorFocusWarning,
|
||||
'--box-shadow-focus-warning': boxShadowFocusWarning,
|
||||
'--box-shadow-hover-warning': boxShadowHoverWarning,
|
||||
'--border-warning': borderWarning,
|
||||
'--border-focus-warning': borderFocusWarning,
|
||||
'--border-hover-warning': borderHoverWarning,
|
||||
// form error
|
||||
'--color-focus-error': colorFocusError,
|
||||
'--box-shadow-focus-error': boxShadowFocusError,
|
||||
'--box-shadow-hover-error': boxShadowHoverError,
|
||||
'--border-error': borderError,
|
||||
'--border-focus-error': borderFocusError,
|
||||
'--border-hover-error': borderHoverError
|
||||
}
|
||||
})
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { cB, c, cE, cM, cNotM } from '../../../_utils/cssr'
|
||||
import { cB, c, cE, cM, cNotM, insideFormItem } from '../../../_utils/cssr'
|
||||
|
||||
// vars:
|
||||
// --bezier
|
||||
@ -232,5 +232,34 @@ export default c([
|
||||
fontSize: 'var(--icon-size)'
|
||||
})
|
||||
])
|
||||
])
|
||||
]),
|
||||
['warning', 'error'].map(status => insideFormItem(status,
|
||||
cB('input', [
|
||||
cNotM('disabled', [
|
||||
cE('state-border', {
|
||||
border: `var(--border-${status})`
|
||||
}),
|
||||
c('&:hover', [
|
||||
cE('state-border', `
|
||||
box-shadow: var(--box-shadow-hover-${status});
|
||||
border: var(--border-hover-${status});
|
||||
`)
|
||||
]),
|
||||
c('&:focus', {
|
||||
backgroundColor: `var(--color-focus-${status})`
|
||||
}, [
|
||||
cE('state-border', `
|
||||
box-shadow: var(--box-shadow-focus-${status});
|
||||
border: var(--border-focus-${status});
|
||||
`)
|
||||
]),
|
||||
cM('focus', [
|
||||
cE('state-border', `
|
||||
box-shadow: var(--box-shadow-focus-${status});
|
||||
border: var(--border-focus-${status});
|
||||
`)
|
||||
])
|
||||
])
|
||||
])
|
||||
))
|
||||
])
|
||||
|
Loading…
Reference in New Issue
Block a user