diff --git a/src/govuk/components/hide-this-page/_index.scss b/src/govuk/components/hide-this-page/_index.scss index a146d9023f..680137bc96 100644 --- a/src/govuk/components/hide-this-page/_index.scss +++ b/src/govuk/components/hide-this-page/_index.scss @@ -25,18 +25,18 @@ .govuk-hide-this-page__indicator { @include govuk-responsive-padding(2); - display: block; - border: 1px solid $govuk-border-colour; - border-top: none; + display: none; + padding-bottom: 0; opacity: 0; - color: $govuk-text-colour; - background-color: $govuk-body-background-colour; + color: govuk-colour("white"); + background-color: govuk-colour("red"); line-height: 0; // removes extra negative space below the indicators text-align: center; pointer-events: none; } .govuk-hide-this-page__indicator--visible { + display: block; opacity: 1; } diff --git a/src/govuk/components/hide-this-page/hide-this-page.mjs b/src/govuk/components/hide-this-page/hide-this-page.mjs index 2c414607ff..76127008ef 100644 --- a/src/govuk/components/hide-this-page/hide-this-page.mjs +++ b/src/govuk/components/hide-this-page/hide-this-page.mjs @@ -15,7 +15,7 @@ HideThisPage.prototype.initUpdateSpan = function () { this.$updateSpan.setAttribute('aria-live', 'polite') this.$updateSpan.setAttribute('class', 'govuk-visually-hidden') - this.$module.appendChild(this.$updateSpan) + this.$button.appendChild(this.$updateSpan) } HideThisPage.prototype.initButtonClickHandler = function () { @@ -38,7 +38,7 @@ HideThisPage.prototype.buildIndicator = function () { } // Append it all to the module - this.$module.appendChild(this.$indicatorContainer) + this.$button.appendChild(this.$indicatorContainer) } HideThisPage.prototype.updateIndicator = function () {