_pagination.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. //
  2. // Component: Pagination
  3. //
  4. .pagination-month {
  5. .page-item {
  6. justify-self: stretch;
  7. .page-link {
  8. display: flex;
  9. align-items: center;
  10. justify-content: center;
  11. flex-direction: column;
  12. box-shadow: none;
  13. }
  14. &:first-child,
  15. &:last-child {
  16. .page-link {
  17. height: 100%;
  18. font-size: $font-size-lg;
  19. }
  20. }
  21. .page-month {
  22. margin-bottom: 0;
  23. font-size: $font-size-lg;
  24. font-weight: $font-weight-bold;
  25. }
  26. .page-year {
  27. margin-bottom: 0;
  28. }
  29. }
  30. &.pagination-lg {
  31. .page-month {
  32. font-size: ($font-size-lg * 1.25);
  33. }
  34. }
  35. &.pagination-sm {
  36. .page-month {
  37. font-size: ($font-size-base);
  38. }
  39. }
  40. }
  41. @include dark-mode () {
  42. .page-item {
  43. &.disabled a,
  44. &.disabled .page-link {
  45. background-color: lighten($dark, 2.5%) !important;
  46. border-color: $gray-600 !important;
  47. color: $gray-600;
  48. }
  49. .page-link {
  50. color: $primary-alt;
  51. }
  52. &.active {
  53. .page-link {
  54. background-color: $primary-alt;
  55. border-color: $primary-alt;
  56. color: $white;
  57. &:hover,
  58. &:focus {
  59. color: $gray-400 !important;
  60. }
  61. }
  62. }
  63. &:not(.active) {
  64. .page-link {
  65. background-color: $dark;
  66. border-color: $gray-600;
  67. &:hover,
  68. &:focus {
  69. color: lighten($primary-alt, 5%);
  70. background-color: lighten($dark, 5%);
  71. }
  72. }
  73. }
  74. }
  75. }