[MD settings] Adjust toggle button dot slightly

chrome/browser/resources/settings/settings_shared_css.html

 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="/settings_vars_css.html">
 
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
     <style include="cr-shared-style">
       /* Use <h2> as the "sub-header" mentioned in the UX design docs. */
       h2 {
         align-items: center;
@@ skipping 16 matching lines @@
         margin: 0;
       }
 
       paper-button[toggles][active] {
         background-color: var(--paper-grey-300);
       }
 
       paper-toggle-button {
         @apply(--settings-actionable);
         height: 20px;
-        width: 34px;
+        width: 31px;

[tommycli, 2016/09/16 23:32:11]

What was this change for?

[dschuyler, 2016/09/16 23:35:43]

It's to make the bounding box slim enough
that the toggle lands on the edges of the
element. So that the control looks like 
it's correctly placed. Without the change
there is extra space between the control
and edge of the card.

       }
 
       paper-dropdown-menu-light {
         --iron-icon-fill-color: var(--paper-grey-600);
         --paper-font-subhead: {
           font-size: inherit;
         };
         --paper-dropdown-menu-input: {
           border-bottom-color: var(--paper-grey-300);
         };
@@ skipping 338 matching lines @@
       /* Turns the arrow direction downwards, when the bubble is placed above
        * the anchor element */
       .search-bubble-innards.above::after {
         -webkit-transform: rotate(-135deg);
         bottom: -5px;
         top: auto;
       }
     </style>
   </template>
 </dom-module>