12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- @import './var.less';
- :root {
- --van-pagination-height: @pagination-height;
- --van-pagination-font-size: @pagination-font-size;
- --van-pagination-item-width: @pagination-item-width;
- --van-pagination-item-default-color: @pagination-item-default-color;
- --van-pagination-item-disabled-color: @pagination-item-disabled-color;
- --van-pagination-item-disabled-background-color: @pagination-item-disabled-background-color;
- --van-pagination-background-color: @pagination-background-color;
- --van-pagination-desc-color: @pagination-desc-color;
- --van-pagination-disabled-opacity: @pagination-disabled-opacity;
- }
- .van-pagination {
- font-size: var(--van-pagination-font-size);
- &__items {
- display: flex;
- }
- &__item,
- &__page-desc {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- &__item {
- flex: 1;
- box-sizing: border-box;
- min-width: var(--van-pagination-item-width);
- height: var(--van-pagination-height);
- color: var(--van-pagination-item-default-color);
- background: var(--van-pagination-background-color);
- cursor: pointer;
- user-select: none;
- button {
- flex: 1;
- height: 100%;
- border: none;
- padding: 0;
- background: transparent;
- &[disabled] {
- cursor: not-allowed;
- }
- }
- &:active {
- color: var(--van-white);
- background-color: var(--van-pagination-item-default-color);
- }
- &:not(:last-child)::after {
- border-right-width: 0;
- }
- &--active {
- color: var(--van-white);
- background-color: var(--van-pagination-item-default-color);
- }
- &--page {
- flex-grow: 0;
- }
- &--prev,
- &--next {
- padding: 0 var(--van-padding-base);
- cursor: pointer;
- }
- &--border::after {
- border-width: var(--van-border-width-base);
- }
- &--disabled {
- color: var(--van-pagination-item-disabled-color);
- background-color: var(--van-pagination-item-disabled-background-color);
- opacity: var(--van-pagination-disabled-opacity);
- }
- }
- &__page-desc {
- flex: 1;
- height: var(--van-pagination-height);
- color: var(--van-pagination-desc-color);
- }
- }
|