Decrease dot interval in SAML smart card PIN input

Reduce the interval between dots in the input field shown on the SAML
smart card dialog (the <security-token-pin> Polymer element).

The interval is decreased in order to fit 8 dots, in order to have a
nice UX for one of the most common cases - the 8-digit PIN. (It's pretty
rare to have a longer PIN.)

Bug: 1051859
Test: start SAML login using a smart card, type 8 digits in the PIN dialog, verify that all 8 dots fit into the input field
Change-Id: I96b43e320f5107c2c0b6a46cd1f2f49199222c6b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2069324
Commit-Queue: Maksim Ivanov <emaxx@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#745538}

chrome/browser/resources/chromeos/login/security_token_pin.css

@@ -12,6 +12,7 @@
     width: 192px;
   };
   --pin-keyboard-number-color: var(--google-grey-900);
+  --cr-input-letter-spacing: 14px;
   --cr-icon-button-margin-start: 5px;
 }
 

ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.html

@@ -148,8 +148,8 @@
         --cr-input-error-display: none;
         --cr-input-input: {
           font-size: 28px;
-          letter-spacing: 18px;
         };
+        --cr-input-letter-spacing: var(--cr-input-letter-spacing, 18px);
         --cr-input-padding-end: 0;
         --cr-input-padding-start: 0;
         background-color: white;

ui/webui/resources/cr_elements/cr_input/cr_input.html

@@ -51,6 +51,7 @@
 
       #input {
         border-bottom: var(--cr-input-border-bottom, none);
+        letter-spacing: var(--cr-input-letter-spacing);
       }
 
       #input::placeholder {