mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
refactor(input-number): simplify cssr vars
This commit is contained in:
07akioni
parent
2ae118ae8a
commit
01f201a749
@ -55,6 +55,7 @@
|
||||
@blur="doBlur"
|
||||
@keyup.enter="handleEnter"
|
||||
>
|
||||
<div class="n-input-number__border" />
|
||||
<div class="n-input-number__border-mask" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -12,19 +12,19 @@ export default c([
|
||||
colorDisabled,
|
||||
textColorDisabled,
|
||||
textColor,
|
||||
borderColor,
|
||||
borderColorHover,
|
||||
border,
|
||||
borderHover,
|
||||
borderFocus,
|
||||
buttonColor,
|
||||
buttonColorHover,
|
||||
buttonColorActive,
|
||||
buttonTextColor,
|
||||
buttonTextColorHover,
|
||||
buttonTextColorActive,
|
||||
buttonTextColorPressed,
|
||||
caretColor,
|
||||
color: backgroundColor,
|
||||
colorFocus,
|
||||
boxShadowFocus,
|
||||
boxShadowHover,
|
||||
placeholderColor,
|
||||
borderRadius
|
||||
} = props.$local
|
||||
@ -38,6 +38,19 @@ export default c([
|
||||
`,
|
||||
borderRadius
|
||||
}, [
|
||||
cE('border', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: ${border};
|
||||
border-radius: ${borderRadius};
|
||||
transition: border-color .3s ${cubicBezierEaseInOut};
|
||||
pointer-events: none;
|
||||
`
|
||||
}),
|
||||
cE('border-mask', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
@ -46,9 +59,12 @@ export default c([
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: inset 0 0 0 1px transparent;
|
||||
border: ${border};
|
||||
border-color: transparent;
|
||||
border-radius: ${borderRadius};
|
||||
transition: box-shadow .3s ${cubicBezierEaseInOut};
|
||||
transition:
|
||||
box-shadow .3s ${cubicBezierEaseInOut},
|
||||
border-color .3s ${cubicBezierEaseInOut};
|
||||
pointer-events: none;
|
||||
`
|
||||
}),
|
||||
@ -148,9 +164,10 @@ export default c([
|
||||
right: 0;
|
||||
`,
|
||||
transition: `
|
||||
border-color .3s ${cubicBezierEaseInOut},
|
||||
box-shadow .3s ${cubicBezierEaseInOut}
|
||||
`,
|
||||
boxShadow: `inset 0 0 0 1px ${borderColor}`
|
||||
border
|
||||
}),
|
||||
cB('input-number-button-body', {
|
||||
raw: `
|
||||
@ -160,9 +177,7 @@ export default c([
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`,
|
||||
transition: `
|
||||
background-color .3s ${cubicBezierEaseInOut}
|
||||
transition: background-color .3s ${cubicBezierEaseInOut};
|
||||
`,
|
||||
backgroundColor: buttonColor
|
||||
}),
|
||||
@ -172,9 +187,7 @@ export default c([
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
`,
|
||||
transition: `
|
||||
background-color .3s ${cubicBezierEaseInOut}
|
||||
transition: background-color .3s ${cubicBezierEaseInOut};
|
||||
`,
|
||||
backgroundColor: buttonColor
|
||||
}),
|
||||
@ -184,7 +197,7 @@ export default c([
|
||||
}),
|
||||
c('&:hover ~', [
|
||||
cE('border-mask', {
|
||||
boxShadow: `inset 0 0 0 1px ${borderColorHover}`
|
||||
border: borderHover
|
||||
})
|
||||
]),
|
||||
c('&:hover', [
|
||||
@ -206,7 +219,7 @@ export default c([
|
||||
backgroundColor: buttonColorActive
|
||||
}),
|
||||
cB('icon', {
|
||||
color: buttonTextColorActive
|
||||
color: buttonTextColorPressed
|
||||
})
|
||||
]),
|
||||
cM('disabled', {
|
||||
@ -239,7 +252,6 @@ export default c([
|
||||
text-align: center;
|
||||
`,
|
||||
backgroundColor,
|
||||
boxShadow: `inset 0 0 0 1px ${borderColor}`,
|
||||
color: textColor,
|
||||
caretColor: caretColor
|
||||
}, [
|
||||
@ -249,7 +261,7 @@ export default c([
|
||||
}),
|
||||
c('&:hover ~', [
|
||||
cE('border-mask', {
|
||||
boxShadow: boxShadowHover
|
||||
border: borderHover
|
||||
})
|
||||
]),
|
||||
c('&:focus', {
|
||||
@ -257,6 +269,7 @@ export default c([
|
||||
}, [
|
||||
c('& ~', [
|
||||
cE('border-mask', {
|
||||
border: borderFocus,
|
||||
boxShadow: boxShadowFocus
|
||||
})
|
||||
])
|
||||
@ -267,12 +280,12 @@ export default c([
|
||||
({ props }) => ['warning', 'error'].map(status => {
|
||||
const local = props.$local
|
||||
const boxShadow = local[createKey('boxShadow', status)]
|
||||
const boxShadowHover = local[createKey('boxShadowHover', status)]
|
||||
const borderHover = local[createKey('borderHover', status)]
|
||||
const boxShadowFocus = local[createKey('boxShadowFocus', status)]
|
||||
const colorFocus = local[createKey('colorFocus', status)]
|
||||
const caretColor = local[createKey('caretColor', status)]
|
||||
const buttonTextColorHover = local[createKey('buttonTextColorHover', status)]
|
||||
const buttonTextColorActive = local[createKey('buttonTextColorActive', status)]
|
||||
const buttonTextColorPressed = local[createKey('buttonTextColorPressed', status)]
|
||||
return insideFormItem(
|
||||
status,
|
||||
cTB('input-number', [
|
||||
@ -284,7 +297,7 @@ export default c([
|
||||
}, [
|
||||
c('&:hover ~', [
|
||||
cE('border-mask', {
|
||||
boxShadow: boxShadowHover
|
||||
border: borderHover
|
||||
})
|
||||
]),
|
||||
c('&:focus', {
|
||||
@ -305,7 +318,7 @@ export default c([
|
||||
]),
|
||||
c('&:active', [
|
||||
cB('icon', {
|
||||
color: buttonTextColorActive
|
||||
color: buttonTextColorPressed
|
||||
})
|
||||
])
|
||||
])
|
||||
|
||||
@ -29,7 +29,6 @@ export default create({
|
||||
actionColorOverlay
|
||||
} = derived
|
||||
const color = inputColorOverlay
|
||||
const borderColorHover = primaryColorHover
|
||||
const buttonTextColor = textColor
|
||||
const buttonColorDisabled = colorDisabled
|
||||
const buttonTextColorDisabled = textColorDisabled
|
||||
@ -38,7 +37,7 @@ export default create({
|
||||
const buttonColorActive = buttonColor
|
||||
const caretColor = null
|
||||
const buttonTextColorHover = primaryColorHover
|
||||
const buttonTextColorActive = primaryColorPressed
|
||||
const buttonTextColorPressed = primaryColorPressed
|
||||
return {
|
||||
...inputCommonVariables,
|
||||
...inputNumberCommonVariables,
|
||||
@ -50,36 +49,36 @@ export default create({
|
||||
colorDisabled,
|
||||
textColorDisabled,
|
||||
textColor,
|
||||
borderColor: 'transparent',
|
||||
borderColorHover,
|
||||
border: '1px solid transparent',
|
||||
borderHover: `1px solid ${primaryColorHover}`,
|
||||
borderFocus: `1px solid ${primaryColorHover}`,
|
||||
buttonColor,
|
||||
buttonColorHover,
|
||||
buttonColorActive,
|
||||
buttonTextColor,
|
||||
buttonTextColorHover,
|
||||
buttonTextColorActive,
|
||||
buttonTextColorPressed,
|
||||
caretColor,
|
||||
color,
|
||||
colorFocus: changeColor(primaryColor, { alpha: 0.1 }),
|
||||
boxShadowFocus: `inset 0 0 0 1px ${primaryColorHover}, 0 0 8px 0 ${changeColor(primaryColor, { alpha: 0.3 })}`,
|
||||
boxShadowHover: `inset 0 0 0 1px ${primaryColorHover}`,
|
||||
boxShadowFocus: `0 0 8px 0 ${changeColor(primaryColor, { alpha: 0.3 })}`,
|
||||
placeholdeColor,
|
||||
// warning
|
||||
boxShadowWarning: `inset 0 0 0 1px ${warningColor}`,
|
||||
boxShadowFocusWarning: `inset 0 0 0 1px ${warningColorHover}, 0 0 8px 0 ${changeColor(warningColor, { alpha: 0.2 })}`,
|
||||
boxShadowHoverWarning: `inset 0 0 0 1px ${warningColorHover}`,
|
||||
borderWarning: `inset 0 0 0 1px ${warningColor}`,
|
||||
borderHoverWarning: `inset 0 0 0 1px ${warningColorHover}`,
|
||||
boxShadowFocusWarning: `0 0 8px 0 ${changeColor(warningColor, { alpha: 0.2 })}`,
|
||||
colorFocusWarning: changeColor(warningColor, { alpha: 0.1 }),
|
||||
caretColorWarning: warningColorHover,
|
||||
buttonTextColorHoverWarning: warningColorHover,
|
||||
buttonTextColorActiveWarning: warningColorPressed,
|
||||
buttonTextColorPressedWarning: warningColorPressed,
|
||||
// error
|
||||
boxShadowError: `inset 0 0 0 1px ${errorColor}`,
|
||||
boxShadowFocusError: `inset 0 0 0 1px ${errorColorHover}, 0 0 8px 0 ${changeColor(errorColor, { alpha: 0.2 })}`,
|
||||
boxShadowHoverError: `inset 0 0 0 1px ${errorColorHover}`,
|
||||
borderError: `inset 0 0 0 1px ${errorColor}`,
|
||||
borderHoverError: `inset 0 0 0 1px ${errorColorHover}`,
|
||||
boxShadowFocusError: `0 0 8px 0 ${changeColor(errorColor, { alpha: 0.2 })}`,
|
||||
colorFocusError: changeColor(errorColor, { alpha: 0.1 }),
|
||||
caretColorError: errorColorHover,
|
||||
buttonTextColorHoverError: errorColorHover,
|
||||
buttonTextColorActiveError: errorColorPressed
|
||||
buttonTextColorPressedError: errorColorPressed
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -29,7 +29,6 @@ export default create({
|
||||
textColor5: placeholderColorDisabled,
|
||||
inputColor: color
|
||||
} = derived
|
||||
const borderColorHover = primaryColorHover
|
||||
const buttonTextColor = textColor
|
||||
const buttonColorDisabled = colorDisabled
|
||||
const buttonTextColorDisabled = textColorDisabled
|
||||
@ -37,7 +36,7 @@ export default create({
|
||||
const buttonColorActive = buttonColor
|
||||
const caretColor = null
|
||||
const buttonTextColorHover = primaryColorHover
|
||||
const buttonTextColorActive = primaryColorPressed
|
||||
const buttonTextColorPressed = primaryColorPressed
|
||||
const colorFocus = color
|
||||
return {
|
||||
...inputCommonVariables,
|
||||
@ -50,36 +49,36 @@ export default create({
|
||||
colorDisabled,
|
||||
textColorDisabled,
|
||||
textColor,
|
||||
borderColor,
|
||||
borderColorHover,
|
||||
border: `1px solid ${borderColor}`,
|
||||
borderHover: `1px solid ${primaryColorHover}`,
|
||||
borderFocus: `1px solid ${primaryColorHover}`,
|
||||
buttonColor,
|
||||
buttonColorHover,
|
||||
buttonColorActive,
|
||||
buttonTextColor,
|
||||
buttonTextColorHover,
|
||||
buttonTextColorActive,
|
||||
buttonTextColorPressed,
|
||||
caretColor,
|
||||
color,
|
||||
colorFocus,
|
||||
boxShadowFocus: `inset 0 0 0 1px ${primaryColorHover}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}`,
|
||||
boxShadowHover: `inset 0 0 0 1px ${primaryColorHover}`,
|
||||
boxShadowFocus: `0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}`,
|
||||
placeholderColor,
|
||||
// warning
|
||||
boxShadowWarning: `inset 0 0 0 1px ${warningColor}`,
|
||||
boxShadowFocusWarning: `inset 0 0 0 1px ${warningColorHover}, 0 0 0 2px ${changeColor(warningColor, { alpha: 0.2 })}`,
|
||||
boxShadowHoverWarning: `inset 0 0 0 1px ${warningColorHover}`,
|
||||
borderHoverWarning: `1px solid ${warningColorHover}`,
|
||||
boxShadowFocusWarning: `0 0 0 2px ${changeColor(warningColor, { alpha: 0.2 })}`,
|
||||
colorFocusWarning: colorFocus,
|
||||
caretColorWarning: warningColorHover,
|
||||
buttonTextColorHoverWarning: warningColorHover,
|
||||
buttonTextColorActiveWarning: warningColorPressed,
|
||||
buttonTextColorPressedWarning: warningColorPressed,
|
||||
// error
|
||||
boxShadowError: `inset 0 0 0 1px ${errorColor}`,
|
||||
boxShadowFocusError: `inset 0 0 0 1px ${errorColorHover}, 0 0 0 2px ${changeColor(errorColor, { alpha: 0.2 })}`,
|
||||
boxShadowHoverError: `inset 0 0 0 1px ${errorColorHover}`,
|
||||
borderError: `1px solid ${errorColor}`,
|
||||
borderHoverError: `1px solid ${errorColorHover}`,
|
||||
boxShadowFocusError: `0 0 0 2px ${changeColor(errorColor, { alpha: 0.2 })}`,
|
||||
colorFocusError: colorFocus,
|
||||
caretColorError: errorColorHover,
|
||||
buttonTextColorHoverError: errorColorHover,
|
||||
buttonTextColorActiveError: errorColorPressed
|
||||
buttonTextColorPressedError: errorColorPressed
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user