mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-02 17:48:50 -04:00
bc83ff6c09
Replaced `$gutter` and similar variables such as `$gutter-half` with the `govuk-spacing()` static spacing function. This uses `govuk-spacing()` instead of `$govuk-gutter` because `$govuk-gutter` should only be used for the gaps in between grid columns and we were mostly using `$gutter` to add more space around elements. There are other places in the SCSS files where we had hardcoded a measurement in px which could be replaced with `govuk-spacing`, but this commit only replaces the existing uses of `$gutter`.
120 lines
2.4 KiB
SCSS
120 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;
|
|
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;
|
|
}
|
|
|
|
}
|