_pagination.scss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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. }
  28. .page-item {
  29. &:first-child {
  30. .page-link {
  31. margin-left: 0;
  32. @include border-left-radius($border-radius);
  33. }
  34. }
  35. &:last-child {
  36. .page-link {
  37. @include border-right-radius($border-radius);
  38. }
  39. }
  40. &.active .page-link {
  41. z-index: 1;
  42. color: $pagination-active-color;
  43. background-color: $pagination-active-bg;
  44. border-color: $pagination-active-border-color;
  45. }
  46. &.disabled .page-link {
  47. color: $pagination-disabled-color;
  48. pointer-events: none;
  49. // Opinionated: remove the "hand" cursor set previously for .page-link
  50. cursor: auto;
  51. background-color: $pagination-disabled-bg;
  52. border-color: $pagination-disabled-border-color;
  53. }
  54. }
  55. //
  56. // Sizing
  57. //
  58. .pagination-lg {
  59. @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
  60. }
  61. .pagination-sm {
  62. @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
  63. }