mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-07 05:18:25 -04:00
dc941bc9bc
Giving all links the GOVUK Frontend classes, and the new `govuk-link--destructive` class, means some styles are already applied. This strips out those styles. Note: there's still a good amount of styling, most of which is to make the focus styles specific to the space the link is in. These will need reviewing when GOVUK Frontend is bumped past version 3 as this brings in new focus styles.
108 lines
2.0 KiB
SCSS
108 lines
2.0 KiB
SCSS
/*
|
|
Taken from the GOV.UK component at
|
|
https://github.com/alphagov/static/blob/3d93a762b9d7af54615c77ae3e479131c03b8175/app/assets/stylesheets/govuk-component/_previous-and-next-navigation.scss
|
|
and
|
|
https://github.com/alphagov/static/blob/da8aeeaa749093eab30286d7fc9f965533b66f47/app/assets/stylesheets/styleguide/_conditionals2.scss
|
|
*/
|
|
|
|
// Media query helpers. These make producing IE layouts
|
|
// super easy.
|
|
|
|
// These are desktop and down media queries
|
|
|
|
// There is also a local version of this in Smartanswers.
|
|
|
|
$is-ie: false !default;
|
|
|
|
@mixin media-down($size: false, $max-width: false, $min-width: false) {
|
|
@if $is-ie == false {
|
|
@if $size == mobile {
|
|
@media (max-width: 640px){
|
|
@content;
|
|
}
|
|
} @else if $size == tablet {
|
|
@media (max-width: 800px){
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.govuk-previous-and-next-navigation {
|
|
display: block;
|
|
margin-top: $gutter;
|
|
margin-bottom: $gutter;
|
|
margin-left: -$gutter-half;
|
|
margin-right: -$gutter-half;
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
@include core-16($line-height: (20 / 16));
|
|
float: left;
|
|
list-style: none;
|
|
text-align: right;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 50%;
|
|
|
|
a {
|
|
display: block;
|
|
padding: $gutter-half;
|
|
text-decoration: none;
|
|
|
|
&:hover,
|
|
&:active {
|
|
background-color: $canvas-colour;
|
|
}
|
|
|
|
.pagination-part-title {
|
|
@include core-27($line-height: (33.75 / 27));
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.previous-page {
|
|
float: left;
|
|
text-align: left;
|
|
}
|
|
|
|
.next-page {
|
|
float: right;
|
|
text-align: right;
|
|
}
|
|
|
|
@include media-down(mobile) {
|
|
.previous-page,
|
|
.next-page {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.next-page a {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.pagination-icon {
|
|
display: inline-block;
|
|
margin-bottom: 1px;
|
|
height: .482em;
|
|
width: .63em;
|
|
}
|
|
|
|
.pagination-label {
|
|
display: inline-block;
|
|
margin-top: 0.1em;
|
|
text-decoration: underline;
|
|
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|