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

refactor(descriptions): clean cssr codes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/descriptions/src/styles/themed-base.cssr.js
View File

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

8
src/descriptions/src/styles/themed-size.cssr.js
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([ export default c([
({ props }) => { ({ props }) => {
const size = props.$instance.size const size = props.$instance.size
const padding = props.$local.padding[size] const padding = props.$local[createKey('padding', size)]
const borderedPadding = props.$local.borderedPadding[size] const borderedPadding = props.$local[createKey('paddingBordered', size)]
return cB('descriptions', [ return cTB('descriptions', [
cM(`${size}-size`, [ cM(`${size}-size`, [
cB('descriptions-header', { cB('descriptions-header', {
marginBottom: padding marginBottom: padding

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

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

10
src/descriptions/styles/dark.js
View File

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

10
src/descriptions/styles/light.js
View File

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