MD Settings: Adjust icon ripples and row sizing.

chrome/browser/resources/settings/settings_vars_css.html

 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
 <!-- Common css variables for Material Design settings. -->
 <style is="custom-style">
   /* We keep our vars in sort order, though some vars must be defined prior to
    * others. The --settings-* vars are defined explicitly prior to the --paper-*
    * and --iron-* vars.
    */
   :root {
@@ skipping 14 matching lines @@
       -webkit-padding-start: calc(
           var(--settings-box-row-padding) + var(--settings-indent-width));
       padding-bottom: 0;
       padding-top: 0;
     }
 
     --settings-nav-grey: rgb(90, 90, 90);
 
     --settings-page-vertical-margin: 21px;
 
+    /* TODO (scottchen): re-implement with paddings instead; */
     /* These are used for row items such as radio buttons, check boxes, list
      * items etc. */
-    --settings-row-min-height: 44px;
-    --settings-row-two-line-min-height: 56px;
+    --settings-row-min-height: 45px;
+    --settings-row-two-line-min-height: 64px;
 
+    /* TODO (scottchen): re-implement with paddings instead; */
     /* These are used for the settings-box containers, which may contain one or
      * more "row items". */
-    --settings-box-min-height: 48px;
+    --settings-box-min-height: 45px;

[dschuyler, 2017/02/07 21:22:41]

I'm a bit concerned that changing from an even to an odd row height may case our
(centered) svg icons to render on half-pixel alignment and look fuzzy/blurry. If
the row icons (such as content-settings) look the same then this may not be an
issue. Do they look ok?

[scottchen, 2017/02/08 00:23:23]

Just checked on Mac and Goobuntu, on both machines they icon looks the same for
44px and 45px line-heights, so I think they'll look okay.

     --settings-box-two-line-min-height: 64px;
     --settings-box-three-line-min-height: 84px;
 
     --settings-text-elide: {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     };
 
     --settings-secondary: {
@@ skipping 25 matching lines @@
     --settings-toggle-color: var(--google-blue-500);
 
     --checkbox-margin-start: 2px;
     --checkbox-size: 16px;
     --checkbox-spacing: 18px;
     --iron-icon-fill-color: var(--paper-grey-600);
     --iron-icon-height: var(--cr-icon-size);
     --iron-icon-width: var(--cr-icon-size);
     --paper-checkbox-label-color: inherit;
     --paper-dialog-color: inherit;
+
+    --cr-icon-ripple-size: 40px;
     --paper-icon-button: {
-      height: var(--cr-icon-ripple-size);
-      width: var(--cr-icon-ripple-size);
+      /**
+       * 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%.
+       */
+      padding: 10px;
     };
     --paper-input-container-focus-color: var(--google-blue-500);
     --paper-input-container-input: {
       color: inherit;
       font-size: inherit;
       font-weight: inherit;
       vertical-align: baseline;
     };
     --paper-input-max-width: 264px;
     --paper-item: {
@@ skipping 16 matching lines @@
     --paper-toggle-button-unchecked-button: var(--settings-toggle-button-size);
     --paper-toggle-button-unchecked-ink: var(--settings-toggle-ink-size);
 
     --settings-input-underline: {
       border-color: var(--paper-grey-300);
     }
 
     --paper-input-container-underline: var(--settings-input-underline);
   }
 </style>