MD Settings: inline bluetooth_dialog_shared_css.html now that it's only

chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.html

 <link rel="import" href="chrome://md-settings/bluetooth_page/bluetooth_device_list_item.html">
 <link rel="import" href="chrome://md-settings/settings_dialog.html">
 <link rel="import" href="chrome://resources/polymer/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/paper-input/paper-input.html">
-<link rel="import" href="chrome://md-settings/bluetooth_page/bluetooth_dialog_shared_css.html">
 
 <dom-module id="bluetooth-device-dialog">
   <template>
-    <style include="settings-shared bluetooth-dialog-shared"></style>
+    <style include="settings-shared">
+      #dialogOuterDiv {
+        margin-bottom: 16px;
+      }
+
+      #dialogHeaderDiv {
+        height: 40px;
+        margin: 0 5px 10px;
+      }
+
+      #dialogFooterDiv {
+        height: 40px;
+        margin: 0 20px;
+      }
+
+      #dialogMessage {
+        margin-bottom: 10px;
+      }
+
+      #dialogTitle {
+        font-size: 125%;
+        margin: 0 10px;
+      }
+
+      #dialogDeviceList {
+        -webkit-margin-start: 4px;
+        height: 210px;
+        margin-bottom: 20px;
+        overflow-y: auto;
+      }
+
+      #pairing {
+        margin-bottom: 10px;
+      }
+
+      #pairing paper-input {
+        text-align: center;
+      }
+
+      #pinDiv {
+        margin-top: 10px;
+      }
+
+      iron-selector {
+        width: 100%;
+      }
+
+      paper-spinner {
+        height: 20px;
+        margin: 0 10px;
+        width: 20px;
+      }
+
+      /* .display indicates a displayed pin code or passkey. */
+      span.display {
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-shadow: 0 0 0 1px #222;
+        color: #222;
+        font-size: 16px;
+        height: 38px;
+        line-height: 38px;
+        margin: 0 5px;
+        padding: 0 15px;
+        text-align: center;
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+      }
+
+      span.display.next {
+        background: rgb(77, 144, 254);
+        border: 2px solid rgb(77, 144, 254);
+        box-shadow: none;
+        color: #fff;
+      }
+
+      span.display.untyped {
+        border: 1px solid #d4d4d4;
+        box-shadow: 0 0 0 1px #888;
+        color: #666;
+      }
+
+      /* .confirm indicates a confirmation passkey. */
+      span.confirm {
+        color: #999;
+        font-size: 20px;
+        font-weight: 600;  /* semibold */
+        margin: 0 20px;
+      }
+    </style>

[stevenjb, 2016/05/09 17:02:57]

If inlining CSS is the preference (requirement? I only partially recall how that
discussion went) now, we should add a note in the WebUI style guide (in sites,
or in the draft doc at least).

[Dan Beam, 2016/05/09 18:27:37]

i don't think we need to be prescriptive about unsharing things.

     <settings-dialog id="dialog" class="layout vertical">
       <!-- TODO(dbeam): use .title instead. -->
       <div class="body">
         <template is="dom-if" if="[[isDialog_(dialog, 'addDevice')]]">
 
           <div id="dialogHeaderDiv" class="settings-box layout horizontal">
             <span id="dialogTitle" class="flex">
               $i18n{bluetoothAddDevicePageTitle}
             </span>
             <paper-icon-button icon="close" on-tap="onAddCancelTap_"
@@ skipping 82 matching lines @@
               hidden$="[[showDismiss_(pairingDevice, pairingEvent)]]">
             $i18n{cancel}
           </paper-button>
 
         </template>
       </div>
     </settings-dialog>
   </template>
   <script src="chrome://md-settings/bluetooth_page/bluetooth_device_dialog.js"></script>
 </dom-module>