[MD settings] adjust button layout

chrome/browser/resources/settings/settings_shared_css.html

 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="settings_vars_css.html">
 
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
     <style include="cr-shared-style">
       /* Use <h2> as the "sub-header" mentioned in the UX design docs. */
       h2 {
         align-items: center;
         align-self: flex-start;
         color: var(--paper-grey-600);
         display: flex;
         font-size: inherit;
         font-weight: 500;
         margin: 0;
         padding-bottom: 12px;
         padding-top: 24px;
       }
 
       iron-icon {
         flex-shrink: 0;  /* Prevent distortion of icons in cramped UI. */
       }
 
       iron-icon[icon='cr:check'],
       iron-icon[icon='settings:done'] {
        --iron-icon-fill-color: var(--google-green-500);
       }
 
+      paper-icon-button {
+        -webkit-margin-end: var(--cr-icon-ripple-margin);
+        -webkit-margin-start: 16px;
+        color: var(--paper-grey-600);
+        flex-shrink: 0;
+      }
+
+      .separator + button[is='paper-icon-button-light'] {

[hcarmona, 2017/05/26 19:00:50]

Nit: combine this

[dschuyler, 2017/05/26 22:09:07]

Done.

+        -webkit-margin-start: var(--cr-icon-ripple-margin);
+      }
+
+      .separator + paper-icon-button {

[hcarmona, 2017/05/26 19:00:50]

and this b/c they apply the same styling

[dschuyler, 2017/05/26 22:09:07]

Done.

+        -webkit-margin-start: var(--cr-icon-ripple-margin));
+      }
+
       /* See notes in .primary-button.
        * TODO(dschuyler): Remove unnecessary .secondary-button references. */
       paper-button {
         --paper-button: {
           -webkit-padding-end: var(--settings-button-edge-spacing);
           -webkit-padding-start: var(--settings-button-edge-spacing);
           color: var(--paper-grey-600);
           font-weight: 500;
           min-width: 1em;  /* A tighter fit than 5.14em for short buttons. */
           text-decoration: none;
         };
         --paper-button-flat-keyboard-focus: {
           background: rgba(0, 0, 0, .12);
         };
         flex-shrink: 0;
         height: 36px;
         margin: 0;
       }
 
       paper-button[toggles][active] {
         background-color: var(--paper-grey-300);
       }
 
-      .settings-box paper-button {
+      /* If a button is at the end of the row, shift it to overlap the end of
+       * the row. */
+      .settings-box paper-button:last-of-type {
         -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1);
+      }
+
+      /* Space out multiple buttons in the same row. */
+      .settings-box paper-button + paper-button {
+        -webkit-margin-start: 16px;
+      }
+
+      /* Adjust the margin between the separator and the first button. */
+      .settings-box .separator + paper-button {
         -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1);
       }
 
       /* There are two settings button styles, .primary-button and normal
        * buttons. The primary is the action button (e.g. "edit", "delete")
        * while the normal (secondary-button) is often a "Cancel" button. */
       .primary-button {
         --paper-button: {
           -webkit-padding-end: var(--settings-button-edge-spacing);
           -webkit-padding-start: var(--settings-button-edge-spacing);
@@ skipping 318 matching lines @@
         transform: rotate(-135deg);
       }
 
       .column-header {
         color: var(--paper-grey-600);
         font-weight: 500;
       }
     </style>
   </template>
 </dom-module>