Settings WebUI: Remove three-line class

This CL removes the `three-line` CSS class and related CSS variables
and updates the one subpage they were used in. Using the CSS class
`cr-padded-text` instead keeps padding consistent with other row-like
UI in WebUI and also keeps the heights the same as they were before
with the `three-line` CSS class.

https://imgur.com/a/MPYDcHY

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

chrome/browser/resources/settings/privacy_page/collapse_radio_button.html

@@ -45,8 +45,6 @@
 
       #labelWrapper {
         --cr-radio-button-label-spacing: 0;
-        padding-bottom: 6px;
-        padding-top: 6px;
       }
 
       #radioCollapse {
@@ -73,7 +71,7 @@
       <div id="borderWrapper">
         <iron-icon id="buttonIcon"
             icon="[[icon]]" hidden$="[[!icon]]"></iron-icon>
-        <div id="labelWrapper">
+        <div id="labelWrapper" class="cr-padded-text">
           <div id="label" aria-hidden="true">
             [[label]]
             <slot name="label"></slot>

chrome/browser/resources/settings/privacy_page/security_page.html

@@ -13,19 +13,10 @@
         min-height: var(--settings-row-min-height);
       }
 
-      .bullet-line.three-line {
-        min-height: var(--settings-row-three-line-min-height);
-      }
-
       .bullet-line > div {
         padding-inline-start: var(--cr-radio-button-size);
       }
 
-      settings-collapse-radio-button {
-        --settings-collapse-toggle-min-height:
-            var(--settings-row-three-line-min-height);
-      }
-
       settings-collapse-radio-button:not(:first-of-type) {
         --settings-collapse-separator-line: var(--cr-separator-line);
       }
@@ -97,9 +88,9 @@
                 $i18n{safeBrowsingEnhancedBulFour}
               </div>
             </div>
-            <div class="bullet-line three-line last-collapse-item">
+            <div class="bullet-line last-collapse-item">
               <iron-icon icon="settings20:data"></iron-icon>
-              <div class="secondary">
+              <div class="secondary cr-padded-text">
                 $i18n{safeBrowsingEnhancedBulFive}
               </div>
             </div>
@@ -120,9 +111,9 @@
                   $i18n{safeBrowsingStandardBulOne}
               </div>
             </div>
-            <div class="bullet-line three-line">
+            <div class="bullet-line">
               <iron-icon icon="settings20:data"></iron-icon>
-              <div class="secondary">
+              <div class="secondary cr-padded-text">
                   $i18n{safeBrowsingStandardBulTwo}
               </div>
             </div>

chrome/browser/resources/settings/settings_shared_css.html

@@ -216,12 +216,6 @@
         min-height: var(--settings-row-two-line-min-height);
       }
 
-      /* A row with three lines of text. Often the lower lines will be
-       * .secondary. */
-      .three-line {
-        min-height: var(--settings-row-three-line-min-height);
-      }
-
       /* A settings-box is a horizontal row of text or controls within a
        * setting section (page or subpage). */
       .settings-box {
@@ -248,10 +242,6 @@
         min-height: var(--settings-row-two-line-min-height);
       }
 
-      .settings-box.three-line {
-        min-height: var(--settings-row-three-line-min-height);
-      }
-
       .settings-box-text {
         box-sizing: border-box;
         padding-bottom: var(--cr-section-vertical-padding);

chrome/browser/resources/settings/settings_vars_css.html

@@ -20,8 +20,6 @@
 
     --settings-row-min-height: var(--cr-section-min-height);
     --settings-row-two-line-min-height: var(--cr-section-two-line-min-height);
-    --settings-row-three-line-min-height:
-        var(--cr-section-three-line-min-height);
 
     /* Spacing between a control (e.g. checkbox) and its label. */
     --settings-control-label-spacing: 20px;

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -152,7 +152,6 @@
      * items etc. */
     --cr-section-min-height: 48px;
     --cr-section-two-line-min-height: 64px;
-    --cr-section-three-line-min-height: 84px;
 
     --cr-section-padding: 20px;
     --cr-section-vertical-padding: 12px;