forked from opentiny/tiny-vue
refactor(pager): [pager] refactor pager style (#2162)
* refactor(pager): [pager] refactor pager style * refactor(pager): [pager] refactor pager style * refactor(pager): [pager] refactor pager style * refactor(pager): [pager] inline pager design config * refactor(pager): [pager] refactor pager style * refactor(pager): [pager] refactor pager style
This commit is contained in:
gimmyhehe
GitHub
parent
4037cb3d61
commit
2f4db09658
|
|
@ -80,6 +80,15 @@
|
|||
"backgroundColor": "transparent",
|
||||
"bold": false,
|
||||
"italic": false
|
||||
},
|
||||
{
|
||||
"tag": "--",
|
||||
"color": "#FFFFFF",
|
||||
"strikethrough": false,
|
||||
"underline": false,
|
||||
"backgroundColor": "#5CB300",
|
||||
"bold": false,
|
||||
"italic": false
|
||||
}
|
||||
],
|
||||
"vue.codeActions.enabled": false
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="content">
|
||||
是否禁用：<tiny-switch v-model="isDisabled"></tiny-switch>
|
||||
<tiny-pager mode="number" :total="100" :disabled="isDisabled" />
|
||||
<tiny-pager :total="100" size="mini" :disabled="isDisabled" />
|
||||
<tiny-pager mode="number" :total="100" size="mini" :disabled="isDisabled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
export default {
|
||||
state: {
|
||||
showJumperSuffix: false,
|
||||
align: 'right',
|
||||
totalI18n: 'total',
|
||||
totalFixedLeft: true
|
||||
pageSizeText: null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
export default {
|
||||
state: {
|
||||
showJumperSuffix: false,
|
||||
align: 'right',
|
||||
totalI18n: 'total',
|
||||
totalFixedLeft: true
|
||||
pageSizeText: null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import Form from './src/form'
|
|||
import FilterBox from './src/filter-box'
|
||||
import Grid from './src/grid'
|
||||
import Guide from './src/guide'
|
||||
import Pager from './src/pager'
|
||||
import Select from './src/select'
|
||||
import TreeNode from './src/tree-node'
|
||||
import TimeSpinner from './src/time-spinner'
|
||||
|
|
@ -35,7 +34,6 @@ export default {
|
|||
FilterBox,
|
||||
Grid,
|
||||
Guide,
|
||||
Pager,
|
||||
Select,
|
||||
TreeNode,
|
||||
TimeSpinner,
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
export default {
|
||||
state: {
|
||||
pageSizeText: '',
|
||||
align: 'right'
|
||||
}
|
||||
}
|
||||
|
|
@ -87,6 +87,19 @@ export const computedSimplestPagerWidth =
|
|||
return baseWidth + num * 8
|
||||
}
|
||||
|
||||
export const computedPageSizeText =
|
||||
({ props, designConfig }: Pick<IPagerRenderlessParams, 'props' | 'designConfig'>) =>
|
||||
(): string => {
|
||||
if (props.pageSizeText) {
|
||||
return props.pageSizeText
|
||||
}
|
||||
// 默认返回空字符串，不展示"条/页", 可以通过设置pageSizeText为null来显示。亦或者自定义
|
||||
if (designConfig?.state && Object.hasOwnProperty.call(designConfig.state, 'pageSizeText')) {
|
||||
return designConfig.state.pageSizeText
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
export const handleJumperFocus =
|
||||
({ state }: Pick<IPagerRenderlessParams, 'state'>) =>
|
||||
(e: Event): void => {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {
|
|||
computedInternalPageCount,
|
||||
computedSimplestPagerOption,
|
||||
computedSimplestPagerWidth,
|
||||
computedPageSizeText,
|
||||
handleJumperFocus,
|
||||
handleSizeChange,
|
||||
handleJumperInput,
|
||||
|
|
@ -92,12 +93,12 @@ export const renderless = (
|
|||
totalText: computed(() => api.computedTotalText()),
|
||||
internalPageCount: computed(() => api.computedInternalPageCount()),
|
||||
showJumperSuffix: designConfig?.state?.showJumperSuffix ?? true,
|
||||
align: props.align || designConfig?.state?.align || 'left',
|
||||
align: props.align || designConfig?.state?.align || 'right',
|
||||
totalI18n: designConfig?.state?.totalI18n || 'totals',
|
||||
totalFixedLeft: computed(
|
||||
() => props.totalFixedLeft ?? designConfig?.state?.totalFixedLeft ?? props.mode !== 'simplest' ?? true
|
||||
),
|
||||
pageSizeText: props.pageSizeText ?? designConfig?.state?.pageSizeText
|
||||
pageSizeText: computed(() => api.computedPageSizeText())
|
||||
})
|
||||
|
||||
Object.assign(api, {
|
||||
|
|
@ -108,6 +109,7 @@ export const renderless = (
|
|||
computedInternalPageCount: computedInternalPageCount({ props, state }),
|
||||
computedSimplestPagerOption: computedSimplestPagerOption({ props, state }),
|
||||
computedSimplestPagerWidth: computedSimplestPagerWidth({ state }),
|
||||
computedPageSizeText: computedPageSizeText({ props, designConfig }),
|
||||
getValidCurrentPage: getValidCurrentPage({ state }),
|
||||
handleJumperFocus: handleJumperFocus({ state }),
|
||||
handleSizeChange: handleSizeChange({ props, state, api, emit, vm }),
|
||||
|
|
|
|||
|
|
@ -25,14 +25,18 @@
|
|||
.component-css-vars-pager();
|
||||
|
||||
text-align: left;
|
||||
padding: var(--ti-pager-selector-padding-vertical) 0;
|
||||
color: var(--ti-pager-text-color);
|
||||
padding: var(--tv-Pager-padding-y) 0;
|
||||
color: var(--tv-Pager-text-color);
|
||||
|
||||
& &__group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
font-size: var(--ti-pager-font-size);
|
||||
font-size: var(--tv-Pager-font-size);
|
||||
|
||||
& + .@{pager-prefix-cls}__sizes {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
|
|
@ -41,13 +45,11 @@
|
|||
}
|
||||
|
||||
& &__total {
|
||||
height: var(--ti-pager-total-height);
|
||||
line-height: var(--ti-pager-total-line-height);
|
||||
font-size: var(--ti-pager-total-font-size);
|
||||
color: var(--ti-pager-normal-text-color);
|
||||
height: var(--tv-Pager-height);
|
||||
line-height: var(--tv-Pager-height);
|
||||
|
||||
&-num {
|
||||
font-family: var(--ti-pager-number-font-family);
|
||||
font-family: var(--tv-Pager-number-font-family);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,50 +59,49 @@
|
|||
|
||||
& &__pull-left {
|
||||
float: left;
|
||||
height: var(--ti-pager-height);
|
||||
height: var(--tv-Pager-height);
|
||||
}
|
||||
|
||||
& &__pages {
|
||||
display: inline-flex;
|
||||
font-size: var(--ti-pager-font-size);
|
||||
font-family: var(--ti-pager-number-font-family);
|
||||
font-size: var(--tv-Pager-font-size);
|
||||
font-family: var(--tv-Pager-number-font-family);
|
||||
|
||||
li {
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
font-size: var(--ti-pager-font-size);
|
||||
font-size: var(--tv-Pager-font-size);
|
||||
cursor: pointer;
|
||||
margin-right: 4px;
|
||||
text-align: center;
|
||||
line-height: calc(var(--ti-pager-height) - 2px);
|
||||
border-radius: var(--ti-pager-li-border-radius);
|
||||
height: var(--ti-pager-height);
|
||||
width: var(--ti-pager-width);
|
||||
min-width: var(--ti-pager-min-width);
|
||||
color: var(--ti-pager-text-color);
|
||||
padding: var(--ti-pager-poplist-item-padding-vertical) var(--ti-pager-poplist-item-padding-horizontal);
|
||||
line-height: calc(var(--tv-Pager-height) - 2px);
|
||||
border-radius: var(--tv-Pager-page-item-border-radius);
|
||||
height: var(--tv-Pager-height);
|
||||
min-width: var(--tv-Pager-page-item-min-width);
|
||||
color: var(--tv-Pager-text-color-secondary);
|
||||
padding: 0 var(--tv-Pager-page-item-padding-x);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--ti-pager-li-border-color);
|
||||
border: 1px solid var(--tv-Pager-page-item-border-color);
|
||||
transition: all 0.5s ease;
|
||||
|
||||
a {
|
||||
color: var(--ti-pager-text-color);
|
||||
color: var(--tv-Pager-text-color-secondary);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--ti-pager-text-color);
|
||||
fill: var(--tv-Pager-icon-color);
|
||||
color: var(--tv-Pager-icon-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:not(.dot):not(.is-active):hover {
|
||||
color: var(--ti-pager-list-item-hover-text-color);
|
||||
background-color: var(--ti-pager-poplist-item-hover-bg-color);
|
||||
box-shadow: var(--ti-pager-poplist-item-unchecked-box-shadow);
|
||||
border: 1px solid var(--ti-pager-poplist-item-hover-border-color);
|
||||
font-weight: var(--ti-pager-li-item-hover-font-weight);
|
||||
color: var(--tv-Pager-list-item-hover-text-color);
|
||||
background-color: var(--tv-Pager-bg-color-hover);
|
||||
border: 1px solid var(--tv-Pager-page-item-border-color-hover);
|
||||
font-weight: var(--tv-Pager-page-item-font-weight-hover);
|
||||
|
||||
svg {
|
||||
fill: var(--ti-pager-list-item-hover-text-color);
|
||||
fill: var(--tv-Pager-icon-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -108,21 +109,21 @@
|
|||
&.quicknext,
|
||||
&.quickprev {
|
||||
svg {
|
||||
font-size: var(--ti-pager-dot-is-popup-svg-font-size);
|
||||
font-size: var(--tv-Pager-icon-size);
|
||||
}
|
||||
|
||||
&.is-popup {
|
||||
svg {
|
||||
display: var(--ti-pager-dot-is-popup-display);
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
font-weight: var(--ti-pager-active-font-weight);
|
||||
color: var(--ti-pager-active-font-color);
|
||||
background-color: var(--ti-pager-active-bg-color);
|
||||
border: 1px solid var(--ti-pager-poplist-item-hover-border-color);
|
||||
font-weight: bold;
|
||||
color: var(--tv-Pager-text-color);
|
||||
background-color: var(--tv-Pager-page-item-bg-color-active);
|
||||
border: 1px solid var(--tv-Pager-page-item-border-color-hover);
|
||||
}
|
||||
}
|
||||
li:last-child {
|
||||
|
|
@ -143,49 +144,47 @@
|
|||
font-size: 0;
|
||||
|
||||
input[type='text'] {
|
||||
width: var(--ti-pager-input-width);
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
border-radius: var(--ti-pager-input-border-radius);
|
||||
border-radius: var(--tv-Pager-input-border-radius);
|
||||
display: inline-block;
|
||||
position: inherit;
|
||||
height: var(--ti-pager-input-height);
|
||||
line-height: var(--ti-pager-input-height);
|
||||
border: 1px solid var(--ti-pager-input-border-color);
|
||||
color: var(--ti-pager-normal-text-color);
|
||||
font-size: var(--ti-pager-font-size);
|
||||
height: var(--tv-Pager-input-height);
|
||||
line-height: var(--tv-Pager-input-height);
|
||||
border: 1px solid var(--tv-Pager-border-color);
|
||||
color: var(--tv-Pager-text-color);
|
||||
font-size: var(--tv-Pager-font-size);
|
||||
transition: border 0.3s;
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
margin-right: 4px;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--ti-pager-input-hover-border-color);
|
||||
color: var(--ti-pager-normal-text-color);
|
||||
border: 1px solid var(--tv-Pager-border-color-hover);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&[active] {
|
||||
border: 1px solid var(--ti-pager-primary-border-color);
|
||||
border: 1px solid var(--tv-Pager-border-color-active);
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: var(--ti-pager-disabled-text-color);
|
||||
border-color: var(--ti-pager-select-disabled-border-color);
|
||||
background: var(--ti-pager-select-disabled-bg-color);
|
||||
color: var(--tv-Pager-text-color-disabled);
|
||||
border-color: var(--tv-Pager-border-color-disabled);
|
||||
background: var(--tv-Pager-bg-color-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: var(--ti-pager-normal-text-color);
|
||||
font-size: var(--ti-pager-font-size);
|
||||
padding-left: var(--ti-pager-normal-text-padding-left);
|
||||
font-size: var(--tv-Pager-font-size);
|
||||
padding-left: var(--tv-Pager-goto-left-padding-left);
|
||||
margin-right: 8px;
|
||||
line-height: var(--ti-pager-input-height);
|
||||
line-height: var(--tv-Pager-input-height);
|
||||
|
||||
&-sufix {
|
||||
padding-left: 4px;
|
||||
|
|
@ -193,14 +192,13 @@
|
|||
}
|
||||
|
||||
button {
|
||||
height: var(--ti-pager-input-height);
|
||||
line-height: var(--ti-pager-input-height);
|
||||
height: var(--tv-Pager-input-height);
|
||||
line-height: var(--tv-Pager-input-height);
|
||||
border: 1px solid #d9d9d9;
|
||||
color: var(--ti-pager-goto-text-color);
|
||||
vertical-align: middle;
|
||||
border-radius: var(--ti-pager-input-border-radius);
|
||||
border-radius: var(--tv-Pager-input-border-radius);
|
||||
background: #fff;
|
||||
font-size: var(--ti-pager-font-size);
|
||||
font-size: var(--tv-Pager-font-size);
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
|
@ -217,13 +215,13 @@
|
|||
.user-select(none);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--ti-pager-goto-btn-border-hover-color);
|
||||
color: var(--ti-pager-goto-btn-text-hover-color);
|
||||
border: 1px solid var(--tv-Pager-border-color-hover);
|
||||
color: var(--tv-Pager-text-color);
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: var(--ti-pager-disabled-text-color);
|
||||
border-color: var(--ti-pager-disabled-border-color);
|
||||
color: var(--tv-Pager-text-color-disabled);
|
||||
border-color: var(--tv-Pager-page-item-border-color-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
@ -231,45 +229,41 @@
|
|||
|
||||
&__btn-prev,
|
||||
&__btn-next {
|
||||
width: var(--ti-pager-width);
|
||||
height: var(--ti-pager-height);
|
||||
line-height: calc(var(--ti-pager-height) - 2px);
|
||||
height: var(--tv-Pager-height);
|
||||
line-height: calc(var(--tv-Pager-height) - 2px);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--ti-pager-font-size);
|
||||
font-size: var(--tv-Pager-font-size);
|
||||
font-weight: bolder;
|
||||
color: var(--ti-pagination-prev-next-color);
|
||||
outline: none;
|
||||
border: 1px solid var(--ti-pager-li-border-color);
|
||||
border: 1px solid var(--tv-Pager-page-item-border-color);
|
||||
background: transparent;
|
||||
margin-top: 0;
|
||||
margin-right: var(--ti-pager-prev-margin-right);
|
||||
margin-bottom: 0px;
|
||||
margin-left: var(--ti-pager-prev-margin-left);
|
||||
padding-top: 0px;
|
||||
padding-right: var(--ti-pager-prev-padding-right);
|
||||
padding-bottom: 0px;
|
||||
padding-left: var(--ti-pager-prev-padding-left);
|
||||
margin-right: var(--tv-Pager-prev-margin-right);
|
||||
margin-bottom: 0;
|
||||
margin-left: var(--tv-Pager-prev-margin-left);
|
||||
padding: 0;
|
||||
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
color: var(--ti-pager-primary-text-color);
|
||||
color: var(--tv-Pager-custom-prev-next-text-color);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--ti-pager-btn-svg-fill-color);
|
||||
font-size: var(--ti-pager-svg-font-size);
|
||||
fill: var(--tv-Pager-icon-color);
|
||||
font-size: var(--tv-Pager-icon-size);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--ti-pager-prev-next-hover-bg-color);
|
||||
border: 1px solid var(--ti-pager-poplist-item-hover-border-color);
|
||||
background-color: var(--tv-Pager-prev-next-bg-color-hover);
|
||||
border: 1px solid var(--tv-Pager-page-item-border-color-hover);
|
||||
|
||||
svg {
|
||||
fill: var(--ti-pager-poplist-item-hover-text-color);
|
||||
fill: var(--tv-Pager-icon-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -281,32 +275,30 @@
|
|||
}
|
||||
|
||||
span {
|
||||
color: var(--ti-pager-prev-next-text-color-disabled);
|
||||
color: var(--tv-Pager-text-color-disabled);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--ti-pager-prev-next-text-color-disabled);
|
||||
fill: var(--tv-Pager-icon-color-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__btn-next {
|
||||
margin-right: var(--ti-pager-next-margin-right);
|
||||
margin-left: var(--ti-pager-next-margin-left);
|
||||
padding-right: var(--ti-pager-next-padding-right);
|
||||
margin-right: var(--tv-Pager-next-margin-right);
|
||||
margin-left: var(--tv-Pager-next-margin-left);
|
||||
}
|
||||
|
||||
&__selector {
|
||||
.component-css-vars-pager();
|
||||
|
||||
&.@{popover-prefix-cls}.@{popper-prefix-cls} {
|
||||
min-width: var(--ti-pager-sizes-input-min-width);
|
||||
border: 0;
|
||||
padding: 8px 0;
|
||||
border-radius: var(--ti-pager-pop-body-border-radius);
|
||||
border-radius: var(--tv-Pager-input-border-radius);
|
||||
|
||||
&[x-placement^='bottom'] {
|
||||
margin-top: var(--ti-pager-pop-body-margin-top);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&[x-placement^='top'] {
|
||||
|
|
@ -322,9 +314,10 @@
|
|||
|
||||
&-poplist {
|
||||
.list-item {
|
||||
min-height: var(--ti-pager-poplist-item-min-height);
|
||||
color: var(--tv-Pager-text-color);
|
||||
min-height: var(--tv-Pager-sizes-popup-item-height);
|
||||
padding: 0 16px;
|
||||
line-height: var(--ti-pager-poplist-item-min-height);
|
||||
line-height: var(--tv-Pager-sizes-popup-item-height);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -332,30 +325,25 @@
|
|||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: var(--ti-pager-poplist-item-hover-bg-color);
|
||||
color: var(--ti-pager-poplist-item-hover-text-color);
|
||||
background: var(--tv-Pager-sizes-popup-bg-color-hover);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: var(--ti-pager-poplist-item-selected-bg-color);
|
||||
color: var(--ti-pager-normal-text-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--ti-pager-poplist-item-selected-bg-color);
|
||||
background: var(--tv-Pager-page-item-bg-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.select-pre {
|
||||
background: var(--ti-pager-poplist-item-hover-bg-color);
|
||||
color: var(--ti-pager-poplist-item-hover-text-color);
|
||||
background: var(--tv-Pager-sizes-popup-bg-color-hover);
|
||||
|
||||
&.is-selected {
|
||||
color: var(--ti-pager-poplist-item-selected-text-color);
|
||||
color: var(--tv-Pager-sizes-popup-text-color-active);
|
||||
background: transparent;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
background: var(--ti-pager-poplist-item-selected-bg-color);
|
||||
background: var(--tv-Pager-page-item-bg-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -380,27 +368,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
& &__group {
|
||||
& + .@{pager-prefix-cls}__sizes {
|
||||
margin-top: 0;
|
||||
margin-right: var(--ti-pager-group-sizes-margin-right);
|
||||
margin-bottom: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__page-size {
|
||||
min-width: var(--ti-pager-sizes-input-min-width);
|
||||
max-width: 200px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
height: var(--ti-pager-input-height);
|
||||
line-height: calc(var(--ti-pager-input-height) - 2px);
|
||||
border: 1px solid var(--ti-pager-input-border-color);
|
||||
color: var(--ti-pager-normal-text-color);
|
||||
border-radius: var(--ti-pager-input-border-radius);
|
||||
height: var(--tv-Pager-input-height);
|
||||
line-height: calc(var(--tv-Pager-input-height) - 2px);
|
||||
border: 1px solid var(--tv-Pager-border-color);
|
||||
border-radius: var(--tv-Pager-input-border-radius);
|
||||
background: #fff;
|
||||
font-size: var(--ti-pager-font-size);
|
||||
font-size: var(--tv-Pager-font-size);
|
||||
padding: 0;
|
||||
padding-left: 12px;
|
||||
padding-right: 4px;
|
||||
|
|
@ -413,20 +390,19 @@
|
|||
|
||||
&:hover {
|
||||
outline: 0;
|
||||
color: var(--ti-pager-sizes-input-hover-text-color);
|
||||
border-color: var(--ti-pager-input-hover-border-color);
|
||||
border-color: var(--tv-Pager-border-color-hover);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: var(--ti-pager-input-hover-border-color);
|
||||
border-color: var(--tv-Pager-border-color-hover);
|
||||
}
|
||||
|
||||
&-btn {
|
||||
padding: 0 var(--ti-pager-input-btn-padding-horizontal);
|
||||
height: var(--ti-pager-height);
|
||||
line-height: calc(var(--ti-pager-height) - 2px);
|
||||
padding: 0 var(--tv-Pager-sizes-arrow-padding-x);
|
||||
height: var(--tv-Pager-height);
|
||||
line-height: calc(var(--tv-Pager-height) - 2px);
|
||||
position: relative;
|
||||
float: right;
|
||||
top: -1px;
|
||||
|
|
@ -437,15 +413,19 @@
|
|||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
font-size: var(--ti-pager-svg-font-size);
|
||||
fill: var(--ti-pager-total-svg-fill-color);
|
||||
font-size: var(--tv-Pager-icon-size);
|
||||
fill: var(--tv-Pager-icon-color);
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
fill: var(--tv-Pager-icon-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sizes {
|
||||
margin-right: var(--ti-pager-sizes-num-margin-right);
|
||||
font-family: var(--ti-pager-number-font-family);
|
||||
margin-right: var(--tv-Pager-sizes-num-margin-right);
|
||||
font-family: var(--tv-Pager-number-font-family);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -460,27 +440,33 @@
|
|||
|
||||
&&--mini {
|
||||
& .@{pager-prefix-cls}__total {
|
||||
font-size: var(--ti-pager-mini-font-size);
|
||||
font-size: var(--tv-Pager-font-size-xs);
|
||||
}
|
||||
|
||||
.@{pager-prefix-cls}__goto-text {
|
||||
font-size: var(--ti-pager-mini-font-size);
|
||||
line-height: var(--ti-pager-mini-input-height);
|
||||
font-size: var(--tv-Pager-font-size-xs);
|
||||
line-height: var(--tv-Pager-input-height-xs);
|
||||
}
|
||||
|
||||
.@{pager-prefix-cls}__goto {
|
||||
input {
|
||||
height: var(--ti-pager-mini-input-height);
|
||||
line-height: var(--ti-pager-mini-input-height);
|
||||
height: var(--tv-Pager-input-height-xs);
|
||||
line-height: var(--tv-Pager-input-height-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.@{pager-prefix-cls}__page-size,
|
||||
.@{pager-prefix-cls}__page-size-btn {
|
||||
height: var(--tv-Pager-input-height-xs);
|
||||
line-height: calc(var(--tv-Pager-input-height-xs) - 2px);
|
||||
}
|
||||
|
||||
li {
|
||||
min-width: var(--ti-pager-mini-min-width);
|
||||
height: 24px;
|
||||
min-width: var(--tv-Pager-min-width-xs);
|
||||
height: var(--tv-Pager-input-height-xs);
|
||||
padding: 0 4px;
|
||||
line-height: 22px;
|
||||
font-size: var(--ti-pager-mini-font-size);
|
||||
line-height: calc(var(--tv-Pager-input-height-xs) - 2px);
|
||||
font-size: var(--tv-Pager-font-size-xs);
|
||||
}
|
||||
|
||||
.@{pager-prefix-cls}__btn-prev svg,
|
||||
|
|
@ -489,57 +475,56 @@
|
|||
}
|
||||
|
||||
.@{pager-prefix-cls}__input input {
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
height: var(--tv-Pager-input-height-xs);
|
||||
line-height: calc(var(--tv-Pager-input-height-xs) - 2px);
|
||||
}
|
||||
|
||||
.@{pager-prefix-cls}__input-btn {
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
height: var(--tv-Pager-input-height-xs);
|
||||
line-height: calc(var(--tv-Pager-input-height-xs) - 2px);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
.@{pager-prefix-cls}__total {
|
||||
color: var(--ti-pager-disabled-text-color);
|
||||
color: var(--tv-Pager-text-color-disabled);
|
||||
}
|
||||
|
||||
ul li {
|
||||
cursor: not-allowed;
|
||||
color: var(--ti-pager-disabled-text-color);
|
||||
color: var(--tv-Pager-text-color-disabled);
|
||||
background-color: transparent;
|
||||
border-color: var(--ti-pager-disabled-border-color);
|
||||
border-color: var(--tv-Pager-page-item-border-color-disabled);
|
||||
|
||||
&.is-active,
|
||||
&:not(.dot):not(.is-active):hover {
|
||||
color: var(--ti-pager-disabled-text-color);
|
||||
color: var(--tv-Pager-text-color-disabled);
|
||||
font-weight: normal;
|
||||
background-color: transparent;
|
||||
border-color: var(--ti-pager-disabled-border-color);
|
||||
border-color: var(--tv-Pager-page-item-border-color-disabled);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--ti-pager-disabled-text-color);
|
||||
fill: var(--tv-Pager-icon-color-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.@{pager-prefix-cls}__page-size {
|
||||
color: var(--ti-pager-disabled-text-color);
|
||||
color: var(--tv-Pager-text-color-disabled);
|
||||
cursor: not-allowed;
|
||||
border-color: var(--ti-pager-select-disabled-border-color);
|
||||
background: var(--ti-pager-select-disabled-bg-color);
|
||||
border-color: var(--tv-Pager-border-color-disabled);
|
||||
background: var(--tv-Pager-bg-color-disabled);
|
||||
}
|
||||
|
||||
.@{pager-prefix-cls}__page-size-btn {
|
||||
svg {
|
||||
fill: var(--ti-pager-disabled-text-color);
|
||||
color: var(--ti-pager-disabled-text-color);
|
||||
fill: var(--tv-Pager-icon-color-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.@{pager-prefix-cls}__goto-text {
|
||||
color: var(--ti-pager-disabled-text-color);
|
||||
color: var(--tv-Pager-text-color-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -547,7 +532,7 @@
|
|||
.component-css-vars-pager();
|
||||
|
||||
.tiny-option-label {
|
||||
font-family: var(--ti-pager-number-font-family);
|
||||
font-family: var(--tv-Pager-number-font-family);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,44 @@
|
|||
export const tinyPagerOldTheme = {
|
||||
'ti-pager-sizes-num-margin-right': 'var(--ti-common-space-base, 4px)',
|
||||
'ti-pager-mini-min-width': '18px',
|
||||
'ti-pager-selector-padding-vertical': 'var(--ti-common-space-3x, 12px)',
|
||||
'ti-pager-input-btn-padding-horizontal': '6px',
|
||||
'ti-pager-sizes-input-hover-text-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'ti-pager-group-sizes-margin-right': '16px',
|
||||
'ti-pager-prev-next-hover-bg-color': 'var(--ti-common-color-hover-background, #f2f5fc)',
|
||||
'ti-pager-dot-is-popup-svg-font-size': '14px',
|
||||
'ti-pager-svg-font-size': 'var(--ti-pager-font-size)',
|
||||
'ti-pager-total-svg-fill-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'ti-pager-total-line-height': '24px',
|
||||
'ti-pager-total-height': '24px',
|
||||
'ti-pager-total-font-size': '12px',
|
||||
'ti-pager-btn-svg-fill-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'ti-pager-next-margin-left': '6px',
|
||||
'ti-pager-next-margin-right': '6px',
|
||||
'ti-pager-next-padding-right': '4px',
|
||||
'ti-pager-prev-margin-right': '4px',
|
||||
'ti-pager-prev-margin-left': '4px',
|
||||
'ti-pager-prev-padding-right': '6px',
|
||||
'ti-pager-prev-padding-left': '6px',
|
||||
'ti-pager-goto-btn-text-hover-color': 'var(--ti-common-color-text-highlight, #526ecc)',
|
||||
'ti-pager-poplist-item-min-height': '30px',
|
||||
'ti-pager-poplist-item-selected-bg-color': 'var(--ti-common-color-selected-background, #5e7ce0)',
|
||||
'ti-pager-poplist-item-hover-text-color': 'var(--ti-common-color-text-highlight, #526ecc)',
|
||||
'ti-pager-poplist-item-hover-bg-color': 'var(--ti-common-color-hover-background, #f2f5fc)',
|
||||
'ti-pager-li-item-hover-font-weight': 'var(--ti-common-font-weight-normal)',
|
||||
'ti-pager-li-item-hover-text-color': 'var(--ti-common-color-text-highlight, #526ecc)',
|
||||
'ti-pager-li-border-radius': 'var(--ti-common-border-radius-normal, 2px)',
|
||||
'ti-pager-poplist-item-padding-horizontal': 'var(--ti-common-space-6, 6px)',
|
||||
'ti-pager-input-padding-horizontal': '0',
|
||||
'ti-pager-input-width': '40px',
|
||||
'ti-pager-min-width': 'auto',
|
||||
'ti-pager-height': 'var(--ti-common-size-height-mini, 24px)',
|
||||
'ti-pager-normal-text-padding-left': 'calc(var(--ti-common-space-base) * 3 + 2px, 14px)',
|
||||
'ti-pager-mini-font-size': 'var(--ti-common-font-size-base, 12px)',
|
||||
'ti-pager-input-padding-vertical': '10px',
|
||||
'ti-pager-input-height': 'var(--ti-common-size-height-mini, 24px)',
|
||||
'ti-pager-input-border-color': 'var(--ti-common-color-border, #adb0b8)',
|
||||
'ti-pager-active-font-weight': 'var(--ti-common-font-weight-normal)',
|
||||
'ti-pager-active-bg-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'ti-pager-active-font-color': 'var(--ti-common-color-text-white, #fff)',
|
||||
'ti-pager-primary-bg-color': 'var(--ti-common-color-primary-normal, #5e7ce0)'
|
||||
'tv-Pager-sizes-num-margin-right': 'var(--ti-common-space-base, 4px)',
|
||||
'tv-Pager-mini-min-width': '18px',
|
||||
'tv-Pager-selector-padding-y': 'var(--ti-common-space-3x, 12px)',
|
||||
'tv-Pager-input-btn-padding-horizontal': '6px',
|
||||
'tv-Pager-sizes-input-hover-text-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'tv-Pager-prev-next-hover-bg-color': 'var(--ti-common-color-hover-background, #f2f5fc)',
|
||||
'tv-Pager-dot-is-popup-svg-font-size': '14px',
|
||||
'tv-Pager-svg-font-size': 'var(--tv-Pager-font-size)',
|
||||
'tv-Pager-total-svg-fill-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'tv-Pager-total-line-height': '24px',
|
||||
'tv-Pager-total-height': '24px',
|
||||
'tv-Pager-total-font-size': '12px',
|
||||
'tv-Pager-btn-svg-fill-color': 'var(--ti-common-color-info-normal, #252b3a)',
|
||||
'tv-Pager-next-margin-left': '6px',
|
||||
'tv-Pager-next-margin-right': '6px',
|
||||
'tv-Pager-next-padding-right': '4px',
|
||||
'tv-Pager-prev-margin-right': '4px',
|
||||
'tv-Pager-prev-margin-left': '4px',
|
||||
'tv-Pager-prev-padding-right': '6px',
|
||||
'tv-Pager-prev-padding-left': '6px',
|
||||
'tv-Pager-goto-btn-text-hover-color': 'var(--ti-common-color-text-highlight, #526ecc)',
|
||||
'tv-Pager-poplist-item-min-height': '30px',
|
||||
'tv-Pager-poplist-item-selected-bg-color': 'var(--ti-common-color-selected-background, #5e7ce0)',
|
||||
'tv-Pager-poplist-item-hover-text-color': 'var(--ti-common-color-text-highlight, #526ecc)',
|
||||
'tv-Pager-poplist-item-hover-bg-color': 'var(--ti-common-color-hover-background, #f2f5fc)',
|
||||
'tv-Pager-li-item-hover-font-weight': 'var(--ti-common-font-weight-normal)',
|
||||
'tv-Pager-li-item-hover-text-color': 'var(--ti-common-color-text-highlight, #526ecc)',
|
||||
'tv-Pager-li-border-radius': 'var(--ti-common-border-radius-normal, 2px)',
|
||||
'tv-Pager-poplist-item-padding-horizontal': 'var(--ti-common-space-6, 6px)',
|
||||
'tv-Pager-input-padding-horizontal': '0',
|
||||
'tv-Pager-input-width': '40px',
|
||||
'tv-Pager-min-width': 'auto',
|
||||
'tv-Pager-height': 'var(--ti-common-size-height-mini, 24px)',
|
||||
'tv-Pager-normal-text-padding-left': 'calc(var(--ti-common-space-base) * 3 + 2px, 14px)',
|
||||
'tv-Pager-mini-font-size': 'var(--ti-common-font-size-base, 12px)',
|
||||
'tv-Pager-input-padding-y': '10px',
|
||||
'tv-Pager-input-height': 'var(--ti-common-size-height-mini, 24px)',
|
||||
'tv-Pager-input-border-color': 'var(--ti-common-color-border, #adb0b8)',
|
||||
'tv-Pager-active-font-weight': 'var(--ti-common-font-weight-normal)',
|
||||
'tv-Pager-active-bg-color': 'var(--ti-common-color-primary-normal, #5e7ce0)',
|
||||
'tv-Pager-active-font-color': 'var(--ti-common-color-text-white, #fff)',
|
||||
'tv-Pager-primary-bg-color': 'var(--ti-common-color-primary-normal, #5e7ce0)'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,161 +11,98 @@
|
|||
*/
|
||||
|
||||
.component-css-vars-pager() {
|
||||
// 分页默认文本色(不含前往按钮|页码项)
|
||||
--ti-pager-normal-text-color: var(--ti-common-color-info-normal, #252b3a);
|
||||
// 分页页码选中项背景色
|
||||
--ti-pager-primary-bg-color: var(--ti-common-color-bg-white-emphasize);
|
||||
// 分页页码选中项文字色
|
||||
--ti-pager-active-font-color: var(--ti-common-color-text-primary);
|
||||
// 分页页码选中项背景色
|
||||
--ti-pager-active-bg-color: #f5f5f5;
|
||||
// 自定义上下页按钮文本色
|
||||
--ti-pager-primary-text-color: var(--ti-common-color-text-link, #526ecc);
|
||||
// 分页跳转输入框激活颜色
|
||||
--ti-pager-primary-border-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 分页主色调悬浮色
|
||||
--ti-pager-primary-hover-text-color: var(--ti-common-color-primary-hover, #7693f5);
|
||||
// 分页页码选中字重
|
||||
--ti-pager-active-font-weight: var(--ti-common-font-weight-bold);
|
||||
// 分页禁用状态下字体颜色
|
||||
--ti-pager-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 分页禁用状态下边框颜色
|
||||
--ti-pager-disabled-border-color: transparent;
|
||||
// 分页禁用选择框边框颜色
|
||||
--ti-pager-select-disabled-border-color: #dbdbdb;
|
||||
// 分页禁用选择框背景颜色
|
||||
--ti-pager-select-disabled-bg-color: var(--ti-common-color-bg-disabled);
|
||||
|
||||
// 分页输入框和选项框边框色
|
||||
--ti-pager-input-border-color: var(--ti-common-color-line-normal);
|
||||
// 分页输入框和选择框悬浮边框色
|
||||
--ti-pager-input-hover-border-color: var(--ti-common-color-line-hover, #575d6c);
|
||||
// 分页输入框渐变结束点色值
|
||||
--ti-pager-input-stop-color: var(--ti-common-color-line-normal, #adb0b8);
|
||||
// 分页输入框 光源的色
|
||||
--ti-pager-input-lighting-color: var(--ti-common-color-line-active, #5e7ce0);
|
||||
// 分页输入框圆角
|
||||
--ti-pager-input-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 分页选择框|输入框|前往按钮高度
|
||||
--ti-pager-input-height: var(--ti-common-size-height-normal);
|
||||
// mini分页选择框|输入框|前往按钮高度
|
||||
--ti-pager-mini-input-height: var(--ti-common-size-height-mini, 24px);
|
||||
// 分页输入框纵向内边距
|
||||
--ti-pager-input-padding-vertical: var(--ti-common-space-3x);
|
||||
// 分页字号
|
||||
--ti-pager-font-size: var(--ti-common-font-size-base, 12px);
|
||||
// mini分页字号
|
||||
--ti-pager-mini-font-size: var(--ti-common-font-size-0);
|
||||
// 分页文字左边内边距
|
||||
--ti-pager-normal-text-padding-left: var(--ti-common-space-4x);
|
||||
// 分页前往按钮|页码项文本色
|
||||
--ti-pager-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 分页下拉框按钮图标色
|
||||
--ti-pager-normal-icon-color: var(--ti-common-color-icon-normal, #575d6c);
|
||||
// 分页页码项高度
|
||||
--ti-pager-height: var(--ti-common-size-height-normal);
|
||||
// 分页页码项宽度
|
||||
--ti-pager-width: auto;
|
||||
// 分页页码项最小宽度
|
||||
--ti-pager-min-width: var(--ti-common-size-height-normal);
|
||||
// 分页输入框宽度
|
||||
--ti-pager-input-width: 48px;
|
||||
// 分页输入框水平内边距
|
||||
--ti-pager-input-padding-horizontal: var(--it-common-space-2x);
|
||||
// 分页页码项垂直内边距
|
||||
--ti-pager-poplist-item-padding-vertical: var(--ti-common-space-0, 0);
|
||||
// 分页页码项水平内边距
|
||||
--ti-pager-poplist-item-padding-horizontal: var(--ti-common-space-2x);
|
||||
// 分页未选中页码项悬浮阴影
|
||||
--ti-pager-poplist-item-unchecked-box-shadow: none;
|
||||
|
||||
// 分页项圆角
|
||||
--ti-pager-li-border-radius: var(--ti-common-border-radius-6);
|
||||
// 分页项边框颜色
|
||||
--ti-pager-li-border-color: var(--ti-common-color-transparent, transparent);
|
||||
// 分页项悬浮颜色
|
||||
--ti-pager-li-item-hover-text-color: var(--ti-pager-text-color);
|
||||
// 分页项悬浮字重
|
||||
--ti-pager-li-item-hover-font-weight: var(--ti-common-font-weight-6);
|
||||
|
||||
// 分页项默认悬浮背景色
|
||||
--ti-pager-poplist-item-hover-bg-color: #f5f5f5;
|
||||
// 分页下拉框项|列表项悬浮文本色
|
||||
--ti-pager-poplist-item-hover-text-color: var(--ti-common-color-text-primary);
|
||||
// 分页下拉框选中项默认背景色
|
||||
--ti-pager-poplist-item-selected-bg-color: #f5f5f5;
|
||||
// 分页下拉框项选中字体颜色
|
||||
--ti-pager-poplist-item-selected-text-color: var(--ti-common-color-text-highlight);
|
||||
// 分页页码项默认悬浮边框色
|
||||
--ti-pager-poplist-item-hover-border-color: var(--ti-common-color-transparent, transparent);
|
||||
// 分页下拉框圆角
|
||||
--ti-pager-pop-body-border-radius: var(--ti-common-border-radius-normal, 2px);
|
||||
// 分页下拉框顶部外边距
|
||||
--ti-pager-pop-body-margin-top: var(--ti-common-space-base);
|
||||
// 分页下拉项最小高度
|
||||
--ti-pager-poplist-item-min-height: 32px;
|
||||
|
||||
// 分页下一页文字禁用色
|
||||
--ti-pager-prev-next-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
|
||||
// 分页跳转输入框文字颜色
|
||||
--ti-pager-goto-text-color: var(--ti-common-color-text-secondary, #575d6c);
|
||||
// 分页跳转输入框边框悬浮颜色
|
||||
--ti-pager-goto-btn-border-hover-color: var(--ti-common-color-border-hover, #575d6c);
|
||||
// 分页跳转输入框文字颜色
|
||||
--ti-pager-goto-btn-text-hover-color: var(--ti-common-color-selected-text-color);
|
||||
// 分页上一页左侧内边距
|
||||
--ti-pager-prev-padding-left: var(--ti-common-space-0);
|
||||
// 分页上一页右侧内边距
|
||||
--ti-pager-prev-padding-right: var(--ti-common-space-0);
|
||||
// 分页上一页左侧外边距
|
||||
--ti-pager-prev-margin-left: var(--ti-common-space-4x);
|
||||
// 分页上一页右侧外边距
|
||||
--ti-pager-prev-margin-right: var(--ti-common-space-2x);
|
||||
// 分页下一页右侧内边距
|
||||
--ti-pager-next-padding-right: var(--ti-common-space-0);
|
||||
// 分页下一页右侧外边距
|
||||
--ti-pager-next-margin-right: var(--ti-common-space-0);
|
||||
// 分页下一页左侧外边距
|
||||
--ti-pager-next-margin-left: var(--ti-common-space-2x);
|
||||
// 分页上一页和下一页图标填充
|
||||
--ti-pager-btn-svg-fill-color: var(--ti-common-color-icon-normal);
|
||||
|
||||
// 分页总条数字体大小
|
||||
--ti-pager-total-font-size: var(--ti-common-font-size-base);
|
||||
// 分页总条数高度
|
||||
--ti-pager-total-height: var(--ti-common-line-height-2);
|
||||
// 分页总条数行高
|
||||
--ti-pager-total-line-height: var(--ti-common-line-height-2);
|
||||
// 分页总条数图标填充色
|
||||
--ti-pager-total-svg-fill-color: var(--ti-common-color-icon-normal);
|
||||
// 分页图标大小
|
||||
--ti-pager-svg-font-size: var(--ti-common-font-size-2);
|
||||
|
||||
// 分页页码折叠时svg显示
|
||||
--ti-pager-dot-is-popup-display: inline;
|
||||
// 分页页码折叠时svg大小
|
||||
--ti-pager-dot-is-popup-svg-font-size: var(--ti-common-font-size-2);
|
||||
|
||||
// 分页前进和后退按钮悬浮背景色
|
||||
--ti-pager-prev-next-hover-bg-color: transparent;
|
||||
// 分页页码项右侧外边距
|
||||
--ti-pager-group-sizes-margin-right: var(--ti-common-space-0);
|
||||
// 分页页码选项框宽度
|
||||
--ti-pager-sizes-input-min-width: var(--ti-common-size-10x, 80px);
|
||||
// 分页选择框悬浮文本色
|
||||
--ti-pager-sizes-input-hover-text-color: #595959;
|
||||
// 分页选择框右侧下拉按钮水平内边距
|
||||
--ti-pager-input-btn-padding-horizontal: var(--ti-common-size-2x);
|
||||
|
||||
// 分页下拉弹出框纵向内边距
|
||||
--ti-pager-selector-padding-vertical: var(--ti-common-space-2x);
|
||||
|
||||
// 小尺寸分页最小宽度
|
||||
--ti-pager-mini-min-width: var(--ti-common-size-width-mini);
|
||||
// 分页大小数字右侧外边距
|
||||
--ti-pager-sizes-num-margin-right: var(--ti-common-dropdown-gap);
|
||||
// 页码悬浮文本色
|
||||
--ti-pager-list-item-hover-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 分页数字字体
|
||||
--ti-pager-number-font-family: arial, helvetica, sans-serif;
|
||||
--tv-Pager-number-font-family: arial, helvetica, sans-serif;
|
||||
// 分页字号
|
||||
--tv-Pager-font-size: var(--tv-font-size-md);
|
||||
// 分页文本色
|
||||
--tv-Pager-text-color: var(--tv-color-text);
|
||||
// 分页禁用文本色
|
||||
--tv-Pager-text-color-disabled: var(--tv-color-text-disabled);
|
||||
// 分页二级文本颜色，页码项文本色
|
||||
--tv-Pager-text-color-secondary: var(--tv-color-text-secondary);
|
||||
// 页码悬浮文本色
|
||||
--tv-Pager-list-item-hover-text-color: var(--tv-color-text);
|
||||
// 分页图标大小
|
||||
--tv-Pager-icon-size: 16px;
|
||||
// 分页图标颜色
|
||||
--tv-Pager-icon-color: var(--tv-color-icon);
|
||||
// 分页图标悬浮颜色
|
||||
--tv-Pager-icon-color-hover: var(--tv-color-icon-hover);
|
||||
// 分页图标禁用颜色
|
||||
--tv-Pager-icon-color-disabled: var(--tv-color-icon-disabled);
|
||||
// 分页边框颜色
|
||||
--tv-Pager-border-color: var(--tv-color-border);
|
||||
// 分页边框悬浮颜色
|
||||
--tv-Pager-border-color-hover: var(--tv-color-border-hover);
|
||||
// 分页边框激活颜色
|
||||
--tv-Pager-border-color-active: var(--tv-color-border-active);
|
||||
// 分页边框禁用颜色
|
||||
--tv-Pager-border-color-disabled: var(--tv-color-border-disabled);
|
||||
// 分页悬浮背景颜色
|
||||
--tv-Pager-bg-color-hover: var(--tv-color-bg-hover);
|
||||
// 分页禁用背景颜色
|
||||
--tv-Pager-bg-color-disabled: var(--tv-color-bg-disabled);
|
||||
// 分页高度
|
||||
--tv-Pager-height: var(--tv-size-height-md);
|
||||
// 分页纵向内边距
|
||||
--tv-Pager-padding-y: var(--tv-space-md);
|
||||
// -------mini分页相关样式-------
|
||||
// mini分页字号
|
||||
--tv-Pager-font-size-xs: var(--tv-font-size-sm);
|
||||
// mini分页选择框|输入框|前往按钮高度
|
||||
--tv-Pager-input-height-xs: var(--tv-size-height-xs);
|
||||
// 小尺寸分页页码项最小宽度
|
||||
--tv-Pager-min-width-xs: 24px;
|
||||
// -------分页页码相关样式-------
|
||||
// 分页页码选中时背景色
|
||||
--tv-Pager-page-item-bg-color-active: var(--tv-color-bg);
|
||||
// 分页页码悬浮时背景色
|
||||
--tv-Pager-page-item-bg-color-hover: var(--tv-color-bg);
|
||||
// 分页页码边框颜色
|
||||
--tv-Pager-page-item-border-color: transparent;
|
||||
// 分页页码禁用状态下边框颜色
|
||||
--tv-Pager-page-item-border-color-disabled: transparent;
|
||||
// 分页页码项默认悬浮边框色
|
||||
--tv-Pager-page-item-border-color-hover: transparent;
|
||||
// 分页页码项项圆角
|
||||
--tv-Pager-page-item-border-radius: var(--tv-border-radius-round);
|
||||
// 分页页码悬浮字重
|
||||
--tv-Pager-page-item-font-weight-hover: var(--tv-font-weight-medium);
|
||||
// 分页页码项最小宽度
|
||||
--tv-Pager-page-item-min-width: 32px;
|
||||
// 分页页码项水平内边距
|
||||
--tv-Pager-page-item-padding-x: var(--tv-space-md);
|
||||
// -------上一页、下一页相关样式-------
|
||||
// 分页前进和后退按钮悬浮背景色
|
||||
--tv-Pager-prev-next-bg-color-hover: transparent;
|
||||
// 自定义上下页按钮文本色
|
||||
--tv-Pager-custom-prev-next-text-color: var(--tv-color-text-link);
|
||||
// 分页上一页左侧外边距
|
||||
--tv-Pager-prev-margin-left: var(--tv-space-xl);
|
||||
// 分页上一页右侧外边距
|
||||
--tv-Pager-prev-margin-right: var(--tv-space-md);
|
||||
// 分页下一页右侧外边距
|
||||
--tv-Pager-next-margin-right: 0;
|
||||
// 分页下一页左侧外边距
|
||||
--tv-Pager-next-margin-left: var(--tv-space-md);
|
||||
// -------分页输入框相关样式-------
|
||||
// 分页输入框圆角
|
||||
--tv-Pager-input-border-radius: var(--tv-border-radius-md);
|
||||
// 分页选择框|输入框|前往按钮高度
|
||||
--tv-Pager-input-height: var(--tv-size-height-md);
|
||||
// -------跳至相关样式------
|
||||
// 跳至左侧文字左侧内边距
|
||||
--tv-Pager-goto-left-padding-left: var(--tv-space-xl);
|
||||
// -------分页大小下拉面板相关样式
|
||||
// 分页大小下拉图标水平内边距
|
||||
--tv-Pager-sizes-arrow-padding-x: var(--tv-space-md);
|
||||
// 分页大小数字右侧外边距
|
||||
--tv-Pager-sizes-num-margin-right: var(--tv-space-sm);
|
||||
// 分页大小选项悬浮背景色
|
||||
--tv-Pager-sizes-popup-bg-color-hover: var(--tv-color-bg-hover);
|
||||
// 分页大小下拉框选项选中字体颜色
|
||||
--tv-Pager-sizes-popup-text-color-active: var(--tv-color-text-active);
|
||||
// 分页下拉项最小高度
|
||||
--tv-Pager-sizes-popup-item-height: 32px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue