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

feat: tusimple theme, message

Browse Source
This commit is contained in:
07akioni 2021-02-11 22:28:19 +08:00
parent 3f56b7f1ae
commit 6c00166963
2 changed files with 54 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/message/src/styles/index.cssr.ts
View File

@ -25,29 +25,23 @@ import fadeInHeightExpand from '../../../_styles/transitions/fade-in-height-expa
// --close-color-hover
// --border-radius
export default c([
cB(
'message-wrapper',
`
cB('message-wrapper', `
margin: var(--margin);
z-index: 0;
transform-origin: top center;
`,
[
fadeInHeightExpand({
overflow: 'visible',
originalTransition: 'transform .3s var(--bezier)',
enterToProps: {
transform: 'scale(1)'
},
leaveToProps: {
transform: 'scale(0.85)'
}
})
]
),
cB(
'message',
`
`, [
fadeInHeightExpand({
overflow: 'visible',
originalTransition: 'transform .3s var(--bezier)',
enterToProps: {
transform: 'scale(1)'
},
leaveToProps: {
transform: 'scale(0.85)'
}
})
]),
cB('message', `
box-sizing: border-box;
display: flex;
align-items: center;
@ -66,65 +60,45 @@ export default c([
color: var(--text-color);
background-color: var(--color);
box-shadow: var(--box-shadow);
`,
[
cE(
'content',
`
`, [
cE('content', `
display: inline-block;
line-height: var(--line-height);
font-size: var(--font-size);
`
),
cE(
'icon',
`
`),
cE('icon', `
position: relative;
margin-right: var(--icon-margin);
margin: var(--icon-margin);
height: var(--icon-size);
width: var(--icon-size);
font-size: var(--icon-size);
flex-shrink: 0;
`,
[
['info', 'success', 'warning', 'error', 'loading'].map((type) =>
cM(`${type}-type`, [
c(
'> *',
`
color: var(--icon-color-${type});
transition: color .3s var(--bezier);
`
)
])
),
c(
'> *',
{
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0
},
[iconSwitchTransition()]
)
]
`, [
['info', 'success', 'warning', 'error', 'loading'].map((type) =>
cM(`${type}-type`, [
c('> *', `
color: var(--icon-color-${type});
transition: color .3s var(--bezier);
`)
])
),
cE(
'close',
`
c('> *', {
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0
},
[iconSwitchTransition()])
]),
cE('close', `
font-size: var(--close-size);
margin: var(--close-margin);
transition: color .3s var(--bezier);
flex-shrink: 0;
`
)
]
),
cB(
'message-container',
`
`)
]),
cB('message-container', `
z-index: 6000;
position: fixed;
top: 12px;
@ -135,6 +109,5 @@ export default c([
display: flex;
flex-direction: column;
align-items: center;
`
)
`)
])

20
themes/tusimple/src/theme-overrides.ts
View File

@ -294,18 +294,24 @@ export const themeOverrides: GlobalThemeOverrides = {
labelTextAlignHorizontal: 'left'
},
Message: {
padding: '0 20px 0 12px',
padding: '12px 20px 12px 12px',
borderRadius: '24px',
maxWidth: '720px',
minWidth: '420px',
iconMargin: '20px',
closeMargin: '0 0 0 22px',
colorInfo: commonLight.warningColor,
colorWarning: commonLight.errorColor,
iconMargin: '0 20px 0 0',
closeMargin: '0 -8px 0 20px',
colorSuccess: colors.successColor,
colorInfo: colors.warningColor,
colorWarning: colors.errorColor,
colorError: colors.errorColor,
textColorError: '#FFF',
textColorSuccess: '#FFF',
textColorInfo: '#FFF',
textColorWarning: '#FFF',
iconColorInfo: 'rgb(0, 0, 0)',
iconColorSuccess: 'rgb(255, 255, 255)',
iconColorWarning: 'rgb(255, 255, 255)',
iconColorError: 'rgb(255, 255, 255)',
iconColorLoading: 'rgb(255, 255, 255)',
closeColorInfo: 'rgb(0, 0, 0)',
closeColorHoverInfo: 'rgb(0, 0, 0)',
closeColorPressedInfo: 'rgb(0, 0, 0)',
@ -321,7 +327,7 @@ export const themeOverrides: GlobalThemeOverrides = {
closeColorLoading: 'rgb(0, 0, 0)',
closeColorHoverLoading: 'rgb(0, 0, 0)',
closeColorPressedLoading: 'rgb(0, 0, 0)',
closeSize: '20px',
closeSize: '15px',
iconSize: '20px'
},
Pagination: {