mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-24 09:58:43 -04:00
37d4ab87df
This copies what the other GaaP components will be doing for their
product pages.
The SASS and HTML is taken from here:
f05ca1fb71/source/stylesheets/modules/_breadcrumbs.scss
Only changes I’ve made are:
- making the file paths work with our build pipeline
Changes to our code to accomodate this are:
- putting the padding on the product page `<h1>` not its container
- moving the hero image accordingly so that it lines up
- making the `<main>` element on the product page into an anchor so that
the breadcrumb can link to it – screenreader will then announce the
link as “GOV.UK Notify, same page”
107 lines
2.6 KiB
SCSS
107 lines
2.6 KiB
SCSS
/**
|
||
* Breadcrumbs Component
|
||
*
|
||
* Based on the existing breadcrumbs from GOV.UK Elements, re-implemented
|
||
* using BEM, allowing for an `inverse` modifier (e.g. against a masthead), with
|
||
* structured data markup, and allowing for the 'current page' to be included
|
||
* as the last element in the breadcrumb.
|
||
*
|
||
* Notes:
|
||
*
|
||
* - Link the current page to the same place as your skip link (e.g. #main) –
|
||
* this means that it is included by screen readers but is referred to as a
|
||
* 'same page' link, and clicking it does not reload the page.
|
||
* - You can test the structured data using Google's structured data testing
|
||
* tool: https://search.google.com/structured-data/testing-tool
|
||
*
|
||
* Example Usage:
|
||
*
|
||
* <nav class="breadcrumbs" aria-label="Breadcrumbs">
|
||
* <ol itemscope itemtype="http://schema.org/BreadcrumbList">
|
||
* <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
||
* <a href="https://www.gov.uk/service-toolkit#components" itemprop="item"><span itemprop="name">Components</span></a>
|
||
* </li>
|
||
* <li class="breadcrumbs__item breadcrumbs__item--active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
||
* <a href="#main" itemprop="item"><span itemprop="name">Product Page</span></a>
|
||
* </li>
|
||
* </ol>
|
||
* </nav>
|
||
*/
|
||
|
||
.breadcrumbs {
|
||
@extend %site-width-container;
|
||
@include core-16($line-height: (25 / 16), $line-height-640: 1.75);
|
||
|
||
padding: $gutter-one-third 0;
|
||
list-style: none;
|
||
|
||
@include media(tablet) {
|
||
margin-bottom: $gutter;
|
||
}
|
||
|
||
ol {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
&__item {
|
||
display: inline-block;
|
||
|
||
margin: 0;
|
||
padding: 0 $gutter-one-quarter 0 (11px + $gutter-one-quarter);
|
||
|
||
background-image: file-url('separator.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 6px 11px;
|
||
background-position: left center;
|
||
|
||
white-space: nowrap;
|
||
|
||
@include device-pixel-ratio(2) {
|
||
background-image: file-url('separator-2x.png');
|
||
}
|
||
|
||
&,
|
||
a:link,
|
||
a:hover,
|
||
a:active,
|
||
a:visited {
|
||
color: $black;
|
||
}
|
||
|
||
&--active {
|
||
@include bold-16;
|
||
|
||
a:link,
|
||
a:visited {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
&:first-child {
|
||
padding-left: 0;
|
||
background-image: none;
|
||
}
|
||
}
|
||
|
||
&--inverse {
|
||
border-bottom: 1px $white solid;
|
||
border-bottom-color: rgba($white, 0.25);
|
||
|
||
.breadcrumbs__item {
|
||
&--active,
|
||
a:link,
|
||
a:hover,
|
||
a:active,
|
||
a:visited {
|
||
color: $white;
|
||
}
|
||
|
||
a:focus {
|
||
color: $black;
|
||
}
|
||
}
|
||
}
|
||
}
|