Rename gr-settings-styles to gr-form-styles and update a few styles

Because the admin section has a lot of form elements, let's generalize
gr-settings-styles to be used for all forms.

Feature: Issue 6275
Change-Id: I3b94e220c5a1413ce702f0bc272d0db307406222

polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.html

@@ -19,12 +19,12 @@ limitations under the License.
 <link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 
-<link rel="import" href="../../../styles/gr-settings-styles.html">
+<link rel="import" href="../../../styles/gr-form-styles.html">
 
 <dom-module id="gr-account-info">
   <template>
-    <style include="gr-settings-styles"></style>
+    <style include="gr-form-styles"></style>
-    <div class="gr-settings-styles">
+    <div class="gr-form-styles">
       <section>
         <span class="title">ID</span>
         <span class="value">[[_account._account_id]]</span>

polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.html

@@ -20,7 +20,7 @@ limitations under the License.
 <link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 
-<link rel="import" href="../../../styles/gr-settings-styles.html">
+<link rel="import" href="../../../styles/gr-form-styles.html">
 
 <dom-module id="gr-change-table-editor">
   <template>
@@ -40,8 +40,8 @@ limitations under the License.
         border: 1px solid #ddd;
       }
     </style>
-    <style include="gr-settings-styles"></style>
+    <style include="gr-form-styles"></style>
-    <div class="gr-settings-styles">
+    <div class="gr-form-styles">
       <table>
         <thead>
           <tr>

polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.html

@@ -44,8 +44,8 @@ limitations under the License.
         border: 1px solid #ddd;
       }
     </style>
-    <style include="gr-settings-styles"></style>
+    <style include="gr-form-styles"></style>
-    <div class="gr-settings-styles">
+    <div class="gr-form-styles">
       <table>
         <thead>
           <tr>

polygerrit-ui/app/elements/settings/gr-group-list/gr-group-list.html

@@ -17,7 +17,7 @@ limitations under the License.
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 
-<link rel="import" href="../../../styles/gr-settings-styles.html">
+<link rel="import" href="../../../styles/gr-form-styles.html">
 
 <dom-module id="gr-group-list">
   <template>
@@ -32,8 +32,8 @@ limitations under the License.
         text-align: center;
       }
     </style>
-    <style include="gr-settings-styles"></style>
+    <style include="gr-form-styles"></style>
-    <div class="gr-settings-styles">
+    <div class="gr-form-styles">
       <table>
         <thead>
           <tr>

polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.html

@@ -15,7 +15,7 @@ limitations under the License.
 -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../../styles/gr-settings-styles.html">
+<link rel="import" href="../../../styles/gr-form-styles.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
 <link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
@@ -46,8 +46,8 @@ limitations under the License.
         right: 2em;
       }
     </style>
-    <style include="gr-settings-styles"></style>
+    <style include="gr-form-styles"></style>
-    <div class="gr-settings-styles">
+    <div class="gr-form-styles">
       <div hidden$="[[_passwordUrl]]">
         <section>
           <span class="title">Username</span>
@@ -67,7 +67,7 @@ limitations under the License.
         id="generatedPasswordOverlay"
         on-iron-overlay-closed="_generatedPasswordOverlayClosed"
         with-backdrop>
-      <div class="gr-settings-styles">
+      <div class="gr-form-styles">
         <section id="generatedPasswordDisplay">
           <span class="title">New Password:</span>
           <span class="value">[[_generatedPassword]]</span>

polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html

@@ -20,7 +20,7 @@ limitations under the License.
 <link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 
-<link rel="import" href="../../../styles/gr-settings-styles.html">
+<link rel="import" href="../../../styles/gr-form-styles.html">
 
 <dom-module id="gr-menu-editor">
   <template>
@@ -42,8 +42,8 @@ limitations under the License.
         width: 23em;
       }
     </style>
-    <style include="gr-settings-styles"></style>
+    <style include="gr-form-styles"></style>
-    <div class="gr-settings-styles">
+    <div class="gr-form-styles">
       <table>
         <thead>
           <tr>

polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.html

@@ -15,13 +15,13 @@ limitations under the License.
 -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../../styles/gr-settings-styles.html">
+<link rel="import" href="../../../styles/gr-form-styles.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 
 <dom-module id="gr-registration-dialog">
   <template>
-    <style include="gr-settings-styles"></style>
+    <style include="gr-form-styles"></style>
     <style>
       :host {
         display: block;
@@ -47,7 +47,7 @@ limitations under the License.
         justify-content: space-between;
       }
     </style>
-    <main class="gr-settings-styles">
+    <main class="gr-form-styles">
       <header>Please confirm your contact information</header>
       <main>
         <p>

polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html

@@ -29,7 +29,7 @@ limitations under the License.
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
 <link rel="import" href="../../shared/gr-select/gr-select.html">
 
-<link rel="import" href="../../../styles/gr-settings-styles.html">
+<link rel="import" href="../../../styles/gr-form-styles.html">
 
 <dom-module id="gr-settings-view">
   <template>
@@ -42,9 +42,6 @@ limitations under the License.
         margin: 2em auto;
         max-width: 46em;
       }
-      h1 {
-        margin-bottom: .1em;
-      }
       h2.edited:after {
         color: #444;
         content: ' *';
@@ -91,7 +88,7 @@ limitations under the License.
         }
       }
     </style>
-    <style include="gr-settings-styles"></style>
+    <style include="gr-form-styles"></style>
     <div class="loading" hidden$="[[!_loading]]">Loading...</div>
     <div hidden$="[[_loading]]" hidden>
       <nav id="settingsNav">
@@ -110,7 +107,7 @@ limitations under the License.
           <li><a href="#Groups">Groups</a></li>
         </ul>
       </nav>
-      <main class="gr-settings-styles">
+      <main class="gr-form-styles">
         <h1>User Settings</h1>
         <h2
             id="Profile"

polygerrit-ui/app/elements/settings/gr-ssh-editor/gr-ssh-editor.html

@@ -16,7 +16,7 @@ limitations under the License.
 
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
-<link rel="import" href="../../../styles/gr-settings-styles.html">
+<link rel="import" href="../../../styles/gr-form-styles.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
 <link rel="import" href="../../shared/gr-overlay/gr-overlay.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
@@ -49,8 +49,8 @@ limitations under the License.
         right: 2em;
       }
     </style>
-    <style include="gr-settings-styles"></style>
+    <style include="gr-form-styles"></style>
-    <div class="gr-settings-styles">
+    <div class="gr-form-styles">
       <fieldset>
         <table>
           <thead>

polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html

@@ -17,7 +17,7 @@ limitations under the License.
 <link rel="import" href="../../shared/gr-autocomplete/gr-autocomplete.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
 <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
-<link rel="import" href="../../../styles/gr-settings-styles.html">
+<link rel="import" href="../../../styles/gr-form-styles.html">
 
 <dom-module id="gr-watched-projects-editor">
   <template>
@@ -54,8 +54,8 @@ limitations under the License.
         width: 26em;
       }
     </style>
-    <style include="gr-settings-styles"></style>
+    <style include="gr-form-styles"></style>
-    <div class="gr-settings-styles">
+    <div class="gr-form-styles">
       <table>
         <thead>
           <tr>

polygerrit-ui/app/styles/gr-form-styles.html

@@ -13,43 +13,58 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
-<dom-module id="gr-settings-styles">
+<dom-module id="gr-form-styles">
   <template>
     <style>
-      .gr-settings-styles fieldset {
+      .gr-form-styles h1 {
+        margin-bottom: .1em;
+      }
+      .gr-form-styles fieldset {
         border: none;
         margin: 0 0 2em 2em;
       }
-      .gr-settings-styles section {
+      .gr-form-styles.full-width fieldset {
+        margin: 0 0 2em 0;
+      }
+      .gr-form-styles section {
         margin-bottom: .5em;
       }
-      .gr-settings-styles .title,
+      .gr-form-styles .title,
-      .gr-settings-styles .value {
+      .gr-form-styles .value {
         display: inline-block;
         vertical-align: top;
       }
-      .gr-settings-styles .title {
+      .gr-form-styles .title {
         color: #666;
         font-weight: bold;
         padding-right: .5em;
         width: 11em;
       }
-      .gr-settings-styles input {
+      .gr-form-styles.full-width .title {
+        color: #666;
+        font-weight: bold;
+        padding-right: .5em;
+        width: 22em;
+      }
+      .gr-form-styles input {
         font-size: 1em;
       }
-      .gr-settings-styles th {
+      .gr-form-styles iron-autogrow-textarea {
+        font-size: 1em;
+      }
+      .gr-form-styles th {
         color: #666;
         text-align: left;
       }
-      .gr-settings-styles tbody tr:nth-child(even) {
+      .gr-form-styles tbody tr:nth-child(even) {
         background-color: #f4f4f4;
       }
       @media only screen and (max-width: 40em) {
-        .gr-settings-styles section {
+        .gr-form-styles section {
           margin-bottom: 1em;
         }
-        .gr-settings-styles .title,
+        .gr-form-styles .title,
-        .gr-settings-styles .value {
+        .gr-form-styles .value {
           display: block;
         }
       }