pagination.less 2.6 KB

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