refactor(descriptions): clean cssr codes

This commit is contained in:
07akioni 2020-09-08 19:33:52 +08:00
parent c238666ae3
commit 0d949847fd
5 changed files with 44 additions and 42 deletions

View File

@ -3,14 +3,14 @@ import { c, cTB, cB, cE, cM, insideModal } from '../../../_utils/cssr'
export default c([
({ props }) => {
const {
headerBackgroudColor,
headerColor,
headerTextColor,
headerFontWeight,
contentTextColor,
contentBackgroundColorDefault,
contentBackgroundColorModal,
contentColor,
contentColorModal,
borderColor,
borderRadius,
strongFontWeight
borderRadius
} = props.$local
const {
easeInOutCubicBezier
@ -53,7 +53,7 @@ export default c([
border-radius: ${borderRadius};
overflow: hidden;
`,
background: contentBackgroundColorDefault,
background: contentColor,
border: `1px solid ${borderColor}`
}, [
cB('descriptions-table', [
@ -63,15 +63,13 @@ export default c([
borderBottom: `1px solid ${borderColor}`
}),
cB('descriptions-table-header', {
backgroundClip: 'padding-box',
borderBottom: `1px solid ${borderColor}`
})
]),
cB('descriptions-table-header', {
raw: `
font-weight: 400;
`,
backgroundColor: headerBackgroudColor
fontWeight: 400,
backgroundClip: 'padding-box',
backgroundColor: headerColor
}, [
c('&:not(:last-child)', {
borderRight: `1px solid ${borderColor}`
@ -88,7 +86,7 @@ export default c([
]),
cB('descriptions-header', {
raw: `
font-weight: ${strongFontWeight};
font-weight: ${headerFontWeight};
font-size: 18px;
transition: color .3s ${easeInOutCubicBezier};
`,
@ -96,7 +94,9 @@ export default c([
}),
cB('descriptions-table-wrapper', {
raw: `
transition: border-color .3s ${easeInOutCubicBezier};
transition:
background-color .3s ${easeInOutCubicBezier},
border-color .3s ${easeInOutCubicBezier};
`
}, [
cB('descriptions-table', {
@ -115,11 +115,14 @@ export default c([
}, [
cB('descriptions-table-header', {
raw: `
font-weight: ${strongFontWeight};
font-weight: ${headerFontWeight};
line-height: 1.75;
display: table-cell;
box-sizing: border-box;
transition: color .3s ${easeInOutCubicBezier}, border-color .3s ${easeInOutCubicBezier};
transition:
color .3s ${easeInOutCubicBezier},
background-color .3s ${easeInOutCubicBezier},
border-color .3s ${easeInOutCubicBezier};
`,
color: headerTextColor
}),
@ -129,7 +132,10 @@ export default c([
line-height: 1.75;
display: table-cell;
box-sizing: border-box;
transition: color .3s ${easeInOutCubicBezier}, background-color .3s ${easeInOutCubicBezier}, border-color .3s ${easeInOutCubicBezier};
transition:
color .3s ${easeInOutCubicBezier},
background-color .3s ${easeInOutCubicBezier},
border-color .3s ${easeInOutCubicBezier};
padding: 0 0 16px 0;
`,
color: contentTextColor
@ -144,7 +150,7 @@ export default c([
]),
cE('label', {
raw: `
font-weight: ${strongFontWeight};
font-weight: ${headerFontWeight};
transition: color .3s ${easeInOutCubicBezier};
display: inline-block;
margin-right: 14px;
@ -167,7 +173,7 @@ export default c([
cTB('descriptions', [
cM('bordered', [
cB('descriptions-table-wrapper', {
background: contentBackgroundColorModal
background: contentColorModal
})
])
])

View File

@ -1,11 +1,11 @@
import { c, cB, cM } from '../../../_utils/cssr'
import { c, cTB, cB, cM, createKey } from '../../../_utils/cssr'
export default c([
({ props }) => {
const size = props.$instance.size
const padding = props.$local.padding[size]
const borderedPadding = props.$local.borderedPadding[size]
return cB('descriptions', [
const padding = props.$local[createKey('padding', size)]
const borderedPadding = props.$local[createKey('paddingBordered', size)]
return cTB('descriptions', [
cM(`${size}-size`, [
cB('descriptions-header', {
marginBottom: padding

View File

@ -1,12 +1,8 @@
export default {
borderedPadding: {
small: '8px 12px',
medium: '12px 16px',
large: '16px 24px'
},
padding: {
small: '8px',
medium: '12px',
large: '16px'
}
paddingBorderedSmall: '8px 12px',
paddingBorderedMedium: '12px 16px',
paddingBorderedLarge: '16px 24px',
paddingSmall: '8px',
paddingMedium: '12px',
paddingLarge: '16px'
}

View File

@ -19,14 +19,14 @@ export default create({
} = base
return {
...commonVariables,
headerBackgroudColor: tableHeaderBackgroundOverlayColor,
headerColor: tableHeaderBackgroundOverlayColor,
headerTextColor: primaryTextOverlayColor,
headerFontWeight: strongFontWeight,
contentTextColor: secondaryTextOverlayColor,
contentBackgroundColorDefault: cardBackgroundColor,
contentBackgroundColorModal: modalBackgroundColor,
contentColor: cardBackgroundColor,
contentColorModal: modalBackgroundColor,
borderColor: dividerOverlayColor,
borderRadius: borderRadius,
strongFontWeight: strongFontWeight
borderRadius: borderRadius
}
}
})

View File

@ -20,14 +20,14 @@ export default create({
} = base
return {
...commonVariables,
headerBackgroudColor: composite(cardBackgroundColor, tableHeaderBackgroundOverlayColor),
headerColor: composite(cardBackgroundColor, tableHeaderBackgroundOverlayColor),
headerTextColor: primaryTextOverlayColor,
headerFontWeight: strongFontWeight,
contentTextColor: secondaryTextOverlayColor,
contentBackgroundColorDefault: cardBackgroundColor,
contentBackgroundColorModal: modalBackgroundColor,
contentColor: cardBackgroundColor,
contentColorModal: modalBackgroundColor,
borderColor: dividerOverlayColor,
borderRadius: borderRadius,
strongFontWeight: strongFontWeight
borderRadius: borderRadius
}
}
})