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
? <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 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>
</span>
: ''

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

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