Skip to content

Commit

Permalink
feat(card): uses n as CSS vars prefix (#1922)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sepush
Sepush authored Dec 21, 2021
1 parent b7721f8 commit 3b9bf75
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 92 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Feats

- `n-card` uses `n` as CSS vars prefix.
- `n-rate` uses `n` as CSS vars prefix.
- `n-radio` uses `n` as CSS vars prefix.
- `n-progress` uses `n` as CSS vars prefix.
Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Feats

- `n-card` 的 CSS 变量使用 `n` 作为前缀
- `n-rate` 的 CSS 变量使用 `n` 作为前缀
- `n-radio` 的 CSS 变量使用 `n` 作为前缀
- `n-progress` 的 CSS 变量使用 `n` 作为前缀
Expand Down
44 changes: 22 additions & 22 deletions src/card/src/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,29 +118,29 @@ export default defineComponent({
bottom: paddingBottom
} = getPadding(padding)
return {
'--bezier': cubicBezierEaseInOut,
'--border-radius': borderRadius,
'--color': props.embedded ? colorEmbedded : color,
'--color-modal': colorModal,
'--color-popover': colorPopover,
'--color-target': colorTarget,
'--text-color': textColor,
'--line-height': lineHeight,
'--action-color': actionColor,
'--title-text-color': titleTextColor,
'--title-font-weight': titleFontWeight,
'--close-color': closeColor,
'--close-color-hover': closeColorHover,
'--close-color-pressed': closeColorPressed,
'--border-color': borderColor,
'--box-shadow': boxShadow,
'--n-bezier': cubicBezierEaseInOut,
'--n-border-radius': borderRadius,
'--n-color': props.embedded ? colorEmbedded : color,
'--n-color-modal': colorModal,
'--n-color-popover': colorPopover,
'--n-color-target': colorTarget,
'--n-text-color': textColor,
'--n-line-height': lineHeight,
'--n-action-color': actionColor,
'--n-title-text-color': titleTextColor,
'--n-title-font-weight': titleFontWeight,
'--n-close-color': closeColor,
'--n-close-color-hover': closeColorHover,
'--n-close-color-pressed': closeColorPressed,
'--n-border-color': borderColor,
'--n-box-shadow': boxShadow,
// size
'--padding-top': paddingTop,
'--padding-bottom': paddingBottom,
'--padding-left': paddingLeft,
'--font-size': fontSize,
'--title-font-size': titleFontSize,
'--close-size': closeSize
'--n-padding-top': paddingTop,
'--n-padding-bottom': paddingBottom,
'--n-padding-left': paddingLeft,
'--n-font-size': fontSize,
'--n-title-font-size': titleFontSize,
'--n-close-size': closeSize
}
})
}
Expand Down
138 changes: 69 additions & 69 deletions src/card/src/styles/index.cssr.ts
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,75 @@
import { asModal, c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr'

// vars:
// --bezier
// --border-radius
// --color
// --color-modal
// --color-popover
// --text-color
// --line-height
// --padding-top
// --padding-bottom
// --padding-left
// --font-size
// --action-color
// --title-font-weight
// --title-font-size
// --title-text-color
// --close-color
// --close-color-hover
// --close-color-pressed
// --border-color
// --close-size
// --box-shadow
// --n-bezier
// --n-border-radius
// --n-color
// --n-color-modal
// --n-color-popover
// --n-text-color
// --n-line-height
// --n-padding-top
// --n-padding-bottom
// --n-padding-left
// --n-font-size
// --n-action-color
// --n-title-font-weight
// --n-title-font-size
// --n-title-text-color
// --n-close-color
// --n-close-color-hover
// --n-close-color-pressed
// --n-border-color
// --n-close-size
// --n-box-shadow
export default c([
cB('card', `
font-size: var(--font-size);
line-height: var(--line-height);
font-size: var(--n-font-size);
line-height: var(--n-line-height);
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
position: relative;
border-radius: var(--border-radius);
background-color: var(--color);
color: var(--text-color);
border-radius: var(--n-border-radius);
background-color: var(--n-color);
color: var(--n-text-color);
transition:
color .3s var(--bezier),
background-color .3s var(--bezier),
box-shadow .3s var(--bezier),
border-color .3s var(--bezier);
color .3s var(--n-bezier),
background-color .3s var(--n-bezier),
box-shadow .3s var(--n-bezier),
border-color .3s var(--n-bezier);
`, [
cM('hoverable', [
c('&:hover', 'box-shadow: var(--box-shadow);')
c('&:hover', 'box-shadow: var(--n-box-shadow);')
]),
cM('content-segmented', [
c('>', [
cE('content', {
paddingTop: 'var(--padding-bottom)'
paddingTop: 'var(--n-padding-bottom)'
})
])
]),
cM('content-soft-segmented', [
c('>', [
cE('content', `
margin: 0 var(--padding-left);
padding: var(--padding-bottom) 0;
margin: 0 var(--n-padding-left);
padding: var(--n-padding-bottom) 0;
`)
])
]),
cM('footer-segmented', [
c('>', [
cE('footer', {
paddingTop: 'var(--padding-bottom)'
paddingTop: 'var(--n-padding-bottom)'
})
])
]),
cM('footer-soft-segmented', [
c('>', [
cE('footer', `
padding: var(--padding-bottom) 0;
margin: 0 var(--padding-left);
padding: var(--n-padding-bottom) 0;
margin: 0 var(--n-padding-left);
`)
])
]),
Expand All @@ -78,111 +78,111 @@ export default c([
box-sizing: border-box;
display: flex;
align-items: center;
font-size: var(--title-font-size);
font-size: var(--n-title-font-size);
padding:
var(--padding-top)
var(--padding-left)
var(--padding-bottom)
var(--padding-left);
var(--n-padding-top)
var(--n-padding-left)
var(--n-padding-bottom)
var(--n-padding-left);
`, [
cE('main', `
font-weight: var(--title-font-weight);
transition: color .3s var(--bezier);
font-weight: var(--n-title-font-weight);
transition: color .3s var(--n-bezier);
flex: 1;
color: var(--title-text-color);
color: var(--n-title-text-color);
`),
cE('extra', `
display: flex;
align-items: center;
font-size: var(--font-size);
font-size: var(--n-font-size);
font-weight: 400;
transition: color .3s var(--bezier);
color: var(--text-color);
transition: color .3s var(--n-bezier);
color: var(--n-text-color);
`),
cE('close', `
font-size: var(--close-size);
transition: color .3s var(--bezier);
font-size: var(--n-close-size);
transition: color .3s var(--n-bezier);
`)
]),
cE('action', `
box-sizing: border-box;
transition:
background-color .3s var(--bezier),
border-color .3s var(--bezier);
background-color .3s var(--n-bezier),
border-color .3s var(--n-bezier);
background-clip: padding-box;
background-color: var(--action-color);
background-color: var(--n-action-color);
`),
cE('content', 'flex: 1;'),
cE('content, footer', `
box-sizing: border-box;
padding: 0 var(--padding-left) var(--padding-bottom) var(--padding-left);
font-size: var(--font-size);
padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left);
font-size: var(--n-font-size);
`, [
c('&:first-child', {
paddingTop: 'var(--padding-bottom)'
paddingTop: 'var(--n-padding-bottom)'
})
]),
cE('action', `
background-color: var(--action-color);
padding: var(--padding-bottom) var(--padding-left);
background-color: var(--n-action-color);
padding: var(--n-padding-bottom) var(--n-padding-left);
`)
]),
cB('card-cover', `
overflow: hidden;
width: 100%;
border-radius: var(--border-radius) var(--border-radius) 0 0;
border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
`, [
c('img', `
display: block;
width: 100%;
`)
]),
cM('bordered', `
border: 1px solid var(--border-color);
border: 1px solid var(--n-border-color);
`, [
c('&:target', 'border-color: var(--color-target);')
c('&:target', 'border-color: var(--n-color-target);')
]),
cM('action-segmented', [
c('>', [
cE('action', [
c('&:not(:first-child)', {
borderTop: '1px solid var(--border-color)'
borderTop: '1px solid var(--n-border-color)'
})
])
])
]),
cM('content-segmented, content-soft-segmented', [
c('>', [
cE('content', {
transition: 'border-color 0.3s var(--bezier)'
transition: 'border-color 0.3s var(--n-bezier)'
}, [
c('&:not(:first-child)', {
borderTop: '1px solid var(--border-color)'
borderTop: '1px solid var(--n-border-color)'
})
])
])
]),
cM('footer-segmented, footer-soft-segmented', [
c('>', [
cE('footer', {
transition: 'border-color 0.3s var(--bezier)'
transition: 'border-color 0.3s var(--n-bezier)'
}, [
c('&:not(:first-child)', {
borderTop: '1px solid var(--border-color)'
borderTop: '1px solid var(--n-border-color)'
})
])
])
])
]),
insideModal(cB('card', {
background: 'var(--color-modal)'
background: 'var(--n-color-modal)'
})),
insidePopover(cB('card', {
background: 'var(--color-popover)'
background: 'var(--n-color-popover)'
})),
cB('card', [
asModal({
background: 'var(--color-modal)'
background: 'var(--n-color-modal)'
})
])
])
12 changes: 12 additions & 0 deletions src/card/tests/Card.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,18 @@ describe('n-card', () => {
expect(wrapper.find('.n-card').classes()).toContain('n-card--hoverable')
})

it('should work with `embedded` prop', async () => {
const wrapper = mount(NCard)

expect(wrapper.find('.n-card').attributes('style')).toContain(
'--n-color: #fff'
)
await wrapper.setProps({ embedded: true })
expect(wrapper.find('.n-card').attributes('style')).toContain(
'--n-color: rgb(250, 250, 252)'
)
})

it('should work with `slots` ', async () => {
const wrapper = mount(NCard, {
slots: {
Expand Down
2 changes: 1 addition & 1 deletion src/card/tests/__snapshots__/Card.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`n-card should work with \`size\` prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --border-radius: 3px; --color: #fff; --color-modal: #fff; --color-popover: #fff; --color-target: #18a058; --text-color: rgb(51, 54, 57); --line-height: 1.6; --action-color: rgb(250, 250, 252); --title-text-color: rgb(31, 34, 37); --title-font-weight: 500; --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --border-color: rgb(239, 239, 245); --box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04); --padding-top: 12px; --padding-bottom: 12px; --padding-left: 16px; --font-size: 14px; --title-font-size: 16px; --close-size: 18px;"`;
exports[`n-card should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 3px; --n-color: #fff; --n-color-modal: #fff; --n-color-popover: #fff; --n-color-target: #18a058; --n-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-action-color: rgb(250, 250, 252); --n-title-text-color: rgb(31, 34, 37); --n-title-font-weight: 500; --n-close-color: rgba(122, 122, 122, 1); --n-close-color-hover: rgba(89, 89, 89, 1); --n-close-color-pressed: rgba(149, 149, 149, 1); --n-border-color: rgb(239, 239, 245); --n-box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04); --n-padding-top: 12px; --n-padding-bottom: 12px; --n-padding-left: 16px; --n-font-size: 14px; --n-title-font-size: 16px; --n-close-size: 18px;"`;

0 comments on commit 3b9bf75

Please sign in to comment.