Layout von Websiten mit Bootstrap und Foundation
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_pagination.scss 1.8KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. .pagination {
  2. display: flex;
  3. @include list-unstyled();
  4. @include border-radius();
  5. }
  6. .page-link {
  7. position: relative;
  8. display: block;
  9. padding: $pagination-padding-y $pagination-padding-x;
  10. margin-left: -$pagination-border-width;
  11. line-height: $pagination-line-height;
  12. color: $pagination-color;
  13. text-decoration: if($link-decoration == none, null, none);
  14. background-color: $pagination-bg;
  15. border: $pagination-border-width solid $pagination-border-color;
  16. &:hover {
  17. z-index: 2;
  18. color: $pagination-hover-color;
  19. text-decoration: none;
  20. background-color: $pagination-hover-bg;
  21. border-color: $pagination-hover-border-color;
  22. }
  23. &:focus {
  24. z-index: 3;
  25. outline: $pagination-focus-outline;
  26. box-shadow: $pagination-focus-box-shadow;
  27. }
  28. }
  29. .page-item {
  30. &:first-child {
  31. .page-link {
  32. margin-left: 0;
  33. @include border-left-radius($border-radius);
  34. }
  35. }
  36. &:last-child {
  37. .page-link {
  38. @include border-right-radius($border-radius);
  39. }
  40. }
  41. &.active .page-link {
  42. z-index: 3;
  43. color: $pagination-active-color;
  44. background-color: $pagination-active-bg;
  45. border-color: $pagination-active-border-color;
  46. }
  47. &.disabled .page-link {
  48. color: $pagination-disabled-color;
  49. pointer-events: none;
  50. // Opinionated: remove the "hand" cursor set previously for .page-link
  51. cursor: auto;
  52. background-color: $pagination-disabled-bg;
  53. border-color: $pagination-disabled-border-color;
  54. }
  55. }
  56. //
  57. // Sizing
  58. //
  59. .pagination-lg {
  60. @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
  61. }
  62. .pagination-sm {
  63. @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
  64. }