MD Settings: Fix network list styling

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 21d27d1d2bd7470dd3170d9b516ca72a6a962b76..3913ecbe4e1d6e5e64844792aae6c277a9c0662e 100644
--- a/ui/webui/resources/cr_elements/shared_vars_css.html
+++ b/ui/webui/resources/cr_elements/shared_vars_css.html
@@ -6,12 +6,15 @@
     --cr-actionable: {
       cursor: pointer;
     };
+
+    --cr-control-spacing: 18px;
+
     --cr-focused-item-color: var(--google-grey-300);
-    /* Same padding as paper-icon-button. */
-    --cr-icon-padding: 8px;
 
     /* The inner icon is 20px in size. paper-icon-button has 8px padding. */
     --cr-icon-ripple-size: 36px;
+    --cr-icon-ripple-padding: 8px;
+
     --cr-icon-size: 20px;
 
     --cr-icon-height-width: {
@@ -20,7 +23,8 @@
     }
 
     --cr-paper-icon-button-margin: {
-      -webkit-margin-end: -8px;  /* Allow ripple to overlap the end. */
+      /* Allow ripple to overlap the end. */
+      -webkit-margin-end: calc(var(--cr-icon-ripple-padding) * -1);
       -webkit-margin-start: 16px;
     }