mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
style: redesign Table header action (#30651)
* feat: improve Table filter and sorter position * fix: edge cases of th border * fix lint * style: apply new design * fix css detail * fix stylelint * fix css error * style: sorter icon hover color * fix test cases * update snapshot * fix th padding * fix calc * style: fix dark theme
This commit is contained in:
afc163
GitHub
parent
aa5990fb21
commit
082f626a3e
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -310,6 +310,7 @@
|
||||
@table-header-bg: #1d1d1d;
|
||||
@table-body-sort-bg: fade(@white, 1%);
|
||||
@table-row-hover-bg: #262626;
|
||||
@table-header-cell-split-color: fade(@white, 8%);
|
||||
@table-header-sort-bg: #262626;
|
||||
@table-header-filter-active-bg: #434343;
|
||||
@table-header-sort-active-bg: #303030;
|
||||
|
||||
@ -609,11 +609,12 @@
|
||||
@table-font-size: @font-size-base;
|
||||
@table-font-size-md: @table-font-size;
|
||||
@table-font-size-sm: @table-font-size;
|
||||
@table-header-cell-split-color: rgba(0, 0, 0, 0.06);
|
||||
// Sorter
|
||||
// Legacy: `table-header-sort-active-bg` is used for hover not real active
|
||||
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
|
||||
@table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
|
||||
// Filter
|
||||
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
|
||||
@table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
|
||||
@table-filter-btns-bg: inherit;
|
||||
@table-filter-dropdown-bg: @component-background;
|
||||
@table-expand-icon-bg: @component-background;
|
||||
|
||||
@ -182,15 +182,14 @@ describe('Table.sorter', () => {
|
||||
jest.useFakeTimers();
|
||||
const wrapper = mount(createTable({}));
|
||||
// default show sorter tooltip
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
|
||||
|
||||
// set table props showSorterTooltip is false
|
||||
wrapper.setProps({ showSorterTooltip: false });
|
||||
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
|
||||
@ -199,17 +198,16 @@ describe('Table.sorter', () => {
|
||||
showSorterTooltip: false,
|
||||
columns: [{ ...column, showSorterTooltip: true }],
|
||||
});
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
|
||||
// set table props showSorterTooltip is true, column showSorterTooltip is false
|
||||
wrapper.setProps({
|
||||
showSorterTooltip: true,
|
||||
columns: [{ ...column, showSorterTooltip: false }],
|
||||
});
|
||||
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
|
||||
@ -221,14 +219,13 @@ describe('Table.sorter', () => {
|
||||
const wrapper = mount(
|
||||
createTable({ showSorterTooltip: { placement: 'bottom', title: 'static title' } }),
|
||||
);
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
|
||||
|
||||
wrapper.setProps({ showSorterTooltip: false });
|
||||
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
|
||||
@ -236,16 +233,15 @@ describe('Table.sorter', () => {
|
||||
showSorterTooltip: false,
|
||||
columns: [{ ...column, showSorterTooltip: true }],
|
||||
});
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
|
||||
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
|
||||
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
|
||||
wrapper.setProps({
|
||||
showSorterTooltip: true,
|
||||
columns: [{ ...column, showSorterTooltip: false }],
|
||||
});
|
||||
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
|
||||
|
||||
@ -67,23 +67,15 @@ exports[`Table.filter renders custom filter icon as ReactNode 1`] = `
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="customize-icon"
|
||||
/>
|
||||
</span>
|
||||
class="customize-icon"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
@ -175,21 +167,13 @@ exports[`Table.filter renders custom filter icon as string correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
string
|
||||
</span>
|
||||
string
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
@ -297,49 +281,41 @@ exports[`Table.filter renders custom filter icon with right Tooltip title 1`] =
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
class="ant-tooltip-open"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-open"
|
||||
Tooltip
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
>
|
||||
Tooltip
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
@ -431,38 +407,30 @@ exports[`Table.filter renders filter correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@ -559,157 +527,149 @@ exports[`Table.filter should support getPopupContainer 1`] = `
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
>
|
||||
<div
|
||||
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<div
|
||||
class="ant-table-filter-dropdown"
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-boy"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-boy"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Boy
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-girl"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Girl
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
|
||||
role="none"
|
||||
>
|
||||
<div
|
||||
aria-controls="rc-menu-uuid-test-title-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-dropdown-menu-submenu-title"
|
||||
data-menu-id="rc-menu-uuid-test-title"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
title="Title"
|
||||
>
|
||||
Title
|
||||
<i
|
||||
class="ant-dropdown-menu-submenu-arrow"
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-table-filter-dropdown-btns"
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Boy
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-girl"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-link ant-btn-sm"
|
||||
disabled=""
|
||||
type="button"
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
</label>
|
||||
<span>
|
||||
Girl
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
|
||||
role="none"
|
||||
>
|
||||
<div
|
||||
aria-controls="rc-menu-uuid-test-title-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-dropdown-menu-submenu-title"
|
||||
data-menu-id="rc-menu-uuid-test-title"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
title="Title"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
Title
|
||||
<i
|
||||
class="ant-dropdown-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-table-filter-dropdown-btns"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-link ant-btn-sm"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -800,157 +760,149 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
|
||||
<div
|
||||
class="ant-table-filter-column"
|
||||
>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-filter-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="ant-dropdown-trigger ant-table-filter-trigger"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="filter"
|
||||
class="anticon anticon-filter"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="filter"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
>
|
||||
<div
|
||||
class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
|
||||
style="opacity: 0; pointer-events: none;"
|
||||
class="ant-table-filter-dropdown"
|
||||
>
|
||||
<div
|
||||
class="ant-table-filter-dropdown"
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<ul
|
||||
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||
data-menu-list="true"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-boy"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-boy"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Boy
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-girl"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Girl
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
|
||||
role="none"
|
||||
>
|
||||
<div
|
||||
aria-controls="rc-menu-uuid-test-title-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-dropdown-menu-submenu-title"
|
||||
data-menu-id="rc-menu-uuid-test-title"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
title="Title"
|
||||
>
|
||||
Title
|
||||
<i
|
||||
class="ant-dropdown-menu-submenu-arrow"
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-table-filter-dropdown-btns"
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span>
|
||||
Boy
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-item"
|
||||
data-menu-id="rc-menu-uuid-test-girl"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-link ant-btn-sm"
|
||||
disabled=""
|
||||
type="button"
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
</label>
|
||||
<span>
|
||||
Girl
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-dropdown-menu-submenu ant-dropdown-menu-submenu-vertical"
|
||||
role="none"
|
||||
>
|
||||
<div
|
||||
aria-controls="rc-menu-uuid-test-title-popup"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-dropdown-menu-submenu-title"
|
||||
data-menu-id="rc-menu-uuid-test-title"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
title="Title"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
Title
|
||||
<i
|
||||
class="ant-dropdown-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="ant-table-filter-dropdown-btns"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-link ant-btn-sm"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
<div
|
||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
@ -9,61 +9,57 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
|
||||
class="ant-table-cell ant-table-column-has-sorters"
|
||||
>
|
||||
<div
|
||||
class="ant-table-column-sorters-with-tooltip"
|
||||
class="ant-table-column-sorters"
|
||||
>
|
||||
<div
|
||||
class="ant-table-column-sorters"
|
||||
<span>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter ant-table-column-sorter-full"
|
||||
>
|
||||
<span>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter ant-table-column-sorter-full"
|
||||
class="ant-table-column-sorter-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-table-column-sorter-inner"
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
<path
|
||||
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -101,61 +97,57 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
|
||||
class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
|
||||
>
|
||||
<div
|
||||
class="ant-table-column-sorters-with-tooltip"
|
||||
class="ant-table-column-sorters"
|
||||
>
|
||||
<div
|
||||
class="ant-table-column-sorters"
|
||||
<span>
|
||||
Age
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter ant-table-column-sorter-full"
|
||||
>
|
||||
<span>
|
||||
Age
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter ant-table-column-sorter-full"
|
||||
class="ant-table-column-sorter-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-table-column-sorter-inner"
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up active"
|
||||
role="img"
|
||||
>
|
||||
<span
|
||||
aria-label="caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up active"
|
||||
role="img"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
<path
|
||||
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -152,6 +152,8 @@ class App extends React.Component {
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
...this.getColumnSearchProps('address'),
|
||||
sorter: (a, b) => a.address.length - b.address.length,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
},
|
||||
];
|
||||
return <Table columns={columns} dataSource={data} />;
|
||||
|
||||
@ -85,10 +85,7 @@ const columns = [
|
||||
value: 'New York',
|
||||
},
|
||||
],
|
||||
filterMultiple: false,
|
||||
onFilter: (value, record) => record.address.indexOf(value) === 0,
|
||||
sorter: (a, b) => a.address.length - b.address.length,
|
||||
sortDirections: ['descend', 'ascend'],
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -282,35 +282,28 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
|
||||
|
||||
return (
|
||||
<div className={classNames(`${prefixCls}-column`)}>
|
||||
<span className={`${prefixCls}-column-title`}>{children}</span>
|
||||
|
||||
<span
|
||||
className={classNames(`${prefixCls}-trigger-container`, {
|
||||
[`${prefixCls}-trigger-container-open`]: mergedVisible,
|
||||
})}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
{children}
|
||||
<Dropdown
|
||||
overlay={menu}
|
||||
trigger={['click']}
|
||||
visible={mergedVisible}
|
||||
onVisibleChange={onVisibleChange}
|
||||
getPopupContainer={getPopupContainer}
|
||||
placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'}
|
||||
>
|
||||
<Dropdown
|
||||
overlay={menu}
|
||||
trigger={['click']}
|
||||
visible={mergedVisible}
|
||||
onVisibleChange={onVisibleChange}
|
||||
getPopupContainer={getPopupContainer}
|
||||
placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'}
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
className={classNames(`${prefixCls}-trigger`, {
|
||||
active: filtered,
|
||||
})}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={-1}
|
||||
className={classNames(`${prefixCls}-trigger`, {
|
||||
active: filtered,
|
||||
})}
|
||||
>
|
||||
{filterIcon}
|
||||
</span>
|
||||
</Dropdown>
|
||||
</span>
|
||||
{filterIcon}
|
||||
</span>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -168,9 +168,7 @@ function injectSorter<RecordType>(
|
||||
</div>
|
||||
);
|
||||
return showSorterTooltip ? (
|
||||
<Tooltip {...tooltipProps}>
|
||||
<div className={`${prefixCls}-column-sorters-with-tooltip`}>{renderSortTitle}</div>
|
||||
</Tooltip>
|
||||
<Tooltip {...tooltipProps}>{renderSortTitle}</Tooltip>
|
||||
) : (
|
||||
renderSortTitle
|
||||
);
|
||||
|
||||
@ -32,6 +32,12 @@
|
||||
> tr:not(:last-child) > th {
|
||||
border-bottom: @border-width-base @border-style-base @table-border-color;
|
||||
}
|
||||
|
||||
> tr > th {
|
||||
&::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed right should provides additional border
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
|
||||
@table-header-icon-color: #bfbfbf;
|
||||
@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
|
||||
@table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);
|
||||
@table-sticky-zindex: (@zindex-table-fixed + 1);
|
||||
@table-sticky-scroll-bar-active-bg: fade(@table-sticky-scroll-bar-bg, 80%);
|
||||
|
||||
@ -79,6 +78,7 @@
|
||||
&-thead {
|
||||
> tr {
|
||||
> th {
|
||||
position: relative;
|
||||
color: @table-header-color;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
@ -89,6 +89,18 @@
|
||||
&[colspan]:not([colspan='1']) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(.@{table-prefix-cls}-row-expand-icon-cell):not([colspan])::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 1.6em;
|
||||
background-color: @table-header-cell-split-color;
|
||||
transform: translateY(-50%);
|
||||
transition: background-color 0.3s;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -195,47 +207,52 @@
|
||||
|
||||
// ============================ Sorter ============================
|
||||
&-thead th.@{table-prefix-cls}-column-has-sorters {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: @table-header-sort-active-bg;
|
||||
|
||||
.@{table-prefix-cls}-filter-trigger-container {
|
||||
background: @table-header-sort-active-filter-bg;
|
||||
&::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-thead th.@{table-prefix-cls}-column-sort {
|
||||
background: @table-header-sort-bg;
|
||||
|
||||
&::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
td&-column-sort {
|
||||
background: @table-body-sort-bg;
|
||||
}
|
||||
|
||||
&-column-sorters-with-tooltip {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-column-sorters {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
flex: auto;
|
||||
align-items: center;
|
||||
padding: @table-padding-vertical @table-padding-horizontal;
|
||||
justify-content: space-between;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-column-sorter {
|
||||
margin-top: 0.15em;
|
||||
margin-bottom: -0.15em;
|
||||
margin-left: @padding-xs;
|
||||
color: @table-header-icon-color;
|
||||
|
||||
&-full {
|
||||
margin-top: -0.2em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
font-size: 0;
|
||||
transition: color 0.3s;
|
||||
|
||||
&-inner {
|
||||
display: inline-flex;
|
||||
@ -257,65 +274,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-column-sorters:hover &-column-sorter {
|
||||
color: darken(@table-header-icon-color, 10%);
|
||||
}
|
||||
|
||||
// ============================ Filter ============================
|
||||
&-filter-column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: -@table-padding-vertical -@table-padding-horizontal;
|
||||
}
|
||||
|
||||
&-filter-column-title {
|
||||
flex: auto;
|
||||
padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal;
|
||||
}
|
||||
|
||||
// Remove padding when sorter also provided
|
||||
&-thead tr th.@{table-prefix-cls}-column-has-sorters {
|
||||
.@{table-prefix-cls}-filter-column {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-column-title {
|
||||
padding: 0 2.3em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-filter-trigger-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: stretch;
|
||||
align-self: stretch;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&-open,
|
||||
&:hover,
|
||||
.@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-has-sorters:hover &:hover {
|
||||
background: @table-header-filter-active-bg;
|
||||
}
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-filter-trigger {
|
||||
display: block;
|
||||
width: 2.3em;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: -4px (-@table-padding-horizontal / 2) -4px 4px;
|
||||
padding: 0 4px;
|
||||
color: @table-header-icon-color;
|
||||
font-size: @font-size-sm;
|
||||
transition: color 0.3s;
|
||||
border-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-trigger-container-open &,
|
||||
&:hover {
|
||||
color: @text-color-secondary;
|
||||
background: @table-header-filter-active-bg;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@ -388,6 +371,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
table tr th&-selection-column::after {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&-selection {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
@ -564,6 +551,7 @@
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-cell-fix-right-first::after,
|
||||
&-cell-fix-right-last::after {
|
||||
position: absolute;
|
||||
@ -611,6 +599,10 @@
|
||||
.@{table-prefix-cls}-cell-fix-left-last::after {
|
||||
box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-cell-fix-left-last::before {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-ping-right {
|
||||
|
||||
@ -13,22 +13,8 @@
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-thead {
|
||||
th.@{table-prefix-cls}-column-has-sorters {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-column {
|
||||
margin: -@padding-vertical -@padding-horizontal;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-column-title {
|
||||
padding: @padding-vertical 2.3em @padding-vertical @padding-horizontal;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-column-sorters {
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
}
|
||||
.@{table-prefix-cls}-filter-trigger {
|
||||
margin-right: -(@padding-horizontal / 2);
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-expanded-row-fixed {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user