diff --git a/docs/examples/masthead.njk b/docs/examples/masthead.njk index c932620..84907ff 100644 --- a/docs/examples/masthead.njk +++ b/docs/examples/masthead.njk @@ -5,7 +5,6 @@ title: Masthead example --- {% from "x-govuk/components/masthead/macro.njk" import xGovukMasthead %} {{ xGovukMasthead({ - classes: "x-govuk-masthead--large", phaseBanner: { text: "This is a new service" }, diff --git a/x-govuk/components/masthead/_breadcrumbs.scss b/x-govuk/components/masthead/_breadcrumbs.scss deleted file mode 100644 index 9b49b7d..0000000 --- a/x-govuk/components/masthead/_breadcrumbs.scss +++ /dev/null @@ -1,15 +0,0 @@ -.x-govuk-breadcrumbs--inverse { - @include govuk-responsive-padding(3, "bottom"); - @include govuk-responsive-padding(4, "top"); - border-bottom: 1px solid $x-govuk-masthead-border-colour; - color: $x-govuk-masthead-colour; - margin-top: 0; - - .govuk-breadcrumbs__list-item::before { - border-color: $x-govuk-masthead-colour; - } - - .govuk-breadcrumbs__link:not(:focus) { - color: inherit; - } -} diff --git a/x-govuk/components/masthead/_button.scss b/x-govuk/components/masthead/_button.scss deleted file mode 100644 index a13dbbc..0000000 --- a/x-govuk/components/masthead/_button.scss +++ /dev/null @@ -1,31 +0,0 @@ -$x-govuk-button-shadow-size: $govuk-border-width-form-element; -$x-govuk-button-inverse-shadow-colour: govuk-shade($x-govuk-masthead-background-colour, 30%); -$x-govuk-button-inverse-hover-background-colour: govuk-tint($x-govuk-masthead-background-colour, 90%); - -.x-govuk-button--inverse, -.x-govuk-button--inverse:link, -.x-govuk-button--inverse:visited { - @include govuk-responsive-margin(6, "top"); - background-color: $x-govuk-masthead-colour; - box-shadow: 0 $x-govuk-button-shadow-size 0 $x-govuk-button-inverse-shadow-colour; - color: $x-govuk-masthead-background-colour; - margin-bottom: 0; -} - -.x-govuk-button--inverse:hover { - background-color: $x-govuk-button-inverse-hover-background-colour; - color: $x-govuk-masthead-background-colour; -} - -.x-govuk-button--inverse:focus:not(:hover) { - background-color: $govuk-focus-colour; - color: $govuk-focus-text-colour; -} - -.x-govuk-button--inverse:active, -.x-govuk-button--inverse:focus { - background-color: $x-govuk-button-inverse-hover-background-colour; - border-color: $govuk-focus-colour; - box-shadow: inset 0 0 0 2px $govuk-focus-colour; - color: $x-govuk-masthead-background-colour; -} diff --git a/x-govuk/components/masthead/_masthead.scss b/x-govuk/components/masthead/_masthead.scss index 1686267..04132f1 100644 --- a/x-govuk/components/masthead/_masthead.scss +++ b/x-govuk/components/masthead/_masthead.scss @@ -1,33 +1,33 @@ $x-govuk-masthead-background-colour: $govuk-brand-colour; $x-govuk-masthead-border-colour: govuk-tint($govuk-brand-colour, 25%); -$x-govuk-masthead-colour: govuk-colour("white"); +$x-govuk-masthead-text-colour: govuk-colour("white"); -@import "./breadcrumbs"; -@import "./button"; @import "./phase-banner"; @import "./tag"; .x-govuk-masthead { - @include govuk-responsive-padding(7, "bottom"); + @include govuk-responsive-padding(4, "bottom"); background-color: $x-govuk-masthead-background-colour; - color: $x-govuk-masthead-colour; - margin-top: govuk-spacing(-2); - padding-top: 0; + color: $x-govuk-masthead-text-colour; + display: flex; // Prevent margin collapse + + > .govuk-width-container { + flex: 1; + } } .x-govuk-masthead__title { - @include govuk-font($size: 36, $weight: bold); - @include govuk-responsive-padding(6, "top"); - margin-top: 0; + @include govuk-font($size: 48, $weight: "bold"); + @include govuk-responsive-margin(6, "bottom"); + @include govuk-responsive-margin(6, "top"); } .x-govuk-masthead__description { - @include govuk-font($size: 19); - color: inherit; - margin-bottom: 0; + @include govuk-font($size: 24); + @include govuk-responsive-margin(6, "bottom"); - a:not(:focus) { - color: inherit; + a { + @include govuk-link-style-inverse; } } @@ -42,13 +42,3 @@ $x-govuk-masthead-colour: govuk-colour("white"); display: none; } } - -.x-govuk-masthead--large { - .x-govuk-masthead__title { - @include govuk-font($size: 48, $weight: "bold"); - } - - .x-govuk-masthead__description { - @include govuk-font($size: 24); - } -} diff --git a/x-govuk/components/masthead/_phase-banner.scss b/x-govuk/components/masthead/_phase-banner.scss index ebf36cc..f8f7efb 100644 --- a/x-govuk/components/masthead/_phase-banner.scss +++ b/x-govuk/components/masthead/_phase-banner.scss @@ -2,6 +2,6 @@ border-bottom-color: $x-govuk-masthead-border-colour; .govuk-phase-banner__content { - color: $x-govuk-masthead-colour; + color: $x-govuk-masthead-text-colour; } } diff --git a/x-govuk/components/masthead/_tag.scss b/x-govuk/components/masthead/_tag.scss index 8e37d76..abf6ab1 100644 --- a/x-govuk/components/masthead/_tag.scss +++ b/x-govuk/components/masthead/_tag.scss @@ -1,4 +1,4 @@ .x-govuk-tag--inverse { - background-color: $x-govuk-masthead-colour; + background-color: $x-govuk-masthead-text-colour; color: $x-govuk-masthead-background-colour; } diff --git a/x-govuk/components/masthead/template.njk b/x-govuk/components/masthead/template.njk index 841c725..b1cd29c 100644 --- a/x-govuk/components/masthead/template.njk +++ b/x-govuk/components/masthead/template.njk @@ -16,7 +16,7 @@ attributes: params.phaseBanner.attributes }) if params.phaseBanner }} {{ govukBreadcrumbs({ - classes: "x-govuk-breadcrumbs--inverse" + (" " + params.breadcrumbs.classes if params.breadcrumbs.classes), + classes: "govuk-breadcrumbs--inverse" + (" " + params.breadcrumbs.classes if params.breadcrumbs.classes), items: params.breadcrumbs.items, collapseOnMobile: params.breadcrumbs.collapseOnMobile, attributes: params.breadcrumbs.attributes @@ -36,7 +36,7 @@ {% endif %} {% if params.startButton %} {{ govukButton({ - classes: "x-govuk-button--inverse" + (" " + params.startButton.classes if params.startButton.classes), + classes: "govuk-button--inverse" + (" " + params.startButton.classes if params.startButton.classes), text: params.startButton.text | default("Get started"), href: params.startButton.href, isStartButton: true,