You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

109 lines
3.9 KiB

3 months ago
  1. .pagination {
  2. // scss-docs-start pagination-css-vars
  3. --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
  4. --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
  5. @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
  6. --#{$prefix}pagination-color: #{$pagination-color};
  7. --#{$prefix}pagination-bg: #{$pagination-bg};
  8. --#{$prefix}pagination-border-width: #{$pagination-border-width};
  9. --#{$prefix}pagination-border-color: #{$pagination-border-color};
  10. --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
  11. --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
  12. --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
  13. --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
  14. --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
  15. --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
  16. --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
  17. --#{$prefix}pagination-active-color: #{$pagination-active-color};
  18. --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
  19. --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
  20. --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
  21. --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
  22. --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
  23. // scss-docs-end pagination-css-vars
  24. display: flex;
  25. @include list-unstyled();
  26. }
  27. .page-link {
  28. position: relative;
  29. display: block;
  30. padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
  31. @include font-size(var(--#{$prefix}pagination-font-size));
  32. color: var(--#{$prefix}pagination-color);
  33. text-decoration: if($link-decoration == none, null, none);
  34. background-color: var(--#{$prefix}pagination-bg);
  35. border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
  36. @include transition($pagination-transition);
  37. &:hover {
  38. z-index: 2;
  39. color: var(--#{$prefix}pagination-hover-color);
  40. text-decoration: if($link-hover-decoration == underline, none, null);
  41. background-color: var(--#{$prefix}pagination-hover-bg);
  42. border-color: var(--#{$prefix}pagination-hover-border-color);
  43. }
  44. &:focus {
  45. z-index: 3;
  46. color: var(--#{$prefix}pagination-focus-color);
  47. background-color: var(--#{$prefix}pagination-focus-bg);
  48. outline: $pagination-focus-outline;
  49. box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
  50. }
  51. &.active,
  52. .active > & {
  53. z-index: 3;
  54. color: var(--#{$prefix}pagination-active-color);
  55. @include gradient-bg(var(--#{$prefix}pagination-active-bg));
  56. border-color: var(--#{$prefix}pagination-active-border-color);
  57. }
  58. &.disabled,
  59. .disabled > & {
  60. color: var(--#{$prefix}pagination-disabled-color);
  61. pointer-events: none;
  62. background-color: var(--#{$prefix}pagination-disabled-bg);
  63. border-color: var(--#{$prefix}pagination-disabled-border-color);
  64. }
  65. }
  66. .page-item {
  67. &:not(:first-child) .page-link {
  68. margin-left: $pagination-margin-start;
  69. }
  70. @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
  71. &:first-child {
  72. .page-link {
  73. @include border-start-radius(var(--#{$prefix}pagination-border-radius));
  74. }
  75. }
  76. &:last-child {
  77. .page-link {
  78. @include border-end-radius(var(--#{$prefix}pagination-border-radius));
  79. }
  80. }
  81. } @else {
  82. // Add border-radius to all pageLinks in case they have left margin
  83. .page-link {
  84. @include border-radius(var(--#{$prefix}pagination-border-radius));
  85. }
  86. }
  87. }
  88. //
  89. // Sizing
  90. //
  91. .pagination-lg {
  92. @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
  93. }
  94. .pagination-sm {
  95. @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
  96. }