[MD Settings][People] UI polish for the easy unlock row

chrome/browser/resources/settings/people_page/people_page.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/icon.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
@@ skipping 45 matching lines @@
       }
 
       iron-icon[icon='settings:sync-problem'] {
        --iron-icon-fill-color: var(--settings-error-color);
       }
 
       .settings-box .sync-error {
         color: var(--settings-error-color);
       }
 
+      .settings-box.three-line {
+        min-height: 100px;
+      }
+
       .icon-container {
         display: flex;
         flex-shrink: 0;
         justify-content: center;
         width: 40px;
       }
 
       #googleg-logo {
         background-image: url(../../../../../ui/webui/resources/images/200-logo_googleg.png);
         background-size: cover;
@@ skipping 122 matching lines @@
               <div>$i18n{lockScreenTitle}</div>
               <div class="secondary">
                 [[getPasswordState_(hasPin,
                                     prefs.settings.enable_screen_lock.value)]]
               </div>
             </div>
           </div>
         </template>
 
         <template is="dom-if" if="[[easyUnlockAllowed_]]">
-          <div class="settings-box">
-            <div class="middle">
+          <div class$="settings-box [[getEasyUnlockClass_(
+              easyUnlockEnabled_, easyUnlockProximityDetectionAllowed_)]]">

[stevenjb, 2016/11/04 22:52:08]

This is kind of awkward. We definitely shouldn't be using a somewhat arbitrary
local value here (100px). Instead can we just make this two-line and use padding
to ensure that taller content looks correct?

[Moe, 2016/11/06 21:43:14]

Done.

+            <div class="start">
               <div>$i18n{easyUnlockSectionTitle}</div>
               <div class="secondary">
                 <template is="dom-if" if="[[!easyUnlockEnabled_]]">
                   $i18n{easyUnlockSetupIntro}
                 </template>
                 <template is="dom-if" if="[[easyUnlockEnabled_]]">
                   $i18n{easyUnlockDescription}
                 </template>
-                <a target="_blank" href$="$i18n{easyUnlockLearnMoreURL}">
+                <a target="_blank" href="$i18n{easyUnlockLearnMoreURL}">
                   $i18n{learnMore}
                 </a>
                 <template is="dom-if" if="[[easyUnlockEnabled_]]">
                   <template is="dom-if"
                       if="[[easyUnlockProximityDetectionAllowed_]]">
                     <settings-checkbox
                         pref="{{prefs.easy_unlock.proximity_required}}"
                         label="$i18n{easyUnlockRequireProximityLabel}">
                     </settings-checkbox>
                   </template>
@@ skipping 117 matching lines @@
 
 <if expr="chromeos">
     <template is="dom-if" if="[[easyUnlockEnabled_]]">
       <easy-unlock-turn-off-dialog id="easyUnlockTurnOffDialog">
       </easy-unlock-turn-off-dialog>
     </template>
 </if>
   </template>
   <script src="people_page.js"></script>
 </dom-module>