MD Settings: Fix size and padding of expand button

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

 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
 <link rel="import" href="/bluetooth_page/bluetooth_device_list_item.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="bluetooth-device-dialog">
   <template>
     <style include="settings-shared">
       #pairing {
         margin-bottom: 10px;
       }
 
       #pairing paper-input {
         text-align: center;
       }
 
       #pinDiv {
         margin-top: 10px;
       }
 
       paper-spinner {
-        @apply(--cr-icon-size);
+        @apply(--cr-icon-height-width);

[dschuyler, 2016/12/16 22:41:41]

Is having a literal name->contents desired?  i.e. if a third thing were added
would the name change?

The -size suffix appears better than -height-width to me on first glance. Could
you tell me more about why this name is better so I 'get-it'? 

[stevenjb, 2016/12/16 22:56:10]

As I'm sure you've now noticed we use 'size' for the actual value that width and
height share. I am open to naming alternatives.

[dschuyler, 2016/12/17 01:13:54]

I don't know, maybe -dimensions or -area. That might not be better. I think
-size is ok as an option too. I see what you're saying and don't want the CL to
get stuck on a variable name.

(I tried MW Thesaurus on dimensions and one option was bailiwick, kinda
tempting).

[stevenjb, 2016/12/19 18:20:21]

--cr-icon-size = 8px
--cr-icon-height-width = { height: var(--cr-icon-size); width:
var(--cr-icon-size); }

Otherwise I would have stuck with -size.

If we add properties to --cr-icon-height-width, then we should rename it, but I
suspect we won't. I agree that the name is not great.

         margin: 0 10px;
       }
 
       .dialog-message {
         margin-bottom: 10px;
       }
 
       div.contents {
         height: 250px;
       }
@@ skipping 127 matching lines @@
         </template>
         <template is="dom-if" if="[[isDialogType_('connectError', dialogId)]]">
           <paper-button  on-tap="close">$i18n{bluetoothDismiss}
           </paper-button>
         </template>
       </div>
     </dialog>
   </template>
   <script src="/bluetooth_page/bluetooth_device_dialog.js"></script>
 </dom-module>