mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
refactor(input-number): rename cssr vars
This commit is contained in:
07akioni
parent
c043d52068
commit
82f992c0b2
@ -9,25 +9,25 @@ export default c([
|
||||
borderRadius
|
||||
} = props.$local
|
||||
const {
|
||||
disabledButtonBackgroundColor,
|
||||
disabledButtonTextColor,
|
||||
disabledPlaceholderColor,
|
||||
disabledBackgroundColor,
|
||||
disabledTextColor,
|
||||
buttonColorDisabled,
|
||||
buttonTextColorDisabled,
|
||||
placeholderColorDisabled,
|
||||
colorDisabled,
|
||||
textColorDisabled,
|
||||
textColor,
|
||||
borderColor,
|
||||
borderHoverColor,
|
||||
buttonBackgroundColor,
|
||||
hoverButtonBackgroundColor,
|
||||
activeButtonBackgroundColor,
|
||||
borderColorHover,
|
||||
buttonColor,
|
||||
buttonColorHover,
|
||||
buttonColorActive,
|
||||
buttonTextColor,
|
||||
hoverButtonTextColor,
|
||||
activeButtonTextColor,
|
||||
buttonTextColorHover,
|
||||
buttonTextColorActive,
|
||||
caretColor,
|
||||
backgroundColor,
|
||||
focusBackgroundColor,
|
||||
focusBorderMaskBoxShadow,
|
||||
hoverBorderMaskBoxShadow,
|
||||
color: backgroundColor,
|
||||
colorFocus,
|
||||
borderMaskBoxShadowFocus,
|
||||
borderMaskBoxShadowHover,
|
||||
placeholdeColor
|
||||
} = props.$local.default
|
||||
return cTB('input-number', {
|
||||
@ -104,23 +104,23 @@ export default c([
|
||||
pointerEvents: 'none'
|
||||
}, [
|
||||
cB('input-number-button-body', {
|
||||
backgroundColor: disabledButtonBackgroundColor
|
||||
backgroundColor: buttonColorDisabled
|
||||
}),
|
||||
cB('input-number-button-boundary', {
|
||||
backgroundColor: disabledButtonBackgroundColor
|
||||
backgroundColor: buttonColorDisabled
|
||||
}),
|
||||
cB('icon', {
|
||||
fill: disabledButtonTextColor,
|
||||
stroke: disabledButtonTextColor
|
||||
fill: buttonTextColorDisabled,
|
||||
stroke: buttonTextColorDisabled
|
||||
})
|
||||
]),
|
||||
cE('input', {
|
||||
backgroundColor: disabledBackgroundColor,
|
||||
color: disabledTextColor,
|
||||
backgroundColor: colorDisabled,
|
||||
color: textColorDisabled,
|
||||
pointerEvents: 'none'
|
||||
}, [
|
||||
c('&::placeholder', {
|
||||
color: disabledPlaceholderColor
|
||||
color: placeholderColorDisabled
|
||||
})
|
||||
])
|
||||
]),
|
||||
@ -169,7 +169,7 @@ export default c([
|
||||
transition: `
|
||||
background-color .3s ${easeInOutCubicBezier}
|
||||
`,
|
||||
backgroundColor: buttonBackgroundColor
|
||||
backgroundColor: buttonColor
|
||||
}),
|
||||
cB('input-number-button-boundary', {
|
||||
raw: `
|
||||
@ -181,7 +181,7 @@ export default c([
|
||||
transition: `
|
||||
background-color .3s ${easeInOutCubicBezier}
|
||||
`,
|
||||
backgroundColor: buttonBackgroundColor
|
||||
backgroundColor: buttonColor
|
||||
}),
|
||||
cB('icon', {
|
||||
fill: buttonTextColor,
|
||||
@ -189,45 +189,45 @@ export default c([
|
||||
}),
|
||||
c('&:hover ~', [
|
||||
cE('border-mask', {
|
||||
boxShadow: `inset 0 0 0 1px ${borderHoverColor}`
|
||||
boxShadow: `inset 0 0 0 1px ${borderColorHover}`
|
||||
})
|
||||
]),
|
||||
c('&:hover', [
|
||||
cB('input-number-button-body', {
|
||||
backgroundColor: hoverButtonBackgroundColor
|
||||
backgroundColor: buttonColorHover
|
||||
}),
|
||||
cB('input-number-button-boundary', {
|
||||
backgroundColor: hoverButtonBackgroundColor
|
||||
backgroundColor: buttonColorHover
|
||||
}),
|
||||
cB('icon', {
|
||||
stroke: hoverButtonTextColor,
|
||||
fill: hoverButtonTextColor
|
||||
stroke: buttonTextColorHover,
|
||||
fill: buttonTextColorHover
|
||||
})
|
||||
]),
|
||||
c('&:active', [
|
||||
cB('input-number-button-body', {
|
||||
backgroundColor: activeButtonBackgroundColor
|
||||
backgroundColor: buttonColorActive
|
||||
}),
|
||||
cB('input-number-button-boundary', {
|
||||
backgroundColor: activeButtonBackgroundColor
|
||||
backgroundColor: buttonColorActive
|
||||
}),
|
||||
cB('icon', {
|
||||
stroke: activeButtonTextColor,
|
||||
fill: activeButtonTextColor
|
||||
stroke: buttonTextColorActive,
|
||||
fill: buttonTextColorActive
|
||||
})
|
||||
]),
|
||||
cM('disabled', {
|
||||
cursor: 'not-allowed'
|
||||
}, [
|
||||
cB('input-number-button-body', {
|
||||
backgroundColor: disabledButtonBackgroundColor
|
||||
backgroundColor: buttonColorDisabled
|
||||
}),
|
||||
cB('input-number-button-boundary', {
|
||||
backgroundColor: disabledButtonBackgroundColor
|
||||
backgroundColor: buttonColorDisabled
|
||||
}),
|
||||
cB('icon', {
|
||||
stroke: disabledButtonTextColor,
|
||||
fill: disabledButtonTextColor
|
||||
stroke: buttonTextColorDisabled,
|
||||
fill: buttonTextColorDisabled
|
||||
})
|
||||
])
|
||||
]),
|
||||
@ -257,15 +257,15 @@ export default c([
|
||||
}),
|
||||
c('&:hover ~', [
|
||||
cE('border-mask', {
|
||||
boxShadow: hoverBorderMaskBoxShadow
|
||||
boxShadow: borderMaskBoxShadowHover
|
||||
})
|
||||
]),
|
||||
c('&:focus', {
|
||||
backgroundColor: focusBackgroundColor
|
||||
backgroundColor: colorFocus
|
||||
}, [
|
||||
c('& ~', [
|
||||
cE('border-mask', {
|
||||
boxShadow: focusBorderMaskBoxShadow
|
||||
boxShadow: borderMaskBoxShadowFocus
|
||||
})
|
||||
])
|
||||
])
|
||||
@ -276,12 +276,12 @@ export default c([
|
||||
const pallete = props.$local[status]
|
||||
const {
|
||||
borderMaskBoxShadow,
|
||||
hoverBorderMaskBoxShadow,
|
||||
focusBorderMaskBoxShadow,
|
||||
focusBackgroundColor,
|
||||
borderMaskBoxShadowHover,
|
||||
borderMaskBoxShadowFocus,
|
||||
colorFocus,
|
||||
caretColor,
|
||||
hoverButtonTextColor,
|
||||
activeButtonTextColor
|
||||
buttonTextColorHover,
|
||||
buttonTextColorActive
|
||||
} = pallete
|
||||
return insideFormItem(
|
||||
status,
|
||||
@ -294,15 +294,15 @@ export default c([
|
||||
}, [
|
||||
c('&:hover ~', [
|
||||
cE('border-mask', {
|
||||
boxShadow: hoverBorderMaskBoxShadow
|
||||
boxShadow: borderMaskBoxShadowHover
|
||||
})
|
||||
]),
|
||||
c('&:focus', {
|
||||
backgroundColor: focusBackgroundColor
|
||||
backgroundColor: colorFocus
|
||||
}, [
|
||||
c('& ~', [
|
||||
cE('border-mask', {
|
||||
boxShadow: focusBorderMaskBoxShadow
|
||||
boxShadow: borderMaskBoxShadowFocus
|
||||
})
|
||||
])
|
||||
])
|
||||
@ -310,14 +310,14 @@ export default c([
|
||||
cE('button', [
|
||||
c('&:hover', [
|
||||
cB('icon', {
|
||||
fill: hoverButtonTextColor,
|
||||
stroke: hoverButtonTextColor
|
||||
fill: buttonTextColorHover,
|
||||
stroke: buttonTextColorHover
|
||||
})
|
||||
]),
|
||||
c('&:active', [
|
||||
cB('icon', {
|
||||
fill: activeButtonTextColor,
|
||||
stroke: activeButtonTextColor
|
||||
fill: buttonTextColorActive,
|
||||
stroke: buttonTextColorActive
|
||||
})
|
||||
])
|
||||
])
|
||||
|
||||
@ -22,66 +22,66 @@ export default create({
|
||||
warningActiveColor,
|
||||
secondaryTextColor: textColor,
|
||||
inputBackgroundOverlayColor,
|
||||
disabledInputBackgroundOverlayColor: disabledBackgroundColor,
|
||||
disabledTextColor,
|
||||
disabledInputBackgroundOverlayColor: colorDisabled,
|
||||
textColorDisabled,
|
||||
placeholdeColor,
|
||||
disabledPlaceholderColor,
|
||||
placeholderColorDisabled,
|
||||
actionBackgroundOverlayColor
|
||||
} = derived
|
||||
const backgroundColor = inputBackgroundOverlayColor
|
||||
const borderHoverColor = primaryHoverColor
|
||||
const color = inputBackgroundOverlayColor
|
||||
const borderColorHover = primaryHoverColor
|
||||
const buttonTextColor = textColor
|
||||
const disabledButtonBackgroundColor = disabledBackgroundColor
|
||||
const disabledButtonTextColor = disabledTextColor
|
||||
const buttonBackgroundColor = actionBackgroundOverlayColor
|
||||
const hoverButtonBackgroundColor = buttonBackgroundColor
|
||||
const activeButtonBackgroundColor = buttonBackgroundColor
|
||||
const buttonColorDisabled = colorDisabled
|
||||
const buttonTextColorDisabled = textColorDisabled
|
||||
const buttonColor = actionBackgroundOverlayColor
|
||||
const buttonColorHover = buttonColor
|
||||
const buttonColorActive = buttonColor
|
||||
const caretColor = null
|
||||
const hoverButtonTextColor = primaryHoverColor
|
||||
const activeButtonTextColor = primaryActiveColor
|
||||
const buttonTextColorHover = primaryHoverColor
|
||||
const buttonTextColorActive = primaryActiveColor
|
||||
return {
|
||||
...inputCommonVariables,
|
||||
...inputNumberCommonVariables,
|
||||
borderRadius,
|
||||
default: {
|
||||
disabledButtonBackgroundColor,
|
||||
disabledButtonTextColor,
|
||||
disabledPlaceholderColor,
|
||||
disabledBackgroundColor,
|
||||
disabledTextColor,
|
||||
buttonColorDisabled,
|
||||
buttonTextColorDisabled,
|
||||
placeholderColorDisabled,
|
||||
colorDisabled,
|
||||
textColorDisabled,
|
||||
textColor,
|
||||
borderColor: 'transparent',
|
||||
borderHoverColor,
|
||||
buttonBackgroundColor,
|
||||
hoverButtonBackgroundColor,
|
||||
activeButtonBackgroundColor,
|
||||
borderColorHover,
|
||||
buttonColor,
|
||||
buttonColorHover,
|
||||
buttonColorActive,
|
||||
buttonTextColor,
|
||||
hoverButtonTextColor,
|
||||
activeButtonTextColor,
|
||||
buttonTextColorHover,
|
||||
buttonTextColorActive,
|
||||
caretColor,
|
||||
backgroundColor,
|
||||
focusBackgroundColor: changeColor(primaryColor, { alpha: 0.1 }),
|
||||
focusBorderMaskBoxShadow: `inset 0 0 0 1px ${primaryHoverColor}, 0 0 8px 0 ${changeColor(primaryColor, { alpha: 0.3 })}`,
|
||||
hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${primaryHoverColor}`,
|
||||
color,
|
||||
colorFocus: changeColor(primaryColor, { alpha: 0.1 }),
|
||||
borderMaskBoxShadowFocus: `inset 0 0 0 1px ${primaryHoverColor}, 0 0 8px 0 ${changeColor(primaryColor, { alpha: 0.3 })}`,
|
||||
borderMaskBoxShadowHover: `inset 0 0 0 1px ${primaryHoverColor}`,
|
||||
placeholdeColor
|
||||
},
|
||||
warning: {
|
||||
borderMaskBoxShadow: `inset 0 0 0 1px ${warningColor}`,
|
||||
focusBorderMaskBoxShadow: `inset 0 0 0 1px ${warningHoverColor}, 0 0 8px 0 ${changeColor(warningColor, { alpha: 0.2 })}`,
|
||||
hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${warningHoverColor}`,
|
||||
focusBackgroundColor: changeColor(warningColor, { alpha: 0.1 }),
|
||||
borderMaskBoxShadowFocus: `inset 0 0 0 1px ${warningHoverColor}, 0 0 8px 0 ${changeColor(warningColor, { alpha: 0.2 })}`,
|
||||
borderMaskBoxShadowHover: `inset 0 0 0 1px ${warningHoverColor}`,
|
||||
colorFocus: changeColor(warningColor, { alpha: 0.1 }),
|
||||
caretColor: warningHoverColor,
|
||||
hoverButtonTextColor: warningHoverColor,
|
||||
activeButtonTextColor: warningActiveColor
|
||||
buttonTextColorHover: warningHoverColor,
|
||||
buttonTextColorActive: warningActiveColor
|
||||
},
|
||||
error: {
|
||||
borderMaskBoxShadow: `inset 0 0 0 1px ${errorColor}`,
|
||||
focusBorderMaskBoxShadow: `inset 0 0 0 1px ${errorHoverColor}, 0 0 8px 0 ${changeColor(errorColor, { alpha: 0.2 })}`,
|
||||
hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${errorHoverColor}`,
|
||||
focusBackgroundColor: changeColor(errorColor, { alpha: 0.1 }),
|
||||
borderMaskBoxShadowFocus: `inset 0 0 0 1px ${errorHoverColor}, 0 0 8px 0 ${changeColor(errorColor, { alpha: 0.2 })}`,
|
||||
borderMaskBoxShadowHover: `inset 0 0 0 1px ${errorHoverColor}`,
|
||||
colorFocus: changeColor(errorColor, { alpha: 0.1 }),
|
||||
caretColor: errorHoverColor,
|
||||
hoverButtonTextColor: errorHoverColor,
|
||||
activeButtonTextColor: errorActiveColor
|
||||
buttonTextColorHover: errorHoverColor,
|
||||
buttonTextColorActive: errorActiveColor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,66 +22,66 @@ export default create({
|
||||
warningActiveColor,
|
||||
borderColor,
|
||||
secondaryTextColor: textColor,
|
||||
actionBackgroundColor: buttonBackgroundColor,
|
||||
disabledInputBackgroundColor: disabledBackgroundColor,
|
||||
disabledTextColor,
|
||||
actionBackgroundColor: buttonColor,
|
||||
disabledInputBackgroundColor: colorDisabled,
|
||||
textColorDisabled,
|
||||
placeholdeColor,
|
||||
quinaryTextColor: disabledPlaceholderColor,
|
||||
inputBackgroundColor: backgroundColor
|
||||
quinaryTextColor: placeholderColorDisabled,
|
||||
inputBackgroundColor: color
|
||||
} = derived
|
||||
const borderHoverColor = primaryHoverColor
|
||||
const borderColorHover = primaryHoverColor
|
||||
const buttonTextColor = textColor
|
||||
const disabledButtonBackgroundColor = disabledBackgroundColor
|
||||
const disabledButtonTextColor = disabledTextColor
|
||||
const hoverButtonBackgroundColor = buttonBackgroundColor
|
||||
const activeButtonBackgroundColor = buttonBackgroundColor
|
||||
const buttonColorDisabled = colorDisabled
|
||||
const buttonTextColorDisabled = textColorDisabled
|
||||
const buttonColorHover = buttonColor
|
||||
const buttonColorActive = buttonColor
|
||||
const caretColor = null
|
||||
const hoverButtonTextColor = primaryHoverColor
|
||||
const activeButtonTextColor = primaryActiveColor
|
||||
const focusBackgroundColor = backgroundColor
|
||||
const buttonTextColorHover = primaryHoverColor
|
||||
const buttonTextColorActive = primaryActiveColor
|
||||
const colorFocus = color
|
||||
return {
|
||||
...inputCommonVariables,
|
||||
...inputNumberCommonVariables,
|
||||
borderRadius,
|
||||
default: {
|
||||
disabledButtonBackgroundColor,
|
||||
disabledButtonTextColor,
|
||||
disabledPlaceholderColor,
|
||||
disabledBackgroundColor,
|
||||
disabledTextColor,
|
||||
buttonColorDisabled,
|
||||
buttonTextColorDisabled,
|
||||
placeholderColorDisabled,
|
||||
colorDisabled,
|
||||
textColorDisabled,
|
||||
textColor,
|
||||
borderColor,
|
||||
borderHoverColor,
|
||||
buttonBackgroundColor,
|
||||
hoverButtonBackgroundColor,
|
||||
activeButtonBackgroundColor,
|
||||
borderColorHover,
|
||||
buttonColor,
|
||||
buttonColorHover,
|
||||
buttonColorActive,
|
||||
buttonTextColor,
|
||||
hoverButtonTextColor,
|
||||
activeButtonTextColor,
|
||||
buttonTextColorHover,
|
||||
buttonTextColorActive,
|
||||
caretColor,
|
||||
backgroundColor,
|
||||
focusBackgroundColor,
|
||||
focusBorderMaskBoxShadow: `inset 0 0 0 1px ${primaryHoverColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}`,
|
||||
hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${primaryHoverColor}`,
|
||||
color,
|
||||
colorFocus,
|
||||
borderMaskBoxShadowFocus: `inset 0 0 0 1px ${primaryHoverColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}`,
|
||||
borderMaskBoxShadowHover: `inset 0 0 0 1px ${primaryHoverColor}`,
|
||||
placeholdeColor
|
||||
},
|
||||
warning: {
|
||||
borderMaskBoxShadow: `inset 0 0 0 1px ${warningColor}`,
|
||||
focusBorderMaskBoxShadow: `inset 0 0 0 1px ${warningHoverColor}, 0 0 0 2px ${changeColor(warningColor, { alpha: 0.2 })}`,
|
||||
hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${warningHoverColor}`,
|
||||
focusBackgroundColor,
|
||||
borderMaskBoxShadowFocus: `inset 0 0 0 1px ${warningHoverColor}, 0 0 0 2px ${changeColor(warningColor, { alpha: 0.2 })}`,
|
||||
borderMaskBoxShadowHover: `inset 0 0 0 1px ${warningHoverColor}`,
|
||||
colorFocus,
|
||||
caretColor: warningHoverColor,
|
||||
hoverButtonTextColor: warningHoverColor,
|
||||
activeButtonTextColor: warningActiveColor
|
||||
buttonTextColorHover: warningHoverColor,
|
||||
buttonTextColorActive: warningActiveColor
|
||||
},
|
||||
error: {
|
||||
borderMaskBoxShadow: `inset 0 0 0 1px ${errorColor}`,
|
||||
focusBorderMaskBoxShadow: `inset 0 0 0 1px ${errorHoverColor}, 0 0 0 2px ${changeColor(errorColor, { alpha: 0.2 })}`,
|
||||
hoverBorderMaskBoxShadow: `inset 0 0 0 1px ${errorHoverColor}`,
|
||||
focusBackgroundColor,
|
||||
borderMaskBoxShadowFocus: `inset 0 0 0 1px ${errorHoverColor}, 0 0 0 2px ${changeColor(errorColor, { alpha: 0.2 })}`,
|
||||
borderMaskBoxShadowHover: `inset 0 0 0 1px ${errorHoverColor}`,
|
||||
colorFocus,
|
||||
caretColor: errorHoverColor,
|
||||
hoverButtonTextColor: errorHoverColor,
|
||||
activeButtonTextColor: errorActiveColor
|
||||
buttonTextColorHover: errorHoverColor,
|
||||
buttonTextColorActive: errorActiveColor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user