MD Settings: Creating a <settings-dialog> element.

chrome/browser/resources/settings/settings_dialog_css.html

Index: chrome/browser/resources/settings/settings_dialog_css.html
diff --git a/chrome/browser/resources/settings/settings_dialog_css.html b/chrome/browser/resources/settings/settings_dialog_css.html
index 5e0cc79b8d3cc9cb8572738f7925b05963ded1de..499b5930592b867a72fa5106aca9399fc771ace8 100644
--- a/chrome/browser/resources/settings/settings_dialog_css.html
+++ b/chrome/browser/resources/settings/settings_dialog_css.html
@@ -1,12 +1,7 @@
-<!-- Common dialog styles for Material Design settings. -->
-<dom-module id="settings-dialog">
+<!-- Styles for <settings-dialog> element. -->
+<dom-module id="settings-dialog-css">
   <template>
     <style>
-      paper-dialog {
-        max-width: 800px;
-        min-width: 500px;
-      }
-
       #dialog-content {
         -webkit-padding-end: 0;
         -webkit-padding-start: 0;
@@ -14,7 +9,12 @@
         margin-top: 0;
       }
 
-      paper-dialog .top-row {
+      #footer {
+        margin: 0;
+        padding: 0;
+      }
+
+      .top-row {
         align-items: center;
         border-bottom: 1px solid gainsboro;
         display: flex;
@@ -22,43 +22,40 @@
         padding-top: 5px;
       }
 
-      paper-dialog .title {
-        flex: 1;
-        font-size: 1.13em;
-      }
-
-      paper-dialog .body {
+      .body-content {
         font-size: 1em;
         margin: 20px 0;
       }
 
-      paper-dialog .title,
-      paper-dialog .body {
-        -webkit-padding-end: 24px;
-        -webkit-padding-start: 24px;
+      paper-dialog {
+        max-width: 800px;
+        min-width: 500px;
       }
 
-      paper-dialog .cancel-button {
-        color: rgb(109, 109, 109);
-        font-weight: 500;
+      :host ::content .title {
+        flex: 1;
+        font-size: 1.13em;
+      }
+
+      :host ::content .title,
+      .body-content {
+        -webkit-padding-end: 24px;
+        -webkit-padding-start: 24px;
       }
 
-      paper-dialog .explanation {
+      :host ::content .body {
         margin-bottom: 35px;
       }
 
-      paper-dialog .button-container {
+      :host ::content .button-container {
         display: flex;
         justify-content: flex-end;
       }
 
-      paper-dialog paper-button {
-        margin: 0;
-        min-width: auto;
-      }
 
-      paper-dialog paper-button[toggles][active] {
-        background-color: LightGray;
+      :host ::content .button-container .cancel-button {
+        color: rgb(109, 109, 109);
+        font-weight: 500;
       }
     </style>
   </template>