fix(input, select): form item style

This commit is contained in:
07akioni 2021-01-11 23:47:00 +08:00
parent a348693a9f
commit bcb257098f
4 changed files with 75 additions and 20 deletions

View File

@ -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
}
})
}

View File

@ -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
}
})
}

View File

@ -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});
`)
])
])
])
))
])

View File

@ -376,7 +376,7 @@
- [x] cascader demo async 切换未重置数据demo 写的有问题
- [ ] gradient-text transition 又没了
- [x] md-loader code
- [ ] input + form-item style
- [x] input + form-item style
- [x] loadingbar theme
- [ ] dropdown group + menu use dropdown
- [x] 多行 message