javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(pagination): migrate css var (#2587)

Browse Source
This commit is contained in:
云游君
2021-07-20 13:18:24 +08:00
committed by GitHub
parent 43b02d2f73
commit c9f03eaee4
2 changed files with 67 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/theme-chalk/src/common/var.scss
View File

@@ -464,25 +464,8 @@ $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
/* Pagination
-------------------------- */
/// fontSize||Font|1
$--pagination-font-size: 13px !default;
/// color||Color|0
$--pagination-background-color: $--color-white !default;
/// color||Color|0
$--pagination-font-color: $--color-text-primary !default;
$--pagination-border-radius: 3px !default;
/// color||Color|0
$--pagination-button-color: $--color-text-primary !default;
/// height||Other|4
$--pagination-button-width: 35.5px !default;
/// height||Other|4
$--pagination-button-height: 28px !default;
/// color||Color|0
$--pagination-button-disabled-color: $--color-text-placeholder !default;
/// color||Color|0
$--pagination-button-disabled-background-color: $--color-white !default;
/// color||Color|0
$--pagination-hover-color: $--color-primary !default;
// refactor with css3 var
// See packages/theme-chalk/src/pagination.scss
/* Popup
-------------------------- */

115
packages/theme-chalk/src/pagination.scss
View File

@@ -5,23 +5,38 @@
@import 'common/var';
@import 'select';
$--pagination-height-extra-small: 22px !default;
$--pagination-line-height-extra-small: $--pagination-height-extra-small !default;
:root {
--el-pagination-font-size: 13px;
--el-pagination-background-color: var(--el-color-white);
--el-pagination-font-color: var(--el-color-text-primary);
--el-pagination-border-radius: 3px;
--el-pagination-button-color: var(--el-color-text-primary);
--el-pagination-button-width: 35.5px;
--el-pagination-button-height: 28px;
--el-pagination-button-disabled-color: var(--el-color-text-placeholder);
--el-pagination-button-disabled-background-color: var(--el-color-white);
--el-pagination-hover-color: var(--el-color-primary);
--el-pagination-height-extra-small: 22px;
--el-pagination-line-height-extra-small: var(
--el-pagination-height-extra-small
);
}
@include b(pagination) {
white-space: nowrap;
padding: 2px 5px;
color: $--pagination-font-color;
color: var(--el-pagination-font-color);
font-weight: bold;
@include utils-clearfix;
span:not([class*='suffix']),
button {
display: inline-block;
font-size: $--pagination-font-size;
min-width: $--pagination-button-width;
height: $--pagination-button-height;
line-height: $--pagination-button-height;
font-size: var(--el-pagination-font-size);
min-width: var(--el-pagination-button-width);
height: var(--el-pagination-button-height);
line-height: var(--el-pagination-button-height);
vertical-align: top;
box-sizing: border-box;
}
@@ -44,7 +59,7 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
.#{$namespace}-input__inner {
padding-right: 25px;
border-radius: $--pagination-border-radius;
border-radius: var(--el-pagination-border-radius);
}
}
@@ -58,12 +73,12 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
}
&:hover {
color: $--pagination-hover-color;
color: var(--el-pagination-hover-color);
}
&:disabled {
color: $--pagination-button-disabled-color;
background-color: $--pagination-button-disabled-background-color;
color: var(--el-pagination-button-disabled-color);
background-color: var(--el-pagination-button-disabled-background-color);
cursor: not-allowed;
}
}
@@ -72,10 +87,10 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
.btn-next {
background: center center no-repeat;
background-size: 16px;
background-color: $--pagination-background-color;
background-color: var(--el-pagination-background-color);
cursor: pointer;
margin: 0;
color: $--pagination-button-color;
color: var(--el-pagination-button-color);
.#{$namespace}-icon {
display: block;
@@ -93,7 +108,7 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
}
.#{$namespace}-pager li.disabled {
color: $--color-text-placeholder;
color: var(--el-color-text-placeholder);
cursor: not-allowed;
}
@@ -106,8 +121,8 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
.#{$namespace}-pager li:last-child {
border-color: transparent;
font-size: var(--el-font-size-extra-small);
line-height: $--pagination-line-height-extra-small;
height: $--pagination-height-extra-small;
line-height: var(--el-pagination-line-height-extra-small);
height: var(--el-pagination-height-extra-small);
min-width: 22px;
}
@@ -117,34 +132,34 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
.more::before,
li.more::before {
line-height: $--pagination-line-height-extra-small;
line-height: var(--el-pagination-line-height-extra-small);
}
span:not([class*='suffix']),
button {
height: $--pagination-height-extra-small;
line-height: $--pagination-line-height-extra-small;
height: var(--el-pagination-height-extra-small);
line-height: var(--el-pagination-line-height-extra-small);
}
@include e(editor) {
height: $--pagination-line-height-extra-small;
height: var(--el-pagination-line-height-extra-small);
&.#{$namespace}-input .#{$namespace}-input__inner {
height: $--pagination-height-extra-small;
height: var(--el-pagination-height-extra-small);
}
}
.#{$namespace}-input__inner,
.#{$namespace}-input--mini {
height: $--pagination-height-extra-small !important;
line-height: $--pagination-line-height-extra-small;
height: var(--el-pagination-height-extra-small) !important;
line-height: var(--el-pagination-line-height-extra-small);
}
.#{$namespace}-input__suffix {
line-height: $--pagination-line-height-extra-small;
line-height: var(--el-pagination-line-height-extra-small);
.#{$namespace}-input__suffix-inner {
line-height: $--pagination-line-height-extra-small;
line-height: var(--el-pagination-line-height-extra-small);
i.el-select__caret {
line-height: $--pagination-line-height-extra-small;
line-height: var(--el-pagination-line-height-extra-small);
}
}
}
@@ -153,14 +168,14 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
@include e(sizes) {
margin: 0 10px 0 0;
font-weight: normal;
color: $--color-text-regular;
color: var(--el-color-text-regular);
.#{$namespace}-input .#{$namespace}-input__inner {
font-size: $--pagination-font-size;
font-size: var(--el-pagination-font-size);
padding-left: 8px;
&:hover {
border-color: $--pagination-hover-color;
border-color: var(--el-pagination-hover-color);
}
}
}
@@ -168,13 +183,13 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
@include e(total) {
margin-right: 10px;
font-weight: normal;
color: $--color-text-regular;
color: var(--el-color-text-regular);
}
@include e(jump) {
margin-left: 24px;
font-weight: normal;
color: $--color-text-regular;
color: var(--el-color-text-regular);
.#{$namespace}-input__inner {
padding: 0 3px;
@@ -188,19 +203,19 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
@include e(editor) {
line-height: 18px;
padding: 0 2px;
height: $--pagination-button-height;
height: var(--el-pagination-button-height);
text-align: center;
margin: 0 2px;
box-sizing: border-box;
border-radius: $--pagination-border-radius;
border-radius: var(--el-pagination-border-radius);
&.#{$namespace}-input {
width: 50px;
}
&.#{$namespace}-input .#{$namespace}-input__inner {
height: $--pagination-button-height;
height: var(--el-pagination-button-height);
}
.#{$namespace}-input__inner::-webkit-inner-spin-button,
@@ -216,12 +231,12 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
.#{$namespace}-pager li {
margin: 0 5px;
background-color: map.get($--colors, 'info', 'lighter');
color: $--color-text-regular;
color: var(--el-color-text-regular);
min-width: 30px;
border-radius: 2px;
&.disabled {
color: $--color-text-placeholder;
color: var(--el-color-text-placeholder);
}
}
@@ -230,18 +245,18 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
padding: 0;
&:disabled {
color: $--color-text-placeholder;
color: var(--el-color-text-placeholder);
}
}
.#{$namespace}-pager li:not(.disabled) {
&:hover {
color: $--pagination-hover-color;
color: var(--el-pagination-hover-color);
}
&.active {
background-color: $--color-primary;
color: $--color-white;
background-color: var(--el-color-primary);
color: var(--el-color-white);
}
}
@@ -271,13 +286,13 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
li {
padding: 0 4px;
background: $--pagination-background-color;
background: var(--el-pagination-background-color);
vertical-align: top;
display: inline-block;
font-size: $--pagination-font-size;
min-width: $--pagination-button-width;
height: $--pagination-button-height;
line-height: $--pagination-button-height;
font-size: var(--el-pagination-font-size);
min-width: var(--el-pagination-button-width);
height: var(--el-pagination-button-height);
line-height: var(--el-pagination-button-height);
cursor: pointer;
box-sizing: border-box;
text-align: center;
@@ -286,10 +301,10 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
&.btn-quicknext,
&.btn-quickprev {
line-height: 28px;
color: $--pagination-button-color;
color: var(--el-pagination-button-color);
&.disabled {
color: $--color-text-placeholder;
color: var(--el-color-text-placeholder);
}
}
@@ -306,15 +321,15 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
}
&:focus-visible {
outline: 1px solid $--pagination-hover-color;
outline: 1px solid var(--el-pagination-hover-color);
}
&:hover {
color: $--pagination-hover-color;
color: var(--el-pagination-hover-color);
}
&.active {
color: $--pagination-hover-color;
color: var(--el-pagination-hover-color);
cursor: default;
}
}