pager.pcss.css

Same filename in this branch
  1. 11.x core/themes/olivero/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 Claro's Pagination.

File

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

View source
  1. /**
  2. * @file
  3. * Styles for Claro's Pagination.
  4. */
  5. .pager {
  6. --pager-size: 2rem; /* --space-m × 2 */
  7. --pager-border-width: 0.125rem; /* 2px */
  8. --pager-fg-color: var(--color-gray-800);
  9. --pager-bg-color: var(--color-white);
  10. --pager-hover-bg-color: var(--color-bgblue-active);
  11. --pager-focus-bg-color: var(--color-focus);
  12. --pager-active-fg-color: var(--color-white);
  13. --pager-active-bg-color: var(--color-absolutezero);
  14. --pager-border-radius--action: var(--pager-border-width);
  15. margin-block: var(--space-m);
  16. }
  17. .pager__items {
  18. display: flex;
  19. flex-wrap: wrap;
  20. align-items: flex-end;
  21. justify-content: center;
  22. margin: var(--space-m) 0;
  23. list-style: none;
  24. text-align: center;
  25. font-weight: bold;
  26. }
  27. .pager__item {
  28. display: inline-block;
  29. margin-inline: calc(var(--space-xs) / 2);
  30. vertical-align: top;
  31. }
  32. .pager__link,
  33. .pager__item--current {
  34. display: flex;
  35. align-items: center;
  36. justify-content: center;
  37. box-sizing: border-box;
  38. min-inline-size: var(--pager-size);
  39. block-size: var(--pager-size);
  40. padding-inline: var(--space-xs);
  41. text-decoration: none;
  42. color: var(--pager-fg-color);
  43. border-radius: var(--space-m); /* Pager size ÷ 2 */
  44. background: var(--pager-bg-color); /* Make sure that the text is visible on dark background. */
  45. line-height: 1;
  46. }
  47. .pager__link:hover,
  48. .pager__link:focus,
  49. .pager__link:active {
  50. text-decoration: none;
  51. }
  52. .pager__link:hover,
  53. .pager__link.is-active:hover {
  54. color: var(--pager-fg-color);
  55. background: var(--pager-hover-bg-color);
  56. }
  57. .pager__link--action-link {
  58. border-radius: var(--pager-border-radius--action);
  59. }
  60. /* Active number link. */
  61. .pager__link.is-active,
  62. .pager__item--current {
  63. color: var(--pager-active-fg-color);
  64. border: var(--pager-border-width) solid transparent;
  65. background: var(--pager-active-bg-color);
  66. }
  67. .pager__item--first .pager__link::before {
  68. --background-image: url(../../images/icons/545560/pager-first.svg);
  69. }
  70. .pager__item--previous .pager__link::before {
  71. --background-image: url(../../images/icons/545560/pager-prev.svg);
  72. }
  73. .pager__item--next .pager__link::after {
  74. --background-image: url(../../images/icons/545560/pager-next.svg);
  75. }
  76. .pager__item--last .pager__link::after {
  77. --background-image: url(../../images/icons/545560/pager-last.svg);
  78. }
  79. .pager__item--first .pager__link::before,
  80. .pager__item--previous .pager__link::before,
  81. .pager__item--next .pager__link::after,
  82. .pager__item--last .pager__link::after {
  83. position: relative;
  84. display: inline-block;
  85. inline-size: 1rem;
  86. block-size: 1rem;
  87. content: "";
  88. background-image: var(--background-image);
  89. background-repeat: no-repeat;
  90. background-position: center;
  91. }
  92. @media (forced-colors: active) {
  93. .pager__item--first .pager__link::before,
  94. .pager__item--previous .pager__link::before,
  95. .pager__item--next .pager__link::after,
  96. .pager__item--last .pager__link::after {
  97. background-color: linktext;
  98. background-image: none;
  99. mask-image: var(--background-image);
  100. mask-repeat: no-repeat;
  101. mask-position: center;
  102. }
  103. }
  104. [dir="rtl"] .pager__item--first .pager__link::before,
  105. [dir="rtl"] .pager__item--previous .pager__link::before,
  106. [dir="rtl"] .pager__item--next .pager__link::after,
  107. [dir="rtl"] .pager__item--last .pager__link::after {
  108. transform: scaleX(-1);
  109. }
  110. .pager__item--mini {
  111. margin-inline: calc(var(--space-m) / 2);
  112. }
  113. .pager__link--mini {
  114. border-radius: 50%;
  115. }
  116. /**
  117. * On the mini pager, remove margins for the previous and next icons.
  118. * Margins are not needed here as there is no accompanying text.
  119. */
  120. .pager__link--mini::before {
  121. margin-inline: 0;
  122. }
  123. .pager__item-title--backwards {
  124. margin-inline-start: 0.5rem;
  125. }
  126. .pager__item-title--forward {
  127. margin-inline-end: 0.5rem;
  128. }
  129. @media (forced-colors: active) {
  130. .pager__item a:hover {
  131. text-decoration: underline;
  132. }
  133. }

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