[MD settings] layout of buttons inside toggles and iron-lists

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 21 matching lines @@
         -webkit-margin-start: 16px;
         color: var(--paper-grey-600);
         flex-shrink: 0;
       }
 
       .separator + button[is='paper-icon-button-light'],
       .separator + paper-icon-button {
         -webkit-margin-start: var(--cr-icon-ripple-margin));
       }
 
+      .list-item paper-icon-button {
+        /* Workaround iron-list cutting off ripples on paper-icon-buttons.
+         * TODO(dschuyler): Can the end margin be done differently to allow for
+         * ripples to look like they are overlapping the margin. */
+        -webkit-margin-end: 0;
+      }
+
       /* 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);
       }
 
       /* 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);
       }
 
+      /* Special case for buttons inside of toggle-buttons. */
+      .settings-box settings-toggle-button paper-button:last-of-type {
+        -webkit-margin-end: 16px;
+      }
+
       /* 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);
       }
 
@@ skipping 325 matching lines @@
         transform: rotate(-135deg);
       }
 
       .column-header {
         color: var(--paper-grey-600);
         font-weight: 500;
       }
     </style>
   </template>
 </dom-module>