Redesign button indicator to be red

alphagov · Nov 23, 2022 · 8a968b5 · 8a968b5
1 parent 69a162b
commit 8a968b5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -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 () {