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 './BaseMenuMask.scss';
@import './BaseTrackingRect.scss';
@import "./Card.scss";
@import "./Icon.scss";
@import "./GradientText.scss";
@import "./Table.scss";
@ -32,7 +31,6 @@
@import './Collapse.scss';
@import './Timeline.scss';
@import './Popconfirm.scss';
@import './Anchor.scss';
@import './Dropdown.scss';
@import './Popselect.scss';
@import './Spin.scss';
@ -42,7 +40,6 @@
@import './Grid.scss';
@import './Affix.scss';
@import './Statistic.scss';
// @import './Breadcrumb.scss';
@import './Descriptions.scss';
@import "./Menu.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 easeInOutCubicBezier = base.easeInOutCubicBezier
const {
cardBackgroundColor,
cardTextColor,
cardTitleTextColor,
cardBorderColor,
cardActionBackgroundColor,
cardCloseColor,
strongFontWeight,
color,
textColor,
titleTextColor,
titleFontWeight,
borderColor,
actionColor,
borderRadius,
smallBorderRadius
closeColor,
closeColorHover,
closeColorActive
} = props.$local
const {
default: defaultCardCloseColor,
hover: hoverCardCloseColor,
active: activeCardCloseColor
} = cardCloseColor
return cTB(
'card',
{
@ -29,8 +25,8 @@ export default c([
box-sizing: border-box;
position: relative;
border-radius: ${borderRadius};
backgroundColor: ${cardBackgroundColor};
color: ${cardTextColor};
backgroundColor: ${color};
color: ${textColor};
`,
transition: `
color .3s ${easeInOutCubicBezier},
@ -44,7 +40,7 @@ export default c([
overflow: hidden;
width: 100%;
`,
borderRadius: `${smallBorderRadius} ${smallBorderRadius} 0 0;`
borderRadius: `${borderRadius} ${borderRadius} 0 0`
},
[
c('img', {
@ -55,40 +51,40 @@ export default c([
})
]),
cM('bordered', {
border: `1px solid ${cardBorderColor}`
border: `1px solid ${borderColor}`
}),
cM('action-segmented', [
c('& >', [
c('>', [
cE('action', [
c('&:not(:first-child)', {
borderTop: `1px solid ${cardBorderColor}`
borderTop: `1px solid ${borderColor}`
})
])
])
]),
cM('content-segmented, content-soft-segmented', [
c('& >', [
c('>', [
cE('content', {
transition: `border-color 0.3s ${easeInOutCubicBezier}`
}, [
c('&:not(:first-child)', {
borderTop: `1px solid ${cardBorderColor}`
borderTop: `1px solid ${borderColor}`
})
])
])
]),
cM('footer-segmented, footer-soft-segmented', [
c('& >', [
c('>', [
cE('footer', {
transition: `border-color 0.3s ${easeInOutCubicBezier}`
}, [
c('&:not(:first-child)', {
borderTop: `1px solid ${cardBorderColor}`
borderTop: `1px solid ${borderColor}`
})
])
])
]),
c('& >', [
c('>', [
cE('content', {
raw: `
box-sizing: border-box;
@ -104,7 +100,7 @@ export default c([
`
})
]),
c('& >', [
c('>', [
cB('card-header', {
raw: `
box-sizing: border-box;
@ -114,11 +110,11 @@ export default c([
}, [
cE('main', {
raw: `
font-weight: ${strongFontWeight};
font-weight: ${titleFontWeight};
font-size: 18px;
transition: color .3s ${easeInOutCubicBezier};
flex: 1;
color: ${cardTitleTextColor};
color: ${titleTextColor};
`
}),
cE('extra', {
@ -126,32 +122,34 @@ export default c([
font-weight: 400;
font-size: 14px;
transition: color .3s ${easeInOutCubicBezier};
color: ${cardTextColor};
color: ${textColor};
`
}),
cE('close-mark', {
raw: `
cursor: pointer;
transition: fill .3s ${easeInOutCubicBezier};
fill: ${defaultCardCloseColor};
fill: ${closeColor};
`
}, [
c('&:hover', {
fill: hoverCardCloseColor
fill: closeColorHover
}),
c('&:active', {
fill: activeCardCloseColor
fill: closeColorActive
})
])
]),
cE('action', {
raw: `
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;
font-size: 14px;
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,
marginBottom
} = props.$local
const { cardActionBackgroundColor } = props.$local
const { actionColor } = props.$local
const { size } = props.$instance
const marginBottomSize = marginBottom[size]
const marginLeftSize = marginLeft[size]
@ -19,14 +19,14 @@ export default c([
cM(`${size}-size`, {
}, [
cM('content-segmented', [
c('& >', [
c('>', [
cE('content', {
paddingTop: marginBottomSize
})
])
]),
cM('content-soft-segmented', [
c('& >', [
c('>', [
cE('content', {
raw: `
margin: 0 ${marginLeftSize};
@ -36,14 +36,14 @@ export default c([
])
]),
cM('footer-segmented', [
c('& >', [
c('>', [
cE('footer', {
paddingTop: marginBottomSize
})
])
]),
cM('footer-soft-segmented', [
c('& >', [
c('>', [
cE('footer', {
raw: `
padding: ${marginBottomSize} 0;
@ -52,7 +52,7 @@ export default c([
})
])
]),
c('& >', [
c('>', [
cB('card-header', {
raw: `
padding: ${marginTopSize} ${marginLeftSize} ${marginBottomSize} ${marginLeftSize};
@ -75,7 +75,7 @@ export default c([
]),
cE('action', {
raw: `
background-color: ${cardActionBackgroundColor};
background-color: ${actionColor};
padding: ${marginBottomSize} ${marginLeftSize};
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 sizeVariable from './card'
import commonVariables from './_common'
export default create({
theme: 'dark',
name: 'Card',
getDerivedVariables ({ base, derived }) {
const {
borderRadius,
smallBorderRadius
borderRadius
} = base
return {
...sizeVariable,
cardBackgroundColor: derived.cardBackgroundColor,
cardTextColor: derived.secondaryTextOverlayColor,
cardTitleTextColor: derived.primaryTextOverlayColor,
cardBorderColor: derived.dividerOverlayColor,
cardActionBackgroundColor: derived.actionBackgroundOverlayColor,
strongFontWeight: base.strongFontWeight,
cardCloseColor: {
default: derived.closeOverlayColor,
hover: derived.closeHoverOverlayColor,
active: derived.closeOverlayColor
},
borderRadius,
smallBorderRadius
...commonVariables,
color: derived.color,
textColor: derived.secondaryTextOverlayColor,
titleTextColor: derived.primaryTextOverlayColor,
borderColor: derived.dividerOverlayColor,
actionColor: derived.actionBackgroundOverlayColor,
titleFontWeight: base.strongFontWeight,
closeColor: derived.closeOverlayColor,
closeColorHover: derived.closeHoverOverlayColor,
closeColorActive: derived.closeActiveOverlayColor,
borderRadius
}
}
})

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

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

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

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