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

refactor(gradient-text): clean cssr codes

Browse Source
This commit is contained in:
07akioni 2020-08-10 22:12:59 +08:00
parent 450426c085
commit 648541aa4f
7 changed files with 71 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/components/gradientText/enUS/index.md
View File

@ -1,5 +1,5 @@
# Gradient Text
Why using gradient text? Rita applied it on some alert information. It looks quite good, so it's here.
It doesn't seem very useful. In fact it isn't.
## Demos

2
demo/documentation/components/gradientText/zhCN/index.md
View File

@ -1,5 +1,5 @@
# 渐变文字 Gradient Text
为啥要弄这么个东西呢？Rita 在一些警告信息上试了试渐变文字，我觉得看起来还挺好的。所以就有了这么个东西。
这个东西看起来没啥用，实际上确实没啥用。
## 演示
```demo

16
src/empty/styles/_common.js
View File

@ -1,14 +1,14 @@
export default {
fontSize: {
'small': '14px',
'medium': '14px',
'large': '15px',
'huge': '16px'
small: '14px',
medium: '14px',
large: '15px',
huge: '16px'
},
iconSize: {
'small': '28px',
'medium': '34px',
'large': '40px',
'huge': '46px'
small: '28px',
medium: '34px',
large: '40px',
huge: '46px'
}
}

6
src/gradient-text/src/GradientText.vue
View File

@ -24,7 +24,11 @@ import styles from './styles/index'
export default {
name: 'GradientText',
mixins: [withapp, themeable, usecssr(styles)],
mixins: [
withapp,
themeable,
usecssr(styles)
],
props: {
size: {
type: [String, Number],

82
src/gradient-text/src/styles/themed-base.cssr.js
View File

@ -3,48 +3,50 @@ import { c, cTB, cM } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
textBackgroundImage
backgroundImagePrimary,
backgroundImageInfo,
backgroundImageSuccess,
backgroundImageWarning,
backgroundImageError,
fontWeight
} = props.$local
const base = props.$base
const { strongFontWeight } = base
return [
cTB('gradient-text', {
return cTB('gradient-text', {
raw: `
display: inline-block;
font-weight: ${fontWeight};
font-size: inherit;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
white-space: nowrap;
`
},
[
cM('default-type', {
raw: `
display: inline-block;
font-weight: ${strongFontWeight};
font-size: inherit;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
white-space: nowrap;
background-image: ${backgroundImagePrimary};
`
},
[
cM('default-type', {
raw: `
background-image: ${textBackgroundImage.primary};
`
}),
cM('success-type', {
raw: `
background-image: ${textBackgroundImage.success};
`
}),
cM('warning-type', {
raw: `
background-image: ${textBackgroundImage.warning};
`
}),
cM('error-type', {
raw: `
background-image: ${textBackgroundImage.error};
`
}),
cM('info-type', {
raw: `
background-image: ${textBackgroundImage.info};
`
})
])]
}),
cM('success-type', {
raw: `
background-image: ${backgroundImageSuccess};
`
}),
cM('warning-type', {
raw: `
background-image: ${backgroundImageWarning};
`
}),
cM('error-type', {
raw: `
background-image: ${backgroundImageError};
`
}),
cM('info-type', {
raw: `
background-image: ${backgroundImageInfo};
`
})
])
}
])

15
src/gradient-text/styles/dark.js
View File

@ -3,7 +3,7 @@ import create from '../../styles/_utils/create-component-base'
export default create({
theme: 'dark',
name: 'GradientText',
getDerivedVariables ({ derived }) {
getDerivedVariables ({ base, derived }) {
const {
primaryColor,
successColor,
@ -17,13 +17,12 @@ export default create({
infoHsColor
} = derived
return {
textBackgroundImage: {
primary: `linear-gradient(252deg, ${primaryColor} 0%, ${primaryHsColor} 100%)`,
success: `linear-gradient(252deg, ${successColor} 0%, ${successHsColor} 100%)`,
warning: ` linear-gradient(252deg, ${warningColor} 0%, ${warningHsColor} 100%)`,
error: `linear-gradient(252deg, ${errorColor} 0%, ${errorHsColor} 100%)`,
info: `linear-gradient(252deg, ${infoColor} 0%, ${infoHsColor} 100%)`
}
fontWeight: base.strongFontWeight,
backgroundImagePrimary: `linear-gradient(252deg, ${primaryColor} 0%, ${primaryHsColor} 100%)`,
backgroundImageSuccess: `linear-gradient(252deg, ${successColor} 0%, ${successHsColor} 100%)`,
backgroundImageWarning: ` linear-gradient(252deg, ${warningColor} 0%, ${warningHsColor} 100%)`,
backgroundImageError: `linear-gradient(252deg, ${errorColor} 0%, ${errorHsColor} 100%)`,
backgroundImageInfo: `linear-gradient(252deg, ${infoColor} 0%, ${infoHsColor} 100%)`
}
}
})

15
src/gradient-text/styles/light.js
View File

@ -4,7 +4,7 @@ import { changeColor } from '../../../src/_utils/color/index'
export default create({
theme: 'light',
name: 'GradientText',
getDerivedVariables ({ derived }) {
getDerivedVariables ({ base, derived }) {
const {
primaryColor,
successColor,
@ -13,13 +13,12 @@ export default create({
infoColor
} = derived
return {
textBackgroundImage: {
primary: `linear-gradient(252deg, ${changeColor(primaryColor, { alpha: 0.6 })} 0%, ${primaryColor} 100%)`,
success: `linear-gradient(252deg, ${changeColor(successColor, { alpha: 0.6 })} 0%, ${successColor} 100%)`,
warning: ` linear-gradient(252deg, ${changeColor(warningColor, { alpha: 0.6 })} 0%, ${warningColor} 100%)`,
error: `linear-gradient(252deg, ${changeColor(errorColor, { alpha: 0.6 })} 0%, ${errorColor} 100%)`,
info: `linear-gradient(252deg, ${changeColor(infoColor, { alpha: 0.6 })} 0%, ${infoColor} 100%)`
}
fontWeight: base.strongFontWeight,
backgroundImagePrimary: `linear-gradient(252deg, ${changeColor(primaryColor, { alpha: 0.6 })} 0%, ${primaryColor} 100%)`,
backgroundImageSuccess: `linear-gradient(252deg, ${changeColor(successColor, { alpha: 0.6 })} 0%, ${successColor} 100%)`,
backgroundImageWarning: ` linear-gradient(252deg, ${changeColor(warningColor, { alpha: 0.6 })} 0%, ${warningColor} 100%)`,
backgroundImageError: `linear-gradient(252deg, ${changeColor(errorColor, { alpha: 0.6 })} 0%, ${errorColor} 100%)`,
backgroundImageInfo: `linear-gradient(252deg, ${changeColor(infoColor, { alpha: 0.6 })} 0%, ${infoColor} 100%)`
}
}
})