Add additions styles for elements with "hidden" attribute

We use hidden attribute to hide items that don't match live-search results. Normally, the broser would hide the element, but as these ones have the display property set, we need to set additional override styles.
alphagov · Feb 7, 2025 · c036ea6 · c036ea6
1 parent 3db5508
commit c036ea6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
@@ -179,6 +179,13 @@ a {
       width: auto;
     }
 
+    // we use hidden attribute to hide items that don't match live-search results
+    // normally the broser would hide the element, but as this one has display property
+    // set, we need to set additional override styles
+    &[hidden] {
+      display: none;
+    }
+
   }
 
   &-folder,

diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss
@@ -236,3 +236,16 @@ $govuk-grid-widths: map.merge($govuk-grid-widths, $notify-grid-widths);
   width: 66.66% !important;
 }
 /* stylelint-enable declaration-no-important */
+
+// we use hidden attribute to hide items that don't match live-search results
+// normally the broser would hide the element, but as this one has display property
+// set, we need to set additional override styles
+// used on /organisations/<id>/settings/email-branding/add
+// used on /organisations/<id>/settings/letter-branding/add
+// aused on /organisations/<id>/settings/add-nhs-local-organisation for NHS services
+// used on /services/<id>/service-settings/link-service-to-organisation
+// used on /services/>id>/service-settings/(set-email/letter)-branding 
+.govuk-checkboxes__item[hidden],
+.govuk-radios__item[hidden] {
+  display: none;
+}