[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;
@@ skipping 32 matching lines @@
         };
         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 {

[hcarmona, 2017/05/25 23:42:58]

This will also affect a button that is by itself.
Just making sure it's intentional.

[dschuyler, 2017/05/26 00:07:03]

If the button is entirely by itself or if it has stuff before it, that should
all be fine iiuc.
If there is only one button with (or if the last button has) stuff after it,
that may be an issue (and I intent to dig into this further after the m60
branch).

         -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>