pagination.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. .pagination {
  2. }
  3. .pagination ul {
  4. display: inline-block;
  5. margin-left: 0;
  6. margin-bottom: 0;
  7. .border-radius(@baseBorderRadius);
  8. .box-shadow(0 1px 2px rgba(0,0,0,.05));
  9. }
  10. .pagination ul > li {
  11. display: inline; // Remove list-style and block-level defaults
  12. }
  13. .pagination ul > li > a,
  14. .pagination ul > li > span {
  15. float: left; // Collapse white-space
  16. padding: 4px 12px;
  17. line-height: @baseLineHeight;
  18. text-decoration: none;
  19. background-color: @paginationBackground;
  20. border: 1px solid @paginationBorder;
  21. border-left-width: 0;
  22. }
  23. .pagination ul > li > a:hover,
  24. .pagination ul > li > a:focus,
  25. .pagination ul > .active > a,
  26. .pagination ul > .active > span {
  27. background-color: @paginationActiveBackground;
  28. }
  29. .pagination ul > .active > a,
  30. .pagination ul > .active > span {
  31. color: @grayLight;
  32. cursor: default;
  33. }
  34. .pagination ul > .disabled > span,
  35. .pagination ul > .disabled > a,
  36. .pagination ul > .disabled > a:hover,
  37. .pagination ul > .disabled > a:focus {
  38. color: @grayLight;
  39. background-color: transparent;
  40. cursor: default;
  41. }
  42. .pagination ul > li:first-child > a,
  43. .pagination ul > li:first-child > span {
  44. border-left-width: 1px;
  45. .border-left-radius(@baseBorderRadius);
  46. }
  47. .pagination ul > li:last-child > a,
  48. .pagination ul > li:last-child > span {
  49. .border-right-radius(@baseBorderRadius);
  50. }
  51. // Alignment
  52. // --------------------------------------------------
  53. .pagination-centered {
  54. text-align: center;
  55. }
  56. .pagination-right {
  57. text-align: right;
  58. }
  59. // Sizing
  60. // --------------------------------------------------
  61. // Large
  62. .pagination-large {
  63. ul > li > a,
  64. ul > li > span {
  65. padding: @paddingLarge;
  66. font-size: @fontSizeLarge;
  67. }
  68. ul > li:first-child > a,
  69. ul > li:first-child > span {
  70. .border-left-radius(@borderRadiusLarge);
  71. }
  72. ul > li:last-child > a,
  73. ul > li:last-child > span {
  74. .border-right-radius(@borderRadiusLarge);
  75. }
  76. }
  77. // Small and mini
  78. .pagination-mini,
  79. .pagination-small {
  80. ul > li:first-child > a,
  81. ul > li:first-child > span {
  82. .border-left-radius(@borderRadiusSmall);
  83. }
  84. ul > li:last-child > a,
  85. ul > li:last-child > span {
  86. .border-right-radius(@borderRadiusSmall);
  87. }
  88. }
  89. // Small
  90. .pagination-small {
  91. ul > li > a,
  92. ul > li > span {
  93. padding: @paddingSmall;
  94. font-size: @fontSizeSmall;
  95. }
  96. }
  97. // Mini
  98. .pagination-mini {
  99. ul > li > a,
  100. ul > li > span {
  101. padding: @paddingMini;
  102. font-size: @fontSizeMini;
  103. }
  104. }