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

refactor: clean some cssr files' codes

Browse Source
This commit is contained in:
07akioni 2020-05-29 13:22:12 +08:00
parent 0f28fa0dec
commit 0f5ac2782d
5 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Button/src/styles/Button.cssr.js
View File

@ -1,8 +1,10 @@
import { c, cB, cTB, cE, cM, cNotM } from '../../../_utils/cssr'
import { c, cB, cTB, cE, cM, cNotM, namespace } from '../../../_utils/cssr'
const ns = namespace
function createRippleAnimation (digest, color, theme) {
return [
c(`@keyframes n-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-spread`, {
c(`@keyframes ${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-spread`, {
from: {
boxShadow: `0 0 0 0 ${color}`
},
@ -10,7 +12,7 @@ function createRippleAnimation (digest, color, theme) {
boxShadow: `0 0 0 4px ${color}`
}
}),
c(`@keyframes n-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-opacity`, {
c(`@keyframes ${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-opacity`, {
from: {
opacity: 0.4
},
@ -106,7 +108,7 @@ export function createColorStyle () {
]),
cM('rippling', [
c('&::after', {
animationName: `n-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-spread, n-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-opacity`
animationName: `${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-spread, ${ns}-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-opacity`
})
])
]),

13
src/Input/src/styles/Input.cssr.js
View File

@ -10,26 +10,27 @@ function createInputStyleAsFormItem () {
}) => {
const pallete = context.pallete
const status = props.status
const subPallete = pallete[status]
return [
cM('stateful', [
cE('border-mask', {
borderColor: pallete[status].borderMaskBorderColor.default
borderColor: subPallete.borderMaskBorderColor.default
}),
c('&:hover', [
cE('border-mask', {
borderColor: pallete[status].borderMaskBorderColor.hover
borderColor: subPallete.borderMaskBorderColor.hover
})
]),
cM('focus', {
backgroundColor: pallete[status].backgroundColor.focus
backgroundColor: subPallete.backgroundColor.focus
}, [
cE('border-mask', {
borderColor: pallete[status].borderMaskBorderColor.focus,
boxShadow: pallete[status].borderMaskBoxShadow.focus
borderColor: subPallete.borderMaskBorderColor.focus,
boxShadow: subPallete.borderMaskBoxShadow.focus
})
]),
cE('input, textarea', {
caretColor: pallete[status].caretColor.default
caretColor: subPallete.caretColor.default
})
])
]

15
src/InputNumber/src/styles/InputNumber.cssr.js
View File

@ -7,24 +7,25 @@ function styleAsFormItem () {
({ props, context }) => {
const pallete = context.pallete
const status = props.status
const subPallete = pallete[status]
return cTB('input-number', [
cE('border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.default
boxShadow: subPallete.borderMaskBoxShadow.default
}),
cE('input', {
caretColor: pallete[status].caretColor
caretColor: subPallete.caretColor
}, [
c('&:hover ~', [
cE('border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.hover
boxShadow: subPallete.borderMaskBoxShadow.hover
})
]),
c('&:focus', {
backgroundColor: pallete[status].backgroundColor.focus
backgroundColor: subPallete.backgroundColor.focus
}, [
c('& ~', [
cE('border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.focus
boxShadow: subPallete.borderMaskBoxShadow.focus
})
])
])
@ -32,12 +33,12 @@ function styleAsFormItem () {
cE('add-button, minus-button', [
c('&:hover', [
cB('icon', {
fill: pallete[status].buttonTextColor.hover
fill: subPallete.buttonTextColor.hover
})
]),
c('&:active', [
cB('icon', {
fill: pallete[status].buttonTextColor.active
fill: subPallete.buttonTextColor.active
})
])
])

19
src/_base/Selection/src/styles/Selection.cssr.js
View File

@ -9,50 +9,51 @@ function styleAsFormItem () {
({ context, props }) => {
const pallete = context.pallete
const status = props.status
const subPallete = pallete[status]
return [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.default
boxShadow: subPallete.borderMaskBoxShadow.default
}),
cNotM('disabled', [
cM('active', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.active
boxShadow: subPallete.borderMaskBoxShadow.active
}),
cB('base-selection-label', {
backgroundColor: pallete[status].backgroundColor.active
backgroundColor: subPallete.backgroundColor.active
}),
cB('base-selection-tags', {
backgroundColor: pallete[status].backgroundColor.active
backgroundColor: subPallete.backgroundColor.active
})
]),
cNotM('active', [
cB('base-selection-label', [
c('&:hover ~', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.hover
boxShadow: subPallete.borderMaskBoxShadow.hover
})
]),
c('&:focus ~', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.focus
boxShadow: subPallete.borderMaskBoxShadow.focus
})
])
]),
cB('base-selection-tags', [
c('&:hover ~', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.hover
boxShadow: subPallete.borderMaskBoxShadow.hover
})
]),
c('&:focus ~', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.focus
boxShadow: subPallete.borderMaskBoxShadow.focus
})
])
]),
cM('focus', [
cB('base-selection-border-mask', {
boxShadow: pallete[status].borderMaskBoxShadow.focus
boxShadow: subPallete.borderMaskBoxShadow.focus
})
])
])

2
src/_utils/cssr/index.js
View File

@ -64,4 +64,4 @@ function createStyleAsFormItem (style) {
])
}
export { c, cTB, cB, cE, cM, cNotM, createThemedStyle, createStyleAsFormItem }
export { c, cTB, cB, cE, cM, cNotM, createThemedStyle, createStyleAsFormItem, namespace }