mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-03 13:18:57 -04:00
7578bbcf0b
Since these two paragraphs sit on a blue background, they should have white text. But this was getting overridden when the `govuk-body` class was added in a previous commit, and the paragraphs appeared with black text. Previously these paragraphs were inheriting their colour from a parent element. But a class applied directly to the element is more specific. So this commit fixes the problem by being more specific again, by applying the colour to the element, in the context of it’s parent’s class.
121 lines
2.4 KiB
SCSS
121 lines
2.4 KiB
SCSS
$product-page-blue: #005EA5;
|
|
// See https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/button/_button.scss#L24
|
|
$button-shadow-size: $govuk-border-width-form-element;
|
|
|
|
.product-page {
|
|
|
|
&-intro {
|
|
|
|
// The GOV.UK Frontend header component wraps content that is `position: relative`
|
|
// This changes its z-index position, putting it above the `<main>` section in the stacking order
|
|
// We need the `<main>` section to be above it, like the default order, so when we apply the
|
|
// negative margin-top it overlaps the theme bar at the bottom of the header
|
|
position: relative;
|
|
margin: -10px 0 govuk-spacing(6) * 1.5 0;
|
|
padding: 0 0 govuk-spacing(9) 0;
|
|
background: $product-page-blue;
|
|
color: $white;
|
|
|
|
&-wrapper {
|
|
|
|
@include govuk-width-container;
|
|
|
|
@include media(desktop) {
|
|
background-image: file-url('product/proposition-illustration.png');
|
|
background-size: 320px;
|
|
background-repeat: no-repeat;
|
|
background-position: right -6px top 100px;
|
|
}
|
|
|
|
}
|
|
|
|
h1 {
|
|
@include bold-48;
|
|
margin: 20px 0 govuk-spacing(6) 0;
|
|
}
|
|
|
|
p {
|
|
@include core-24;
|
|
color: $white;
|
|
margin: govuk-spacing(3) 0 govuk-spacing(6);
|
|
}
|
|
|
|
.govuk-link {
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $white;
|
|
}
|
|
|
|
&:hover,
|
|
&:active {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-section {
|
|
|
|
@include govuk-width-container;
|
|
margin-bottom: govuk-spacing(3);
|
|
|
|
h2 {
|
|
@include bold-27;
|
|
margin: 0 0 govuk-spacing(6);
|
|
}
|
|
|
|
.with-keyline {
|
|
border-top: 1px solid $border-colour;
|
|
padding: govuk-spacing(6) * 1.5 0 0 0;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
margin: 0 0 govuk-spacing(6) * 1.5 0;
|
|
}
|
|
|
|
}
|
|
|
|
&-big-number {
|
|
@include bold-48($tabular-numbers: true);
|
|
margin: 0 0 0 0;
|
|
}
|
|
|
|
}
|
|
|
|
.button-container {
|
|
line-height: 2.36;
|
|
}
|
|
|
|
.button-container__button {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.product-page-button {
|
|
|
|
// based on the govuk-button styles:
|
|
// https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/button/_button.scss
|
|
@include govuk-font($size: 24, $weight: bold);
|
|
color: $product-page-blue;
|
|
box-shadow: 0 $button-shadow-size 0 govuk-shade($colour: $product-page-blue, $percentage: 15%);
|
|
background: $white;
|
|
|
|
&:link,
|
|
&:visited,
|
|
&:hover {
|
|
color: $product-page-blue;
|
|
}
|
|
|
|
&:focus {
|
|
background: $white;
|
|
}
|
|
|
|
&:hover {
|
|
background: $light-blue-25;
|
|
outline: none;
|
|
}
|
|
|
|
}
|