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

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