Reduce specificity of disclosure styles

citizensadvice · Apr 17, 2024 · cd3eb94 · cd3eb94
1 parent 7a0583d
commit cd3eb94
Showing 1 changed file with 21 additions and 23 deletions.
diff --git a/scss/6-components/_disclosure.scss b/scss/6-components/_disclosure.scss
@@ -3,34 +3,32 @@
 // ============================================================================
 
 /** @define disclosure; weak **/
-.cads-disclosure {
-  .cads-disclosure__details {
-    display: none;
-    margin-top: $cads-spacing-4;
+.cads-disclosure__details {
+  display: none;
+  margin-top: $cads-spacing-4;
+}
+
+.cads-disclosure__summary {
+  text-decoration: underline;
+}
+
+.cads-disclosure__toggle {
+  text-decoration: none;
+
+  @include cads-media-breakpoint-up(md) {
+    font-size: cads-rem(18px);
   }
 
-  .cads-disclosure__summary {
-    text-decoration: underline;
+  .cads-icon {
+    // Optically align icon
+    // Using vertical-align here results in
+    // an icon that is visually aligned too low
+    position: relative;
+    top: 2px;
   }
 
-  .cads-disclosure__toggle {
+  &:focus .cads-disclosure__summary {
     text-decoration: none;
-
-    @include cads-media-breakpoint-up(md) {
-      font-size: cads-rem(18px);
-    }
-
-    .cads-icon {
-      // Optically align icon
-      // Using vertical-align here results in
-      // an icon that is visually aligned too low
-      position: relative;
-      top: 2px;
-    }
-
-    &:focus .cads-disclosure__summary {
-      text-decoration: none;
-    }
   }
 }