diff --git a/.github/workflows/deploy-azure-function.yml b/.github/workflows/deploy-azure-function.yml index 227e4fbc9..de4043e1a 100644 --- a/.github/workflows/deploy-azure-function.yml +++ b/.github/workflows/deploy-azure-function.yml @@ -42,6 +42,11 @@ jobs: az_client_id: ${{ secrets.AZ_CLIENT_ID }} az_client_secret: ${{ secrets.AZ_CLIENT_SECRET }} + - name: Set storage account name var + shell: bash + run: echo "STORAGE_ACCOUNT=$(echo ${{ env.AZURE_STORAGEACCOUNT_NAME }} | sed -e "s/-//g")" >> $GITHUB_ENV + + - name: Get workflow IP address id: whats-my-ip uses: ./.github/actions/whats-my-ip-address @@ -51,8 +56,9 @@ jobs: # The Azure Storage Account's name contains no hyphens, unlike almost all of our other resources # Therefore remove hyphens from the string before using it as the account name run: | + az storage account update --name $STORAGE_ACCOUNT --resource-group ${{ env.AZURE_RESOURCEGROUP_NAME }} --public-network-access Enabled &> /dev/null az storage account network-rule add --resource-group ${{ env.AZURE_RESOURCEGROUP_NAME }} \ - --account-name $(echo ${{ env.AZURE_STORAGEACCOUNT_NAME }} | sed -e "s/-//g") \ + --account-name $STORAGE_ACCOUNT \ --ip-address ${{ steps.whats-my-ip.outputs.ip }} &> /dev/null - name: Deploy Azure Function App @@ -66,5 +72,6 @@ jobs: if: always() run: | az storage account network-rule remove --resource-group ${{ env.AZURE_RESOURCEGROUP_NAME }} \ - --account-name $(echo ${{ env.AZURE_STORAGEACCOUNT_NAME }} | sed -e "s/-//g") \ + --account-name $STORAGE_ACCOUNT \ --ip-address ${{ steps.whats-my-ip.outputs.ip }} &> /dev/null + az storage account update --name $STORAGE_ACCOUNT --resource-group ${{ env.AZURE_RESOURCEGROUP_NAME }} --public-network-access Disabled &> /dev/null diff --git a/contentandsupport b/contentandsupport index 68822846c..a350cbe2f 160000 --- a/contentandsupport +++ b/contentandsupport @@ -1 +1 @@ -Subproject commit 68822846c353c103a79c334eca60e8040ee7d943 +Subproject commit a350cbe2f45375a4b2b96857cc071d98cd158de4 diff --git a/docs/adr/0037-content-validation-process.md b/docs/adr/0037-content-validation-process.md new file mode 100644 index 000000000..2d950375a --- /dev/null +++ b/docs/adr/0037-content-validation-process.md @@ -0,0 +1,66 @@ +# 0037 - Content Validation Process + +* **Status**: proposed + +## Context and Problem Statement + +Certain fields in Contentful are mandatory, and we currently do not save any content items which are invalid, due to missing such fields. +This poses a problem with the following content creation process: +1. A question is created and details filled in +2. A new answer is added to that question +3. The answer is incomplete, so invalid, so doesn't save +4. Therefore no question -> answer relationship is saved +5. The answer is filled in +6. It then gets saved to the db on its own +7. the question -> answer relationship was never re-attempted, so still does not exist +8. The question then doesn't show this answer in production + +This can be resolved by republishing the question, but it is frustrating for content designers to have to repeatedly republish content. +It also leaves production missing content until someone notices, so we need a way to fix this issue. + +## Decision Drivers + +- Ease of development +- Reliability of the solution +- How testable the solution is +- Minimising risk of error for the function +- Minimising risk of error in the web app + +## Considered Options + +### Overnight/periodic job to run a content validator and retrieve missing items: + +- Pros + - Minimal regression risk to web app as it can stay exactly as is + - Can handle any error that has occured with the function, not just this, including it temporarily going down entirely +- Cons + - In the time between an issue arising and the periodic job running, the app could be broken due to missing relationships, so this may not be adequate + - May be resource intensive if run frequently, as it does full validation + - Requires developing a solution to fix the issues found by the validator and setting up periodic jobs + +### Making all database fields (except primary keys) nullable: + +- Pros + - Robust approach to the problem, it's highly likely to ensure the correct relationships save to the database every time + - Minimal risk of errors within the Azure function +- Cons + - High risk of hitting an error page in the web app when partial content exists, due to it expecting content that isn't there + - Would require extensive testing with partially complete content items to be sure of the web app not breaking + - Widespread changes within the code base, risk of regression + +### Having default values for simple fields, and nullable content references +Not every field can have a default, for instance a question section requires an interstitial page, which cannot be populated with a default value, +but we could make every field that can have a default, have a default and the others nullable. + +- Pros + - Lower risk than making all fields nullable, as it requires fewer changes to the web app + - Also a robust approach that is highly likely to work + - Relatively low risk of errors within the Azure function +- Cons + - May still be quite a few code changes involved in making all content references nullable, with the same risks as the option above (but less widespread) + - Needs careful testing of all types which are made nullable + - The defaults will render incomplete content "valid" when it isn't. This risk is small because Contentful doesn't allow publishing content with missing mandatory fields. So only UsePreview environments have a risk of showing blank content. + +## Decision Outcome + +Option 3. It's lowest risk and involvement whilst effectively resolving the problem. The suggested implementation will be to modify the way the Azure function maps a json object into database entities and add defaults at this stage, to minimise the changes required. diff --git a/docs/adr/README.md b/docs/adr/README.md index f55db6ced..0f7b5daae 100644 --- a/docs/adr/README.md +++ b/docs/adr/README.md @@ -11,7 +11,7 @@ General information about architectural decision records is available at > GetSectionSubmissionStatuses(string ca return await db.ToListAsync(db.GetSectionStatuses(categoryId, establishmentId)); } - public async Task GetSectionSubmissionStatusAsync(int establishmentId, + public async Task GetSectionSubmissionStatusAsync(int establishmentId, ISectionComponent section, bool completed, CancellationToken cancellationToken) { - var sectionStatus = db.GetSubmissions.Where(submission => submission.EstablishmentId == establishmentId && - submission.SectionId == section.Sys.Id && !submission.Deleted); + var sectionStatus = db.GetSubmissions.Where(submission => submission.EstablishmentId == establishmentId + && submission.SectionId == section.Sys.Id + && !submission.Deleted); var groupedAndLatest = GetLatestSubmissionStatus(sectionStatus, completed); var result = await db.FirstOrDefaultAsync(groupedAndLatest, cancellationToken); - return result ?? new SectionStatusNew() + return result ?? new SectionStatus() { SectionId = section.Sys.Id, Completed = false, @@ -46,8 +47,8 @@ public async Task GetSectionSubmissionStatusAsync(int establis /// /// /// - private static IQueryable GetLatestSubmissionStatus(IQueryable submissionStatuses, bool completed) - => submissionStatuses.Select(submission => new SectionStatusNew() + private static IQueryable GetLatestSubmissionStatus(IQueryable submissionStatuses, bool completed) + => submissionStatuses.Select(submission => new SectionStatus() { DateCreated = submission.DateCreated, Completed = submission.Completed, @@ -56,8 +57,5 @@ private static IQueryable GetLatestSubmissionStatus(IQueryable Status = submission.Completed ? Status.Completed : submission.Responses.Count != 0 ? Status.InProgress : Status.NotStarted, }) .GroupBy(submission => submission.SectionId) - .Select(grouping => grouping - .OrderByDescending(status => completed && status.Completed) - .ThenByDescending(status => status.DateCreated) - .First()); + .Select(grouping => grouping.OrderByDescending(status => completed && status.Completed).ThenByDescending(status => status.DateCreated).First()); } diff --git a/src/Dfe.PlanTech.Application/Submissions/Queries/SubmissionStatusProcessor.cs b/src/Dfe.PlanTech.Application/Submissions/Queries/SubmissionStatusProcessor.cs index 1258f3b33..7ff300295 100644 --- a/src/Dfe.PlanTech.Application/Submissions/Queries/SubmissionStatusProcessor.cs +++ b/src/Dfe.PlanTech.Application/Submissions/Queries/SubmissionStatusProcessor.cs @@ -24,7 +24,7 @@ public ISectionComponent Section } public IUser User { get; init; } public Question? NextQuestion { get; set; } - public SectionStatusNew? SectionStatus { get; private set; } + public SectionStatus? SectionStatus { get; private set; } public SubmissionStatus Status { get; set; } public SubmissionStatusProcessor(IGetSectionQuery getSectionQuery, diff --git a/src/Dfe.PlanTech.DatabaseUpgrader/Scripts/2024/20240827_1056_CreateGetCurrentSubmissionIdProcedure.sql b/src/Dfe.PlanTech.DatabaseUpgrader/Scripts/2024/20240827_1056_CreateGetCurrentSubmissionIdProcedure.sql new file mode 100644 index 000000000..f67e5c7da --- /dev/null +++ b/src/Dfe.PlanTech.DatabaseUpgrader/Scripts/2024/20240827_1056_CreateGetCurrentSubmissionIdProcedure.sql @@ -0,0 +1,15 @@ +CREATE OR ALTER PROCEDURE GetCurrentSubmissionId + @sectionId NVARCHAR(50), + @establishmentId INT, + @submissionId INT OUTPUT +AS + +SELECT @submissionId = ( + SELECT TOP 1 Id + FROM [dbo].[submission] + WHERE completed = 0 + AND deleted = 0 + AND sectionId = @sectionId + AND establishmentId = @establishmentId + ORDER BY dateCreated DESC +) \ No newline at end of file diff --git a/src/Dfe.PlanTech.DatabaseUpgrader/Scripts/2024/20240827_1058_UpdateSelectOrInsertSubmissionIdProcedure.sql b/src/Dfe.PlanTech.DatabaseUpgrader/Scripts/2024/20240827_1058_UpdateSelectOrInsertSubmissionIdProcedure.sql new file mode 100644 index 000000000..c6f97bf5f --- /dev/null +++ b/src/Dfe.PlanTech.DatabaseUpgrader/Scripts/2024/20240827_1058_UpdateSelectOrInsertSubmissionIdProcedure.sql @@ -0,0 +1,29 @@ +ALTER PROCEDURE SelectOrInsertSubmissionId + @sectionId NVARCHAR(50), + @sectionName NVARCHAR(50), + @establishmentId INT, + @submissionId INT OUTPUT +AS + +BEGIN TRY + BEGIN TRAN + EXEC GetCurrentSubmissionId + @sectionid=@sectionId, + @establishmentId=@establishmentId, + @submissionId=@submissionId OUTPUT + + IF @submissionId IS NULL + BEGIN + INSERT INTO [dbo].[submission] + (establishmentId, completed, sectionId, sectionName) + OUTPUT INSERTED.ID + VALUES + (@establishmentId, 0, @sectionId, @sectionName) + + SELECT @submissionId = SCOPE_IDENTITY() + END + COMMIT TRAN +END TRY +BEGIN CATCH + ROLLBACK TRAN +END CATCH diff --git a/src/Dfe.PlanTech.DatabaseUpgrader/Scripts/2024/20240827_1102_UpdateDeleteCurrentSubmissionProcedure.sql b/src/Dfe.PlanTech.DatabaseUpgrader/Scripts/2024/20240827_1102_UpdateDeleteCurrentSubmissionProcedure.sql new file mode 100644 index 000000000..cb4e6f4df --- /dev/null +++ b/src/Dfe.PlanTech.DatabaseUpgrader/Scripts/2024/20240827_1102_UpdateDeleteCurrentSubmissionProcedure.sql @@ -0,0 +1,25 @@ +CREATE OR ALTER PROCEDURE DeleteCurrentSubmission + @sectionId NVARCHAR(50), + @sectionName NVARCHAR(50), + @establishmentId INT +AS + BEGIN TRY + DECLARE @submissionId INT + + EXEC GetCurrentSubmissionId + @sectionid=@sectionId, + @establishmentId=@establishmentId, + @submissionId=@submissionId OUTPUT + + BEGIN TRAN + UPDATE S + SET deleted = 1 + FROM [dbo].[submission] S + WHERE S.id = @submissionId + COMMIT TRAN + + END TRY + BEGIN CATCH + ROLLBACK TRAN + END CATCH +GO diff --git a/src/Dfe.PlanTech.Domain/Interfaces/IGetSubmissionStatusesQuery.cs b/src/Dfe.PlanTech.Domain/Interfaces/IGetSubmissionStatusesQuery.cs index fdcf7ba06..4444729ba 100644 --- a/src/Dfe.PlanTech.Domain/Interfaces/IGetSubmissionStatusesQuery.cs +++ b/src/Dfe.PlanTech.Domain/Interfaces/IGetSubmissionStatusesQuery.cs @@ -7,7 +7,7 @@ public interface IGetSubmissionStatusesQuery { Task> GetSectionSubmissionStatuses(string categoryId); - Task GetSectionSubmissionStatusAsync(int establishmentId, + Task GetSectionSubmissionStatusAsync(int establishmentId, ISectionComponent section, bool completed, CancellationToken cancellationToken); diff --git a/src/Dfe.PlanTech.Domain/Submissions/Interfaces/ISubmissionStatusProcessor.cs b/src/Dfe.PlanTech.Domain/Submissions/Interfaces/ISubmissionStatusProcessor.cs index 5407ded4d..7c0afd85c 100644 --- a/src/Dfe.PlanTech.Domain/Submissions/Interfaces/ISubmissionStatusProcessor.cs +++ b/src/Dfe.PlanTech.Domain/Submissions/Interfaces/ISubmissionStatusProcessor.cs @@ -17,7 +17,7 @@ public interface ISubmissionStatusProcessor public SubmissionStatus Status { get; set; } public Question? NextQuestion { get; set; } public ISectionComponent Section { get; } - public SectionStatusNew? SectionStatus { get; } + public SectionStatus? SectionStatus { get; } Task GetJourneyStatusForSection(string sectionSlug, CancellationToken cancellationToken); Task GetJourneyStatusForSectionRecommendation(string sectionSlug, CancellationToken cancellationToken); diff --git a/src/Dfe.PlanTech.Domain/Submissions/Models/SectionStatus.cs b/src/Dfe.PlanTech.Domain/Submissions/Models/SectionStatus.cs index 679fa36c6..d0381f9a7 100644 --- a/src/Dfe.PlanTech.Domain/Submissions/Models/SectionStatus.cs +++ b/src/Dfe.PlanTech.Domain/Submissions/Models/SectionStatus.cs @@ -2,20 +2,7 @@ namespace Dfe.PlanTech.Domain.Submissions.Models; -public class SectionStatusDto -{ - public string SectionId { get; set; } = null!; - - public bool Completed { get; set; } - - public string? LastMaturity { get; set; } - - public DateTime DateCreated { get; set; } - - public DateTime DateUpdated { get; set; } -} - -public record SectionStatusNew +public record SectionStatus { public string SectionId { get; set; } = null!; diff --git a/src/Dfe.PlanTech.Domain/Submissions/Models/SectionStatusDto.cs b/src/Dfe.PlanTech.Domain/Submissions/Models/SectionStatusDto.cs new file mode 100644 index 000000000..a4dd9f90f --- /dev/null +++ b/src/Dfe.PlanTech.Domain/Submissions/Models/SectionStatusDto.cs @@ -0,0 +1,14 @@ +namespace Dfe.PlanTech.Domain.Submissions.Models; + +public class SectionStatusDto +{ + public string SectionId { get; set; } = null!; + + public bool Completed { get; set; } + + public string? LastMaturity { get; set; } + + public DateTime DateCreated { get; set; } + + public DateTime DateUpdated { get; set; } +} diff --git a/src/Dfe.PlanTech.Web.Node/styles/scss/overrides.scss b/src/Dfe.PlanTech.Web.Node/styles/scss/overrides.scss index 59c145712..471d07f69 100644 --- a/src/Dfe.PlanTech.Web.Node/styles/scss/overrides.scss +++ b/src/Dfe.PlanTech.Web.Node/styles/scss/overrides.scss @@ -1,81 +1,85 @@ @use "../../node_modules/dfe-frontend/packages/dfefrontend.scss"; * { - font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, - Cantarell, "Helvetica Neue", sans-serif !important; + font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, + Cantarell, "Helvetica Neue", sans-serif !important; } .logo { - display: block; - max-height: 32px; - max-width: 100%; + display: block; + max-height: 32px; + max-width: 100%; } .govuk-table { - margin-top: 30px; - margin-bottom: 30px; + margin-top: 30px; + margin-bottom: 30px; } a.govuk-home-link { - position: relative; - display: inline-block; - margin-top: 15px; - margin-bottom: 15px; + position: relative; + display: inline-block; + margin-top: 15px; + margin-bottom: 15px; } //Remove the padding from paragraphs within lists li { - p.govuk-body { - margin-top: 0px; - margin-bottom: 0px; - } + p.govuk-body { + margin-top: 0px; + margin-bottom: 0px; + } } div.govuk-width-container { - @extend .dfe-width-container; + @extend .dfe-width-container; } strong.govuk-tag { - max-width: fit-content; - vertical-align: middle; + max-width: fit-content; + vertical-align: middle; - &:first-letter { - text-transform: uppercase; - } + &:first-letter { + text-transform: uppercase; + } } @media (min-width: 40.0625em) { - .dfe-self-assessment-list { - > .govuk-summary-list__row { - height: 4rem; + .dfe-self-assessment-list { + > .govuk-summary-list__row { + height: 4rem; + } } - } } .govuk-summary-list__key, .govuk-summary-list__value { - vertical-align: middle; - - > .govuk-button { vertical-align: middle; - } + + > .govuk-button { + vertical-align: middle; + } } .dfe-header { - border-bottom: 10px solid #347ca9 + border-bottom: 10px solid #347ca9; } .share-html-img { - width: 100px; - float: left; - padding-right: 10px; + width: 100px; + float: left; + padding-right: 10px; } //Hide GTM iframe iframe { - display: none; + display: none; } .whitespace-preline { - white-space: pre-line; + white-space: pre-line; +} + +button.govuk-button--secondary { + background-color: white; } diff --git a/src/Dfe.PlanTech.Web/Views/Shared/_Footer.cshtml b/src/Dfe.PlanTech.Web/Views/Shared/_Footer.cshtml index f2e52c8d1..f990657e8 100644 --- a/src/Dfe.PlanTech.Web/Views/Shared/_Footer.cshtml +++ b/src/Dfe.PlanTech.Web/Views/Shared/_Footer.cshtml @@ -2,7 +2,7 @@
-

