[MD settings] change height and width of checkboxes

This CL makes settings-checkboxes change to a two-line height if the
secondary text is set. The width of the checkbox is expanded to fill
more of the row. A couple instances of .two-line used around a
settings-checkbox have been removed.

BUG=634172
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2226963002
Cr-Commit-Position: refs/heads/master@{#410827}

chrome/browser/resources/settings/appearance_page/appearance_page.html

@@ -60,7 +60,7 @@
             </div>
           </template>
         </div>
-        <div class="settings-box two-line"
+        <div class="settings-box"
             hidden="[[!pageVisibility.homeButton]]">
           <settings-checkbox class="start" label="$i18n{showHomeButton}"
               sub-label="[[getShowHomeSubLabel_(prefs.homepage_is_newtabpage.value, prefs.homepage.value)]]"

chrome/browser/resources/settings/controls/settings_checkbox.html

@@ -10,9 +10,14 @@
   <link rel="import" type="css" href="chrome://resources/cr_elements/shared.css">
   <template>
     <style include="settings-shared">
-      :host {
+      #outerRow {
         align-items: center;
         display: flex;
+        min-height: var(--settings-row-two-line-min-height);
+        width: 100%;
+      }
+
+      #outerRow[noSubLabel] {
         min-height: var(--settings-row-min-height);
       }
 
@@ -20,6 +25,10 @@
         @apply(--settings-secondary);
       }
 
+      paper-checkbox:not([disabled]) {
+        width: 100%;
+      }
+
       paper-checkbox:not([checked]) .secondary {
         @apply(--settings-secondary-unchecked);
       }
@@ -30,7 +39,7 @@
     </style>
     <cr-events id="events"></cr-events>
 
-    <div class="layout horizontal center">
+    <div id="outerRow" noSubLabel$="[[!subLabel]]">
       <paper-checkbox id="checkbox" checked="{{checked}}"
           disabled="[[checkboxDisabled_(disabled, pref)]]">
         <div>[[label]]</div>

chrome/browser/resources/settings/device_page/keyboard.html

@@ -51,7 +51,7 @@
         </settings-dropdown-menu>
       </div>
     </template>
-    <div class="settings-box two-line">
+    <div class="settings-box">
       <settings-checkbox
           pref="{{prefs.settings.language.send_function_keys}}"
           label="$i18n{keyboardSendFunctionKeys}"

chrome/browser/resources/settings/settings_shared_css.html

@@ -268,7 +268,7 @@
       /* A row with two lines of text. Often the lower line will be .secondary.
        */
       .settings-box.two-line {
-        min-height: 56px;
+        min-height: var(--settings-row-two-line-min-height);
       }
 
       /*

chrome/browser/resources/settings/settings_vars_css.html

@@ -42,6 +42,7 @@
     --settings-page-vertical-margin: 21px;
 
     --settings-row-min-height: 44px;
+    --settings-row-two-line-min-height: 56px;
     --settings-separator-line: var(--cr-separator-line);
 
     --settings-title-bar-background-color: var(--google-blue-700);