Settings Rewrite: Make a common settings-section component.

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 > paper-material {
-  -webkit-padding-start: 80px;
+  @apply(--shadow-elevation-4dp);
   background-color: white;
-  display: flex;
-  flex-direction: column;
-  padding: 40px;
+  margin: 16px;
+  width: 605px;
+}
+
+[header] {

[michaelpg, 2015/07/21 22:04:01]

why an attribute instead of a class/ID?

[tommycli, 2015/07/22 19:06:42]

Done.

+  @apply(--layout-horizontal);
+  @apply(--layout-center);
+  background-color: #f8f8f8;
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+  padding: 16px;
+}
+
+[header] iron-icon {
+  color: rgba(0, 0, 0, .87);
+  padding-right: 16px;

[michaelpg, 2015/07/21 22:04:01]

-webkit-padding-end

[tommycli, 2015/07/22 19:06:42]

Why webkit-padding-end instead of padding-right?

+}

[michaelpg, 2015/07/21 22:04:01]

nit: newline

[tommycli, 2015/07/22 19:06:42]

Done.

+[header] .title {
+  @apply(--paper-font-body2);
+}
+
+div.content {
+  padding: 16px;
 }
 
 .soft-border {
   border: 1px solid #c4c4c4;
   border-radius: 2px;
 }
 
 .page-content {
   width: 760px;
 }
-
-cr-settings-page-header {
-  margin-bottom: 30px;
-  min-height: 24px;
-}
-
-cr-settings-checkbox {
-  -webkit-margin-end: 10px;
-  -webkit-margin-start: 0;
-  margin-bottom: 10px;
-  margin-top: 10px;
-}