pagination.less 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. //
  2. // Pagination (multiple pages)
  3. // --------------------------------------------------
  4. .pagination {
  5. display: inline-block;
  6. padding-left: 0;
  7. margin: @line-height-computed 0;
  8. border-radius: @border-radius-base;
  9. > li {
  10. display: inline; // Remove list-style and block-level defaults
  11. > a,
  12. > button,
  13. > span {
  14. position: relative;
  15. float: left; // Collapse white-space
  16. padding: @padding-base-vertical @padding-base-horizontal;
  17. line-height: @line-height-base;
  18. text-decoration: none;
  19. color: @pagination-color;
  20. background-color: @pagination-bg;
  21. border: 1px solid @pagination-border;
  22. margin-left: -1px;
  23. }
  24. &:first-child {
  25. > a,
  26. > button,
  27. > span {
  28. margin-left: 0;
  29. .border-left-radius(@border-radius-base);
  30. }
  31. }
  32. &:last-child {
  33. > a,
  34. > button,
  35. > span {
  36. .border-right-radius(@border-radius-base);
  37. }
  38. }
  39. }
  40. > li > a,
  41. > li > button,
  42. > li > span {
  43. &:hover,
  44. &:focus {
  45. color: @pagination-hover-color;
  46. background-color: @pagination-hover-bg;
  47. border-color: @pagination-hover-border;
  48. }
  49. }
  50. > .active > a,
  51. > .active > button,
  52. > .active > span {
  53. &,
  54. &:hover,
  55. &:focus {
  56. z-index: 2;
  57. color: @pagination-active-color;
  58. background-color: @pagination-active-bg;
  59. border-color: @pagination-active-border;
  60. cursor: default;
  61. }
  62. }
  63. > .disabled {
  64. > span,
  65. > span:hover,
  66. > span:focus,
  67. > a,
  68. > a:hover,
  69. > a:focus,
  70. > button,
  71. > button:hover,
  72. > button:focus {
  73. color: @pagination-disabled-color;
  74. background-color: @pagination-disabled-bg;
  75. border-color: @pagination-disabled-border;
  76. cursor: not-allowed;
  77. }
  78. }
  79. .ellipses {
  80. pointer-events: none;
  81. }
  82. }
  83. // Sizing
  84. // --------------------------------------------------
  85. // Large
  86. .pagination-lg {
  87. .pagination-size(
  88. @padding-large-vertical; @padding-large-horizontal; @font-size-large;
  89. @border-radius-large
  90. );
  91. }
  92. // Small
  93. .pagination-sm {
  94. .pagination-size(
  95. @padding-small-vertical; @padding-small-horizontal; @font-size-small;
  96. @border-radius-small
  97. );
  98. }