[MD settings] separate spacing of controlled-by icon and control-label

ui/webui/resources/cr_elements/shared_vars_css.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
 <!-- Common css variables for Material Design WebUI. -->
 <style is="custom-style">
   :root {
     --cr-actionable: {
       cursor: pointer;
     };
 
+    /* Spacing between a control (e.g. checkbox) and its label. */
+    --cr-control-label-spacing: 20px;

[stevenjb, 2017/05/15 23:40:09]

Is this actually used other than on the settings_shared file? If not, maybe just
define it there?

[dschuyler, 2017/05/15 23:49:29]

Done.

+
     /* Spacing between policy (controlledBy) indicator and control. */
-    --cr-control-spacing: 24px;
+    --cr-controlled-by-spacing: 24px;
 
     --cr-focused-item-color: var(--google-grey-300);
 
     /* 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: {
       height: var(--cr-icon-size);
       width: var(--cr-icon-size);
     }
 
     --cr-paper-icon-button-margin: {
       /* Allow ripple to overlap the end. */
       -webkit-margin-end: calc(var(--cr-icon-ripple-padding) * -1);
       -webkit-margin-start: 16px;
     }
 
     --cr-selectable-focus: {
       background-color: var(--cr-focused-item-color);
       outline: none;
     }
     --cr-separator-height: 1px;
     --cr-separator-line: var(--cr-separator-height) solid rgba(0, 0, 0, 0.06);
     --paper-checkbox-ink-size: 40px;
   }
 </style>