Settings WebUI: Remove --settings-list-frame-padding mixin

This CL replaces uses of --settings-list-frame-padding with the
existing .list-frame class and removes the align-items property on the
class as it has no effect on block elements.

Bug: 973674
Change-Id: I69eef3deaa016e0183c6c3d359e29f94e5b0875a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2161931
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#762148}

chrome/browser/resources/settings/on_startup_page/startup_urls_page.html

     <style include="settings-shared action-link iron-flex">
-      .list-frame {
-        @apply --settings-list-frame-padding;
-      }
-
       .list-frame > div {
         border-top: var(--cr-separator-line);
       }
 
       #outer {
-        @apply --settings-list-frame-padding;
         max-height: 355px;  /** Enough height to show six entries. */
       }
 
@@ -16,7 +11,7 @@
         cursor: default;
       }
     </style>
-    <div id="outer" class="layout vertical flex">
+    <div id="outer" class="layout vertical flex list-frame">
       <div id="container" class="scroll-container" scrollable>
         <iron-list items="[[startupPages_]]" scroll-target="container"
             preserve-focus risk-selection class="cr-separators">

chrome/browser/resources/settings/search_engines_page/search_engines_list.html

@@ -13,10 +13,6 @@
         flex: 4;
       }
 
-      #outer {
-        @apply --settings-list-frame-padding;
-      }
-
       settings-search-engine-entry {
         border-top: var(--cr-separator-line);
       }
@@ -34,7 +30,7 @@
         width: var(--cr-icon-ripple-size);
       }
     </style>
-    <div id="outer">
+    <div id="outer" class="list-frame">
       <div id="headers" class="column-header">
         <div class="name">$i18n{searchEnginesSearchEngine}</div>
         <div class="keyword">$i18n{searchEnginesKeyword}</div>

chrome/browser/resources/settings/search_engines_page/search_engines_page.html

-    <style include="cr-shared-style settings-shared iron-flex">
-      .extension-engines,
-      #noOtherEngines,
-      .no-search-results {
-        @apply --settings-list-frame-padding;
-      }
-
+    <style include="cr shared-style settings-shared iron-flex">
       settings-omnibox-extension-entry {
         border-top: var(--cr-separator-line);
       }
@@ -12,7 +6,8 @@
     <div class="cr-row first">
       <h2>$i18n{searchEnginesDefault}</h2>
     </div>
-    <div class="no-search-results" hidden="[[matchingDefaultEngines_.length]]">
+    <div class="no-search-results list-frame"
+        hidden="[[matchingDefaultEngines_.length]]">
       $i18n{searchNoResults}
     </div>
     <settings-search-engines-list fixed-height
@@ -32,10 +27,11 @@
         $i18n{add}
       </cr-button>
     </div>
-    <div id="noOtherEngines" hidden="[[otherEngines.length]]">
+    <div id="noOtherEngines" class="list-frame"
+        hidden="[[otherEngines.length]]">
       $i18n{searchEnginesNoOtherEngines}
     </div>
-    <div class="no-search-results"
+    <div class="no-search-results list-frame"
         hidden="[[!showNoResultsMessage_(
             otherEngines, matchingOtherEngines_)]]">
       $i18n{searchNoResults}
@@ -49,10 +45,11 @@
       <div class="cr-row first">
         <h2>$i18n{searchEnginesExtension}</h2>
       </div>
-      <div class="no-search-results" hidden="[[matchingExtensions_.length]]">
+      <div class="no-search-results list-frame"
+          hidden="[[matchingExtensions_.length]]">
         $i18n{searchNoResults}
       </div>
-      <iron-list id="extensions" class="extension-engines"
+      <iron-list id="extensions" class="extension-engines list-frame"
           items="[[matchingExtensions_]]" preserve-focus risk-selection>
         <template>
           <settings-omnibox-extension-entry engine="[[item]]"

chrome/browser/resources/settings/settings_shared_css.html

@@ -154,9 +154,11 @@
        * outside of a settings-box. A list-frame is likely to follow a
        * settings box. */
       .list-frame {
-        @apply --settings-list-frame-padding;
-        align-items: center;
         display: block;
+        padding-block-end: 0;
+        padding-block-start: 0;
+        padding-inline-end: var(--cr-section-padding);
+        padding-inline-start: var(--cr-section-indent-padding);
       }
 
       /* A list-item is intended to be contained within a list-frame. The list

chrome/browser/resources/settings/settings_vars_css.html

@@ -15,13 +15,6 @@
     --settings-disabled-opacity: .65;
     --settings-error-color: var(--google-red-700);
 
-    --settings-list-frame-padding: {
-      padding-inline-end: var(--cr-section-padding);
-      padding-inline-start: var(--cr-section-indent-padding);
-      padding-bottom: 0;
-      padding-top: 0;
-    }
-
     /* No --settings-nav-icon-color needed in light mode. */
     --settings-nav-item-color: var(--google-grey-refresh-700);