pagination.less 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  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 > .active > a,
  34. .pagination ul > .active > span {
  35. background-color: @paginationActiveBackground;
  36. }
  37. .pagination ul > .active > a,
  38. .pagination ul > .active > span {
  39. color: @grayLight;
  40. cursor: default;
  41. }
  42. .pagination ul > .disabled > span,
  43. .pagination ul > .disabled > a,
  44. .pagination ul > .disabled > a:hover {
  45. color: @grayLight;
  46. background-color: transparent;
  47. cursor: default;
  48. }
  49. .pagination ul > li:first-child > a,
  50. .pagination ul > li:first-child > span {
  51. border-left-width: 1px;
  52. .border-left-radius(@baseBorderRadius);
  53. }
  54. .pagination ul > li:last-child > a,
  55. .pagination ul > li:last-child > span {
  56. .border-right-radius(@baseBorderRadius);
  57. }
  58. // Alignment
  59. // --------------------------------------------------
  60. .pagination-centered {
  61. text-align: center;
  62. }
  63. .pagination-right {
  64. text-align: right;
  65. }
  66. // Sizing
  67. // --------------------------------------------------
  68. // Large
  69. .pagination-large {
  70. ul > li > a,
  71. ul > li > span {
  72. padding: @paddingLarge;
  73. font-size: @fontSizeLarge;
  74. }
  75. ul > li:first-child > a,
  76. ul > li:first-child > span {
  77. .border-left-radius(@borderRadiusLarge);
  78. }
  79. ul > li:last-child > a,
  80. ul > li:last-child > span {
  81. .border-right-radius(@borderRadiusLarge);
  82. }
  83. }
  84. // Small and mini
  85. .pagination-mini,
  86. .pagination-small {
  87. ul > li:first-child > a,
  88. ul > li:first-child > span {
  89. .border-left-radius(@borderRadiusSmall);
  90. }
  91. ul > li:last-child > a,
  92. ul > li:last-child > span {
  93. .border-right-radius(@borderRadiusSmall);
  94. }
  95. }
  96. // Small
  97. .pagination-small {
  98. ul > li > a,
  99. ul > li > span {
  100. padding: @paddingSmall;
  101. font-size: @fontSizeSmall;
  102. }
  103. }
  104. // Mini
  105. .pagination-mini {
  106. ul > li > a,
  107. ul > li > span {
  108. padding: @paddingMini;
  109. font-size: @fontSizeMini;
  110. }
  111. }