[WIP] Override default styles for older browsers

alphagov · Jun 7, 2023 · c3cbff3 · c3cbff3
1 parent 5c071c7
commit c3cbff3
Showing 1 changed file with 78 additions and 56 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/details/_index.scss b/packages/govuk-frontend/src/govuk/components/details/_index.scss
@@ -7,85 +7,107 @@
     display: block;
   }
 
-  .govuk-details__text {
-    padding-top: govuk-spacing(3);
-    padding-bottom: govuk-spacing(3);
-    padding-left: govuk-spacing(4);
-    border-left: $govuk-border-width solid $govuk-border-colour;
-  }
-
   .govuk-details__summary {
+    // Make the focus outline shrink-wrap the text content of the summary
+    display: inline-block;
+
+    // Absolutely position the marker against this element
+    position: relative;
+
     margin-bottom: govuk-spacing(1);
+
+    // Allow for absolutely positioned marker and align with disclosed text
+    padding-left: govuk-spacing(4) + $govuk-border-width;
+
+    // Style the summary to look like a link...
+    color: $govuk-link-colour;
+    cursor: pointer;
+
+    &:hover {
+      color: $govuk-link-hover-colour;
+    }
+
+    &:focus {
+      @include govuk-focused-text;
+    }
   }
 
-  @supports not (-ms-ime-align: auto) {
-    .govuk-details__summary {
-      // Make the focus outline shrink-wrap the text content of the summary
-      display: inline-block;
+  // ...but only underline the text, not the arrow
+  .govuk-details__summary-text {
+    @include govuk-link-decoration;
+  }
 
-      // Absolutely position the marker against this element
-      position: relative;
+  .govuk-details__summary:hover .govuk-details__summary-text {
+    @include govuk-link-hover-decoration;
+  }
 
-      // Allow for absolutely positioned marker and align with disclosed text
-      padding-left: govuk-spacing(4) + $govuk-border-width;
+  // Remove the underline when focussed to avoid duplicate borders
+  .govuk-details__summary:focus .govuk-details__summary-text {
+    text-decoration: none;
+  }
 
-      // Style the summary to look like a link...
-      color: $govuk-link-colour;
-      cursor: pointer;
+  // Remove the default details marker so we can style our own consistently and
+  // ensure it displays in Firefox (see implementation.md for details)
+  .govuk-details__summary::-webkit-details-marker {
+    display: none;
+  }
 
-      &:hover {
-        color: $govuk-link-hover-colour;
-      }
+  // Append our own open / closed marker using a pseudo-element
+  .govuk-details__summary::before {
+    content: "";
+    position: absolute;
 
-      &:focus {
-        @include govuk-focused-text;
-      }
-    }
-    // ...but only underline the text, not the arrow
-    .govuk-details__summary-text {
-      @include govuk-link-decoration;
-    }
+    top: -1px;
+    bottom: 0;
+    left: 0;
 
-    .govuk-details__summary:hover .govuk-details__summary-text {
-      @include govuk-link-hover-decoration;
-    }
+    margin: auto;
 
-    // Remove the underline when focussed to avoid duplicate borders
-    .govuk-details__summary:focus .govuk-details__summary-text {
-      text-decoration: none;
-    }
+    @include govuk-shape-arrow($direction: right, $base: 14px);
 
-    // Remove the default details marker so we can style our own consistently and
-    // ensure it displays in Firefox (see implementation.md for details)
-    .govuk-details__summary::-webkit-details-marker {
-      display: none;
+    .govuk-details[open] > & {
+      @include govuk-shape-arrow($direction: down, $base: 14px);
     }
+  }
 
-    // Append our own open / closed marker using a pseudo-element
-    .govuk-details__summary::before {
-      content: "";
-      position: absolute;
+  .govuk-details__text {
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
+    padding-left: govuk-spacing(4);
+    border-left: $govuk-border-width solid $govuk-border-colour;
+  }
+
+  .govuk-details__text p {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(4);
+  }
 
-      top: -1px;
-      bottom: 0;
-      left: 0;
+  .govuk-details__text > :last-child {
+    margin-bottom: 0;
+  }
 
-      margin: auto;
+  @supports (-ms-ime-align: auto) {
+    .govuk-details__summary {
 
-      @include govuk-shape-arrow($direction: right, $base: 14px);
+      padding-left: 0;
+      color: $govuk-text-colour;
 
-      .govuk-details[open] > & {
-        @include govuk-shape-arrow($direction: down, $base: 14px);
+      cursor: text;
+
+      &:hover,
+      &:focus {
+        color: $govuk-text-colour;
       }
     }
 
-    .govuk-details__text p {
-      margin-top: 0;
-      margin-bottom: govuk-spacing(4);
+    .govuk-details__summary-text {
+      @include govuk-text-colour;
+      text-decoration: none;
     }
 
-    .govuk-details__text > :last-child {
-      margin-bottom: 0;
+    .govuk-details__summary::before {
+      content: none;
+      position: static;
     }
   }
 }