You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.4 KiB
58 lines
1.4 KiB
/** |
|
* @file |
|
* Visual styles for the pager. |
|
* |
|
* Markup hooks from templates/navigation/pager.html.twig: |
|
* .pager — outer <nav> |
|
* .pager__items — <ul> |
|
* .pager__item — each <li> |
|
* .pager__item--first — "First" link |
|
* .pager__item--previous — "Previous" link |
|
* .pager__item--next — "Next" link |
|
* .pager__item--last — "Last" link |
|
* .pager__item--ellipsis — gap between non-adjacent page ranges |
|
* .is-active — added to the current page <li> |
|
*/ |
|
@layer components { |
|
|
|
.pager { |
|
margin-block: var(--size-4); |
|
} |
|
.pager__items { |
|
margin: 0; |
|
padding: 0; |
|
list-style: none; |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: center; |
|
gap: var(--size-1); |
|
} |
|
.pager__item a { |
|
display: inline-block; |
|
min-width: 2.5em; |
|
padding: var(--size-1) var(--size-2); |
|
border: 1px solid var(--surface-2); |
|
border-radius: var(--radius-2); |
|
color: var(--text-1); |
|
line-height: 1.4; |
|
text-align: center; |
|
text-decoration: none; |
|
} |
|
.pager__item a:hover, |
|
.pager__item a:focus { |
|
background-color: var(--surface-2); |
|
border-color: var(--text-2); |
|
} |
|
.pager__item.is-active a { |
|
background-color: var(--upei-red); |
|
border-color: var(--upei-red); |
|
color: white; |
|
font-weight: bold; |
|
} |
|
.pager__item--ellipsis { |
|
align-self: center; |
|
padding: var(--size-1) var(--size-2); |
|
color: var(--text-2); |
|
} |
|
|
|
}
|
|
|