github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Collapse: fix nested collapse-item style (#9566)

pull/9571/head
杨奕 2018-01-30 22:21:35 +08:00 committed by GitHub
parent 9b9384214b
commit ba34e6e270
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/collapse/src/collapse-item.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="el-collapse-item" :class="{'is-active': isActive}"> <div class="el-collapse-item">
<div <div
role="tab" role="tab"
:aria-expanded="isActive" :aria-expanded="isActive"
@ -13,11 +13,17 @@
:id="`el-collapse-head-${id}`" :id="`el-collapse-head-${id}`"
tabindex="0" tabindex="0"
@keyup.space.enter.stop="handleEnterClick" @keyup.space.enter.stop="handleEnterClick"
:class="{'focusing': focusing}" :class="{
'focusing': focusing,
'is-active': isActive
}"
@focus="handleFocus" @focus="handleFocus"
@blur="focusing = false" @blur="focusing = false"
> >
<i class="el-collapse-item__arrow el-icon-arrow-right"></i> <i
class="el-collapse-item__arrow el-icon-arrow-right"
:class="{'is-active': isActive}">
</i>
<slot name="title">{{title}}</slot> <slot name="title">{{title}}</slot>
</div> </div>
</div> </div>

15
packages/theme-chalk/src/collapse.scss
View File

@ -23,10 +23,16 @@
float: right; float: right;
line-height: 48px; line-height: 48px;
font-weight: 300; font-weight: 300;
@include when(active) {
transform: rotate(90deg);
}
} }
&.focusing:focus:not(:hover){ &.focusing:focus:not(:hover){
color: $--color-primary; color: $--color-primary;
} }
@include when(active) {
border-bottom-color: transparent;
}
} }
@include e(wrap) { @include e(wrap) {
@ -44,15 +50,6 @@
line-height: 1.769230769230769; line-height: 1.769230769230769;
} }
@include when(active) {
.el-collapse-item__header {
border-bottom-color: transparent;
.el-collapse-item__arrow {
transform: rotate(90deg);
}
}
}
&:last-child { &:last-child {
margin-bottom: -1px; margin-bottom: -1px;
} }