test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-30 11:17:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Table: replace sorting arrow icons with borders to avoid overlap

Browse Source
This commit is contained in:
Leopoldthecoder 2017-12-12 18:59:53 +08:00 committed by 杨奕
parent e64ba965d6
commit 66dd670a53
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/table/src/table-header.js
View File

@ -119,9 +119,9 @@ export default {
{ {
column.sortable column.sortable
? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }> ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
<i class="sort-caret ascending el-icon-caret-top" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }> <i class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
</i> </i>
<i class="sort-caret descending el-icon-caret-bottom" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }> <i class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
</i> </i>
</span> </span>
: '' : ''

13
packages/theme-chalk/src/table.scss
View File

@ -438,27 +438,28 @@
} }
.sort-caret { .sort-caret {
color: $--color-text-placeholder; width: 0;
width: 14px; height: 0;
overflow: hidden; border: solid 5px transparent;
font-size: 15px;
position: absolute; position: absolute;
&.ascending { &.ascending {
border-bottom-color: $--color-text-placeholder;
top: 5px; top: 5px;
} }
&.descending { &.descending {
border-top-color: $--color-text-placeholder;
bottom: 7px; bottom: 7px;
} }
} }
.ascending .sort-caret.ascending { .ascending .sort-caret.ascending {
color: $--color-primary; border-bottom-color: $--color-primary;
} }
.descending .sort-caret.descending { .descending .sort-caret.descending {
color: $--color-primary; border-top-color: $--color-primary;
} }
.hidden-columns { .hidden-columns {