Settings Rewrite: Make a common settings-section component.

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_page.css b/chrome/browser/resources/settings/settings_page/settings_section.css
similarity index 50%
copy from chrome/browser/resources/settings/settings_page/settings_page.css
copy to chrome/browser/resources/settings/settings_page/settings_section.css
index 25dd0d8d9d875659ac24c01c68af1839366d10cc..193636834ab6565c96df2305b15c8412e2c8ab66 100644
--- a/chrome/browser/resources/settings/settings_page/settings_page.css
+++ b/chrome/browser/resources/settings/settings_page/settings_section.css
@@ -7,11 +7,30 @@
  * 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 {
@@ -22,15 +41,3 @@
 .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;
-}