_pagination.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. .pagination {
  2. display: flex;
  3. @include list-unstyled();
  4. @include border-radius();
  5. }
  6. .page-link {
  7. position: relative;
  8. display: block;
  9. padding: $pagination-padding-y $pagination-padding-x;
  10. margin-left: -$pagination-border-width;
  11. line-height: $pagination-line-height;
  12. color: $pagination-color;
  13. background-color: $pagination-bg;
  14. border: $pagination-border-width solid $pagination-border-color;
  15. &:hover {
  16. z-index: 2;
  17. color: $pagination-hover-color;
  18. text-decoration: none;
  19. background-color: $pagination-hover-bg;
  20. border-color: $pagination-hover-border-color;
  21. }
  22. &:focus {
  23. z-index: 2;
  24. outline: $pagination-focus-outline;
  25. box-shadow: $pagination-focus-box-shadow;
  26. }
  27. // Opinionated: add "hand" cursor to non-disabled .page-link elements
  28. &:not(:disabled):not(.disabled) {
  29. cursor: pointer;
  30. }
  31. }
  32. .page-item {
  33. &:first-child {
  34. .page-link {
  35. margin-left: 0;
  36. @include border-left-radius($border-radius);
  37. }
  38. }
  39. &:last-child {
  40. .page-link {
  41. @include border-right-radius($border-radius);
  42. }
  43. }
  44. &.active .page-link {
  45. z-index: 1;
  46. color: $pagination-active-color;
  47. background-color: $pagination-active-bg;
  48. border-color: $pagination-active-border-color;
  49. }
  50. &.disabled .page-link {
  51. color: $pagination-disabled-color;
  52. pointer-events: none;
  53. // Opinionated: remove the "hand" cursor set previously for .page-link
  54. cursor: auto;
  55. background-color: $pagination-disabled-bg;
  56. border-color: $pagination-disabled-border-color;
  57. }
  58. }
  59. //
  60. // Sizing
  61. //
  62. .pagination-lg {
  63. @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
  64. }
  65. .pagination-sm {
  66. @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
  67. }