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

fix(collapse): arrow style

Browse Source
This commit is contained in:
07akioni 2020-11-14 22:40:03 +08:00
parent 00a82e6df8
commit 5d331327b4
2 changed files with 16 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/collapse/src/CollapseItem.vue
View File

@ -18,7 +18,7 @@
</slot>
<div class="n-collapse-item-arrow">
<slot name="arrow" :collapsed="collapsed">
<n-icon type="ios-arrow-forward">
<n-icon color-transition>
<arrow-icon />
</n-icon>
</slot>

57
src/collapse/src/styles/themed-base.cssr.js
View File

@ -14,9 +14,7 @@ export default c([
cTB(
'collapse',
{
raw: `
width: 100%;
`
width: '100%'
},
[
cB('collapse-item', {
@ -29,65 +27,46 @@ export default c([
},
[
c('&:first-child', {
raw: `
margin-top: 0;
`
marginTop: 0
}),
c('&:first-child >', [
cE('header', {
raw: `
padding-top: 0;
`
paddingTop: 0
})
]),
cM('left-arrow-placement', [
cE('header', [
cB('collapse-item-arrow', {
raw: `
margin-right: 4px;
`
marginRight: '4px'
})
])
]),
cM('right-arrow-placement', [
cE('header', [
cB('collapse-item-arrow', {
raw: `
margin-left: 4px;
`
marginLeft: '4px'
})
])
]),
cB('collapse-item', {
raw: `
margin-left: 32px;
`
marginLeft: '32px'
}),
cE('content-wrapper', {
raw: `
overflow: hidden;
`
overflow: 'hidden'
}, [
fadeInHeightExpandTransition({ duration: '0.15s' })
]),
cM('active', [
cE('header', [
cM('active', [
cB('collapse-item-arrow', [
cB('icon', {
raw: `
transform: rotate(90deg);
`
})
])
cB('collapse-item-arrow', {
transform: 'rotate(90deg)'
})
])
])
]),
c('&:not(:first-child)', {
raw: `
border-top: 1px solid ${dividerColor};
`
borderTop: `1px solid ${dividerColor}`
}),
cE('header', {
raw: `
@ -102,19 +81,13 @@ export default c([
`
}, [
cB('collapse-item-arrow', {
raw: `
display: flex;
`
display: 'flex',
transition: `transform .15s ${cubicBezierEaseInOut}`
}, [
cB('icon', {
raw: `
transition:
transform .15s ${cubicBezierEaseInOut},
fill .3s ${cubicBezierEaseInOut},
stroke .3s ${cubicBezierEaseInOut};
font-size: 16px;
fill: ${arrowColor};
stroke: ${arrowColor};
font-size: 18px;
color: ${arrowColor};
`
})
])