CrInput: Add a new mixin for new input container

Add a new mixin for the new input container, which is needed by the
PDF viewer.

Also move background-color styling to the existing
--cr-input-background-color so it is applied to both the container and
the input.

Bug: 888985
Change-Id: I60e1dfe6828ba2d198984ed9ca33d0753aaa1308
Reviewed-on: https://chromium-review.googlesource.com/1244831Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#595704}

chrome/browser/resources/media_router/elements/media_router_container/media_router_container.css

@@ -250,12 +250,12 @@ iron-selector#cast-mode-list {
 }
 
 #sink-search-input {
+  --cr-input-background-color: white;
   --cr-input-container: {
     border-radius: 0;
   }
   --cr-input-error-display: none;
   --cr-input-input: {
-    background-color: white;
     border-bottom: 1px solid var(--paper-grey-800);
   }
   --cr-input-padding-end: 0;

chrome/browser/resources/pdf/elements/viewer-page-selector/viewer-page-selector.html

@@ -22,6 +22,9 @@
         --cr-input-error-display: none;
         --cr-input-background-color: transparent;
         --cr-input-color: white;
+        --cr-input-inner-container: {
+          margin-inline-end: -3px;
+        }
         --cr-input-input: {
           text-align: end;
           caret-color: #fff;

chrome/browser/resources/settings/settings_page/settings_subpage_search.html

@@ -23,12 +23,12 @@
       }
 
       cr-input {
+        --cr-input-background-color: white;
         --cr-input-container: {
           border-radius: 0;
         }
         --cr-input-error-display: none;
         --cr-input-input: {
-          background-color: white;
           border-bottom: 1px solid var(--google-grey-900);
         }
         --cr-input-padding-end: 0;

ui/file_manager/file_manager/main.html

@@ -33,6 +33,7 @@
     <custom-style>
       <style is="custom-style">
         #search-box cr-input {
+          --cr-input-background-color: transparent;
           --cr-input-color: white;
           --cr-input-focus-color: white;
           --cr-input-container: {
@@ -40,7 +41,6 @@
           }
           --cr-input-error-display: none;
           --cr-input-input: {
-            background-color: transparent;
             border-bottom: 1px solid rgba(255, 255, 255, 0.5);
           }
           --cr-input-padding-end: 20px;

ui/file_manager/gallery/gallery.html

@@ -73,12 +73,12 @@
           line-height: var(--cr-form-field-label-font-size);
           margin-bottom: 0;
         }
+        --cr-input-background-color: transparent;
         --cr-input-color: white;
         --cr-input-container: {
           border-radius: 0;
         }
         --cr-input-input: {
-          background-color: transparent;
           border-bottom: 1px solid var(--paper-grey-800);
         }
         --cr-input-padding-end: 0;

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

@@ -35,6 +35,15 @@
         @apply --cr-input-container;
       }
 
+      #inner-input-container {
+        background-color: var(--cr-input-background-color,
+            var(--google-grey-refresh-100));
+        box-sizing: border-box;
+        padding: 0;
+
+        @apply --cr-input-inner-container;
+      }
+
       #input {
         -webkit-appearance: none;
         background-color: var(--cr-input-background-color,