WebUI: move cr-input padding styles out of mixin

This allows us to not copy every property specified in the mixin when
we want to override just one of them.

Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I121c5cbf66f8fbdd159a65139d537d92119ea2e1
Reviewed-on: https://chromium-review.googlesource.com/1142482Reviewed-by: mark a. foltz <mfoltz@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#577217}

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

@@ -240,12 +240,13 @@ paper-listbox {
   }
   --cr-input-error-display: none;
   --cr-input-input: {
-    -webkit-padding-start: 0;
     background-color: white;
     border-bottom: 1px solid var(--paper-grey-800);
-    padding-bottom: 2px;
-    padding-top: 2px;
   }
+  --cr-input-padding-end: 0;
+  --cr-input-padding-start: 0;
+  --cr-input-padding-bottom: 2px;
+  --cr-input-padding-top: 2px;
   -webkit-margin-end: 31px;
   align-self: center;
   flex-grow: 1;

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

@@ -24,15 +24,15 @@
         --cr-input-color: white;
         --cr-input-input: {
           -webkit-margin-start: -3px;
-          -webkit-padding-end: 3px;
-          -webkit-padding-start: 3px;
-          padding-bottom: 0;
-          padding-top: 0;
           text-align: end;
           caret-color: #fff;
           border-radius: 2px;
           box-sizing: content-box;
         }
+        --cr-input-padding-end: 3px;
+        --cr-input-padding-start: 3px;
+        --cr-input-padding-bottom: 0;
+        --cr-input-padding-top: 0;
         -webkit-margin-start: -3px;
         height: 100%;
         width: 1ch;

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

@@ -29,29 +29,19 @@
         --cr-input-error-display: none;
         --cr-input-input: {
           background-color: white;
-          -webkit-padding-end: 0;
-          -webkit-padding-start: 0;
-          padding-bottom: 2px;
-          padding-top: 2px;
           border-bottom: 1px solid var(--google-grey-900);
         }
+        --cr-input-padding-end: 0;
+        --cr-input-padding-start: 0;
+        --cr-input-padding-bottom: 2px;
+        --cr-input-padding-top: 2px;
         display: inline-block;
         vertical-align: middle;
         width: 160px;  /* Special width for search input. */
       }
 
       :host([has-search-text]) cr-input {
-        /* Unfortunately we have to duplicate most of this mixin, due to how
-           redeclaration overrides the entire mixin, but the only value that
-           changes is padding-end. */
-        --cr-input-input: {
-          background-color: white;
-          -webkit-padding-end: 20px;
-          -webkit-padding-start: 0;
-          padding-bottom: 2px;
-          padding-top: 2px;
-          border-bottom: 1px solid var(--google-grey-900);
-        }
+        --cr-input-padding-end: 20px;
       }
 
       #searchInput {

ui/file_manager/file_manager/main.html

@@ -35,10 +35,10 @@
         --cr-input-error-display: none;
         --cr-input-input: {
           background-color: transparent;
-          -webkit-padding-end: 20px;
-          -webkit-padding-start: 0;
           border-bottom: 1px solid rgba(255, 255, 255, 0.5);
         }
+        --cr-input-padding-end: 20px;
+        --cr-input-padding-start: 0;
         --cr-input-placeholder-color: rgba(255, 255, 255, 0.5);
         display: inline-block;
         transition: width 200ms ease;
@@ -54,10 +54,10 @@
         --cr-input-input: {
           background-color: transparent;
           border-bottom: 1px solid var(--paper-grey-800);
-          -webkit-padding-end: 0;
-          -webkit-padding-start: 0;
-          padding-bottom: 2px;
         }
+        --cr-input-padding-end: 0;
+        --cr-input-padding-start: 0;
+        --cr-input-padding-bottom: 2px;
         width: 100%;
       }
 

ui/file_manager/gallery/gallery.html

@@ -75,11 +75,11 @@
         border-radius: 0;
       }
       --cr-input-input: {
-        -webkit-padding-end: 0;
-        -webkit-padding-start: 0;
         background-color: transparent;
         border-bottom: 1px solid var(--paper-grey-800);
       }
+      --cr-input-padding-end: 0;
+      --cr-input-padding-start: 0;
       --cr-input-error-display: none;
       --cr-input-focus-color: white;
     }

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

@@ -59,10 +59,10 @@
          *
          * See https://crbug.com/846254 and associated CL for more information.
          */
-        -webkit-padding-end: 8px;
-        -webkit-padding-start: 8px;
-        padding-bottom: 6px;
-        padding-top: 6px;
+        -webkit-padding-end: var(--cr-input-padding-end, 8px);
+        -webkit-padding-start: var(--cr-input-padding-start, 8px);
+        padding-bottom: var(--cr-input-padding-bottom, 6px);
+        padding-top: var(--cr-input-padding-top, 6px);
 
         @apply --cr-input-input;
       }