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

refactor(card): clean cssr codes

Browse Source
This commit is contained in:
07akioni 2020-08-08 19:37:54 +08:00
parent dfc585824e
commit 0f8046b45f
8 changed files with 91 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/_styles/index.scss
View File

@ -7,7 +7,6 @@
@import './BaseSelectMenu.scss'; @import './BaseSelectMenu.scss';
@import './BaseMenuMask.scss'; @import './BaseMenuMask.scss';
@import './BaseTrackingRect.scss'; @import './BaseTrackingRect.scss';
@import "./Card.scss";
@import "./Icon.scss"; @import "./Icon.scss";
@import "./GradientText.scss"; @import "./GradientText.scss";
@import "./Table.scss"; @import "./Table.scss";
@ -32,7 +31,6 @@
@import './Collapse.scss'; @import './Collapse.scss';
@import './Timeline.scss'; @import './Timeline.scss';
@import './Popconfirm.scss'; @import './Popconfirm.scss';
@import './Anchor.scss';
@import './Dropdown.scss'; @import './Dropdown.scss';
@import './Popselect.scss'; @import './Popselect.scss';
@import './Spin.scss'; @import './Spin.scss';
@ -42,7 +40,6 @@
@import './Grid.scss'; @import './Grid.scss';
@import './Affix.scss'; @import './Affix.scss';
@import './Statistic.scss'; @import './Statistic.scss';
// @import './Breadcrumb.scss';
@import './Descriptions.scss'; @import './Descriptions.scss';
@import "./Menu.scss"; @import "./Menu.scss";
@import './List.scss'; @import './List.scss';

64
src/card/src/styles/themed-base.cssr.js
View File

