[MD settings] adjust control spacing

This CL makes several small adjustments to control/item spacing as
requested by bettes@. The following items were tweaked: toggle button
width, controlled button to policy icon spacing, and ripple size on
icon buttons.

BUG=714320
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2873163002
Cr-Commit-Position: refs/heads/master@{#471908}

chrome/browser/resources/settings/controls/controlled_button.html

@@ -11,9 +11,9 @@
   <template>
     <style include="settings-shared">
       :host {
+        --justify-margin: 8px;
         align-items: center;
         display: flex;
-        --justify-margin: 18px;
       }
 
       :host([enforced_]) {

chrome/browser/resources/settings/settings_shared_css.html

@@ -48,7 +48,7 @@
       paper-toggle-button {
         @apply(--settings-actionable);
         height: var(--settings-row-min-height);
-        width: 31px;
+        width: 36px;
       }
 
       span ~ a {

chrome/browser/resources/settings/settings_vars_css.html

@@ -90,14 +90,13 @@
     --paper-checkbox-label-color: inherit;
     --paper-dialog-color: inherit;
 
-    --cr-icon-ripple-size: 40px;
     --paper-icon-button: {
       /**
-       * This makes the icons 20px (in combination with "--cr-icon-ripple-size:
-       * 40px"), since paper-icon-button>iron-icon width and height are
-       * hardcoded to 100%.
+       * This makes the icons 20px (in combination with --cr-icon-ripple-size),
+       * since paper-icon-button>iron-icon width and height are hard-coded to
+       * 100%.
        */
-      padding: 10px;
+      padding: var(--cr-icon-ripple-padding);
     };
     --paper-input-container-focus-color: var(--google-blue-500);
     --paper-input-container-input: {