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.
134 lines
3.0 KiB
134 lines
3.0 KiB
// https://github.com/alphagov/govuk-frontend/blob/add-pagination-prototype/src/govuk/components/pagination/_index.scss |
|
.app-pagination { |
|
border-top: 1px solid $govuk-border-colour; |
|
margin-top: govuk-spacing(2); |
|
padding-top: govuk-spacing(2); |
|
text-align: center; |
|
|
|
@include govuk-media-query($from: tablet) { |
|
// Hide whitespace between elements |
|
font-size: 0; |
|
|
|
// Trick to remove the need for floats |
|
text-align: justify; |
|
|
|
&:after { |
|
content: " "; |
|
display: inline-block; |
|
width: 100%; |
|
} |
|
} |
|
} |
|
|
|
.app-pagination__list { |
|
margin: 0 govuk-spacing(-3); |
|
padding: 0; |
|
list-style: none; |
|
|
|
@include govuk-media-query($from: tablet) { |
|
display: inline-block; |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
.app-pagination__results { |
|
@include govuk-font(19); |
|
margin-top: 0; |
|
margin-bottom: govuk-spacing(4); |
|
padding: govuk-spacing(1) 0; |
|
|
|
@include govuk-media-query($from: tablet) { |
|
display: inline-block; |
|
} |
|
} |
|
|
|
.app-pagination__item { |
|
@include govuk-font(19); |
|
display: inline-block; |
|
margin-bottom: govuk-spacing(4); |
|
|
|
// Hide items on small screens |
|
@include govuk-media-query($until: tablet) { |
|
display: none; |
|
} |
|
} |
|
|
|
// Only show previous, next, first, last and current items on mobile |
|
.app-pagination__item--current, |
|
.app-pagination__item--divider, |
|
.app-pagination__item--prev, |
|
.app-pagination__item--next, |
|
.app-pagination__item:nth-child(2), |
|
.app-pagination__item:nth-last-child(2) { |
|
@include govuk-media-query($until: tablet) { |
|
display: inline-block; |
|
} |
|
} |
|
|
|
.app-pagination__item--current, |
|
.app-pagination__item--divider { |
|
box-sizing: border-box; |
|
font-weight: bold; |
|
min-width: govuk-spacing(8); |
|
min-height: govuk-spacing(4); |
|
padding: govuk-spacing(2); |
|
text-align: center; |
|
} |
|
|
|
.app-pagination__item--divider { |
|
margin: 0 govuk-spacing(-4); |
|
padding-right: 0; |
|
padding-left: 0; |
|
color: $govuk-secondary-text-colour; |
|
pointer-events: none; |
|
} |
|
|
|
.app-pagination__link { |
|
@include govuk-link-common; |
|
@include govuk-link-style-no-underline; |
|
box-sizing: border-box; |
|
color: $govuk-link-colour; |
|
display: block; |
|
min-width: govuk-spacing(8); |
|
min-height: govuk-spacing(4); |
|
padding: govuk-spacing(2); |
|
text-align: center; |
|
|
|
.app-pagination__link-label { |
|
@include govuk-font($size: 16, $weight: "regular"); |
|
display: block; |
|
padding-left: 32px; |
|
text-decoration: underline; |
|
} |
|
|
|
&:hover .app-pagination__link-label { |
|
@include govuk-link-hover-decoration; |
|
} |
|
|
|
&:focus { |
|
box-shadow: 0 0 $govuk-focus-colour, 0 4px $govuk-focus-text-colour; |
|
text-decoration: underline; |
|
} |
|
|
|
&:hover:not(:focus) { |
|
background-color: govuk-colour("light-grey", $legacy: "grey-4"); |
|
} |
|
} |
|
|
|
.app-pagination__icon { |
|
fill: currentcolor; |
|
} |
|
|
|
.app-pagination__item--prev .app-pagination__link, |
|
.app-pagination__item--next .app-pagination__link { |
|
padding: govuk-spacing(2) govuk-spacing(3); |
|
font-weight: bold; |
|
} |
|
|
|
.app-pagination__item--prev .app-pagination__icon { |
|
margin-right: govuk-spacing(2); |
|
} |
|
|
|
.app-pagination__item--next .app-pagination__icon { |
|
margin-left: govuk-spacing(2); |
|
}
|
|
|