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

fix(alert): icon margin

Browse Source
This commit is contained in:
07akioni 2021-01-18 19:15:04 +08:00
parent a35581bcaa
commit 6882035fee
2 changed files with 51 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/alert/src/Alert.tsx
View File

@ -136,7 +136,7 @@ export default defineComponent({
class: [
'n-alert',
{
'n-alert--no-icon': this.showIcon
'n-alert--no-icon': !this.showIcon
}
],
style: this.cssVars

120
src/alert/src/styles/index.cssr.ts
View File

@ -15,46 +15,38 @@ import fadeInHeightExpandTranstion from '../../../_styles/transitions/fade-in-he
// --border-radius
// --font-size
// --title-font-weight
export default cB(
'alert',
`
export default cB('alert', `
line-height: var(--line-height);
border-radius: var(--border-radius);
position: relative;
transition: background-color .3s var(--bezier);
background-color: var(--color);
text-align: start;
`,
[
cE('icon', {
color: 'var(--icon-color)'
`, [
cE('icon', {
color: 'var(--icon-color)'
}),
cB('alert-body', {
border: 'var(--border)'
}, [
cE('title', {
color: 'var(--title-text-color)'
}),
cB(
'alert-body',
{
border: 'var(--border)'
},
[
cE('title', {
color: 'var(--title-text-color)'
}),
cE('content', {
color: 'var(--content-text-color)'
})
]
),
fadeInHeightExpandTranstion({
originalTransition: 'transform .3s var(--bezier)',
enterToProps: {
transform: 'scale(1)'
},
leaveToProps: {
transform: 'scale(0.9)'
}
}),
cE(
'icon',
`
cE('content', {
color: 'var(--content-text-color)'
})
]
),
fadeInHeightExpandTranstion({
originalTransition: 'transform .3s var(--bezier)',
enterToProps: {
transform: 'scale(1)'
},
leaveToProps: {
transform: 'scale(0.9)'
}
}),
cE('icon', `
position: absolute;
left: 12px;
top: 14px;
@ -64,54 +56,42 @@ export default cB(
height: 26px;
font-size: 26px;
`
),
cE(
'close',
`
),
cE('close', `
transition: color .3s var(--bezier);
position: absolute;
right: 16px;
font-size: 14px;
top: 14px;
`
),
cB(
'alert-body',
`
`),
cB('alert-body', `
border-radius: var(--border-radius);
padding: 15px 15px 15px 47px;
transition: border-color .3s var(--bezier);
`,
[
cE(
'title',
`
`, [
cE('title', `
transition: color .3s var(--bezier);
font-size: 16px;
line-height: 19px;
font-weight: var(--title-font-weight);
`,
[
c('& +', [
cE('content', {
marginTop: '9px'
})
])
]
),
`, [
c('& +', [
cE('content', {
transition: 'color .3s var(--bezier)',
fontSize: 'var(--font-size)'
marginTop: '9px'
})
]
),
cE('icon', {
transition: 'color .3s var(--bezier)'
}),
cM('no-icon', [
cB('alert-body', {
paddingLeft: '19px'
})
])
]
)
])
]),
cE('content', {
transition: 'color .3s var(--bezier)',
fontSize: 'var(--font-size)'
})
]),
cE('icon', {
transition: 'color .3s var(--bezier)'
}),
cM('no-icon', [
cB('alert-body', {
paddingLeft: '19px'
})
])
])