pagination.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. // Pagination (multiple pages)
  2. // --------------------------------------------------
  3. .pagination {
  4. display: inline-block;
  5. padding-left: 0;
  6. margin: 0;
  7. > li {
  8. display: inline-block;
  9. > a,
  10. > span,
  11. > button {
  12. position: relative;
  13. float: left; // Collapse white-space
  14. padding: var(--spacing-04) var(--spacing-06);
  15. line-height: var(--line-height-base);
  16. text-decoration: none;
  17. color: var(--neutral-90);
  18. background-color: #fff;
  19. border: 1px solid var(--neutral-30);
  20. margin-left: -1px;
  21. font-weight: 600;
  22. transition: background-color 0.15s ease-in-out;
  23. &:hover,
  24. &:focus {
  25. color: var(--neutral-90);
  26. background-color: var(--neutral-10);
  27. border-color: var(--neutral-30);
  28. text-decoration: none;
  29. transition: background-color 0.15s ease-in-out;
  30. }
  31. }
  32. &:first-child {
  33. > a,
  34. > span,
  35. > button {
  36. margin-left: 0;
  37. }
  38. }
  39. }
  40. > .active > a,
  41. > .active > span,
  42. > .active > button {
  43. &,
  44. &:hover,
  45. &:focus {
  46. z-index: 2;
  47. color: var(--green-70);
  48. background-color: var(--green-10);
  49. border-color: var(--neutral-30);
  50. cursor: default;
  51. }
  52. }
  53. .ellipses {
  54. pointer-events: none;
  55. }
  56. }