[MD settings] Move toggle button dot slightly

This CL moves the circle/dot part of the toggle button slightly. It also adjusts the shadow and translation. These
adjustments are needed for the compact toggle button.

BUG=646003
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2344083002
Cr-Commit-Position: refs/heads/master@{#419330}

chrome/browser/resources/settings/settings_shared_css.html

@@ -34,7 +34,7 @@
       paper-toggle-button {
         @apply(--settings-actionable);
         height: 20px;
-        width: 34px;
+        width: 31px;
       }
 
       paper-dropdown-menu-light {

chrome/browser/resources/settings/settings_vars_css.html

@@ -47,7 +47,9 @@
       width: 24px;
     };
     --settings-toggle-button-size: {
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
       height: 16px;
+      top: -2px;
       width: 16px;
     };
     --settings-toggle-color: var(--google-blue-500);
@@ -76,7 +78,10 @@
 
     --paper-toggle-button-checked-bar: var(--settings-toggle-bar-size);
     --paper-toggle-button-checked-bar-color: var(--settings-toggle-color);
-    --paper-toggle-button-checked-button: var(--settings-toggle-button-size);
+    --paper-toggle-button-checked-button: {
+      @apply(--settings-toggle-button-size);
+      transform: translate(14px, 0);
+    };
     --paper-toggle-button-checked-button-color: var(--settings-toggle-color);
     --paper-toggle-button-label-spacing: 0;
     --paper-toggle-button-unchecked-bar: var(--settings-toggle-bar-size);