From 59c9825be7847d578e6ec13a73225eb55b97ed49 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Fri, 5 Feb 2021 12:49:01 +0200
Subject: [PATCH] refactor(docs-infra): merge style rules in `_details.scss`
 (#40704)

This commit cleans up the styles in `_details.scss` by merging
together blocks that target the same elements.

It also changes the `summary` selector to `details > summary`, but that
should not make any difference in practice, since `<summary>` elements
always appear as direct childs of `<details>`.

PR Close #40704
---
 aio/src/styles/2-modules/_details.scss | 54 +++++++++++++-------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/aio/src/styles/2-modules/_details.scss b/aio/src/styles/2-modules/_details.scss
index c14e4f2f40..02c71f110f 100644
--- a/aio/src/styles/2-modules/_details.scss
+++ b/aio/src/styles/2-modules/_details.scss
@@ -2,44 +2,44 @@
  * General styling to make detail/summary tags look a bit more material
  * To get the best out of it you should structure your usage like this:
  *
- * ```
+ * ```html
  * <details>
  *   <summary>Some title</summary>
  *   <div class="details-content">
  *     Some content
  *   </div>
- *  </details>
- *
+ * </details>
+ * ```
  */
 
-summary {
-  cursor: pointer;
-  @include font-size(16);
-  position: relative;
-  padding: 16px 24px;
-  color: $black;
-  height: 16px;
-  display: block; // Remove the built in details marker in FF
-
-  &::-webkit-details-marker {
-    display: none; // Remove the built in details marker in webkit
-  }
-
-  overflow: hidden;
-}
-
 details {
   box-shadow: 0 1px 4px 0 rgba($black, 0.37);
 
+  > summary {
+    cursor: pointer;
+    @include font-size(16);
+    position: relative;
+    padding: 16px 24px;
+    color: $black;
+    height: 16px;
+    display: block; // Remove the built in details marker in FF
+    overflow: hidden;
+
+    &::-webkit-details-marker {
+      display: none; // Remove the built in details marker in webkit
+    }
+
+    // Rotate the icon
+    i.material-icons.expand {
+      @include rotate(0deg);
+
+      @at-root #{selector-replace(&, 'details', 'details[open]')} {
+        @include rotate(180deg);
+      }
+    }
+  }
+
   .detail-contents {
     padding: 16px 24px;
   }
-
-  // Rotate the icon
-  summary i.material-icons.expand {
-    @include rotate(0deg);
-  }
-  &[open] > summary i.material-icons.expand {
-    @include rotate(180deg);
-  }
 }