test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

Merge pull request #15895 from ant-design/table-align-right

Browse Source 
fix: Table align right not work on title
This commit is contained in:
偏右 2019-04-07 16:53:46 +08:00 committed by GitHub
commit 79aa04bf5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 4429 additions and 3333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

300
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -11417,60 +11417,64 @@ exports[`ConfigProvider components Table configProvider 1`] = `
<th <th
class="config-table-column-has-actions config-table-column-has-filters config-table-column-has-sorters" class="config-table-column-has-actions config-table-column-has-filters config-table-column-has-sorters"
> >
<div <span
class="config-table-column-sorters" class="config-table-header-column"
> >
<span <div
class="config-table-column-title" class="config-table-column-sorters"
> >
Name <span
</span> class="config-table-column-title"
<span
class="config-table-column-sorter"
>
<div
class="config-table-column-sorter-inner config-table-column-sorter-inner-full"
title="Sort"
> >
<i Name
aria-label="icon: caret-up" </span>
class="anticon anticon-caret-up config-table-column-sorter-up off" <span
class="config-table-column-sorter"
>
<div
class="config-table-column-sorter-inner config-table-column-sorter-inner-full"
title="Sort"
> >
<svg <i
aria-hidden="true" aria-label="icon: caret-up"
class="" class="anticon anticon-caret-up config-table-column-sorter-up off"
data-icon="caret-up"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-up"
</i> fill="currentColor"
<i height="1em"
aria-label="icon: caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down config-table-column-sorter-down off" width="1em"
> >
<svg <path
aria-hidden="true" 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"
class="" />
data-icon="caret-down" </svg>
fill="currentColor" </i>
height="1em" <i
viewBox="0 0 1024 1024" aria-label="icon: caret-down"
width="1em" class="anticon anticon-caret-down config-table-column-sorter-down off"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-down"
</i> fill="currentColor"
</div> height="1em"
</span> viewBox="0 0 1024 1024"
</div> 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>
</i>
</div>
</span>
</div>
</span>
<i <i
aria-label="icon: filter" aria-label="icon: filter"
class="anticon anticon-filter config-table-filter-open config-dropdown-trigger config-dropdown-open" class="anticon anticon-filter config-table-filter-open config-dropdown-trigger config-dropdown-open"
@ -11628,60 +11632,64 @@ exports[`ConfigProvider components Table normal 1`] = `
<th <th
class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters" class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"
> >
<div <span
class="ant-table-column-sorters" class="ant-table-header-column"
> >
<span <div
class="ant-table-column-title" class="ant-table-column-sorters"
> >
Name <span
</span> class="ant-table-column-title"
<span
class="ant-table-column-sorter"
>
<div
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
title="Sort"
> >
<i Name
aria-label="icon: caret-up" </span>
class="anticon anticon-caret-up ant-table-column-sorter-up off" <span
class="ant-table-column-sorter"
>
<div
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
title="Sort"
> >
<svg <i
aria-hidden="true" aria-label="icon: caret-up"
class="" class="anticon anticon-caret-up ant-table-column-sorter-up off"
data-icon="caret-up"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-up"
</i> fill="currentColor"
<i height="1em"
aria-label="icon: caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down ant-table-column-sorter-down off" width="1em"
> >
<svg <path
aria-hidden="true" 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"
class="" />
data-icon="caret-down" </svg>
fill="currentColor" </i>
height="1em" <i
viewBox="0 0 1024 1024" aria-label="icon: caret-down"
width="1em" class="anticon anticon-caret-down ant-table-column-sorter-down off"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-down"
</i> fill="currentColor"
</div> height="1em"
</span> viewBox="0 0 1024 1024"
</div> 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>
</i>
</div>
</span>
</div>
</span>
<i <i
aria-label="icon: filter" aria-label="icon: filter"
class="anticon anticon-filter ant-table-filter-open ant-dropdown-trigger ant-dropdown-open" class="anticon anticon-filter ant-table-filter-open ant-dropdown-trigger ant-dropdown-open"
@ -11839,60 +11847,64 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
<th <th
class="prefix-Table-column-has-actions prefix-Table-column-has-filters prefix-Table-column-has-sorters" class="prefix-Table-column-has-actions prefix-Table-column-has-filters prefix-Table-column-has-sorters"
> >
<div <span
class="prefix-Table-column-sorters" class="prefix-Table-header-column"
> >
<span <div
class="prefix-Table-column-title" class="prefix-Table-column-sorters"
> >
Name <span
</span> class="prefix-Table-column-title"
<span
class="prefix-Table-column-sorter"
>
<div
class="prefix-Table-column-sorter-inner prefix-Table-column-sorter-inner-full"
title="Sort"
> >
<i Name
aria-label="icon: caret-up" </span>
class="anticon anticon-caret-up prefix-Table-column-sorter-up off" <span
class="prefix-Table-column-sorter"
>
<div
class="prefix-Table-column-sorter-inner prefix-Table-column-sorter-inner-full"
title="Sort"
> >
<svg <i
aria-hidden="true" aria-label="icon: caret-up"
class="" class="anticon anticon-caret-up prefix-Table-column-sorter-up off"
data-icon="caret-up"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-up"
</i> fill="currentColor"
<i height="1em"
aria-label="icon: caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down prefix-Table-column-sorter-down off" width="1em"
> >
<svg <path
aria-hidden="true" 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"
class="" />
data-icon="caret-down" </svg>
fill="currentColor" </i>
height="1em" <i
viewBox="0 0 1024 1024" aria-label="icon: caret-down"
width="1em" class="anticon anticon-caret-down prefix-Table-column-sorter-down off"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-down"
</i> fill="currentColor"
</div> height="1em"
</span> viewBox="0 0 1024 1024"
</div> 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>
</i>
</div>
</span>
</div>
</span>
<i <i
aria-label="icon: filter" aria-label="icon: filter"
class="anticon anticon-filter prefix-Table-filter-open ant-dropdown-trigger ant-dropdown-open" class="anticon anticon-filter prefix-Table-filter-open ant-dropdown-trigger ant-dropdown-open"

