From e5b4b83778e89546938929fd2e8929ef70a0ac02 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 22 Jun 2021 21:48:13 +0300
Subject: [PATCH] fix(docs-infra): improve styling of completed Roadmap
 projects (#42620)

This commit improves the styling of the "Completed projects" section of
the Roadmap by (a) making it consistent with the rest of the Roadmap
sections and (b) making it more similar with `<details>` elements on
other pages.

**Before:**
  _Collapsed:_ ![completed projects collapsed (before)][1]
  _Expanded:_ ![completed projects expanded (before)][2]
**After:**
  _Collapsed:_ ![completed projects collapsed (after)][3]
  _Expanded:_ ![completed projects expanded (after)][4]

[1]: https://user-images.githubusercontent.com/8604205/122917101-50c2ca00-d366-11eb-8348-01efd69cedf2.png
[2]: https://user-images.githubusercontent.com/8604205/122917109-515b6080-d366-11eb-9f18-c794fcea8dd1.png
[3]: https://user-images.githubusercontent.com/8604205/122917115-528c8d80-d366-11eb-947a-2d7da3950069.png
[4]: https://user-images.githubusercontent.com/8604205/122917117-53252400-d366-11eb-93e7-9384a7431c0d.png

PR Close #42620
---
 aio/content/guide/roadmap.md                  | 11 ++++++--
 .../2-modules/roadmap/_roadmap-theme.scss     |  7 +++---
 .../styles/2-modules/roadmap/_roadmap.scss    | 25 +++++++++++--------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/aio/content/guide/roadmap.md b/aio/content/guide/roadmap.md
index a664225ab7..819c9a2864 100644
--- a/aio/content/guide/roadmap.md
+++ b/aio/content/guide/roadmap.md
@@ -80,10 +80,16 @@ A long-standing feature request is to add the ability to add directives to host
 
 A common problem with web applications is their slow initial load time. A way to improve it is to apply more granular code-splitting on a component level. To encourage this practice, we’ll be working on more ergonomic code-splitting APIs.
 
-<details class="roadmap-done-details" open="true">
-<summary class="roadmap-done-summary">
+<details class="completed-details" open="true">
+<summary>
   <h2>Done</h2>
+  <span class="actions">
+    <span class="action-expand">Show all</span>
+    <span class="action-collapse">Hide all</span>
+    <i class="material-icons expand">expand_more</i>
+  </span>
 </summary>
+<div class="details-content">
 
 ### Accelerated debugging and performance profiling with Angular DevTools
 
@@ -163,4 +169,5 @@ _Completed Q4 2020_
 
 We are actively investing up to 50% of our engineering capacity on triaging issues and PRs until we have a clear understanding of broader community needs. After that, we'll commit up to 20% of our engineering capacity to keep up with new submissions promptly.
 
+</div>
 </details>
diff --git a/aio/src/styles/2-modules/roadmap/_roadmap-theme.scss b/aio/src/styles/2-modules/roadmap/_roadmap-theme.scss
index ae4e6ffe3c..70f91de13b 100644
--- a/aio/src/styles/2-modules/roadmap/_roadmap-theme.scss
+++ b/aio/src/styles/2-modules/roadmap/_roadmap-theme.scss
@@ -1,11 +1,12 @@
-@use 'sass:color';
 @use 'sass:map';
 @use '../../constants';
 
 @mixin theme($theme) {
   $is-dark-theme: map.get($theme, is-dark);
 
-  .roadmap-done-summary::marker {
-    color: if($is-dark-theme, constants.$offwhite, color.adjust(constants.$darkgray, $lightness: 10%));
+  .page-guide-roadmap {
+    .completed-details {
+      border-top: 1px solid if($is-dark-theme, constants.$mediumgray, constants.$lightgray);
+    }
   }
 }
diff --git a/aio/src/styles/2-modules/roadmap/_roadmap.scss b/aio/src/styles/2-modules/roadmap/_roadmap.scss
index a036ab423e..9ce297c8d9 100644
--- a/aio/src/styles/2-modules/roadmap/_roadmap.scss
+++ b/aio/src/styles/2-modules/roadmap/_roadmap.scss
@@ -1,13 +1,16 @@
-.roadmap-done-details {
-  padding: 0 20px 20px;
-  margin: 0 -20px;
-}
+.page-guide-roadmap {
+  .completed-details {
+    box-shadow: none;
+    margin-top: 4rem;
+    padding: 4rem 0 2rem;
 
-.roadmap-done-summary {
-  margin: 0 -20px;
-  font-size: 3.2rem;
-  height: 40px;
-  padding-bottom: 0;
-  display: list-item;
-  user-select: none;
+    > summary {
+      justify-content: space-between;
+      padding: 0;
+    }
+
+    > .details-content {
+      padding: 0;
+    }
+  }
 }