[MD settings] moving dialog css to shared to use in OnStartup and Reset settings

chrome/browser/resources/settings/settings_shared.css

Index: chrome/browser/resources/settings/settings_shared.css
diff --git a/chrome/browser/resources/settings/settings_shared.css b/chrome/browser/resources/settings/settings_shared.css
index 706b5c91ce48b7eeb4542460d57e7ad573d0489a..04e93cd75b32a545e9ea0e0be6419ab79402756b 100644
--- a/chrome/browser/resources/settings/settings_shared.css
+++ b/chrome/browser/resources/settings/settings_shared.css
@@ -7,31 +7,7 @@
  * Common styles for Material Design settings.
  */
 
-paper-button {
-  margin: 0;
-  min-width: auto;
-}
-
-paper-button[toggles][active] {
-  background-color: LightGray;
-}
-
-h2 {
-  color: #9e9e9e;
-  font-size: 100%;
-  font-weight: normal;
-  margin-bottom: 20px;
-  margin-top: 30px;
-}
-
-.button-row {
-  display: flex;
-  margin-top: 25px;
-}
-
-.button-strip {
-  text-align: end;
-}
+/* List styles */
 
 .list-frame {
   @apply(--layout-center);
@@ -43,7 +19,7 @@ h2 {
 .list-item {
   @apply(--layout-center);
   border-top: 1px solid #e0e0e0;
-  display: block;
+  display: flex;
   padding: 0;
 }
 
@@ -51,18 +27,21 @@ h2 {
   border-top: none;
 }
 
+.list-item .middle {
+  flex: 1;
+  margin-bottom: 8px;
+  margin-left: 12px;
+  margin-right: 12px;
+  margin-top: 8px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .list-item > paper-icon-item {
   padding: 0;
 }
 
-.link-button {
-  color: rgb(66, 133, 244);
-  padding-bottom: 6px;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 6px;
-  text-transform: none;
-}
+/* Section styles */
 
 .settings-box {
   @apply(--layout-center);
@@ -88,3 +67,36 @@ h2 {
   /* Same padding as paper-icon-button. */
   padding: 8px;
 }
+
+/* General styles */
+
+.button-strip {
+  text-align: end;
+}
+
+.link-button {

[dpapad, 2015/12/09 23:12:06]

Are we still using buttons as links? They were removed from the reset page
dialogs, and regular links are used now.

[dschuyler, 2015/12/09 23:29:59]

Acknowledged.

+  color: rgb(66, 133, 244);
+  padding-bottom: 6px;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 6px;

[dpapad, 2015/12/09 23:12:06]

Lines 79-82 can be compressed as follows:
padding: 6px 0;

[dschuyler, 2015/12/09 23:29:59]

Acknowledged.

+  text-transform: none;
+}
+
+.text-elide {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.secondary-color {

[dpapad, 2015/12/09 23:12:06]

This one is a bit odd. 
1) Secondary to what? Is there a primary-color class.
2) Most importantly this class resembles a CSS variable, instead of having some
semantic meaning. It is similar to doing something like this.

.display-block {
  display: block;
}

[dschuyler, 2015/12/09 23:30:00]

Acknowledged.

+  color: #969696;
+}
+
+h2 {
+  color: #9e9e9e;
+  font-size: 100%;
+  font-weight: normal;
+  margin-bottom: 20px;
+  margin-top: 30px;
+}