[MD settings] move footer class into dialog style-module

chrome/browser/resources/settings/settings_dialog.html

 <link rel="import" href="chrome://resources/html/polymer_config.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/paper-dialog-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/paper-dialog-shared-styles.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 
 <dom-module id="settings-dialog">
   <template>
     <style include="paper-dialog-shared-styles"></style>
     <style>
+      .body-content {
+        font-size: 1em;
+        margin: 20px 0;
+      }
+
       .dialog-content {
         -webkit-padding-end: 0;
         -webkit-padding-start: 0;
         margin-bottom: 0;
         margin-top: 0;
       }
 
       .footer-container {
         margin: 0;
         padding: 0;
       }
 
       .top-row {
         align-items: center;
-        border-bottom: 1px solid gainsboro;
+        border-bottom: 1px solid var(--paper-grey-300);
         display: flex;
         padding-bottom: 5px;
         padding-top: 5px;
       }
 
-      .body-content {
-        font-size: 1em;
-        margin: 20px 0;
-      }
-
       :host {
         max-width: 800px;
         min-width: 500px;
       }
 
-      :host ::content .title {
-        flex: 1;
-        font-size: 1.13em;
-      }
-
-      :host ::content .title,
-      .body-content {
-        -webkit-padding-end: 24px;
-        -webkit-padding-start: 24px;
-      }
-
       :host ::content .body {
         margin-bottom: 35px;
       }
 
       :host ::content .button-container {
         display: flex;
         justify-content: flex-end;
       }
 
       :host ::content .button-container .cancel-button {
-        color: rgb(109, 109, 109);
+        color: var(--paper-grey-600);
         font-weight: 500;
       }
+
+      :host ::content .footer {
+        background-color: var(--paper-grey-200);
+        margin: 0;
+        padding: 20px;
+      }
+
+      :host ::content .row {
+        align-items: center;
+        display: flex;
+        min-height: 40px;
+      }
+
+      :host ::content .row .start {
+        flex: 1;
+      }
+
+      :host ::content .title {
+        flex: 1;
+        font-size: 1.13em;
+      }
+
+      :host ::content .title,
+      .body-content {
+        -webkit-padding-end: 24px;
+        -webkit-padding-start: 24px;
+      }
     </style>
     <div class="dialog-content">
       <div class="top-row">
         <content select=".title"></content>
         <paper-icon-button icon="clear" on-tap="cancel" id="close">
         </paper-icon-button>
       </div>
       <div class="body-content">
         <content select=".body"></content>
         <content select=".button-container"></content>
       </div>
     </div>
     <div class="footer-container">
       <content select=".footer"></content>
     </div>
   </template>
   <script src="settings_dialog.js"></script>
 </dom-module>