MD Settings: Custom expand/collapse section animations.

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

 /* Copyright 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 /**
  * @fileoverview
  * 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 {
   margin-bottom: 12px;
 }
 
 #header .title {
   color: rgb(104, 113, 116);
   font-size: 13px;
   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;
 }