_pagination.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. .page-item {
  2. &.active .page-link {
  3. box-shadow: $pagination-active-box-shadow;
  4. }
  5. .page-link,
  6. span {
  7. display: $page-link-display;
  8. align-items: $page-link-align-items;
  9. justify-content: $page-link-justify-content;
  10. color: $secondary;
  11. padding: 0;
  12. margin: $page-link-margin;
  13. border-radius: $page-link-radius !important;
  14. width: $page-link-width;
  15. height: $page-link-height;
  16. font-size: $font-size-sm;
  17. }
  18. }
  19. .pagination-lg {
  20. .page-item {
  21. .page-link,
  22. span {
  23. width: $page-link-width-lg;
  24. height: $page-link-height-lg;
  25. line-height: $page-link-line-height-lg;
  26. }
  27. }
  28. }
  29. .pagination-sm {
  30. .page-item {
  31. .page-link,
  32. span {
  33. width: $page-link-width-sm;
  34. height: $page-link-height-sm;
  35. line-height: $page-link-line-height-sm;
  36. }
  37. }
  38. }
  39. // Colors
  40. .pagination {
  41. @each $name, $value in $theme-gradient-colors {
  42. &.pagination-#{$name} {
  43. .page-item.active > .page-link {
  44. &,
  45. &:focus,
  46. &:hover {
  47. @include gradient-directional(nth($value, 1) 0%, nth($value, -1) 100%, $deg: 310deg);
  48. border: none;
  49. color: $white;
  50. }
  51. }
  52. }
  53. }
  54. }