mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-24 12:45:18 +08:00
refactor(card): use global line-height
This commit is contained in:
07akioni
parent
b6b6f4cc0e
commit
169e41144a
@ -1,12 +1,6 @@
|
||||
import sizeStyle from './themed-size.cssr.js'
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'size',
|
||||
watch: ['size', 'mergedTheme'],
|
||||
CNode: sizeStyle
|
||||
},
|
||||
{
|
||||
key: 'mergedTheme',
|
||||
watch: ['mergedTheme'],
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
import { c, cTB, cB, cE, cM } from '../../../_utils/cssr'
|
||||
import { c, cTB, cB, cE, cM, createKey } from '../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const base = props.$global
|
||||
const cubicBezierEaseInOut = base.cubicBezierEaseInOut
|
||||
const {
|
||||
$local,
|
||||
$global: {
|
||||
cubicBezierEaseInOut
|
||||
}
|
||||
} = props
|
||||
const {
|
||||
color,
|
||||
textColor,
|
||||
@ -14,8 +18,9 @@ export default c([
|
||||
borderRadius,
|
||||
closeColor,
|
||||
closeColorHover,
|
||||
closeColorPressed
|
||||
} = props.$local
|
||||
closeColorPressed,
|
||||
lineHeight
|
||||
} = $local
|
||||
return cTB(
|
||||
'card',
|
||||
{
|
||||
@ -35,6 +40,79 @@ export default c([
|
||||
`
|
||||
},
|
||||
[
|
||||
['small', 'medium', 'large', 'huge'].map(size => {
|
||||
const {
|
||||
[createKey('marginBottom', size)]: marginBottom,
|
||||
[createKey('marginLeft', size)]: marginLeft,
|
||||
[createKey('marginTop', size)]: marginTop,
|
||||
[createKey('headerFontSize', size)]: headerFontSize,
|
||||
[createKey('fontSize', size)]: fontSize
|
||||
} = $local
|
||||
return cM(`${size}-size`, {
|
||||
}, [
|
||||
cM('content-segmented', [
|
||||
c('>', [
|
||||
cE('content', {
|
||||
paddingTop: marginBottom
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('content-soft-segmented', [
|
||||
c('>', [
|
||||
cE('content', {
|
||||
raw: `
|
||||
margin: 0 ${marginLeft};
|
||||
padding: ${marginBottom} 0;
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('footer-segmented', [
|
||||
c('>', [
|
||||
cE('footer', {
|
||||
paddingTop: marginBottom
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('footer-soft-segmented', [
|
||||
c('>', [
|
||||
cE('footer', {
|
||||
raw: `
|
||||
padding: ${marginBottom} 0;
|
||||
margin: 0 ${marginLeft};
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
c('>', [
|
||||
cB('card-header', {
|
||||
padding: `${marginTop} ${marginLeft} ${marginBottom} ${marginLeft}`
|
||||
}, [
|
||||
cE('main', {
|
||||
fontSize: headerFontSize
|
||||
}),
|
||||
cE('extra', {
|
||||
fontSize
|
||||
})
|
||||
]),
|
||||
cE('content, footer', {
|
||||
padding: `0 ${marginLeft} ${marginBottom} ${marginLeft}`,
|
||||
fontSize
|
||||
}, [
|
||||
c('&:first-child', {
|
||||
paddingTop: marginBottom
|
||||
})
|
||||
]),
|
||||
cE('action', {
|
||||
raw: `
|
||||
background-color: ${actionColor};
|
||||
padding: ${marginBottom} ${marginLeft};
|
||||
font-size: ${fontSize};
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
}),
|
||||
cB('card-cover', {
|
||||
raw: `
|
||||
overflow: hidden;
|
||||
@ -88,15 +166,13 @@ export default c([
|
||||
cE('content', {
|
||||
raw: `
|
||||
box-sizing: border-box;
|
||||
line-height: 1.75;
|
||||
font-size: 14px;
|
||||
line-height: ${lineHeight};
|
||||
`
|
||||
}),
|
||||
cE('footer', {
|
||||
raw: `
|
||||
box-sizing: border-box;
|
||||
line-height: 1.75;
|
||||
font-size: 14px;
|
||||
line-height: ${lineHeight};
|
||||
`
|
||||
})
|
||||
]),
|
||||
@ -120,7 +196,6 @@ export default c([
|
||||
cE('extra', {
|
||||
raw: `
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
transition: color .3s ${cubicBezierEaseInOut};
|
||||
color: ${textColor};
|
||||
`
|
||||
@ -146,8 +221,7 @@ export default c([
|
||||
transition:
|
||||
background-color .3s ${cubicBezierEaseInOut},
|
||||
border-color .3s ${cubicBezierEaseInOut};
|
||||
line-height: 1.75;
|
||||
font-size: 14px;
|
||||
line-height: ${lineHeight};
|
||||
background-clip: padding-box;
|
||||
background-color: ${actionColor};
|
||||
`
|
||||
|
||||
@ -1,88 +0,0 @@
|
||||
import { c, cB, cTB, cE, cM } from '../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
fontSize,
|
||||
marginLeft,
|
||||
marginTop,
|
||||
marginBottom
|
||||
} = props.$local
|
||||
const { actionColor } = props.$local
|
||||
const { size } = props.$vm
|
||||
const marginBottomSize = marginBottom[size]
|
||||
const marginLeftSize = marginLeft[size]
|
||||
const marginTopSize = marginTop[size]
|
||||
return cTB(
|
||||
'card',
|
||||
[
|
||||
cM(`${size}-size`, {
|
||||
}, [
|
||||
cM('content-segmented', [
|
||||
c('>', [
|
||||
cE('content', {
|
||||
paddingTop: marginBottomSize
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('content-soft-segmented', [
|
||||
c('>', [
|
||||
cE('content', {
|
||||
raw: `
|
||||
margin: 0 ${marginLeftSize};
|
||||
padding: ${marginBottomSize} 0;
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('footer-segmented', [
|
||||
c('>', [
|
||||
cE('footer', {
|
||||
paddingTop: marginBottomSize
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('footer-soft-segmented', [
|
||||
c('>', [
|
||||
cE('footer', {
|
||||
raw: `
|
||||
padding: ${marginBottomSize} 0;
|
||||
margin: 0 ${marginLeftSize};
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
c('>', [
|
||||
cB('card-header', {
|
||||
raw: `
|
||||
padding: ${marginTopSize} ${marginLeftSize} ${marginBottomSize} ${marginLeftSize};
|
||||
`
|
||||
}, [
|
||||
cE('main', {
|
||||
fontSize: fontSize[size]
|
||||
}),
|
||||
cE('extra', {
|
||||
fontSize: '14px'
|
||||
})
|
||||
]),
|
||||
cE('content, footer', {
|
||||
padding: `0 ${marginLeftSize} ${marginBottomSize} ${marginLeftSize}`,
|
||||
fontSize: '14px'
|
||||
}, [
|
||||
c('&:first-child', {
|
||||
paddingTop: marginBottomSize
|
||||
})
|
||||
]),
|
||||
cE('action', {
|
||||
raw: `
|
||||
background-color: ${actionColor};
|
||||
padding: ${marginBottomSize} ${marginLeftSize};
|
||||
font-size: 14px;
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
]
|
||||
)
|
||||
}
|
||||
])
|
||||
@ -1,26 +1,22 @@
|
||||
export default {
|
||||
marginLeft: {
|
||||
small: '16px',
|
||||
medium: '24px',
|
||||
large: '32px',
|
||||
huge: '40px'
|
||||
},
|
||||
marginTop: {
|
||||
small: '12px',
|
||||
medium: '19px',
|
||||
large: '23px',
|
||||
huge: '27px'
|
||||
},
|
||||
marginBottom: {
|
||||
small: '12px',
|
||||
medium: '20px',
|
||||
large: '24px',
|
||||
huge: '28px'
|
||||
},
|
||||
fontSize: {
|
||||
small: '16px',
|
||||
medium: '18px',
|
||||
large: '18px',
|
||||
huge: '18px'
|
||||
}
|
||||
marginLeftSmall: '16px',
|
||||
marginLeftMedium: '24px',
|
||||
marginLeftLarge: '32px',
|
||||
marginLeftHuge: '40px',
|
||||
marginTopSmall: '12px',
|
||||
marginTopMedium: '19px',
|
||||
marginTopLarge: '23px',
|
||||
marginTopHuge: '27px',
|
||||
marginBottomSmall: '12px',
|
||||
marginBottomMedium: '20px',
|
||||
marginBottomLarge: '24px',
|
||||
marginBottomHuge: '28px',
|
||||
headerFontSizeSmall: '16px',
|
||||
headerFontSizeMedium: '18px',
|
||||
headerFontSizeLarge: '18px',
|
||||
headerFontSizeHuge: '18px',
|
||||
fontSizeSmall: '14px',
|
||||
fontSizeMedium: '14px',
|
||||
fontSizeLarge: '14px',
|
||||
fontSizeHuge: '14px'
|
||||
}
|
||||
|
||||
@ -8,9 +8,10 @@ export default create({
|
||||
name: 'Card',
|
||||
peer: [baseDark, iconDark],
|
||||
getLocalVars (vars) {
|
||||
const { borderRadius } = vars
|
||||
const { borderRadius, lineHeight } = vars
|
||||
return {
|
||||
...commonVariables,
|
||||
lineHeight,
|
||||
color: vars.cardColor,
|
||||
textColor: vars.textColor2Overlay,
|
||||
titleTextColor: vars.textColor1Overlay,
|
||||
|
||||
@ -8,9 +8,10 @@ export default create({
|
||||
name: 'Card',
|
||||
peer: [baseLight, iconLight],
|
||||
getLocalVars (vars) {
|
||||
const { borderRadius } = vars
|
||||
const { borderRadius, lineHeight } = vars
|
||||
return {
|
||||
...commonVariables,
|
||||
lineHeight,
|
||||
color: vars.cardColor,
|
||||
textColor: vars.textColor2,
|
||||
titleTextColor: vars.textColor1,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user