Add custom styles for details-based dropdowns (dart-lang#5545)

Adds interaction styles and spacing to the details summary as well as
spacing to the contents.

An example of how this effects on a details usage on hover at `/language/isolates#complete-example`:

<img width="984" alt="Hovering over the summary of a details dropdown"
src="https://github.com/dart-lang/site-www/assets/18372958/8264ff11-cbea-4d51-8de2-f38b21b9a4e9">


Contributes to dart-lang#5382 which
will use `<details>` as a replacement in some cases.

Author: parlough

src/_sass/core/_base.scss

@@ -84,3 +84,29 @@ blockquote {
   margin: 20px;
   padding: 10px 20px 0 20px;
 }
+
+details {
+  margin-bottom: 0.75rem;
+
+  > summary {
+    font-weight: 500;
+    user-select: none;
+
+    &:hover {
+      color: $brand-primary;
+    }
+  }
+
+  &[open] {
+    margin-bottom: unset;
+
+    > summary {
+      margin-bottom: 0.75rem;
+    }
+  }
+
+  > :not(:first-child) {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+  }
+}

src/content/codelabs/dart-cheatsheet.md

@@ -67,9 +67,7 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for string interpolation example</b>
-  </summary>
+  <summary>Solution for string interpolation example</summary>
 
   Both `x` and `y` are simple values,
   and Dart's string interpolation will handle
@@ -82,6 +80,7 @@ void main() {
     return '$x $y';
   }
   ```
+
 </details>
 
 
@@ -149,9 +148,7 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for nullable variables example</b>
-  </summary>
+  <summary>Solution for nullable variables example</summary>
 
   Declare the two variables as `String` followed by `?`.
   Then, assign `'Jane'` to `name`
@@ -161,6 +158,7 @@ void main() {
   String? name = 'Jane';
   String? address;
   ```
+
 </details>
 
 
@@ -233,9 +231,7 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for null-aware operators example</b>
-  </summary>
+  <summary>Solution for null-aware operators example</summary>
 
   All you need to do in this exercise is
   replace the `TODO` comments with either `??` or `??=`.
@@ -251,6 +247,7 @@ void main() {
     bar ??= 'a string';
   }
   ```
+
 </details>
 
 
@@ -324,9 +321,7 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for conditional property access example</b>
-  </summary>
+  <summary>Solution for conditional property access example</summary>
 
   If this exercise wanted you to conditionally lowercase a string,
   you could do it like this: `str?.toLowerCase()`. Use the equivalent
@@ -337,6 +332,7 @@ void main() {
     return str?.toUpperCase();
   }
   ```
+
 </details>
 
 ## Collection literals
@@ -455,9 +451,7 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for collection literals example</b>
-  </summary>
+  <summary>Solution for collection literals example</summary>
 
   Add a list, set, or map literal after each equals sign.
   Remember to specify the types for the empty declarations,
@@ -482,6 +476,7 @@ void main() {
   // Assign this an empty Map of double to int:
   final anEmptyMapOfDoublesToInts = <double, int>{};
   ```
+
 </details>
 
 ## Arrow syntax
@@ -576,9 +571,7 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for arrow syntax example</b>
-  </summary>
+  <summary>Solution for arrow syntax example</summary>
 
   For the product, you can use `*` to multiply the three values together.
   For `incrementValue1`, you can use the increment operator (`++`).
@@ -729,9 +722,7 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for cascades example</b>
-  </summary>
+  <summary>Solution for cascades example</summary>
 
   The best solution for this exercise starts with `obj..` and
   has four assignment operations chained together.
@@ -874,9 +865,8 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for getters and setters example</b>
-  </summary>
+  <summary>Solution for getters and setters example</summary>
+
   Two functions are handy for this exercise. 
   One is `fold`, which can reduce a list to a single value
   (use it to calculate the total).
@@ -897,6 +887,7 @@ void main() {
     _prices = value;
   }
   ```
+
 </details>
 
 
@@ -1020,9 +1011,8 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for positional parameters example</b>
-  </summary>
+  <summary>Solution for positional parameters example</summary>
+
   The `b`, `c`, `d`, and `e` parameters are null if they aren't provided by the
   caller. The important thing, then, is to check whether those arguments are `null`
   before you add them to the final string.
@@ -1037,6 +1027,7 @@ void main() {
     return total;
   }
   ```
+
 </details>
 
 <a id="optional-named-parameters"></a>
@@ -1165,9 +1156,8 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for named parameters example</b>
-  </summary>
+  <summary>Solution for named parameters example</summary>
+
   The `copyWith` method shows up in a lot of classes and libraries.
   Yours should do a few things:
   use optional named parameters,
@@ -1387,9 +1377,8 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for exceptions example</b>
-  </summary>
+  <summary>Solution for exceptions example</summary>
+
   This exercise looks tricky, but it's really one big `try` statement.
   Call `untrustworthy` inside the `try`, and
   then use `on`, `catch`, and `finally` to catch exceptions and
@@ -1408,6 +1397,7 @@ void main() {
     }
   }
   ```
+
 </details>
 
 
@@ -1504,9 +1494,8 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for `this` example</b>
-  </summary>
+  <summary>Solution for `this` example</summary>
+
   This exercise has a one-line solution.
   Declare the constructor with
   `this.anInt`, `this.aString`, and `this.aDouble`
@@ -1515,6 +1504,7 @@ void main() {
   ```dart    
   MyClass(this.anInt, this.aString, this.aDouble);
   ```
+
 </details>
 
 {% comment %}
@@ -1628,9 +1618,8 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for initializer lists example</b>
-  </summary>
+  <summary>Solution for initializer lists example</summary>
+
   Two assignments need to happen:
   `letterOne` should be assigned `word[0]`,
   and `letterTwo` should be assigned `word[1]`.
@@ -1726,9 +1715,8 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for named constructors example</b>
-  </summary>
+  <summary>Solution for named constructors example</summary>
+
   The declaration for your constructor should begin with `Color.black(): `.
   In the initializer list (after the colon), set `red`, `green`, and `blue` to `0`.
 
@@ -1738,6 +1726,7 @@ void main() {
           green = 0,
           blue = 0;
   ```
+
 </details>
 
 ## Factory constructors
@@ -1893,9 +1882,8 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for factory constructors example</b>
-  </summary>
+  <summary>Solution for factory constructors example</summary>
+
   Inside the factory constructor,
   check the length of the list, then create and return an
   `IntegerSingle`, `IntegerDouble`, or `IntegerTriple` as appropriate.
@@ -1913,6 +1901,7 @@ void main() {
       } 
     }
   ```
+
 </details>
 
 ## Redirecting constructors
@@ -1993,14 +1982,14 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for redirecting constructors example</b>
-  </summary>
+  <summary>Solution for redirecting constructors example</summary>
+
   Your constructor should redirect to `this(0, 0, 0)`.
 
   ```dart
     Color.black() : this(0, 0, 0);
   ```
+
 </details>
 
 ## Const constructors
@@ -2077,9 +2066,8 @@ void main() {
 ```
 
 <details>
- <summary>
-   <b>Solution for const constructors example</b>
-  </summary>
+  <summary>Solution for const constructors example</summary>
+
   To make the constructor const, you'll need to make all the properties final.
 
   ```dart
@@ -2091,6 +2079,7 @@ void main() {
     const Recipe(this.ingredients, this.calories, this.milligramsOfSodium);
   }
   ```
+
 </details>
 
 ## What's next?