48
components/empty/__tests__/__snapshots__/demo.test.js.snap
View File

@ -380,30 +380,38 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
<th <th
class="" class=""
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
Name <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" Name
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
<th <th
class="" class=""
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
Age <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" Age
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
</tr> </tr>
</thead> </thead>

48
components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1756,16 +1756,20 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
<th <th
class="ant-table-column-has-actions ant-table-column-has-filters" class="ant-table-column-has-actions ant-table-column-has-filters"
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
Name <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" Name
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
<i <i
aria-label="icon: filter" aria-label="icon: filter"
class="anticon anticon-filter ant-dropdown-trigger" class="anticon anticon-filter ant-dropdown-trigger"
@ -1790,16 +1794,20 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
<th <th
class="" class=""
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
Age <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" Age
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
</tr> </tr>
</thead> </thead>

2112
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

14
components/table/Table.tsx
View File

@ -925,12 +925,14 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
[`${prefixCls}-column-sort`]: isSortColumn && sortOrder, [`${prefixCls}-column-sort`]: isSortColumn && sortOrder,
}), }),
title: [ title: [
<div key="title" className={sortButton ? `${prefixCls}-column-sorters` : undefined}> <span key="title" className={`${prefixCls}-header-column`}>
<span className={`${prefixCls}-column-title`}> <div className={sortButton ? `${prefixCls}-column-sorters` : undefined}>
{this.renderColumnTitle(column.title)} <span className={`${prefixCls}-column-title`}>
</span> {this.renderColumnTitle(column.title)}
<span className={`${prefixCls}-column-sorter`}>{sortButton}</span> </span>
</div>, <span className={`${prefixCls}-column-sorter`}>{sortButton}</span>
</div>
</span>,
filterDropdown, filterDropdown,
], ],
onHeaderCell, onHeaderCell,

24
components/table/__tests__/__snapshots__/Table.filter.test.js.snap
View File

@ -96,16 +96,20 @@ exports[`Table.filter renders filter correctly 1`] = `
<th <th
class="ant-table-column-has-actions ant-table-column-has-filters" class="ant-table-column-has-actions ant-table-column-has-filters"
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
Name <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" Name
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
<i <i
aria-label="icon: filter" aria-label="icon: filter"
class="anticon anticon-filter ant-dropdown-trigger" class="anticon anticon-filter ant-dropdown-trigger"

48
components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
View File

@ -32,16 +32,20 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
<th <th
class="" class=""
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
Name <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" Name
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -216,16 +220,20 @@ exports[`Table.pagination renders pagination correctly 1`] = `
<th <th
class="" class=""
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
Name <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" Name
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
</tr> </tr>
</thead> </thead>

128
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -38,48 +38,56 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<th <th
class="ant-table-fixed-columns-in-body ant-table-selection-column" class="ant-table-fixed-columns-in-body ant-table-selection-column"
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
<div <span
class="ant-table-selection" class="ant-table-column-title"
> >
<label <div
class="ant-checkbox-wrapper" class="ant-table-selection"
> >
<span <label
class="ant-checkbox" class="ant-checkbox-wrapper"
> >
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span <span
class="ant-checkbox-inner" class="ant-checkbox"
/> >
</span> <input
</label> class="ant-checkbox-input"
</div> type="checkbox"
</span> />
<span <span
class="ant-table-column-sorter" class="ant-checkbox-inner"
/> />
</div> </span>
</label>
</div>
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
<th <th
class="" class=""
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
Name <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" Name
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -255,34 +263,38 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<th <th
class="ant-table-selection-column" class="ant-table-selection-column"
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
<div <span
class="ant-table-selection" class="ant-table-column-title"
> >
<label <div
class="ant-checkbox-wrapper" class="ant-table-selection"
> >
<span <label
class="ant-checkbox" class="ant-checkbox-wrapper"
> >
<input
class="ant-checkbox-input"
type="checkbox"
/>
<span <span
class="ant-checkbox-inner" class="ant-checkbox"
/> >
</span> <input
</label> class="ant-checkbox-input"
</div> type="checkbox"
</span> />
<span <span
class="ant-table-column-sorter" class="ant-checkbox-inner"
/> />
</div> </span>
</label>
</div>
</span>
<span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
</tr> </tr>
</thead> </thead>

