_pagination.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. // Pagination
  2. .pagination {
  3. .page-item {
  4. &.active {
  5. .page-link {
  6. box-shadow: $z-depth-1;
  7. transition: $pagination-active-transition;
  8. border-radius: $border-radius-base;
  9. background-color: $primary-color;
  10. color: $white-base;
  11. &:hover {
  12. background-color: $primary-color;
  13. }
  14. }
  15. }
  16. &.disabled {
  17. .page-link {
  18. color: $pagination-page-item-disabled-color;
  19. }
  20. }
  21. .page-link {
  22. transition: $pagination-page-link-transition;
  23. outline: 0;
  24. border: 0;
  25. background-color: transparent;
  26. font-size: $pagination-page-link-font-size;
  27. color: $pagination-page-link-color;
  28. &:hover {
  29. transition: $pagination-page-link-transition;
  30. border-radius: $border-radius-base;
  31. background-color: $pagination-page-link-hover-bg-color;
  32. }
  33. &:focus {
  34. background-color: transparent;
  35. box-shadow: none;
  36. }
  37. }
  38. }
  39. &.pagination-lg {
  40. .page-item {
  41. .page-link {
  42. font-size: $pagination-page-link-font-size-lg;
  43. }
  44. }
  45. }
  46. &.pagination-sm {
  47. .page-item {
  48. .page-link {
  49. font-size: $pagination-page-link-font-size-sm;
  50. }
  51. }
  52. }
  53. &.pagination-circle {
  54. .page-item {
  55. .page-link {
  56. margin-left: $pagination-circle-margin-x;
  57. margin-right: $pagination-circle-margin-x;
  58. border-radius: $pagination-circle-border-radius;
  59. &:hover {
  60. border-radius: $pagination-circle-border-radius;
  61. }
  62. }
  63. &.active {
  64. .page-link {
  65. border-radius: $pagination-circle-border-radius;
  66. }
  67. }
  68. }
  69. }
  70. @each $name, $color in $pagination-colors {
  71. &.pg-#{$name} {
  72. .page-item {
  73. &.active {
  74. .page-link {
  75. background-color: $color;
  76. &:hover {
  77. background-color: $color;
  78. }
  79. }
  80. }
  81. }
  82. }
  83. }
  84. }