Support links

+ @await Component.InvokeAsync("FooterLinks") ` element\n/// @type Number (unit)\n$mq-base-font-size: 16px !default;\n\n/// Responsive mode\n///\n/// Set to `false` to enable support for browsers that do not support @media queries,\n/// (IE <= 8, Firefox <= 3, Opera <= 9)\n///\n/// You could create a stylesheet served exclusively to older browsers,\n/// where @media queries are rasterized\n///\n/// @example scss\n/// // old-ie.scss\n/// $mq-responsive: false;\n/// @import 'main'; // @media queries in this file will be rasterized up to $mq-static-breakpoint\n/// // larger breakpoints will be ignored\n///\n/// @type Boolean\n/// @link https://github.com/sass-mq/sass-mq#responsive-mode-off Disabled responsive mode documentation\n$mq-responsive: true !default;\n\n/// Breakpoint list\n///\n/// Name your breakpoints in a way that creates a ubiquitous language\n/// across team members. It will improve communication between\n/// stakeholders, designers, developers, and testers.\n///\n/// @type Map\n/// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint Full documentation and examples\n$mq-breakpoints: (\n mobile: 320px,\n tablet: 740px,\n desktop: 980px,\n wide: 1300px\n) !default;\n\n/// Static breakpoint (for fixed-width layouts)\n///\n/// Define the breakpoint from $mq-breakpoints that should\n/// be used as the target width for the fixed-width layout\n/// (i.e. when $mq-responsive is set to 'false') in a old-ie.scss\n///\n/// @example scss\n/// // tablet-only.scss\n/// //\n/// // Ignore all styles above tablet breakpoint,\n/// // and fix the styles (e.g. layout) at tablet width\n/// $mq-responsive: false;\n/// $mq-static-breakpoint: tablet;\n/// @import 'main'; // @media queries in this file will be rasterized up to tablet\n/// // larger breakpoints will be ignored\n///\n/// @type String\n/// @link https://github.com/sass-mq/sass-mq#adding-custom-breakpoints Full documentation and examples\n$mq-static-breakpoint: desktop !default;\n\n/// Show breakpoints in the top right corner\n///\n/// If you want to display the currently active breakpoint in the top\n/// right corner of your site during development, add the breakpoints\n/// to this list, ordered by width, e.g. (mobile, tablet, desktop).\n///\n/// @type map\n$mq-show-breakpoints: () !default;\n\n/// Customize the media type (e.g. `@media screen` or `@media print`)\n/// By default sass-mq uses an \"all\" media type (`@media all and …`)\n///\n/// @type String\n/// @link https://github.com/sass-mq/sass-mq#changing-media-type Full documentation and examples\n$mq-media-type: all !default;\n\n/// Convert pixels to ems\n///\n/// @param {Number} $px - value to convert\n/// @param {Number} $base-font-size ($mq-base-font-size) - `` font size\n///\n/// @example scss\n/// $font-size-in-ems: mq-px2em(16px);\n/// p { font-size: mq-px2em(16px); }\n///\n/// @requires $mq-base-font-size\n/// @returns {Number}\n@function mq-px2em($px, $base-font-size: $mq-base-font-size) {\n @if unitless($px) {\n @warn \"Assuming #{$px} to be in pixels, attempting to convert it into pixels.\";\n @return mq-px2em($px * 1px, $base-font-size);\n } @else if unit($px) == em {\n @return $px;\n }\n @return ($px / $base-font-size) * 1em;\n}\n\n/// Get a breakpoint's width\n///\n/// @param {String} $name - Name of the breakpoint. One of $mq-breakpoints\n///\n/// @example scss\n/// $tablet-width: mq-get-breakpoint-width(tablet);\n/// @media (min-width: mq-get-breakpoint-width(desktop)) {}\n///\n/// @requires {Variable} $mq-breakpoints\n///\n/// @returns {Number} Value in pixels\n@function mq-get-breakpoint-width($name, $breakpoints: $mq-breakpoints) {\n @if map-has-key($breakpoints, $name) {\n @return map-get($breakpoints, $name);\n } @else {\n @warn \"Breakpoint #{$name} wasn't found in $breakpoints.\";\n }\n}\n\n/// Media Query mixin\n///\n/// @param {String | Boolean} $from (false) - One of $mq-breakpoints\n/// @param {String | Boolean} $until (false) - One of $mq-breakpoints\n/// @param {String | Boolean} $and (false) - Additional media query parameters\n/// @param {String} $media-type ($mq-media-type) - Media type: screen, print…\n///\n/// @ignore Undocumented API, for advanced use only:\n/// @ignore @param {Map} $breakpoints ($mq-breakpoints)\n/// @ignore @param {String} $static-breakpoint ($mq-static-breakpoint)\n///\n/// @content styling rules, wrapped into a @media query when $responsive is true\n///\n/// @requires {Variable} $mq-media-type\n/// @requires {Variable} $mq-breakpoints\n/// @requires {Variable} $mq-static-breakpoint\n/// @requires {function} mq-px2em\n/// @requires {function} mq-get-breakpoint-width\n///\n/// @link https://github.com/sass-mq/sass-mq#responsive-mode-on-default Full documentation and examples\n///\n/// @example scss\n/// .element {\n/// @include mq($from: mobile) {\n/// color: red;\n/// }\n/// @include mq($until: tablet) {\n/// color: blue;\n/// }\n/// @include mq(mobile, tablet) {\n/// color: green;\n/// }\n/// @include mq($from: tablet, $and: '(orientation: landscape)') {\n/// color: teal;\n/// }\n/// @include mq(950px) {\n/// color: hotpink;\n/// }\n/// @include mq(tablet, $media-type: screen) {\n/// color: hotpink;\n/// }\n/// // Advanced use:\n/// $my-breakpoints: (L: 900px, XL: 1200px);\n/// @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {\n/// color: hotpink;\n/// }\n/// }\n@mixin mq(\n $from: false,\n $until: false,\n $and: false,\n $media-type: $mq-media-type,\n $breakpoints: $mq-breakpoints,\n $responsive: $mq-responsive,\n $static-breakpoint: $mq-static-breakpoint\n) {\n $min-width: 0;\n $max-width: 0;\n $media-query: '';\n\n // From: this breakpoint (inclusive)\n @if $from {\n @if type-of($from) == number {\n $min-width: mq-px2em($from);\n } @else {\n $min-width: mq-px2em(mq-get-breakpoint-width($from, $breakpoints));\n }\n }\n\n // Until: that breakpoint (exclusive)\n @if $until {\n @if type-of($until) == number {\n $max-width: mq-px2em($until);\n } @else {\n $max-width: mq-px2em(mq-get-breakpoint-width($until, $breakpoints)) - .01em;\n }\n }\n\n // Responsive support is disabled, rasterize the output outside @media blocks\n // The browser will rely on the cascade itself.\n @if $responsive == false {\n $static-breakpoint-width: mq-get-breakpoint-width($static-breakpoint, $breakpoints);\n $target-width: mq-px2em($static-breakpoint-width);\n\n // Output only rules that start at or span our target width\n @if (\n $and == false\n and $min-width <= $target-width\n and (\n $until == false or $max-width >= $target-width\n )\n and $media-type != 'print'\n ) {\n @content;\n }\n }\n\n // Responsive support is enabled, output rules inside @media queries\n @else {\n @if $min-width != 0 { $media-query: '#{$media-query} and (min-width: #{$min-width})'; }\n @if $max-width != 0 { $media-query: '#{$media-query} and (max-width: #{$max-width})'; }\n @if $and { $media-query: '#{$media-query} and #{$and}'; }\n\n // Remove unnecessary media query prefix 'all and '\n @if ($media-type == 'all' and $media-query != '') {\n $media-type: '';\n $media-query: str-slice(unquote($media-query), 6);\n }\n\n @media #{$media-type + $media-query} {\n @content;\n }\n }\n}\n\n/// Quick sort\n///\n/// @author Sam Richards\n/// @access private\n/// @param {List} $list - List to sort\n/// @returns {List} Sorted List\n@function _mq-quick-sort($list) {\n $less: ();\n $equal: ();\n $large: ();\n\n @if length($list) > 1 {\n $seed: nth($list, ceil(length($list) / 2));\n\n @each $item in $list {\n @if ($item == $seed) {\n $equal: append($equal, $item);\n } @else if ($item < $seed) {\n $less: append($less, $item);\n } @else if ($item > $seed) {\n $large: append($large, $item);\n }\n }\n\n @return join(join(_mq-quick-sort($less), $equal), _mq-quick-sort($large));\n }\n\n @return $list;\n}\n\n/// Sort a map by values (works with numbers only)\n///\n/// @access private\n/// @param {Map} $map - Map to sort\n/// @returns {Map} Map sorted by value\n@function _mq-map-sort-by-value($map) {\n $map-sorted: ();\n $map-keys: map-keys($map);\n $map-values: map-values($map);\n $map-values-sorted: _mq-quick-sort($map-values);\n\n // Reorder key/value pairs based on key values\n @each $value in $map-values-sorted {\n $index: index($map-values, $value);\n $key: nth($map-keys, $index);\n $map-sorted: map-merge($map-sorted, ($key: $value));\n\n // Unset the value in $map-values to prevent the loop\n // from finding the same index twice\n $map-values: set-nth($map-values, $index, 0);\n }\n\n @return $map-sorted;\n}\n\n/// Add a breakpoint\n///\n/// @param {String} $name - Name of the breakpoint\n/// @param {Number} $width - Width of the breakpoint\n///\n/// @requires {Variable} $mq-breakpoints\n///\n/// @example scss\n/// @include mq-add-breakpoint(tvscreen, 1920px);\n/// @include mq(tvscreen) {}\n@mixin mq-add-breakpoint($name, $width) {\n $new-breakpoint: ($name: $width);\n $mq-breakpoints: map-merge($mq-breakpoints, $new-breakpoint) !global;\n $mq-breakpoints: _mq-map-sort-by-value($mq-breakpoints) !global;\n}\n\n/// Show the active breakpoint in the top right corner of the viewport\n/// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint\n///\n/// @param {List} $show-breakpoints ($mq-show-breakpoints) - List of breakpoints to show in the top right corner\n/// @param {Map} $breakpoints ($mq-breakpoints) - Breakpoint names and sizes\n///\n/// @requires {Variable} $mq-breakpoints\n/// @requires {Variable} $mq-show-breakpoints\n///\n/// @example scss\n/// // Show breakpoints using global settings\n/// @include mq-show-breakpoints;\n///\n/// // Show breakpoints using custom settings\n/// @include mq-show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px));\n@mixin mq-show-breakpoints($show-breakpoints: $mq-show-breakpoints, $breakpoints: $mq-breakpoints) {\n body::before {\n background-color: #FCF8E3;\n border-bottom: 1px solid #FBEED5;\n border-left: 1px solid #FBEED5;\n color: #C09853;\n font: small-caption;\n padding: 3px 6px;\n pointer-events: none;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 100;\n\n // Loop through the breakpoints that should be shown\n @each $show-breakpoint in $show-breakpoints {\n $width: mq-get-breakpoint-width($show-breakpoint, $breakpoints);\n @include mq($show-breakpoint, $breakpoints: $breakpoints) {\n content: \"#{$show-breakpoint} ≥ #{$width} (#{mq-px2em($width)})\";\n }\n }\n }\n}\n\n@if length($mq-show-breakpoints) > 0 {\n @include mq-show-breakpoints;\n}\n\n/*# sourceMappingURL=_sass-mq.scss.map */\n", "////\n/// @group helpers/accessibility\n////\n\n/// Focused text\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Used for interactive text-based elements.\n///\n/// @access public\n\n@mixin govuk-focused-text {\n // When colours are overridden, for example when users have a dark mode,\n // backgrounds and box-shadows disappear, so we need to ensure there's a\n // transparent outline which will be set to a visible colour.\n\n outline: $govuk-focus-width solid transparent;\n color: $govuk-focus-text-colour;\n background-color: $govuk-focus-colour;\n box-shadow:\n 0 -2px $govuk-focus-colour,\n 0 4px $govuk-focus-text-colour;\n // When link is focussed, hide the default underline since the\n // box shadow adds the \"underline\"\n text-decoration: none;\n\n // When a focused box is broken by e.g. a line break, ensure that the\n // box-shadow is applied to each fragment independently.\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n}\n\n/// Focused box\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Unlike govuk-focused-text, which only draws an underline below the element,\n/// govuk-focused-box draws an outline around all sides of the element.\n/// Best used for non-text content contained within links.\n///\n/// @access public\n\n@mixin govuk-focused-box {\n outline: $govuk-focus-width solid transparent;\n box-shadow:\n 0 0 0 4px $govuk-focus-colour,\n 0 0 0 8px $govuk-focus-text-colour;\n}\n\n/*# sourceMappingURL=_focused.scss.map */\n", "////\n/// @group settings/colours\n////\n\n@import \"../helpers/colour\";\n\n// =========================================================\n// Generic\n// =========================================================\n\n/// Brand colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-brand-colour: govuk-colour(\"blue\") !default;\n\n/// Text colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-text-colour: govuk-colour(\"black\") !default;\n\n/// Canvas background colour\n///\n/// Used by the footer component and template to give the illusion of a long\n/// footer.\n///\n/// @type Colour\n/// @access public\n\n$govuk-canvas-background-colour: govuk-colour(\"light-grey\") !default;\n\n/// Body background colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-body-background-colour: govuk-colour(\"white\") !default;\n\n/// Text colour for print media\n///\n/// Use 'true black' to avoid printers using colour ink to print body text\n///\n/// @type Colour\n/// @access public\n\n$govuk-print-text-colour: #000000 !default;\n\n/// Secondary text colour\n///\n/// Used in for example 'muted' text and help text.\n///\n/// @type Colour\n/// @access public\n\n$govuk-secondary-text-colour: govuk-colour(\"dark-grey\") !default;\n\n/// Focus colour\n///\n/// Used for outline (and background, where appropriate) when interactive\n/// elements (links, form controls) have keyboard focus.\n///\n/// @type Colour\n/// @access public\n\n$govuk-focus-colour: govuk-colour(\"yellow\") !default;\n\n/// Focused text colour\n///\n/// Ensure that the contrast between the text and background colour passes\n/// WCAG Level AA contrast requirements.\n///\n/// @type Colour\n/// @access public\n\n$govuk-focus-text-colour: govuk-colour(\"black\") !default;\n\n/// Error colour\n///\n/// Used to highlight error messages and form controls in an error state\n///\n/// @type Colour\n/// @access public\n\n$govuk-error-colour: govuk-colour(\"red\") !default;\n\n/// Success colour\n///\n/// Used to highlight success messages and banners\n///\n/// @type Colour\n/// @access public\n\n$govuk-success-colour: govuk-colour(\"green\") !default;\n\n/// Border colour\n///\n/// Used in for example borders, separators, rules and keylines.\n///\n/// @type Colour\n/// @access public\n\n$govuk-border-colour: govuk-colour(\"mid-grey\") !default;\n\n/// Input border colour\n///\n/// Used for form inputs and controls\n///\n/// @type Colour\n/// @access public\n\n$govuk-input-border-colour: govuk-colour(\"black\") !default;\n\n/// Input hover colour\n///\n/// Used for hover states on form controls\n///\n/// @type Colour\n/// @access public\n\n$govuk-hover-colour: govuk-colour(\"mid-grey\") !default;\n\n// =============================================================================\n// Links\n// =============================================================================\n\n/// Link colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-link-colour: govuk-colour(\"blue\") !default;\n\n/// Visited link colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-link-visited-colour: govuk-colour(\"purple\") !default;\n\n/// Link hover colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-link-hover-colour: govuk-colour(\"dark-blue\") !default;\n\n/// Active link colour\n///\n/// @type Colour\n/// @access public\n\n$govuk-link-active-colour: govuk-colour(\"black\") !default;\n\n/*# sourceMappingURL=_colours-applied.scss.map */\n", "@include govuk-exports(\"govuk/core/lists\") {\n %govuk-list {\n @include govuk-font($size: 19);\n @include govuk-text-colour;\n margin-top: 0;\n @include govuk-responsive-margin(4, \"bottom\");\n padding-left: 0;\n list-style-type: none;\n\n // Add a top margin for nested lists\n %govuk-list {\n margin-top: govuk-spacing(2);\n }\n }\n\n %govuk-list > li {\n // Lists without numbers or bullets should always have extra space between\n // list items. Lists with numbers or bullets only have this extra space on\n // tablet and above\n margin-bottom: govuk-spacing(1);\n }\n\n .govuk-list {\n @extend %govuk-list;\n }\n\n %govuk-list--bullet {\n padding-left: govuk-spacing(4);\n list-style-type: disc;\n }\n\n %govuk-list--number {\n padding-left: govuk-spacing(4);\n list-style-type: decimal;\n }\n\n %govuk-list--bullet > li,\n %govuk-list--number > li {\n margin-bottom: 0;\n\n @include govuk-media-query($from: tablet) {\n margin-bottom: govuk-spacing(1);\n }\n }\n\n %govuk-list--spaced > li {\n margin-bottom: govuk-spacing(2);\n\n @include govuk-media-query($from: tablet) {\n margin-bottom: govuk-spacing(3);\n }\n }\n\n .govuk-list--bullet {\n @extend %govuk-list--bullet;\n }\n\n .govuk-list--number {\n @extend %govuk-list--number;\n }\n\n .govuk-list--spaced {\n @extend %govuk-list--spaced;\n }\n}\n\n/*# sourceMappingURL=_lists.scss.map */\n", "////\n/// @group helpers/spacing\n////\n\n/// Single point spacing\n///\n/// Returns measurement corresponding to the spacing point requested.\n///\n/// @param {Number} $spacing-point - Point on the spacing scale\n/// (set in `settings/_spacing.scss`)\n///\n/// @returns {String} Spacing measurement eg. 10px\n///\n/// @example scss\n/// .element {\n/// padding: govuk-spacing(5);\n/// }\n///\n/// @example scss Using negative spacing\n/// .element {\n/// margin-top: govuk-spacing(-1);\n/// }\n///\n/// @example scss Marking spacing declarations as important\n/// .element {\n/// margin-top: govuk-spacing(1) !important;\n/// }\n///\n/// @access public\n\n@function govuk-spacing($spacing-point) {\n $actual-input-type: type-of($spacing-point);\n @if $actual-input-type != \"number\" {\n @error \"Expected a number (integer), but got a \"\n + \"#{$actual-input-type}.\";\n }\n\n $is-negative: false;\n @if $spacing-point < 0 {\n $is-negative: true;\n $spacing-point: abs($spacing-point);\n }\n\n @if not map-has-key($govuk-spacing-points, $spacing-point) {\n @error \"Unknown spacing variable `#{$spacing-point}`. Make sure you are using a point from the spacing scale in `_settings/spacing.scss`.\";\n }\n\n $value: map-get($govuk-spacing-points, $spacing-point);\n @return if($is-negative, $value * -1, $value);\n}\n\n/// Responsive spacing\n///\n/// Adds responsive spacing (either padding or margin, depending on `$property`)\n/// by fetching a 'spacing map' from the responsive spacing scale, which defines\n/// different spacing values at different breakpoints.\n///\n/// To generate responsive spacing, use 'govuk-responsive-margin' or\n/// 'govuk-responsive-padding' mixins\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $property - Property to add spacing to (e.g. 'margin')\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing by\n///\n/// @access private\n\n@mixin _govuk-responsive-spacing(\n $responsive-spacing-point,\n $property,\n $direction: \"all\",\n $important: false,\n $adjustment: false\n) {\n $actual-input-type: type-of($responsive-spacing-point);\n @if $actual-input-type != \"number\" {\n @error \"Expected a number (integer), but got a \" + \"#{$actual-input-type}.\";\n }\n\n @if not map-has-key($govuk-spacing-responsive-scale, $responsive-spacing-point) {\n @error \"Unknown spacing point `#{$responsive-spacing-point}`. Make sure you are using a point from the \"\n + \"responsive spacing scale in `_settings/spacing.scss`.\";\n }\n\n // Make sure that the return value from `_settings/spacing.scss` is a map.\n $scale-map: map-get($govuk-spacing-responsive-scale, $responsive-spacing-point);\n $actual-map-type: type-of($scale-map);\n @if $actual-map-type != \"map\" {\n @error \"Expected a number (integer), but got a \"\n + \"#{$actual-map-type}. Make sure you are using a map to set the responsive spacing in `_settings/spacing.scss`)\";\n }\n\n // Loop through each breakpoint in the map\n @each $breakpoint, $breakpoint-value in $scale-map {\n @if $adjustment {\n $breakpoint-value: $breakpoint-value + $adjustment;\n }\n\n // The 'null' breakpoint is for mobile.\n @if not $breakpoint {\n @if $direction == all {\n #{$property}: $breakpoint-value if($important, !important, null);\n } @else {\n #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);\n }\n } @else {\n @include govuk-media-query($from: $breakpoint) {\n @if $direction == all {\n #{$property}: $breakpoint-value if($important, !important, null);\n } @else {\n #{$property}-#{$direction}: $breakpoint-value if($important, !important, null);\n }\n }\n }\n }\n}\n\n/// Responsive margin\n///\n/// Adds responsive margin by fetching a 'spacing map' from the responsive\n/// spacing scale, which defines different spacing values at different\n/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.\n///\n/// @see {mixin} _govuk-responsive-spacing\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing by\n///\n/// @example scss\n/// .element {\n/// @include govuk-responsive-margin(6, \"left\", $adjustment: 1px);\n/// }\n///\n/// @access public\n\n@mixin govuk-responsive-margin($responsive-spacing-point, $direction: \"all\", $important: false, $adjustment: false) {\n @include _govuk-responsive-spacing($responsive-spacing-point, \"margin\", $direction, $important, $adjustment);\n}\n\n/// Responsive padding\n///\n/// Adds responsive padding by fetching a 'spacing map' from the responsive\n/// spacing scale, which defines different spacing values at different\n/// breakpoints. Wrapper for the `_govuk-responsive-spacing` mixin.\n///\n/// @see {mixin} _govuk-responsive-spacing\n///\n/// @param {Number} $responsive-spacing-point - Point on the responsive spacing\n/// scale, corresponds to a map of breakpoints and spacing values\n/// @param {String} $direction [all] - Direction to add spacing to\n/// (`top`, `right`, `bottom`, `left`, `all`)\n/// @param {Boolean} $important [false] - Whether to mark as `!important`\n/// @param {Number} $adjustment [false] - Offset to adjust spacing\n///\n/// @example scss\n/// .element {\n/// @include govuk-responsive-padding(6, \"left\", $adjustment: 1px);\n/// }\n///\n/// @access public\n\n@mixin govuk-responsive-padding($responsive-spacing-point, $direction: \"all\", $important: false, $adjustment: false) {\n @include _govuk-responsive-spacing($responsive-spacing-point, \"padding\", $direction, $important, $adjustment);\n}\n\n/*# sourceMappingURL=_spacing.scss.map */\n", "@include govuk-exports(\"govuk/core/typography\") {\n // Headings\n\n %govuk-heading-xl {\n @include govuk-text-colour;\n @include govuk-font($size: 48, $weight: bold);\n\n display: block;\n\n margin-top: 0;\n @include govuk-responsive-margin(8, \"bottom\");\n }\n\n .govuk-heading-xl {\n @extend %govuk-heading-xl;\n }\n\n %govuk-heading-l {\n @include govuk-text-colour;\n @include govuk-font($size: 36, $weight: bold);\n\n display: block;\n\n margin-top: 0;\n @include govuk-responsive-margin(6, \"bottom\");\n }\n\n .govuk-heading-l {\n @extend %govuk-heading-l;\n }\n\n %govuk-heading-m {\n @include govuk-text-colour;\n @include govuk-font($size: 24, $weight: bold);\n\n display: block;\n\n margin-top: 0;\n @include govuk-responsive-margin(4, \"bottom\");\n }\n\n .govuk-heading-m {\n @extend %govuk-heading-m;\n }\n\n %govuk-heading-s {\n @include govuk-text-colour;\n @include govuk-font($size: 19, $weight: bold);\n\n display: block;\n\n margin-top: 0;\n @include govuk-responsive-margin(4, \"bottom\");\n }\n\n .govuk-heading-s {\n @extend %govuk-heading-s;\n }\n\n // Captions to be used inside headings\n\n .govuk-caption-xl {\n @include govuk-font($size: 27);\n\n display: block;\n\n margin-bottom: govuk-spacing(1);\n\n color: $govuk-secondary-text-colour;\n }\n\n .govuk-caption-l {\n @include govuk-font($size: 24);\n\n display: block;\n\n margin-bottom: govuk-spacing(1);\n color: $govuk-secondary-text-colour;\n\n @include govuk-media-query($from: tablet) {\n margin-bottom: 0;\n }\n }\n\n .govuk-caption-m {\n @include govuk-font($size: 19);\n\n display: block;\n\n color: $govuk-secondary-text-colour;\n }\n\n // Body (paragraphs)\n\n %govuk-body-l {\n @include govuk-text-colour;\n @include govuk-font($size: 24);\n\n margin-top: 0;\n @include govuk-responsive-margin(6, \"bottom\");\n }\n\n .govuk-body-l {\n @extend %govuk-body-l;\n }\n\n %govuk-body-m {\n @include govuk-text-colour;\n @include govuk-font($size: 19);\n\n margin-top: 0;\n @include govuk-responsive-margin(4, \"bottom\");\n }\n\n .govuk-body-m {\n @extend %govuk-body-m;\n }\n\n %govuk-body-s {\n @include govuk-text-colour;\n @include govuk-font($size: 16);\n\n margin-top: 0;\n @include govuk-responsive-margin(4, \"bottom\");\n }\n\n .govuk-body-s {\n @extend %govuk-body-s;\n }\n\n // @deprecated\n %govuk-body-xs {\n @include govuk-text-colour;\n @include govuk-font($size: _14);\n\n margin-top: 0;\n @include govuk-responsive-margin(4, \"bottom\");\n }\n\n // @deprecated\n .govuk-body-xs {\n @extend %govuk-body-xs;\n }\n\n // Usage aliases\n\n // Using extend to alias means we also inherit any contextual adjustments that\n // refer to the 'original' class name\n\n .govuk-body-lead {\n @extend %govuk-body-l;\n }\n\n .govuk-body {\n @extend %govuk-body-m;\n }\n\n // Contextual adjustments\n // Add top padding to headings that appear directly after paragraphs.\n\n %govuk-body-l + %govuk-heading-l {\n padding-top: govuk-spacing(1);\n\n @include govuk-media-query($from: tablet) {\n padding-top: govuk-spacing(2);\n }\n }\n\n %govuk-body-m + %govuk-heading-l,\n %govuk-body-s + %govuk-heading-l,\n %govuk-list + %govuk-heading-l {\n @include govuk-responsive-padding(4, \"top\");\n }\n\n %govuk-body-m + %govuk-heading-m,\n %govuk-body-s + %govuk-heading-m,\n %govuk-list + %govuk-heading-m,\n %govuk-body-m + %govuk-heading-s,\n %govuk-body-s + %govuk-heading-s,\n %govuk-list + %govuk-heading-s {\n padding-top: govuk-spacing(1);\n\n @include govuk-media-query($from: tablet) {\n padding-top: govuk-spacing(2);\n }\n }\n}\n\n/*# sourceMappingURL=_typography.scss.map */\n", "@include govuk-exports(\"govuk/core/section-break\") {\n %govuk-section-break {\n margin: 0;\n border: 0;\n }\n\n .govuk-section-break {\n @extend %govuk-section-break;\n }\n\n // Sizes\n\n %govuk-section-break--xl {\n @include govuk-responsive-margin(8, \"top\");\n @include govuk-responsive-margin(8, \"bottom\");\n }\n\n .govuk-section-break--xl {\n @extend %govuk-section-break--xl;\n }\n\n %govuk-section-break--l {\n @include govuk-responsive-margin(6, \"top\");\n @include govuk-responsive-margin(6, \"bottom\");\n }\n\n .govuk-section-break--l {\n @extend %govuk-section-break--l;\n }\n\n %govuk-section-break--m {\n @include govuk-responsive-margin(4, \"top\");\n @include govuk-responsive-margin(4, \"bottom\");\n }\n\n .govuk-section-break--m {\n @extend %govuk-section-break--m;\n }\n\n // Visible variant\n\n %govuk-section-break--visible {\n border-bottom: 1px solid $govuk-border-colour;\n }\n\n .govuk-section-break--visible {\n @extend %govuk-section-break--visible;\n }\n}\n\n/*# sourceMappingURL=_section-break.scss.map */\n", "@import \"../base\";\n\n@include govuk-exports(\"govuk/objects/button-group\") {\n // Button groups can be used to group buttons and links together as a group.\n //\n // Within a button group:\n //\n // - links are styled to line up visually with the buttons, including being\n // centre-aligned on mobile\n // - spacing between the buttons and links is handled automatically, including\n // when they wrap across multiple lines\n .govuk-button-group {\n $horizontal-gap: govuk-spacing(3);\n $vertical-gap: govuk-spacing(3);\n\n // These need to be kept in sync with the button component's styles\n $button-padding: govuk-spacing(2);\n $button-shadow-size: $govuk-border-width-form-element;\n\n $link-spacing: govuk-spacing(1);\n\n @include govuk-responsive-margin(6, \"bottom\", $adjustment: $vertical-gap * -1);\n\n // Flexbox is used to center-align links on mobile, align everything along\n // the baseline on tablet and above, and to removes extra whitespace that\n // we'd get between the buttons and links because they're inline-blocks.\n //\n // Ideally we'd use `gap` with flexbox rather than having to do it all with\n // margins, but unfortunately the support isn't there (yet) and @supports\n // doesn't play nicely with it\n // (https://github.com/w3c/csswg-drafts/issues/3559)\n display: flex;\n flex-direction: column;\n align-items: center;\n\n // Give links within the button group the same font-size and line-height\n // as buttons.\n //\n // Because we want the focus state to be tight around the link text, we use\n // margins where the buttons would use padding.\n .govuk-link {\n @include govuk-font($size: 19, $line-height: 19px);\n display: inline-block;\n // Prevent links overflowing their container in IE10/11 because of bug\n // with align-items: center\n max-width: 100%;\n margin-top: $link-spacing;\n margin-bottom: $link-spacing + $vertical-gap;\n text-align: center;\n }\n\n // Reduce the bottom margin to the size of the vertical gap (accommodating\n // the button shadow) – the 'lost' margin is moved to the button-group.\n .govuk-button {\n margin-bottom: $vertical-gap + $button-shadow-size;\n }\n\n // On tablet and above, we also introduce a 'column gap' between the\n // buttons and links in each row and left align links\n @include govuk-media-query($from: tablet) {\n // Cancel out the column gap for the last item in each row\n margin-right: ($horizontal-gap * -1);\n\n flex-direction: row;\n flex-wrap: wrap;\n align-items: baseline;\n\n .govuk-button,\n .govuk-link {\n margin-right: $horizontal-gap;\n }\n\n .govuk-link {\n text-align: left;\n }\n }\n }\n}\n\n/*# sourceMappingURL=_button-group.scss.map */\n", "@import \"../base\";\n\n@include govuk-exports(\"govuk/objects/form-group\") {\n .govuk-form-group {\n @include govuk-clearfix;\n @include govuk-responsive-margin(6, \"bottom\");\n\n .govuk-form-group:last-of-type {\n margin-bottom: 0; // Remove margin from last item in nested groups\n }\n }\n\n .govuk-form-group--error {\n padding-left: govuk-spacing(3);\n border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;\n\n .govuk-form-group {\n // Reset error styles in nested form groups that might have error class\n padding: 0;\n border: 0;\n }\n }\n}\n\n/*# sourceMappingURL=_form-group.scss.map */\n", "////\n/// @group helpers/layout\n////\n\n/// Clear floated content within a container using a pseudo element\n///\n/// @access public\n\n@mixin govuk-clearfix {\n &::after {\n content: \"\";\n display: block;\n clear: both;\n }\n}\n\n/*# sourceMappingURL=_clearfix.scss.map */\n", "@import \"../base\";\n\n@include govuk-exports(\"govuk/objects/grid\") {\n .govuk-grid-row {\n @include govuk-clearfix;\n margin-right: -($govuk-gutter-half);\n margin-left: -($govuk-gutter-half);\n }\n\n @each $width in map-keys($govuk-grid-widths) {\n .govuk-grid-column-#{$width} {\n @include govuk-grid-column($width);\n }\n }\n\n // These *must* be defined in a separate loop as they have the same\n // specificity as the non-breakpoint specific classes, so need to appear after\n // them in the outputted CSS\n @each $width in map-keys($govuk-grid-widths) {\n .govuk-grid-column-#{$width}-from-desktop {\n @include govuk-grid-column($width, $at: desktop);\n }\n }\n}\n\n/*# sourceMappingURL=_grid.scss.map */\n", "////\n/// @group helpers/layout\n////\n\n/// Grid width percentage\n///\n/// @param {String} $key - Name of grid width (e.g. two-thirds)\n/// @return {Number} Percentage width\n/// @throw if `$key` is not a valid grid width\n/// @access public\n\n@function govuk-grid-width($key) {\n @if map-has-key($govuk-grid-widths, $key) {\n @return map-get($govuk-grid-widths, $key);\n }\n\n @error \"Unknown grid width `#{$key}`\";\n}\n\n/// Generate grid column styles\n///\n/// Creates a grid column with standard gutter between the columns.\n///\n/// Grid widths are defined in the `$govuk-grid-widths` map.\n///\n/// By default the column width changes from 100% to specified width at the\n/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`\n/// parameter.\n///\n/// @param {String} $width [full] name of a grid width from $govuk-grid-widths\n/// @param {String} $float [left] left | right\n/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint\n///\n/// @example scss - Default\n/// .govuk-grid-column-two-thirds {\n/// @include govuk-grid-column(two-thirds)\n/// }\n///\n/// @example scss - Customising the breakpoint where width percentage is applied\n/// .govuk-grid-column-one-half-at-desktop {\n/// @include govuk-grid-column(one-half, $at: desktop);\n/// }\n///\n/// @example scss - Customising the float direction\n/// .govuk-grid-column-one-half-right {\n/// @include govuk-grid-column(two-thirds, $float: right);\n/// }\n///\n/// @access public\n\n@mixin govuk-grid-column($width: full, $float: left, $at: tablet) {\n box-sizing: border-box;\n @if $at != desktop {\n width: 100%;\n }\n padding: 0 $govuk-gutter-half;\n @include govuk-media-query($from: $at) {\n width: govuk-grid-width($width);\n float: $float;\n }\n}\n\n/*# sourceMappingURL=_grid.scss.map */\n", "@import \"../base\";\n\n////\n/// @group objects/layout\n////\n\n// Example usage with Breadcrumbs, phase banners, back links:\n//
\n// \n//
\n// \n//
\n//
\n//\n// Example usage without Breadcrumbs, phase banners, back links:\n//
\n//
\n// \n//
\n//
\n\n@include govuk-exports(\"govuk/objects/main-wrapper\") {\n .govuk-main-wrapper {\n // In IE11 the `main` element can be used, but is not recognized –\n // meaning it's not defined in IE's default style sheet,\n // so it uses CSS initial value, which is inline.\n display: block;\n padding-top: govuk-spacing(4);\n padding-bottom: govuk-spacing(4);\n\n @include govuk-media-query($from: tablet) {\n // This spacing is manually adjusted to replicate the margin of\n // govuk-heading-xl (50px) minus the spacing of back link and\n // breadcrumbs (10px)\n padding-top: govuk-spacing(7);\n padding-bottom: govuk-spacing(7);\n }\n }\n\n // Using the `.govuk-main-wrapper--auto-spacing` modifier should apply the\n // correct spacing depending on whether there are any elements\n // (such the back link, breadcrumbs or phase banner components) before the\n // `.govuk-main-wrapper` in the `govuk-width-container`.\n //\n // If you need to control the spacing manually, use the\n // `govuk-main-wrapper--l` modifier instead.\n .govuk-main-wrapper--auto-spacing:first-child,\n .govuk-main-wrapper--l {\n @include govuk-responsive-padding(8, \"top\");\n }\n}\n\n/*# sourceMappingURL=_main-wrapper.scss.map */\n", "@import \"../base\";\n\n@include govuk-exports(\"govuk/objects/template\") {\n // Applied to the element\n .govuk-template {\n // Set the overall page background colour to the same colour as used by the\n // footer to give the illusion of a long footer.\n background-color: $govuk-canvas-background-colour;\n\n // Prevent automatic text sizing, as we already cater for small devices and\n // would like the browser to stay on 100% text zoom by default.\n -webkit-text-size-adjust: 100%;\n -moz-text-size-adjust: 100%;\n text-size-adjust: 100%;\n\n // Add scroll padding to the top of govuk-template but remove it if the\n // exit this page component is present.\n //\n // This is a solution to exit this page potentially failing WCAG SC 2.4.12:\n // Focus Not Obscured (https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)\n // due to it's sticky positioning.\n //\n // This will apply scroll-padding-top in any browsers that don't support :has\n // (https://caniuse.com/css-has). This is part of the reason we do this in\n // a \"wrong way round\" way as we hypothesise that the risks of having\n // scroll-padding unnecessarily is better than risking not having scroll-padding\n // and needing it to account for exit this page.\n @supports ((position: -webkit-sticky) or (position: sticky)) {\n scroll-padding-top: govuk-spacing(9);\n\n &:not(:has(.govuk-exit-this-page)) {\n scroll-padding-top: 0;\n }\n }\n\n // Force the scrollbar to always display in IE, to prevent horizontal page\n // jumps as content height changes (e.g. autocomplete results open).\n @include govuk-media-query($media-type: screen) {\n overflow-y: scroll;\n }\n }\n\n // Applied to the element\n .govuk-template__body {\n // The default margins set by user-agents are not required since we have our\n // own containers.\n margin: 0;\n // Set the overall body of the page back to the typical background colour.\n background-color: $govuk-body-background-colour;\n }\n}\n\n/*# sourceMappingURL=_template.scss.map */\n", "@import \"../base\";\n\n////\n/// @group objects/layout\n////\n\n/// Width container mixin\n///\n/// Used to create page width and custom width container classes.\n///\n/// @param {String} $width [$govuk-page-width] - Width in pixels\n///\n/// @example scss - Creating a 1200px wide container class\n/// .app-width-container--wide {\n/// @include govuk-width-container(1200px);\n/// }\n///\n/// @access public\n\n@mixin govuk-width-container($width: $govuk-page-width) {\n // By default, limit the width of the container to the page width\n max-width: $width;\n\n // On mobile, add half width gutters\n margin-right: $govuk-gutter-half;\n margin-left: $govuk-gutter-half;\n\n // Respect 'display cutout' safe area (avoids notches and rounded corners)\n @supports (margin: unquote(\"max(calc(0px))\")) {\n $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));\n $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));\n\n // Use max() to pick largest margin, default or with safe area\n // Escaped due to Sass max() vs. CSS native max()\n margin-right: unquote(\"max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})\");\n margin-left: unquote(\"max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})\");\n }\n\n // On tablet, add full width gutters\n @include govuk-media-query($from: tablet) {\n margin-right: $govuk-gutter;\n margin-left: $govuk-gutter;\n\n // Respect 'display cutout' safe area (avoids notches and rounded corners)\n @supports (margin: unquote(\"max(calc(0px))\")) {\n $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));\n $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));\n\n // Use max() to pick largest margin, default or with safe area\n // Escaped due to Sass max() vs. CSS native max()\n margin-right: unquote(\"max(#{$govuk-gutter}, #{$gutter-safe-area-right})\");\n margin-left: unquote(\"max(#{$govuk-gutter}, #{$gutter-safe-area-left})\");\n }\n }\n\n // As soon as the viewport is greater than the width of the page plus the\n // gutters, just centre the content instead of adding gutters.\n @include govuk-media-query($and: \"(min-width: #{($width + $govuk-gutter * 2)})\") {\n margin-right: auto;\n margin-left: auto;\n\n // Since a safe area may have previously been set above,\n // we need to duplicate this margin that centers the page.\n @supports (margin: unquote(\"max(calc(0px))\")) {\n margin-right: auto;\n margin-left: auto;\n }\n }\n}\n\n@include govuk-exports(\"govuk/objects/width-container\") {\n .govuk-width-container {\n @include govuk-width-container;\n }\n}\n\n/*# sourceMappingURL=_width-container.scss.map */\n", "////\n/// @group settings/layout\n////\n\n// =========================================================\n// Page layout\n// =========================================================\n\n/// Width of main container\n///\n/// @type Number\n/// @access public\n\n$govuk-page-width: 960px !default;\n\n/// Map of grid column widths\n///\n/// @type Map\n/// @access public\n\n$govuk-grid-widths: (\n one-quarter: (\n 100% / 4\n ),\n one-third: (\n 100% / 3\n ),\n one-half: (\n 100% / 2\n ),\n two-thirds: (\n 200% / 3\n ),\n three-quarters: (\n 300% / 4\n ),\n full: 100%\n) !default;\n\n/// Width of gutter between grid columns\n///\n/// @type Number\n/// @access public\n\n$govuk-gutter: 30px !default;\n\n/// Width of half the gutter between grid columns\n///\n/// @type Number\n/// @access public\n\n$govuk-gutter-half: $govuk-gutter / 2;\n\n// =========================================================\n// Borders\n// =========================================================\n\n/// Standard border width\n///\n/// @type Number\n/// @access public\n\n$govuk-border-width: 5px !default;\n\n/// Wide border width\n///\n/// @type Number\n/// @access public\n\n$govuk-border-width-wide: 10px !default;\n\n/// Narrow border width\n///\n/// @type Number\n/// @access public\n\n$govuk-border-width-narrow: 4px !default;\n\n/// Form control border width\n///\n/// @type Number\n/// @access public\n\n$govuk-border-width-form-element: 2px !default;\n\n/// Form group border width when in error state\n///\n/// @type Number\n/// @access public\n\n$govuk-border-width-form-group-error: $govuk-border-width !default;\n\n/// Border width of focus outline\n///\n/// @type Number\n/// @access public\n\n$govuk-focus-width: 3px !default;\n\n/// Hover width for form controls with a hover state\n///\n/// @type Number\n/// @access public\n\n$govuk-hover-width: 10px !default;\n\n/*# sourceMappingURL=_measurements.scss.map */\n", "@include govuk-exports(\"govuk/component/accordion\") {\n $govuk-accordion-base-colour: govuk-colour(\"black\");\n $govuk-accordion-hover-colour: govuk-colour(\"light-grey\");\n $govuk-accordion-icon-focus-colour: $govuk-focus-colour;\n $govuk-accordion-bottom-border-width: 1px;\n\n .govuk-accordion {\n @include govuk-responsive-margin(6, \"bottom\");\n }\n\n .govuk-accordion__section {\n padding-top: govuk-spacing(3);\n }\n\n .govuk-accordion__section-heading {\n // Override browser defaults to ensure consistent element height\n margin-top: 0;\n margin-bottom: 0;\n\n padding-top: govuk-spacing(3);\n padding-bottom: govuk-spacing(3);\n }\n\n .govuk-accordion__section-button {\n @include govuk-font($size: 24, $weight: bold);\n @include govuk-text-colour;\n\n display: block;\n margin-bottom: 0;\n padding-top: govuk-spacing(3);\n }\n\n // Remove the bottom margin from the last item inside the content\n .govuk-accordion__section-content > :last-child {\n margin-bottom: 0;\n }\n\n // GOV.UK Frontend JavaScript enabled\n .govuk-frontend-supported {\n .govuk-accordion {\n // Border at the bottom of the whole accordion\n border-bottom: $govuk-accordion-bottom-border-width solid $govuk-border-colour;\n }\n\n .govuk-accordion__section {\n padding-top: 0;\n }\n\n // Hide the body of collapsed sections by default for browsers that lack\n // support for `content-visibility` paired with [hidden=until-found]\n .govuk-accordion__section-content {\n display: none;\n\n @include govuk-responsive-padding(3, \"top\");\n @include govuk-responsive-padding(8, \"bottom\");\n }\n\n // Hide the body of collapsed sections using `content-visibility` to enable\n // page search within [hidden=until-found] regions where browser supported\n .govuk-accordion__section-content[hidden] {\n @supports (content-visibility: hidden) {\n content-visibility: hidden;\n display: inherit;\n }\n\n // Hide the padding of collapsed sections\n padding-top: 0;\n padding-bottom: 0;\n }\n\n // Show the body of expanded sections\n .govuk-accordion__section--expanded .govuk-accordion__section-content {\n display: block;\n }\n\n .govuk-accordion__show-all {\n @include govuk-font($size: 19);\n position: relative;\n z-index: 1;\n\n margin-bottom: 9px;\n padding: govuk-spacing(1) 2px govuk-spacing(1) 0;\n\n border-width: 0;\n\n color: $govuk-link-colour;\n background: none;\n\n cursor: pointer;\n -webkit-appearance: none;\n\n @include govuk-media-query($from: tablet) {\n margin-bottom: 14px;\n }\n\n // Remove default button focus outline in Firefox\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n\n &:hover {\n color: $govuk-accordion-base-colour;\n background: $govuk-accordion-hover-colour;\n // The GOV.UK Design System focus state adds a box-shadow to the top and bottom of the\n // button. We add a grey box-shadow on hover too, to make the height of the hover state\n // match the height of the focus state.\n box-shadow:\n 0 -2px $govuk-accordion-hover-colour,\n 0 4px $govuk-accordion-hover-colour;\n\n .govuk-accordion__section-toggle-text {\n color: $govuk-accordion-base-colour;\n }\n\n .govuk-accordion-nav__chevron {\n color: $govuk-accordion-base-colour;\n background: $govuk-accordion-base-colour;\n }\n\n .govuk-accordion-nav__chevron::after {\n color: $govuk-accordion-hover-colour;\n }\n }\n\n &:focus {\n @include govuk-focused-text;\n\n .govuk-accordion-nav__chevron {\n background: $govuk-accordion-base-colour;\n }\n\n .govuk-accordion-nav__chevron::after {\n color: $govuk-accordion-icon-focus-colour;\n }\n }\n }\n\n .govuk-accordion__section-heading {\n padding: 0;\n }\n\n // Create Chevron icon aligned with text\n .govuk-accordion-nav__chevron {\n box-sizing: border-box;\n display: inline-block;\n\n position: relative;\n\n // Set size using rems to make the icon scale with text if user resizes text in their browser\n width: govuk-px-to-rem(20px);\n height: govuk-px-to-rem(20px);\n\n border: govuk-px-to-rem(1px) solid;\n border-radius: 50%;\n\n vertical-align: middle;\n\n // Create inner chevron arrow\n &::after {\n content: \"\";\n box-sizing: border-box;\n display: block;\n\n position: absolute;\n bottom: govuk-px-to-rem(5px);\n left: govuk-px-to-rem(6px);\n\n width: govuk-px-to-rem(6px);\n height: govuk-px-to-rem(6px);\n\n transform: rotate(-45deg);\n\n border-top: govuk-px-to-rem(2px) solid;\n border-right: govuk-px-to-rem(2px) solid;\n }\n }\n\n // Rotate icon to create \"Down\" version\n .govuk-accordion-nav__chevron--down {\n transform: rotate(180deg);\n }\n\n .govuk-accordion__section-button {\n width: 100%;\n\n padding: govuk-spacing(2) 0 0 0;\n\n border: 0;\n\n border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;\n\n // Visually separate the section from the one underneath when user changes colours in their\n // browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488\n border-bottom: govuk-spacing(2) solid transparent;\n\n color: $govuk-text-colour;\n background: none;\n\n text-align: left;\n // Section headers have a pointer cursor as an additional affordance\n cursor: pointer;\n -webkit-appearance: none;\n\n @include govuk-media-query($from: tablet) {\n padding-bottom: govuk-spacing(2);\n }\n\n &:active {\n color: $govuk-link-active-colour;\n background: none;\n }\n\n &:hover {\n color: $govuk-accordion-base-colour;\n background: $govuk-accordion-hover-colour;\n\n .govuk-accordion__section-toggle-text {\n color: $govuk-accordion-base-colour;\n }\n\n .govuk-accordion-nav__chevron {\n color: $govuk-accordion-base-colour;\n background: $govuk-accordion-base-colour;\n }\n\n .govuk-accordion-nav__chevron::after {\n color: $govuk-accordion-hover-colour;\n }\n }\n\n &:focus {\n // Remove default focus border around button as\n // styling is being applied to inner text elements that receive focus\n outline: 0;\n\n .govuk-accordion__section-heading-text-focus,\n .govuk-accordion__section-summary-focus,\n .govuk-accordion__section-toggle-focus {\n @include govuk-focused-text;\n }\n\n .govuk-accordion-nav__chevron {\n color: $govuk-accordion-base-colour;\n background: $govuk-accordion-base-colour;\n }\n\n .govuk-accordion-nav__chevron::after {\n color: $govuk-accordion-icon-focus-colour;\n }\n }\n\n // Remove default button focus outline in Firefox\n &::-moz-focus-inner {\n padding: 0;\n border: 0;\n }\n }\n\n // Remove the transparent border when the section is expanded to make it clear that the heading\n // relates to the content below. Adjust padding to maintain the height of the element.\n // See https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798\n .govuk-accordion__section--expanded .govuk-accordion__section-button {\n padding-bottom: govuk-spacing(3);\n border-bottom: 0;\n\n @include govuk-media-query($from: tablet) {\n padding-bottom: govuk-spacing(4);\n }\n }\n\n // As Chevron icon is vertically aligned it overlaps with the focus state bottom border\n // Styling adds some spacing\n .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {\n padding-bottom: 3px;\n\n @include govuk-media-query($from: desktop) {\n padding-bottom: 2px;\n }\n }\n\n .govuk-accordion__section-toggle,\n .govuk-accordion__section-heading-text,\n .govuk-accordion__section-summary {\n display: block;\n margin-bottom: 13px;\n\n .govuk-accordion__section-heading-text-focus,\n .govuk-accordion__section-summary-focus,\n .govuk-accordion__section-toggle-focus {\n display: inline;\n }\n }\n\n // Add toggle link with Chevron icon on left.\n .govuk-accordion__section-toggle {\n @include govuk-font-size($size: 19);\n @include govuk-typography-weight-regular;\n color: $govuk-link-colour;\n }\n\n // Add space between the icon and text.\n // Avoid applying spacing directly to the icon as the use of `transform` will change the\n // placement of any margins.\n .govuk-accordion__show-all-text,\n .govuk-accordion__section-toggle-text {\n margin-left: govuk-spacing(1);\n vertical-align: middle;\n }\n\n // Background colour adjustment when user changes colours in Firefox\n //\n // When user changes colours in Firefox, text colour inside