pager.css

Same filename in this branch
  1. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/pager.css
  2. 11.x core/themes/claro/css/components/pager.css
  3. 11.x core/themes/starterkit_theme/css/components/pager.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/classy/components/pager.css
  2. 9 core/themes/olivero/css/components/pager.css
  3. 9 core/themes/seven/css/components/pager.css
  4. 9 core/themes/seven/css/classy/components/pager.css
  5. 9 core/themes/claro/css/components/pager.css
  6. 9 core/themes/bartik/css/components/pager.css
  7. 9 core/themes/bartik/css/classy/components/pager.css
  8. 9 core/themes/starterkit_theme/css/components/pager.css
  9. 9 core/themes/classy/css/components/pager.css
  10. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/pager.css
  11. 8.9.x core/themes/seven/css/components/pager.css
  12. 8.9.x core/themes/seven/css/classy/components/pager.css
  13. 8.9.x core/themes/claro/css/components/pager.css
  14. 8.9.x core/themes/bartik/css/components/pager.css
  15. 8.9.x core/themes/bartik/css/classy/components/pager.css
  16. 8.9.x core/themes/classy/css/components/pager.css
  17. 10 core/profiles/demo_umami/themes/umami/css/classy/components/pager.css
  18. 10 core/themes/olivero/css/components/pager.css
  19. 10 core/themes/claro/css/components/pager.css
  20. 10 core/themes/starterkit_theme/css/components/pager.css

Styles for pagination.

File

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

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

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