_pagination.scss 1.5KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .pagination {
  2. display: flex;
  3. @include list-unstyled();
  4. @include border-radius();
  5. }
  6. .page-item {
  7. &:first-child {
  8. .page-link {
  9. margin-left: 0;
  10. @include border-left-radius($border-radius);
  11. }
  12. }
  13. &:last-child {
  14. .page-link {
  15. @include border-right-radius($border-radius);
  16. }
  17. }
  18. &.active .page-link {
  19. z-index: 2;
  20. color: $pagination-active-color;
  21. background-color: $pagination-active-bg;
  22. border-color: $pagination-active-border-color;
  23. }
  24. &.disabled .page-link {
  25. color: $pagination-disabled-color;
  26. pointer-events: none;
  27. background-color: $pagination-disabled-bg;
  28. border-color: $pagination-disabled-border-color;
  29. }
  30. }
  31. .page-link {
  32. position: relative;
  33. display: block;
  34. padding: $pagination-padding-y $pagination-padding-x;
  35. margin-left: -$pagination-border-width;
  36. line-height: $pagination-line-height;
  37. color: $pagination-color;
  38. background-color: $pagination-bg;
  39. border: $pagination-border-width solid $pagination-border-color;
  40. @include hover-focus {
  41. color: $pagination-hover-color;
  42. text-decoration: none;
  43. background-color: $pagination-hover-bg;
  44. border-color: $pagination-hover-border-color;
  45. }
  46. }
  47. //
  48. // Sizing
  49. //
  50. .pagination-lg {
  51. @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
  52. }
  53. .pagination-sm {
  54. @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
  55. }