[MD settings] layout vertical separators with paper-icon-button-light

ui/webui/resources/cr_elements/shared_vars_css.html

Index: ui/webui/resources/cr_elements/shared_vars_css.html
diff --git a/ui/webui/resources/cr_elements/shared_vars_css.html b/ui/webui/resources/cr_elements/shared_vars_css.html
index 2696e1cb9ecccbc589174e8348f35de876bc9f23..9ac8bb9d880fac57ca8dbfc577114f617d66da72 100644
--- a/ui/webui/resources/cr_elements/shared_vars_css.html
+++ b/ui/webui/resources/cr_elements/shared_vars_css.html
@@ -27,7 +27,7 @@
     --cr-paper-icon-button-margin: {

[stevenjb, 2017/05/17 22:00:49]

I also noticed that this is used by cr-expand-button, I assume this still looks
correct (or looks more correct now)?

[dschuyler, 2017/05/18 00:17:52]

added screen shots to help verify.

       /* Allow ripple to overlap the end. */
       -webkit-margin-end: calc(var(--cr-icon-ripple-padding) * -1);
-      -webkit-margin-start: 16px;
+      -webkit-margin-start: calc(var(--cr-icon-ripple-padding) * -1);

[stevenjb, 2017/05/17 16:39:37]

So, just to be clear, we are changing this from a start padding of 16px to -8px?
We should add a comment about overlapping the start as well here.

[dschuyler, 2017/05/17 21:28:14]

True.
What comment would be good here - the negative values may be a clear indication
that the item is shifting to some readers. Maybe:

- <no comment, just remove it>

- /* Shift the button toward the end of the row. */

- /* Allow ripple to overlap the start and the end. */
    This last one reads weirdly to me (harder for me to figure 
    out what the comment is trying to say than figure out 
    what the code is doing).

[stevenjb, 2017/05/17 21:36:04]

How about just:

/* Allow the ripple to overlap the icon. */

To me, the comment as it currently is suggests that we are just overlapping the
end, but now we are overlapping both.

[dschuyler, 2017/05/18 00:17:52]

:), that kinda sounds like the ripple is overlapping the icon, which is normal.
I took another shot at the comment, wdyt?

     }
 
     --cr-selectable-focus: {