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

chrome/browser/resources/settings/settings_shared.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 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);
   display: block;
   margin-left: 48px;
   padding: 0;
 }
 
 .list-item {
   @apply(--layout-center);
   border-top: 1px solid #e0e0e0;
-  display: block;
+  display: flex;
   padding: 0;
 }
 
 .list-item:first-of-type {
   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);
   border-top: 1px solid #e0e0e0;
   display: block;
   min-height: 20px;
   padding: 8px 16px;
 }
 
 .settings-box:first-of-type {
   border-top: none;
 }
 
 .split {
   display: flex;
 }
 
 .split .start {
   flex: auto;
 }
 
 .settings-box paper-item iron-icon {
   /* 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;
+}