mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-06 12:17:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(anchor): clean cssr codes

Browse Source
This commit is contained in:
07akioni 2020-08-08 20:09:54 +08:00
parent 082198f94c
commit 16cc49ea9e
3 changed files with 38 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/anchor/src/styles/themed-base.cssr.js
View File

@ -3,16 +3,14 @@ import { c, cE, cB, cM, cTB } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
action,
railBackgroundColor,
linkBackgroundColor,
railActiveBackgroundColor
railColor,
linkColor,
railColorActive,
linkTextColor,
linkTextColorHover,
linkTextColorActive,
linkTextColorMatch
} = props.$local
const {
default: defaultColor,
hover: hoverColor,
active: activeColor
} = action
const {
easeInOutCubicBezier
} = props.$base
@ -31,7 +29,7 @@ export default c([
border-top-right-radius: 10.5px;
border-bottom-right-radius: 10.5px;
`,
backgroundColor: linkBackgroundColor,
backgroundColor: linkColor,
transition: `
top .15s ${easeInOutCubicBezier},
max-width .15s ${easeInOutCubicBezier},
@ -49,7 +47,7 @@ export default c([
overflow: hidden;
`,
transition: `background-color .3s ${easeInOutCubicBezier}`,
backgroundColor: railBackgroundColor
backgroundColor: railColor
}, [
cE('bar', {
raw: `
@ -65,10 +63,10 @@ export default c([
`
}, [
cM('active', {
backgroundColor: railActiveBackgroundColor
backgroundColor: railColorActive
})
]),
c('& +', [
c('+', [
cB('anchor-link', {
marginTop: 0
})
@ -86,7 +84,7 @@ export default c([
flex-direction: column;
`
}, [
c('& +', [
c('+', [
cB('anchor-link', {
paddingLeft: '16px'
})
@ -104,13 +102,16 @@ export default c([
padding-right: 16px;
`,
transition: `color .3s ${easeInOutCubicBezier}`,
color: defaultColor
color: linkTextColor
}, [
c('&:hover, &:focus', {
color: hoverColor
color: linkTextColorHover
}),
c('&:active', {
color: linkTextColorActive
}),
cM('active', {
color: activeColor
color: linkTextColorMatch
})
])
])

21
src/anchor/styles/dark.js
View File

@ -6,25 +6,24 @@ export default create({
name: 'Anchor',
getDerivedVariables ({ base, derived }) {
const {
borderRadius,
primaryDefault
borderRadius
} = base
const alphaAnchor = '0.15'
const {
primaryColor,
primaryHoverColor,
primaryActiveColor,
railBackgroundOverlayColor,
secondaryTextOverlayColor
} = derived
return {
borderRadius,
railActiveBackgroundColor: primaryColor,
linkBackgroundColor: changeColor(primaryDefault, { alpha: alphaAnchor }),
railBackgroundColor: railBackgroundOverlayColor,
action: {
default: secondaryTextOverlayColor,
hover: primaryColor,
active: primaryColor
}
railColor: railBackgroundOverlayColor,
railColorActive: primaryColor,
linkColor: changeColor(primaryColor, { alpha: 0.15 }),
linkTextColor: secondaryTextOverlayColor,
linkTextColorHover: primaryHoverColor,
linkTextColorActive: primaryActiveColor,
linkTextColorMatch: primaryColor
}
}
})

21
src/anchor/styles/light.js
View File

@ -6,25 +6,24 @@ export default create({
name: 'Anchor',
getDerivedVariables ({ base, derived }) {
const {
borderRadius,
primaryDefault
borderRadius
} = base
const alphaAnchor = '0.15'
const {
railBackgroundOverlayColor,
primaryColor,
primaryHoverColor,
primaryActiveColor,
secondaryTextOverlayColor
} = derived
return {
borderRadius,
railActiveBackgroundColor: primaryColor,
linkBackgroundColor: changeColor(primaryDefault, { alpha: alphaAnchor }),
railBackgroundColor: railBackgroundOverlayColor,
action: {
default: secondaryTextOverlayColor,
hover: primaryColor,
active: primaryColor
}
railColor: railBackgroundOverlayColor,
railColorActive: primaryColor,
linkColor: changeColor(primaryColor, { alpha: 0.15 }),
linkTextColor: secondaryTextOverlayColor,
linkTextColorHover: primaryHoverColor,
linkTextColorActive: primaryActiveColor,
linkTextColorMatch: primaryColor
}
}
})