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/olivero/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 Claro's Pagination.

File

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

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