From a66ce1035a9ac7287c5c0cd051958109ce0a52c1 Mon Sep 17 00:00:00 2001 From: Peter Yates Date: Tue, 23 May 2023 12:34:54 +0100 Subject: [PATCH] Render the inverse button on a blue background --- guide/content/form-elements/submit.slim | 3 ++- guide/content/stylesheets/application.scss | 4 ++++ guide/layouts/partials/example.slim | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/guide/content/form-elements/submit.slim b/guide/content/form-elements/submit.slim index 75351786..faedfc81 100644 --- a/guide/content/form-elements/submit.slim +++ b/guide/content/form-elements/submit.slim @@ -25,7 +25,8 @@ p.govuk-body == render('/partials/example.*', caption: 'Generating submit button with inverted colours', - code: inverse_button) + code: inverse_button, + render_on_brand_background: true) == render('/partials/example.*', caption: 'Generating a submit button with a custom class', diff --git a/guide/content/stylesheets/application.scss b/guide/content/stylesheets/application.scss index fe1e0e75..03cb06a0 100644 --- a/guide/content/stylesheets/application.scss +++ b/guide/content/stylesheets/application.scss @@ -55,6 +55,10 @@ $x-govuk-brand-colour: #28a; } } +.branded-background { + background: govuk-colour(blue); +} + // inverse buttons, this can be removed once the functionality is supported by // the design system. https://github.com/alphagov/govuk-frontend/pull/3556 $govuk-inverse-button-colour: govuk-colour("white"); diff --git a/guide/layouts/partials/example.slim b/guide/layouts/partials/example.slim index 8e912320..ec5df8ca 100644 --- a/guide/layouts/partials/example.slim +++ b/guide/layouts/partials/example.slim @@ -89,7 +89,7 @@ figure.app-example a.govuk-tabs__tab href=%(#output-html-#{anchor_id(caption)}) | HTML - .govuk-tabs__panel id=%(output-rendered-#{anchor_id(caption)}) + .govuk-tabs__panel id=%(output-rendered-#{anchor_id(caption)}) class=("branded-background" if defined?(render_on_brand_background) && render_on_brand_background) == format_slim(code, f: builder(display_errors), **form_data) .govuk-tabs__panel id=%(output-html-#{anchor_id(caption)})