Settings Rewrite: Make subpage scrolling work.

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.
  */
-#section {
-  background-color: white;
+:host {
+  display: block;
+}
+
+:host(.expanded) {
   height: 100%;
-  margin-bottom: 16px;
-  overflow: hidden;
-  width: 605px;
+}
+
+:host(.hidden) {

[Dan Beam, 2015/09/25 00:49:41]

why do we need .hidden when we can just use... hidden?

[tommycli, 2015/09/25 17:23:22]

Done.

+  display: none;
+}
+
+:host(.expanded) #header {
+  display: none;
 }
 
 #header .title {
   @apply(--paper-font-body2);
 }
 
-#content-container {
+paper-material {
+  background-color: white;
+  box-sizing: border-box;
+  margin-bottom: 16px;
+  overflow: hidden;
   padding: 16px;
+  width: 605px;
 }
+
+:host(.neon-animating) paper-material {
+  position: fixed;
+  z-index: 1;
+}
+
+:host(.expanded) paper-material {
+  margin-bottom: 0;
+  min-height: 100%;
+}
+
+#placeholder {
+  margin-bottom: 16px;

[Dan Beam, 2015/09/25 00:49:41]

add a comment that this matches paper-material or move to a new rule:

paper-material,
#placeholder {
  margin-bottom: 16px;
  width: 605px;
}

[tommycli, 2015/09/25 17:23:22]

Done.

+  position: absolute;
+  visibility: hidden;
+  width: 100px;

[Dan Beam, 2015/09/25 00:49:41]

why wouldn't we just match the paper-material width?

[tommycli, 2015/09/25 17:23:22]

Done.

+}
+
+:host(.neon-animating) #placeholder {

[Dan Beam, 2015/09/25 00:49:41]

:host(:not(.neon-animating)) #placeholder {
  position: absolute;
}

[tommycli, 2015/09/25 17:23:22]

Done.

+  position: static;
+}