pager.pcss.css

Same filename in this branch
  1. 11.x core/themes/claro/css/components/pager.pcss.css
Same filename in other branches
  1. 9 core/themes/olivero/css/components/pager.pcss.css
  2. 9 core/themes/claro/css/components/pager.pcss.css
  3. 8.9.x core/themes/claro/css/components/pager.pcss.css
  4. 10 core/themes/olivero/css/components/pager.pcss.css
  5. 10 core/themes/claro/css/components/pager.pcss.css

Styles for pagination.

File

core/themes/olivero/css/components/pager.pcss.css

View source
  1. /**
  2. * @file
  3. * Styles for pagination.
  4. */
  5. @import "../base/media-queries.pcss.css";
  6. .pager__items {
  7. display: flex;
  8. flex-wrap: wrap;
  9. align-items: flex-end;
  10. margin-block: 0;
  11. margin-inline-start: 0;
  12. padding-block: 0;
  13. padding-inline-start: 0;
  14. padding-inline-end: 0;
  15. list-style: none;
  16. font-weight: bold;
  17. }
  18. .pager__item {
  19. display: flex;
  20. align-items: center;
  21. justify-content: center;
  22. width: var(--sp2-5);
  23. height: var(--sp2-5);
  24. cursor: default;
  25. color: var(--color-text-neutral-soft);
  26. background-color: var(--color--white);
  27. @media (--sm) {
  28. width: var(--sp3);
  29. height: var(--sp3);
  30. }
  31. }
  32. [dir="rtl"] .pager__item--control {
  33. transform: scaleX(-1);
  34. }
  35. .pager__item--active {
  36. color: var(--color--white);
  37. background-color: var(--color--primary-40);
  38. }
  39. .pager__item--control {
  40. @media (forced-colors: active) {
  41. & path {
  42. fill: linktext;
  43. }
  44. }
  45. }
  46. .pager__link {
  47. display: flex;
  48. align-items: center;
  49. justify-content: center;
  50. width: 100%;
  51. height: 100%;
  52. text-decoration: none;
  53. color: var(--color-text-neutral-soft);
  54. }
  55. .pager__link:hover {
  56. background-color: var(--color--gray-95);
  57. }
  58. .pager__link:focus {
  59. color: var(--color-text-primary-medium);
  60. outline: solid 2px currentColor;
  61. outline-offset: -2px;
  62. }
  63. .pager__item svg {
  64. display: block;
  65. fill: currentColor;
  66. }
  67. .pager__item--next svg,
  68. .pager__item--last svg {
  69. transform: rotate(180deg);
  70. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.