_pagination.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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. }
  13. &:first-child,
  14. &:last-child {
  15. .page-link {
  16. height: 100%;
  17. font-size: $font-size-lg;
  18. }
  19. }
  20. .page-month {
  21. margin-bottom: 0;
  22. font-size: $font-size-lg;
  23. font-weight: $font-weight-bold;
  24. }
  25. .page-year {
  26. margin-bottom: 0;
  27. }
  28. }
  29. &.pagination-lg {
  30. .page-month {
  31. font-size: ($font-size-lg * 1.25);
  32. }
  33. }
  34. &.pagination-sm {
  35. .page-month {
  36. font-size: ($font-size-base);
  37. }
  38. }
  39. }
  40. .dark-mode {
  41. .page-item {
  42. &.disabled .page-link {
  43. background-color: lighten($dark, 2.5%);
  44. border-color: $gray-600;
  45. color: $gray-600;
  46. }
  47. &.active {
  48. .page-link {
  49. &:hover,
  50. &:focus {
  51. color: $gray-400;
  52. }
  53. }
  54. }
  55. &:not(.active) {
  56. .page-link {
  57. background-color: $dark;
  58. border-color: $gray-600;
  59. &:hover,
  60. &:focus {
  61. color: lighten($primary, 5%);
  62. background-color: lighten($dark, 5%);
  63. }
  64. }
  65. }
  66. }
  67. }