100
components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
View File

@ -8,60 +8,64 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
<th <th
class="ant-table-column-has-actions ant-table-column-has-sorters" class="ant-table-column-has-actions ant-table-column-has-sorters"
> >
<div <span
class="ant-table-column-sorters" class="ant-table-header-column"
> >
<span <div
class="ant-table-column-title" class="ant-table-column-sorters"
> >
Name <span
</span> class="ant-table-column-title"
<span
class="ant-table-column-sorter"
>
<div
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
title="Sort"
> >
<i Name
aria-label="icon: caret-up" </span>
class="anticon anticon-caret-up ant-table-column-sorter-up off" <span
class="ant-table-column-sorter"
>
<div
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
title="Sort"
> >
<svg <i
aria-hidden="true" aria-label="icon: caret-up"
class="" class="anticon anticon-caret-up ant-table-column-sorter-up off"
data-icon="caret-up"
fill="currentColor"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-up"
</i> fill="currentColor"
<i height="1em"
aria-label="icon: caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down ant-table-column-sorter-down off" width="1em"
> >
<svg <path
aria-hidden="true" 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"
class="" />
data-icon="caret-down" </svg>
fill="currentColor" </i>
height="1em" <i
viewBox="0 0 1024 1024" aria-label="icon: caret-down"
width="1em" class="anticon anticon-caret-down ant-table-column-sorter-down off"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-down"
</i> fill="currentColor"
</div> height="1em"
</span> viewBox="0 0 1024 1024"
</div> 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>
</i>
</div>
</span>
</div>
</span>
</th> </th>
</tr> </tr>
</thead> </thead>

96
components/table/__tests__/__snapshots__/Table.test.js.snap
View File

@ -35,61 +35,77 @@ exports[`Table renders JSX correctly 1`] = `
class="" class=""
colspan="2" colspan="2"
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
Name <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" Name
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
<th <th
class="" class=""
rowspan="2" rowspan="2"
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
Age <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" Age
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
</tr> </tr>
<tr> <tr>
<th <th
class="" class=""
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
First Name <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" First Name
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
<th <th
class="" class=""
> >
<div> <span
<span class="ant-table-header-column"
class="ant-table-column-title" >
> <div>
Last Name <span
</span> class="ant-table-column-title"
<span >
class="ant-table-column-sorter" Last Name
/> </span>
</div> <span
class="ant-table-column-sorter"
/>
</div>
</span>
</th> </th>
</tr> </tr>
</thead> </thead>

3872
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

912
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

File diff suppressed because it is too large Load Diff

60
components/table/style/index.less
View File

@ -116,6 +116,9 @@
-webkit-background-clip: border-box; // For Chrome extra space: https://github.com/ant-design/ant-design/issues/14926 -webkit-background-clip: border-box; // For Chrome extra space: https://github.com/ant-design/ant-design/issues/14926
&.@{table-prefix-cls}-column-has-filters { &.@{table-prefix-cls}-column-has-filters {
// https://github.com/ant-design/ant-design/issues/12650
padding-right: 30px !important;
.@{iconfont-css-prefix}-filter, .@{iconfont-css-prefix}-filter,
.@{table-prefix-cls}-filter-icon { .@{table-prefix-cls}-filter-icon {
&.@{table-prefix-cls}-filter-open { &.@{table-prefix-cls}-filter-open {
@ -154,41 +157,36 @@
} }
} }
} }
// https://github.com/ant-design/ant-design/issues/12650
&.@{table-prefix-cls}-column-has-sorters,
&.@{table-prefix-cls}-column-has-filters {
padding-right: 30px !important;
}
&.@{table-prefix-cls}-column-has-sorters.@{table-prefix-cls}-column-has-filters {
padding-right: 54px !important;
}
} }
.@{table-prefix-cls}-column-sorters { .@{table-prefix-cls}-header-column {
display: table; display: inline-block;
vertical-align: top;
> .@{table-prefix-cls}-column-title { .@{table-prefix-cls}-column-sorters {
display: table-cell; display: table;
vertical-align: middle;
}
> *:not(.@{table-prefix-cls}-column-sorter) { > .@{table-prefix-cls}-column-title {
position: relative; display: table-cell;
} vertical-align: middle;
&::before { }
position: absolute;
top: 0; > *:not(.@{table-prefix-cls}-column-sorter) {
right: 0; position: relative;
bottom: 0; }
left: 0; &::before {
background: transparent; position: absolute;
transition: all 0.3s; top: 0;
content: ''; right: 0;
} bottom: 0;
&:hover::before { left: 0;
background: rgba(0, 0, 0, 0.04); background: transparent;
transition: all 0.3s;
content: '';
}
&:hover::before {
background: rgba(0, 0, 0, 0.04);
}
} }
} }