mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

remove pseudo-class in pagination

Browse Source
This commit is contained in:
HeskeyBaozi 2018-08-22 20:01:00 +08:00
parent 71be9c4a09
commit 0c751ca3b5
4 changed files with 267 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/pagination/Pagination.tsx
View File

@ -57,12 +57,28 @@ export default class Pagination extends React.Component<PaginationProps, {}> {
);
const jumpPrevIcon = (
<a className={`${prefixCls}-item-link`}>
<Icon className={`${prefixCls}-item-link-icon`} type="left"/>
{/* You can use transition effects in the container :) */}
<div className={`${prefixCls}-item-container`}>
<Icon
className={`${prefixCls}-item-link-icon`}
svgClassName={`${prefixCls}-item-link-icon-svg`}
type="left"
/>
<span className={`${prefixCls}-item-ellipsis`}>•••</span>
</div>
</a>
);
const jumpNextIcon = (
<a className={`${prefixCls}-item-link`}>
<Icon className={`${prefixCls}-item-link-icon`} type="double-right"/>
{/* You can use transition effects in the container :) */}
<div className={`${prefixCls}-item-container`}>
<Icon
className={`${prefixCls}-item-link-icon`}
svgClassName={`${prefixCls}-item-link-icon-svg`}
type="double-right"
/>
<span className={`${prefixCls}-item-ellipsis`}>•••</span>
</div>
</a>
);
return {

55
components/pagination/__tests__/__snapshots__/demo.test.js.snap
View File

@ -193,13 +193,16 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
>
<a
class="ant-pagination-item-link"
>
<div
class="ant-pagination-item-container"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<svg
aria-hidden="true"
class=""
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
@ -214,6 +217,12 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -483,13 +492,16 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
>
<a
class="ant-pagination-item-link"
>
<div
class="ant-pagination-item-container"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<svg
aria-hidden="true"
class=""
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
@ -504,6 +516,12 @@ exports[`renders ./components/pagination/demo/itemRender.md correctly 1`] = `
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -613,13 +631,16 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
>
<a
class="ant-pagination-item-link"
>
<div
class="ant-pagination-item-container"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<svg
aria-hidden="true"
class=""
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
@ -634,6 +655,12 @@ exports[`renders ./components/pagination/demo/jump.md correctly 1`] = `
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -1124,13 +1151,16 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
>
<a
class="ant-pagination-item-link"
>
<div
class="ant-pagination-item-container"
>
<i
class="anticon anticon-left ant-pagination-item-link-icon"
>
<svg
aria-hidden="true"
class=""
class="ant-pagination-item-link-icon-svg"
data-icon="left"
fill="currentColor"
height="1em"
@ -1142,6 +1172,12 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -1196,13 +1232,16 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
>
<a
class="ant-pagination-item-link"
>
<div
class="ant-pagination-item-container"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<svg
aria-hidden="true"
class=""
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
@ -1217,6 +1256,12 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li

40
components/pagination/style/index.less
View File

@ -87,10 +87,25 @@
&-jump-prev,
&-jump-next {
outline: 0;
.@{pagination-prefix-cls}-item-container {
position: relative;
&:after {
content: "•••";
.@{pagination-prefix-cls}-item-link-icon {
.iconfont-size-under-12px(12px);
color: @primary-color;
letter-spacing: -1px;
opacity: 0;
transition: all .2s;
&-svg {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
.@{pagination-prefix-cls}-item-ellipsis {
position: absolute;
display: block;
letter-spacing: 2px;
@ -104,29 +119,16 @@
left: 0;
margin: auto;
}
.@{pagination-prefix-cls}-item-link {
.iconfont-size-under-12px(12px);
position: absolute;
color: @primary-color;
letter-spacing: -1px;
opacity: 0;
transition: all .2s;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
&:focus,
&:hover {
&:after {
opacity: 0;
}
.@{pagination-prefix-cls}-item-link {
.@{pagination-prefix-cls}-item-link-icon {
opacity: 1;
}
.@{pagination-prefix-cls}-item-ellipsis {
opacity: 0;
}
}
}

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

@ -3750,13 +3750,16 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
>
<a
class="ant-pagination-item-link"
>
<div
class="ant-pagination-item-container"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<svg
aria-hidden="true"
class=""
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
@ -3771,6 +3774,12 @@ exports[`renders ./components/table/demo/edit-row.md correctly 1`] = `
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -6243,13 +6252,16 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
>
<a
class="ant-pagination-item-link"
>
<div
class="ant-pagination-item-container"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<svg
aria-hidden="true"
class=""
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
@ -6264,6 +6276,12 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li
@ -8860,13 +8878,16 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
>
<a
class="ant-pagination-item-link"
>
<div
class="ant-pagination-item-container"
>
<i
class="anticon anticon-double-right ant-pagination-item-link-icon"
>
<svg
aria-hidden="true"
class=""
class="ant-pagination-item-link-icon-svg"
data-icon="double-right"
fill="currentColor"
height="1em"
@ -8881,6 +8902,12 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
/>
</svg>
</i>
<span
class="ant-pagination-item-ellipsis"
>
•••
</span>
</div>
</a>
</li>
<li