MD Settings: Custom expand/collapse section animations.

chrome/browser/resources/settings/settings_page/settings_section.css

Index: chrome/browser/resources/settings/settings_page/settings_section.css
diff --git a/chrome/browser/resources/settings/settings_page/settings_section.css b/chrome/browser/resources/settings/settings_page/settings_section.css
index f0c37a9183a6db42cabba2641c71b2466de7081f..85d6e9166f08c022adfe96f14d84f1ec7a597348 100644
--- a/chrome/browser/resources/settings/settings_page/settings_section.css
+++ b/chrome/browser/resources/settings/settings_page/settings_section.css
@@ -7,15 +7,9 @@
  * Common styles for Settings pages.
  */
 :host {
-  display: block;
-}
-
-:host(.expanded) {
-  height: 100%;
-}
-
-:host(.expanded) #header {
-  display: none;
+  display: flex;
+  flex-direction: column;
+  position: relative;
 }
 
 #header {
@@ -28,31 +22,28 @@
   font-weight: 500;
 }
 
-paper-material {
+#card {
   background-color: white;
-  box-sizing: border-box;
   overflow: hidden;
 }
 
-paper-material,
-#placeholder {
-  margin-bottom: 16px;
+#card {
+  flex: 1;
 }
 
-:host(.neon-animating) paper-material {
-  position: fixed;
-  z-index: 1;
+:host(.expanded) {
+  margin-bottom: 0;
 }
 
-:host(.expanded) paper-material {
-  margin-bottom: 0;
-  min-height: 100%;
+:host(.expanded) #header {
+  display: none;
 }
 
-#placeholder {
-  visibility: hidden;
+:host(.frozen) #card {
+  position: fixed;
+  width: 100%;
 }
 
-:host(:not(.neon-animating)) #placeholder {
-  position: absolute;
+:host(.expanded.frozen) #card {
+  position: relative;
 }