pagination.sass 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. $pagination-color: $grey-darker !default
  2. $pagination-border-color: $grey-lighter !default
  3. $pagination-margin: -0.25rem !default
  4. $pagination-min-width: $control-height !default
  5. $pagination-item-font-size: 1em !default
  6. $pagination-item-margin: 0.25rem !default
  7. $pagination-item-padding-left: 0.5em !default
  8. $pagination-item-padding-right: 0.5em !default
  9. $pagination-hover-color: $link-hover !default
  10. $pagination-hover-border-color: $link-hover-border !default
  11. $pagination-focus-color: $link-focus !default
  12. $pagination-focus-border-color: $link-focus-border !default
  13. $pagination-active-color: $link-active !default
  14. $pagination-active-border-color: $link-active-border !default
  15. $pagination-disabled-color: $grey !default
  16. $pagination-disabled-background-color: $grey-lighter !default
  17. $pagination-disabled-border-color: $grey-lighter !default
  18. $pagination-current-color: $link-invert !default
  19. $pagination-current-background-color: $link !default
  20. $pagination-current-border-color: $link !default
  21. $pagination-ellipsis-color: $grey-light !default
  22. $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
  23. .pagination
  24. font-size: $size-normal
  25. margin: $pagination-margin
  26. // Sizes
  27. &.is-small
  28. font-size: $size-small
  29. &.is-medium
  30. font-size: $size-medium
  31. &.is-large
  32. font-size: $size-large
  33. &.is-rounded
  34. .pagination-previous,
  35. .pagination-next
  36. padding-left: 1em
  37. padding-right: 1em
  38. border-radius: $radius-rounded
  39. .pagination-link
  40. border-radius: $radius-rounded
  41. .pagination,
  42. .pagination-list
  43. align-items: center
  44. display: flex
  45. justify-content: center
  46. text-align: center
  47. .pagination-previous,
  48. .pagination-next,
  49. .pagination-link,
  50. .pagination-ellipsis
  51. @extend %control
  52. @extend %unselectable
  53. font-size: $pagination-item-font-size
  54. justify-content: center
  55. margin: $pagination-item-margin
  56. padding-left: $pagination-item-padding-left
  57. padding-right: $pagination-item-padding-right
  58. text-align: center
  59. .pagination-previous,
  60. .pagination-next,
  61. .pagination-link
  62. border-color: $pagination-border-color
  63. color: $pagination-color
  64. min-width: $pagination-min-width
  65. &:hover
  66. border-color: $pagination-hover-border-color
  67. color: $pagination-hover-color
  68. &:focus
  69. border-color: $pagination-focus-border-color
  70. &:active
  71. box-shadow: $pagination-shadow-inset
  72. &[disabled]
  73. background-color: $pagination-disabled-background-color
  74. border-color: $pagination-disabled-border-color
  75. box-shadow: none
  76. color: $pagination-disabled-color
  77. opacity: 0.5
  78. .pagination-previous,
  79. .pagination-next
  80. padding-left: 0.75em
  81. padding-right: 0.75em
  82. white-space: nowrap
  83. .pagination-link
  84. &.is-current
  85. background-color: $pagination-current-background-color
  86. border-color: $pagination-current-border-color
  87. color: $pagination-current-color
  88. .pagination-ellipsis
  89. color: $pagination-ellipsis-color
  90. pointer-events: none
  91. .pagination-list
  92. flex-wrap: wrap
  93. +mobile
  94. .pagination
  95. flex-wrap: wrap
  96. .pagination-previous,
  97. .pagination-next
  98. flex-grow: 1
  99. flex-shrink: 1
  100. .pagination-list
  101. li
  102. flex-grow: 1
  103. flex-shrink: 1
  104. +tablet
  105. .pagination-list
  106. flex-grow: 1
  107. flex-shrink: 1
  108. justify-content: flex-start
  109. order: 1
  110. .pagination-previous
  111. order: 2
  112. .pagination-next
  113. order: 3
  114. .pagination
  115. justify-content: space-between
  116. &.is-centered
  117. .pagination-previous
  118. order: 1
  119. .pagination-list
  120. justify-content: center
  121. order: 2
  122. .pagination-next
  123. order: 3
  124. &.is-right
  125. .pagination-previous
  126. order: 1
  127. .pagination-next
  128. order: 2
  129. .pagination-list
  130. justify-content: flex-end
  131. order: 3