mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-17 04:59:37 -04:00
e193358f78
This matches what we do with the regular product image, to make sure the text doesn’t overlap it.
133 lines
2.7 KiB
SCSS
133 lines
2.7 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;
|
|
background: $product-page-blue;
|
|
color: $white;
|
|
|
|
&-wrapper {
|
|
|
|
@include govuk-width-container;
|
|
user-select: none;
|
|
padding: 0 0 govuk-spacing(9) 0;
|
|
|
|
@include media(desktop) {
|
|
background-image: file-url('product/proposition-illustration.png');
|
|
background-size: 320px;
|
|
background-repeat: no-repeat;
|
|
background-position: right -6px top 100px;
|
|
}
|
|
|
|
&--alternative {
|
|
@include media(desktop) {
|
|
background-image: file-url('product/proposition-alternative.svg');
|
|
background-position: right 10px bottom 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
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 {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
color: $govuk-focus-text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&-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;
|
|
}
|
|
|
|
}
|