_pagination.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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. .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. &.active {
  50. .page-link {
  51. &:hover,
  52. &:focus {
  53. color: $gray-400 !important;
  54. }
  55. }
  56. }
  57. &:not(.active) {
  58. .page-link {
  59. background-color: $dark;
  60. border-color: $gray-600;
  61. &:hover,
  62. &:focus {
  63. color: lighten($primary, 5%);
  64. background-color: lighten($dark, 5%);
  65. }
  66. }
  67. }
  68. }
  69. }