You are here

Home » API reference » Drupal 10

pager.css in Drupal 10

Same filename in this branch
  1. 10 core/themes/starterkit_theme/css/components/pager.css
  2. 10 core/themes/classy/css/components/pager.css
  3. 10 core/themes/claro/css/components/pager.css
  4. 10 core/themes/seven/css/components/pager.css
  5. 10 core/themes/olivero/css/components/pager.css
  6. 10 core/themes/bartik/css/components/pager.css
  7. 10 core/themes/seven/css/classy/components/pager.css
  8. 10 core/themes/bartik/css/classy/components/pager.css
  9. 10 core/profiles/demo_umami/themes/umami/css/classy/components/pager.css
Same filename and directory in other branches
  1. 8 core/themes/claro/css/components/pager.css
  2. 9 core/themes/claro/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. /**

  9.  * @file

  10.  * Styles for Claro's Pagination.

  11.  */

  12. 

  13. :root {

  14.   /**

  15.   * Pager.

  16.   */

  17.   --pager-size: 2rem; /* --space-m × 2 */

  18.   --pager-border-width: 0.125rem; /* 2px */

  19.   --pager-fg-color: var(--color-gray-800);

  20.   --pager-bg-color: var(--color-white);

  21.   --pager--hover-bg-color: var(--color-bgblue-active);

  22.   --pager--focus-bg-color: var(--color-focus);

  23.   --pager--active-fg-color: var(--color-white);

  24.   --pager--active-bg-color: var(--color-absolutezero);

  25.   --pager-border-radius--action: var(--pager-border-width);

  26. }

  27. 

  28. .pager {

  29.   margin-top: var(--space-m);

  30.   margin-bottom: var(--space-m);

  31. }

  32. 

  33. .pager__items {

  34.   display: flex;

  35.   flex-wrap: wrap;

  36.   align-items: flex-end;

  37.   justify-content: center;

  38.   margin: var(--space-m) 0; /* LTR */

  39.   list-style: none;

  40.   text-align: center;

  41.   font-weight: bold;

  42. }

  43. 

  44. [dir="rtl"] .pager__items {

  45.   margin: var(--space-m) 0;

  46. }

  47. 

  48. .pager__item {

  49.   display: inline-block;

  50.   margin-right: calc(var(--space-xs) / 2);

  51.   margin-left: calc(var(--space-xs) / 2);

  52.   vertical-align: top;

  53. }

  54. 

  55. .pager__link,

  56. .pager__item--current {

  57.   display: flex;

  58.   align-items: center;

  59.   justify-content: center;

  60.   box-sizing: border-box;

  61.   min-width: var(--pager-size);

  62.   height: var(--pager-size);

  63.   padding-right: var(--space-xs);

  64.   padding-left: var(--space-xs);

  65.   text-decoration: none;

  66.   color: var(--pager-fg-color);

  67.   border-radius: var(--space-m); /* Pager size ÷ 2 */

  68.   background: var(--pager-bg-color); /* Make sure that the text is visible on dark background. */

  69.   line-height: 1;

  70. }

  71. 

  72. .pager__link:hover,

  73. .pager__link:focus,

  74. .pager__link:active {

  75.   text-decoration: none;

  76. }

  77. 

  78. .pager__link:hover,

  79. .pager__link.is-active:hover {

  80.   color: var(--pager-fg-color);

  81.   background: var(--pager--hover-bg-color);

  82. }

  83. 

  84. .pager__link--action-link {

  85.   border-radius: var(--pager-border-radius--action);

  86. }

  87. 

  88. /* Active number link. */

  89. 

  90. .pager__link.is-active,

  91. .pager__item--current {

  92.   color: var(--pager--active-fg-color);

  93.   border: var(--pager-border-width) solid transparent;

  94.   background: var(--pager--active-bg-color);

  95. }

  96. 

  97. .pager__item--first .pager__link::before {

  98.   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");

  99. }

  100. 

  101. .pager__item--previous .pager__link::before {

  102.   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");

  103. }

  104. 

  105. .pager__item--next .pager__link::after {

  106.   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");

  107. }

  108. 

  109. .pager__item--last .pager__link::after {

  110.   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");

  111. }

  112. 

  113. .pager__item--first .pager__link::before,

  114. .pager__item--previous .pager__link::before,

  115. .pager__item--next .pager__link::after,

  116. .pager__item--last .pager__link::after {

  117.   position: relative;

  118.   display: inline-block;

  119.   width: 1rem;

  120.   height: 1rem;

  121.   content: "";

  122.   background-repeat: no-repeat;

  123.   background-position: center;

  124. }

  125. 

  126. @media (forced-colors: active) {

  127.   .pager__item--first .pager__link::before {

  128.     -webkit-mask-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");

  129.     mask-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");

  130.   }

  131.   .pager__item--previous .pager__link::before {

  132.     -webkit-mask-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");

  133.     mask-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");

  134.   }

  135.   .pager__item--next .pager__link::after {

  136.     -webkit-mask-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");

  137.     mask-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");

  138.   }

  139.   .pager__item--last .pager__link::after {

  140.     -webkit-mask-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");

  141.     mask-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");

  142.   }

  143.   .pager__item--first .pager__link::before,

  144.   .pager__item--previous .pager__link::before,

  145.   .pager__item--next .pager__link::after,

  146.   .pager__item--last .pager__link::after {

  147.     background-color: linktext;

  148.     background-image: none;

  149.     -webkit-mask-repeat: no-repeat;

  150.     mask-repeat: no-repeat;

  151.     -webkit-mask-position: center;

  152.     mask-position: center;

  153.   }

  154. }

  155. 

  156. [dir="rtl"] .pager__item--first .pager__link::before,

  157. [dir="rtl"] .pager__item--previous .pager__link::before,

  158. [dir="rtl"] .pager__item--next .pager__link::after,

  159. [dir="rtl"] .pager__item--last .pager__link::after {

  160.   transform: scaleX(-1);

  161. }

  162. 

  163. .pager__item--mini {

  164.   margin-right: calc(var(--space-m) / 2);

  165.   margin-left: calc(var(--space-m) / 2);

  166. }

  167. 

  168. .pager__link--mini {

  169.   border-radius: 50%;

  170. }

  171. 

  172. /**

  173.  * On the mini pager, remove margins for the previous and next icons.

  174.  * Margins are not needed here as there is no accompanying text.

  175.  */

  176. 

  177. .pager__link--mini::before {

  178.   margin-right: 0;

  179.   margin-left: 0;

  180. }

  181. 

  182. .pager__item-title--backwards {

  183.   margin-left: 0.5rem; /* LTR */

  184. }

  185. 

  186. [dir="rtl"] .pager__item-title--backwards {

  187.   margin-right: 0.5rem;

  188.   margin-left: 0;

  189. }

  190. 

  191. .pager__item-title--forward {

  192.   margin-right: 0.5rem; /* LTR */

  193. }

  194. 

  195. [dir="rtl"] .pager__item-title--forward {

  196.   margin-right: 0;

  197.   margin-left: 0.5rem;

  198. }

  199. 

  200. @media (-ms-high-contrast: active), (forced-colors: active) {

  201.   .pager__item a:hover {

  202.     text-decoration: underline;

  203.   }

  204. }