diff --git a/guide/content/form-elements/submit.slim b/guide/content/form-elements/submit.slim index a1d0651d..75351786 100644 --- a/guide/content/form-elements/submit.slim +++ b/guide/content/form-elements/submit.slim @@ -23,6 +23,10 @@ p.govuk-body caption: 'Generating a warning submit button', code: warning_button) +== render('/partials/example.*', + caption: 'Generating submit button with inverted colours', + code: inverse_button) + == render('/partials/example.*', caption: 'Generating a submit button with a custom class', code: custom_classes_button) diff --git a/guide/content/stylesheets/application.scss b/guide/content/stylesheets/application.scss index 8167835a..fe1e0e75 100644 --- a/guide/content/stylesheets/application.scss +++ b/guide/content/stylesheets/application.scss @@ -54,3 +54,37 @@ $x-govuk-brand-colour: #28a; background: govuk-tint(govuk-colour("purple"), 10%); } } + +// 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"); +$govuk-inverse-button-text-colour: govuk-colour("blue"); +$govuk-inverse-button-hover-colour: govuk-tint($govuk-inverse-button-text-colour, 90%); +$govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%); + +.govuk-button--inverse { + background-color: $govuk-inverse-button-colour; + box-shadow: 0 2px 0 $govuk-inverse-button-shadow-colour; + + &, + &:link, + &:visited, + &:active, + &:hover { + color: $govuk-inverse-button-text-colour; + } + + @include _govuk-compatibility(govuk_template) { + &:link:focus { + color: $govuk-inverse-button-text-colour; + } + } + + &:hover { + background-color: $govuk-inverse-button-hover-colour; + + &[disabled] { + background-color: $govuk-inverse-button-colour; + } + } +} diff --git a/guide/lib/examples/submit.rb b/guide/lib/examples/submit.rb index 5d23dc30..7c9bcbc0 100644 --- a/guide/lib/examples/submit.rb +++ b/guide/lib/examples/submit.rb @@ -12,6 +12,10 @@ def warning_button "= f.govuk_submit 'Delete all records', warning: true" end + def inverse_button + "= f.govuk_submit 'Find out more', inverse: true" + end + def custom_classes_button "= f.govuk_submit 'Big purple button', class: 'big-purple-button'" end