_pagination.scss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. // Foundation by ZURB
  2. // foundation.zurb.com
  3. // Licensed under MIT Open Source
  4. @import "global";
  5. //
  6. // @variables
  7. //
  8. $include-pagination-classes: $include-html-classes !default;
  9. // We use these to control the pagination container
  10. $pagination-height: rem-calc(24) !default;
  11. $pagination-margin: rem-calc(-5) !default;
  12. // We use these to set the list-item properties
  13. $pagination-li-float: $default-float !default;
  14. $pagination-li-height: rem-calc(24) !default;
  15. $pagination-li-font-color: $jet !default;
  16. $pagination-li-font-size: rem-calc(14) !default;
  17. $pagination-li-margin: rem-calc(5) !default;
  18. // We use these for the pagination anchor links
  19. $pagination-link-pad: rem-calc(1 10 1) !default;
  20. $pagination-link-font-color: $aluminum !default;
  21. $pagination-link-active-bg: scale-color($white, $lightness: -10%) !default;
  22. // We use these for disabled anchor links
  23. $pagination-link-unavailable-cursor: default !default;
  24. $pagination-link-unavailable-font-color: $aluminum !default;
  25. $pagination-link-unavailable-bg-active: transparent !default;
  26. // We use these for currently selected anchor links
  27. $pagination-link-current-background: $primary-color !default;
  28. $pagination-link-current-font-color: $white !default;
  29. $pagination-link-current-font-weight: $font-weight-bold !default;
  30. $pagination-link-current-cursor: default !default;
  31. $pagination-link-current-active-bg: $primary-color !default;
  32. // @mixins
  33. //
  34. // Style the pagination container. Currently only used when centering elements.
  35. // $center - Default: false, Options: true
  36. @mixin pagination-container($center:false) {
  37. @if $center { text-align: center; }
  38. }
  39. // @mixins
  40. // Style unavailable list items
  41. @mixin pagination-unavailable-item {
  42. a, button {
  43. cursor: $pagination-link-unavailable-cursor;
  44. color: $pagination-link-unavailable-font-color;
  45. }
  46. &:hover a,
  47. & a:focus,
  48. &:hover button,
  49. & button:focus
  50. { background: $pagination-link-unavailable-bg-active; }
  51. }
  52. // @mixins
  53. // Style the current list item. Do not assume that the current item has
  54. // an anchor <a> element.
  55. // $has-anchor - Default: true, Options: false
  56. @mixin pagination-current-item($has-anchor: true) {
  57. @if $has-anchor {
  58. a, button {
  59. background: $pagination-link-current-background;
  60. color: $pagination-link-current-font-color;
  61. font-weight: $pagination-link-current-font-weight;
  62. cursor: $pagination-link-current-cursor;
  63. &:hover,
  64. &:focus { background: $pagination-link-current-active-bg; }
  65. }
  66. } @else {
  67. height: auto;
  68. padding: $pagination-link-pad;
  69. background: $pagination-link-current-background;
  70. color: $pagination-link-current-font-color;
  71. font-weight: $pagination-link-current-font-weight;
  72. cursor: $pagination-link-current-cursor;
  73. @include radius;
  74. &:hover,
  75. &:focus { background: $pagination-link-current-active-bg; }
  76. }
  77. }
  78. // @mixins
  79. //
  80. // We use this mixin to set the properties for the creating Foundation pagination
  81. // $center - Left or center align the li elements. Default: false
  82. // $base-style - Sets base styles for pagination. Default: true, Options: false
  83. // $use-default-classes - Makes unavailable & current classes available for use. Default: true
  84. @mixin pagination($center:false, $base-style:true, $use-default-classes:true) {
  85. @if $base-style {
  86. display: block;
  87. min-height: $pagination-height;
  88. margin-#{$default-float}: $pagination-margin;
  89. li {
  90. height: $pagination-li-height;
  91. color: $pagination-li-font-color;
  92. font-size: $pagination-li-font-size;
  93. margin-#{$default-float}: $pagination-li-margin;
  94. a, button {
  95. display: block;
  96. padding: $pagination-link-pad;
  97. color: $pagination-link-font-color;
  98. background: none;
  99. @include radius;
  100. font-weight: normal;
  101. font-size: 1em;
  102. line-height: inherit;
  103. @include single-transition(background-color);
  104. }
  105. &:hover a,
  106. a:focus,
  107. &:hover button,
  108. button:focus
  109. { background: $pagination-link-active-bg; }
  110. @if $use-default-classes {
  111. &.unavailable { @include pagination-unavailable-item(); }
  112. &.current { @include pagination-current-item(); }
  113. }
  114. }
  115. }
  116. // Left or center align the li elements
  117. li {
  118. @if $center {
  119. float: none;
  120. display: inline-block;
  121. } @else {
  122. float: $pagination-li-float;
  123. display: block;
  124. }
  125. }
  126. }
  127. @include exports("pagination") {
  128. @if $include-pagination-classes {
  129. ul.pagination {
  130. @include pagination;
  131. }
  132. /* Pagination centred wrapper */
  133. .pagination-centered {
  134. @include pagination-container(true);
  135. ul.pagination {
  136. @include pagination(true, false);
  137. }
  138. }
  139. }
  140. }