@ -5,21 +5,17 @@ export default c([
const base = props.$base const base = props.$base
const easeInOutCubicBezier = base.easeInOutCubicBezier const easeInOutCubicBezier = base.easeInOutCubicBezier
const { const {
cardBackgroundColor, color,
cardTextColor, textColor,
cardTitleTextColor, titleTextColor,
cardBorderColor, titleFontWeight,
cardActionBackgroundColor, borderColor,
cardCloseColor, actionColor,
strongFontWeight,
borderRadius, borderRadius,
smallBorderRadius closeColor,
closeColorHover,
closeColorActive
} = props.$local } = props.$local
const {
default: defaultCardCloseColor,
hover: hoverCardCloseColor,
active: activeCardCloseColor
} = cardCloseColor
return cTB( return cTB(
'card', 'card',
{ {
@ -29,8 +25,8 @@ export default c([
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
border-radius: ${borderRadius}; border-radius: ${borderRadius};
backgroundColor: ${cardBackgroundColor}; backgroundColor: ${color};
color: ${cardTextColor}; color: ${textColor};
`, `,
transition: ` transition: `
color .3s ${easeInOutCubicBezier}, color .3s ${easeInOutCubicBezier},
@ -44,7 +40,7 @@ export default c([
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
`, `,
borderRadius: `${smallBorderRadius} ${smallBorderRadius} 0 0;` borderRadius: `${borderRadius} ${borderRadius} 0 0`
}, },
[ [
c('img', { c('img', {
@ -55,40 +51,40 @@ export default c([
}) })
]), ]),
cM('bordered', { cM('bordered', {
border: `1px solid ${cardBorderColor}` border: `1px solid ${borderColor}`
}), }),
cM('action-segmented', [ cM('action-segmented', [
c('& >', [ c('>', [
cE('action', [ cE('action', [
c('&:not(:first-child)', { c('&:not(:first-child)', {
borderTop: `1px solid ${cardBorderColor}` borderTop: `1px solid ${borderColor}`
}) })
]) ])
]) ])
]), ]),
cM('content-segmented, content-soft-segmented', [ cM('content-segmented, content-soft-segmented', [
c('& >', [ c('>', [
cE('content', { cE('content', {
transition: `border-color 0.3s ${easeInOutCubicBezier}` transition: `border-color 0.3s ${easeInOutCubicBezier}`
}, [ }, [
c('&:not(:first-child)', { c('&:not(:first-child)', {
borderTop: `1px solid ${cardBorderColor}` borderTop: `1px solid ${borderColor}`
}) })
]) ])
]) ])
]), ]),
cM('footer-segmented, footer-soft-segmented', [ cM('footer-segmented, footer-soft-segmented', [
c('& >', [ c('>', [
cE('footer', { cE('footer', {
transition: `border-color 0.3s ${easeInOutCubicBezier}` transition: `border-color 0.3s ${easeInOutCubicBezier}`
}, [ }, [
c('&:not(:first-child)', { c('&:not(:first-child)', {
borderTop: `1px solid ${cardBorderColor}` borderTop: `1px solid ${borderColor}`
}) })
]) ])
]) ])
]), ]),
c('& >', [ c('>', [
cE('content', { cE('content', {
raw: ` raw: `
box-sizing: border-box; box-sizing: border-box;
@ -104,7 +100,7 @@ export default c([
` `
}) })
]), ]),
c('& >', [ c('>', [
cB('card-header', { cB('card-header', {
raw: ` raw: `
box-sizing: border-box; box-sizing: border-box;
@ -114,11 +110,11 @@ export default c([
}, [ }, [
cE('main', { cE('main', {
raw: ` raw: `
font-weight: ${strongFontWeight}; font-weight: ${titleFontWeight};
font-size: 18px; font-size: 18px;
transition: color .3s ${easeInOutCubicBezier}; transition: color .3s ${easeInOutCubicBezier};
flex: 1; flex: 1;
color: ${cardTitleTextColor}; color: ${titleTextColor};
` `
}), }),
cE('extra', { cE('extra', {
@ -126,32 +122,34 @@ export default c([
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
transition: color .3s ${easeInOutCubicBezier}; transition: color .3s ${easeInOutCubicBezier};
color: ${cardTextColor}; color: ${textColor};
` `
}), }),
cE('close-mark', { cE('close-mark', {
raw: ` raw: `
cursor: pointer; cursor: pointer;
transition: fill .3s ${easeInOutCubicBezier}; transition: fill .3s ${easeInOutCubicBezier};
fill: ${defaultCardCloseColor}; fill: ${closeColor};
` `
}, [ }, [
c('&:hover', { c('&:hover', {
fill: hoverCardCloseColor fill: closeColorHover
}), }),
c('&:active', { c('&:active', {
fill: activeCardCloseColor fill: closeColorActive
}) })
]) ])
]), ]),
cE('action', { cE('action', {
raw: ` raw: `
box-sizing: border-box; box-sizing: border-box;
transition: background-color .3s ${easeInOutCubicBezier}, border-color .3s ${easeInOutCubicBezier}; transition:
background-color .3s ${easeInOutCubicBezier},
border-color .3s ${easeInOutCubicBezier};
line-height: 1.75; line-height: 1.75;
font-size: 14px; font-size: 14px;
background-clip: padding-box; background-clip: padding-box;
background-color: ${cardActionBackgroundColor}; background-color: ${actionColor};
` `
}) })
]) ])

14
src/card/src/styles/themed-size.cssr.js
View File

@ -8,7 +8,7 @@ export default c([
marginTop, marginTop,
marginBottom marginBottom
} = props.$local } = props.$local
const { cardActionBackgroundColor } = props.$local const { actionColor } = props.$local
const { size } = props.$instance const { size } = props.$instance
const marginBottomSize = marginBottom[size] const marginBottomSize = marginBottom[size]
const marginLeftSize = marginLeft[size] const marginLeftSize = marginLeft[size]
@ -19,14 +19,14 @@ export default c([
cM(`${size}-size`, { cM(`${size}-size`, {
}, [ }, [
cM('content-segmented', [ cM('content-segmented', [
c('& >', [ c('>', [
cE('content', { cE('content', {
paddingTop: marginBottomSize paddingTop: marginBottomSize
}) })
]) ])
]), ]),
cM('content-soft-segmented', [ cM('content-soft-segmented', [
c('& >', [ c('>', [
cE('content', { cE('content', {
raw: ` raw: `
margin: 0 ${marginLeftSize}; margin: 0 ${marginLeftSize};
@ -36,14 +36,14 @@ export default c([
]) ])
]), ]),
cM('footer-segmented', [ cM('footer-segmented', [
c('& >', [ c('>', [
cE('footer', { cE('footer', {
paddingTop: marginBottomSize paddingTop: marginBottomSize
}) })
]) ])
]), ]),
cM('footer-soft-segmented', [ cM('footer-soft-segmented', [
c('& >', [ c('>', [
cE('footer', { cE('footer', {
raw: ` raw: `
padding: ${marginBottomSize} 0; padding: ${marginBottomSize} 0;
@ -52,7 +52,7 @@ export default c([
}) })
]) ])
]), ]),
c('& >', [ c('>', [
cB('card-header', { cB('card-header', {
raw: ` raw: `
padding: ${marginTopSize} ${marginLeftSize} ${marginBottomSize} ${marginLeftSize}; padding: ${marginTopSize} ${marginLeftSize} ${marginBottomSize} ${marginLeftSize};
@ -75,7 +75,7 @@ export default c([
]), ]),
cE('action', { cE('action', {
raw: ` raw: `
background-color: ${cardActionBackgroundColor}; background-color: ${actionColor};
padding: ${marginBottomSize} ${marginLeftSize}; padding: ${marginBottomSize} ${marginLeftSize};
font-size: 14px; font-size: 14px;
` `

26
src/card/styles/_common.js Normal file
View File

@ -0,0 +1,26 @@
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'
}
}

26
src/card/styles/card.js
View File

@ -1,26 +0,0 @@
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'
}
}

30
src/card/styles/dark.js
View File

@ -1,29 +1,25 @@
import create from '../../styles/_utils/create-component-base' import create from '../../styles/_utils/create-component-base'
import sizeVariable from './card' import commonVariables from './_common'
export default create({ export default create({
theme: 'dark', theme: 'dark',
name: 'Card', name: 'Card',
getDerivedVariables ({ base, derived }) { getDerivedVariables ({ base, derived }) {
const { const {
borderRadius, borderRadius
smallBorderRadius
} = base } = base
return { return {
...sizeVariable, ...commonVariables,
cardBackgroundColor: derived.cardBackgroundColor, color: derived.color,
cardTextColor: derived.secondaryTextOverlayColor, textColor: derived.secondaryTextOverlayColor,
cardTitleTextColor: derived.primaryTextOverlayColor, titleTextColor: derived.primaryTextOverlayColor,
cardBorderColor: derived.dividerOverlayColor, borderColor: derived.dividerOverlayColor,
cardActionBackgroundColor: derived.actionBackgroundOverlayColor, actionColor: derived.actionBackgroundOverlayColor,
strongFontWeight: base.strongFontWeight, titleFontWeight: base.strongFontWeight,
cardCloseColor: { closeColor: derived.closeOverlayColor,
default: derived.closeOverlayColor, closeColorHover: derived.closeHoverOverlayColor,
hover: derived.closeHoverOverlayColor, closeColorActive: derived.closeActiveOverlayColor,
active: derived.closeOverlayColor borderRadius
},
borderRadius,
smallBorderRadius
} }
} }
}) })

30
src/card/styles/light.js
View File

@ -1,29 +1,25 @@
import create from '../../styles/_utils/create-component-base' import create from '../../styles/_utils/create-component-base'
import sizeVariable from './card' import commonVariables from './_common'
export default create({ export default create({
theme: 'light', theme: 'light',
name: 'Card', name: 'Card',
getDerivedVariables ({ base, derived }) { getDerivedVariables ({ base, derived }) {
const { const {
borderRadius, borderRadius
smallBorderRadius
} = base } = base
return { return {
...sizeVariable, ...commonVariables,
cardBackgroundColor: derived.cardBackgroundColor, color: derived.color,
cardTextColor: derived.secondaryTextColor, textColor: derived.secondaryTextColor,
cardTitleTextColor: derived.primaryTextColor, titleTextColor: derived.primaryTextColor,
cardBorderColor: derived.dividerOverlayColor, borderColor: derived.dividerOverlayColor,
cardActionBackgroundColor: derived.actionBackgroundOverlayColor, actionColor: derived.actionBackgroundOverlayColor,
strongFontWeight: base.strongFontWeight, titleFontWeight: base.strongFontWeight,
cardCloseColor: { closeColor: derived.closeColor,
default: derived.closeColor, closeColorHover: derived.closeHoverColor,
hover: derived.closeHoverColor, closeColorActive: derived.closeActiveColor,
active: derived.closeColor borderRadius
},
borderRadius,
smallBorderRadius
} }
} }
}) })

1
src/styles/base/light.js
View File

@ -1,6 +1,7 @@
import create from '../_utils/create-theme-base.js' import create from '../_utils/create-theme-base.js'
import { read, composite } from '../../_utils/color/index.js' import { read, composite } from '../../_utils/color/index.js'
import commonVariables from '../_common-style/base.js' import commonVariables from '../_common-style/base.js'
export default create({ export default create({
theme: 'light', theme: 'light',
name: 'base', name: 'base',