[OsSettingsSearch] Update search box CSS to spec.

Specs:
https://carbon.googleplex.com/cros-ux/pages/search-bar/style?q=

Screenshots:
https://drive.google.com/corp/drive/folders/1bM5wzS4OOKVR0Agco8Dt3GXPf1ZRKpTV

Fixed: 1096875
Change-Id: I3bde5a7fa7a2d034cc18589e98121a10bb73551d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2265397Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#782258}

chrome/browser/resources/settings/chromeos/os_settings_search_box/os_search_result_row.html

@@ -43,6 +43,7 @@
 
       #resultText {
         flex-grow: 1;
+        margin: var(--cr-toolbar-search-field-term-margin);
       }
 
       iron-icon {

chrome/browser/resources/settings/chromeos/os_settings_search_box/os_settings_search_box.html

@@ -19,10 +19,10 @@
     <style include="settings-shared">
       :host {
         --cr-toolbar-field-width: 480px;
-        --cr-toolbar-focused-min-height: 48px;
+        --cr-toolbar-focused-min-height: 40px;
         --cr-toolbar-icon-container-size: 32px;
-        --cr-toolbar-icon-margin: 8px;
-        --cr-toolbar-search-icon-margin-inline-start: 8px;
+        --cr-toolbar-icon-margin: 8px 16px;
+        --cr-toolbar-search-icon-margin-inline-start: 16px;
         --cr-toolbar-query-exists-min-height:
             var(--cr-toolbar-focused-min-height);
         --separator-height: 8px;
@@ -52,11 +52,12 @@
         --cr-toolbar-search-field-prompt-margin-inline-start: 140px;
         --cr-toolbar-search-field-input-text-color:
             var(--cr-primary-text-color);
+        font-size: 13px;
       }
 
       :host(:focus-within) cr-toolbar-search-field {
         --cr-toolbar-search-field-background: var(--cr-card-background-color);
-        box-shadow: var(--cr-menu-shadow);
+        box-shadow: var(--cr-elevation-1);
         min-height: var(--cr-toolbar-focused-min-height);
       }
 
@@ -70,7 +71,8 @@
 
       :host(:focus-within[should-show-dropdown_]) cr-toolbar-search-field {
         --cr-toolbar-search-field-border-radius: 20px 20px 0 0;
-        height: 50px;
+        box-shadow: var(--cr-elevation-3);
+        height: 56px;
         margin-top: var(--separator-height);
         padding-bottom: var(--separator-height);
       }
@@ -83,13 +85,13 @@
       }
 
       iron-dropdown {
-        margin-top: 60px;
+        margin-top: 74px;
       }
 
       iron-dropdown [slot='dropdown-content'] {
         background-color: var(--cr-menu-background-color);
         border-radius: 0 0 20px 20px;
-        box-shadow: var(--cr-menu-shadow);
+        box-shadow: var(--cr-elevation-3);
         display: table;
         padding-bottom: 16px;
       }
@@ -108,12 +110,12 @@
 
       #noSearchResultsContainer {
         height: 24px;
-        margin-inline-start: 48px;
+        margin-inline-start: 64px;
         margin-top: var(--separator-height);
       }
 
       /* The separator covers the top box shadow of the dropdown so that
-       * var(--cr-menu-shadow) can be used instead of custom values. */
+       * var(--cr-elevation-3) can be used instead of custom values. */
       .separator {
         background-color: var(--cr-menu-background-color);
         border-bottom: none;
@@ -123,7 +125,7 @@
         height: var(--separator-height);
         margin-inline-end: 0;
         margin-inline-start: 0;
-        margin-top: -5px;
+        margin-top: -10px;
       }
     </style>
     <cr-toolbar-search-field id="search" narrow="[[narrow]]"

chrome/browser/resources/settings/chromeos/os_toolbar/os_toolbar.html

@@ -28,6 +28,7 @@
         color: var(--cros-default-text-color-secondary);
         display: flex;
         height: var(--cr-toolbar-height);
+        padding-top: 8px;
       }
 
       :host(:not([narrow])) {