pagination.styl 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. $page-number-basic {
  2. display: inline-block;
  3. margin: 0 10px;
  4. padding: 0 11px;
  5. position: relative;
  6. top: -1px;
  7. +mobile() {
  8. margin: 0 5px;
  9. }
  10. }
  11. .pagination {
  12. border-top: 1px solid $pagination-border;
  13. margin: 120px 0 0;
  14. text-align: center;
  15. .prev, .next, .page-number {
  16. @extend $page-number-basic;
  17. border-bottom: 0;
  18. border-top: 1px solid $pagination-link-border;
  19. transition-property: border-color;
  20. the-transition();
  21. &:hover {
  22. border-top-color: $pagination-link-hover-border;
  23. }
  24. }
  25. .space {
  26. @extend $page-number-basic;
  27. margin: 0;
  28. padding: 0;
  29. }
  30. .prev {
  31. margin-left: 0;
  32. }
  33. .next {
  34. margin-right: 0;
  35. }
  36. .page-number.current {
  37. background: $pagination-active-bg;
  38. border-top-color: $pagination-active-border;
  39. color: $pagination-active-color;
  40. }
  41. }
  42. +mobile() {
  43. .pagination {
  44. border-top: none;
  45. }
  46. .pagination {
  47. .prev, .next, .page-number {
  48. border-bottom: 1px solid $pagination-link-border;
  49. border-top: 0;
  50. margin-bottom: 10px;
  51. padding: 0 10px;
  52. &:hover {
  53. border-bottom-color: $pagination-link-hover-border;
  54. }
  55. }
  56. }
  57. }