_pagination.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. .pagination {
  2. margin: 0;
  3. --#{$prefix}pagination-gap: .25rem;
  4. user-select: none;
  5. gap: var(--#{$prefix}pagination-gap);
  6. line-height: var(--#{$prefix}body-line-height);
  7. }
  8. .page-link {
  9. min-width: 2rem;
  10. border-radius: var(--#{$prefix}pagination-border-radius);
  11. &:hover {
  12. background: var(--#{$prefix}pagination-hover-bg);
  13. }
  14. }
  15. .page-text {
  16. padding-left: .5rem;
  17. padding-right: .5rem;
  18. }
  19. .page-item {
  20. text-align: center;
  21. &.page-prev,
  22. &.page-next {
  23. flex: 0 0 50%;
  24. text-align: left;
  25. }
  26. &.page-next {
  27. margin-left: auto;
  28. text-align: right;
  29. }
  30. }
  31. .page-item-subtitle {
  32. margin-bottom: 2px;
  33. font-size: 12px;
  34. color: var(--#{$prefix}secondary);
  35. text-transform: uppercase;
  36. .page-item.disabled & {
  37. color: $pagination-disabled-color;
  38. }
  39. }
  40. .page-item-title {
  41. font-size: $h3-font-size;
  42. font-weight: var(--#{$prefix}font-weight-normal);
  43. color: var(--#{$prefix}body-color);
  44. .page-link:hover & {
  45. color: $link-color;
  46. }
  47. .page-item.disabled & {
  48. color: $pagination-disabled-color;
  49. }
  50. }
  51. .pagination-outline {
  52. --#{$prefix}pagination-border-color: var(--#{$prefix}border-color);
  53. --#{$prefix}pagination-disabled-border-color: var(--#{$prefix}border-color);
  54. --#{$prefix}pagination-border-width: 1px;
  55. }
  56. .pagination-circle {
  57. --#{$prefix}pagination-border-radius: var(--tblr-border-radius-pill);
  58. }