index.less 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. @import './var.less';
  2. :root {
  3. --van-pagination-height: @pagination-height;
  4. --van-pagination-font-size: @pagination-font-size;
  5. --van-pagination-item-width: @pagination-item-width;
  6. --van-pagination-item-default-color: @pagination-item-default-color;
  7. --van-pagination-item-disabled-color: @pagination-item-disabled-color;
  8. --van-pagination-item-disabled-background-color: @pagination-item-disabled-background-color;
  9. --van-pagination-background-color: @pagination-background-color;
  10. --van-pagination-desc-color: @pagination-desc-color;
  11. --van-pagination-disabled-opacity: @pagination-disabled-opacity;
  12. }
  13. .van-pagination {
  14. font-size: var(--van-pagination-font-size);
  15. &__items {
  16. display: flex;
  17. }
  18. &__item,
  19. &__page-desc {
  20. display: flex;
  21. align-items: center;
  22. justify-content: center;
  23. }
  24. &__item {
  25. flex: 1;
  26. box-sizing: border-box;
  27. min-width: var(--van-pagination-item-width);
  28. height: var(--van-pagination-height);
  29. color: var(--van-pagination-item-default-color);
  30. background: var(--van-pagination-background-color);
  31. cursor: pointer;
  32. user-select: none;
  33. button {
  34. flex: 1;
  35. height: 100%;
  36. border: none;
  37. padding: 0;
  38. background: transparent;
  39. &[disabled] {
  40. cursor: not-allowed;
  41. }
  42. }
  43. &:active {
  44. color: var(--van-white);
  45. background-color: var(--van-pagination-item-default-color);
  46. }
  47. &:not(:last-child)::after {
  48. border-right-width: 0;
  49. }
  50. &--active {
  51. color: var(--van-white);
  52. background-color: var(--van-pagination-item-default-color);
  53. }
  54. &--page {
  55. flex-grow: 0;
  56. }
  57. &--prev,
  58. &--next {
  59. padding: 0 var(--van-padding-base);
  60. cursor: pointer;
  61. }
  62. &--border::after {
  63. border-width: var(--van-border-width-base);
  64. }
  65. &--disabled {
  66. color: var(--van-pagination-item-disabled-color);
  67. background-color: var(--van-pagination-item-disabled-background-color);
  68. opacity: var(--van-pagination-disabled-opacity);
  69. }
  70. }
  71. &__page-desc {
  72. flex: 1;
  73. height: var(--van-pagination-height);
  74. color: var(--van-pagination-desc-color);
  75. }
  76. }