update styles of pagination

This commit is contained in:
Mutasem 2022-04-01 14:53:37 +02:00
parent 31a3360b2d
commit 2c6dac6886
3 changed files with 7 additions and 8 deletions

View file

@ -777,7 +777,7 @@ $table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
/* Pagination /* Pagination
-------------------------- */ -------------------------- */
/// fontSize||Font|1 /// fontSize||Font|1
$pagination-font-size: 13px; $pagination-font-size: var(--font-size-2xs);
/// color||Color|0 /// color||Color|0
$pagination-background-color: $color-white; $pagination-background-color: $color-white;
/// color||Color|0 /// color||Color|0

View file

@ -193,11 +193,12 @@
.btn-prev, .btn-prev,
.btn-next, .btn-next,
.el-pager li { .el-pager li {
margin: 0 5px; margin: 0 var(--spacing-5xs);
background-color: var.$color-info-lighter; background-color: var(--color-background-xlight);
color: var(--color-text-dark); color: var(--color-text-base);
min-width: 30px; min-width: 30px;
border-radius: 2px; border-radius: var(--border-radius-base);
border: var(--border-base);
&.disabled { &.disabled {
color: var(--color-text-lighter); color: var(--color-text-lighter);
@ -216,6 +217,7 @@
.el-pager li:not(.disabled) { .el-pager li:not(.disabled) {
&:hover { &:hover {
color: var.$pagination-hover-color; color: var.$pagination-hover-color;
background-color: var(--color-foreground-light);
} }
&.active { &.active {

View file

@ -182,11 +182,9 @@
background background
:hide-on-single-page="true" :hide-on-single-page="true"
:current-page.sync="currentPage" :current-page.sync="currentPage"
:small="true"
:pager-count="5" :pager-count="5"
:page-size="pageSize" :page-size="pageSize"
layout="prev, pager, next" layout="prev, pager, next"
:class="$style.pagination"
:total="dataCount"> :total="dataCount">
</el-pagination> </el-pagination>
</div> </div>
@ -831,7 +829,6 @@ export default mixins(
} }
.pagination { .pagination {
position: absolute;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;