Change font sizes from em to rem

Change-Id: Ib97c05836bcf1a19959bb1bed8ee30897b663de7
2018-01-26 14:43:46 -08:00
parent cc2b6c6566
commit e64a1c9958
22 changed files with 51 additions and 43 deletions
--- a/polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html
+++ b/polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html
@@ -44,7 +44,7 @@ limitations under the License.
        --gr-autocomplete: {
          border: 1px solid #d1d2d3;
          border-radius: 2px;
-          font-size: 1em;
+          font-size: var(--font-size-normal);
          height: 2em;
          padding: 0 .15em;
          width: 20em;
--- a/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html
+++ b/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html
@@ -41,7 +41,7 @@ limitations under the License.
        --gr-autocomplete: {
          border: 1px solid #d1d2d3;
          border-radius: 2px;
-          font-size: 1em;
+          font-size: var(--font-size-normal);
          height: 2em;
          padding: 0 .15em;
          width: 20em;
--- a/polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members.html
+++ b/polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members.html
@@ -50,7 +50,7 @@ limitations under the License.
      gr-autocomplete {
        width: 20em;
        --gr-autocomplete: {
-          font-size: 1em;
+          font-size: var(--font-size-normal);
          height: 2em;
          width: 20em;
        }
--- a/polygerrit-ui/app/elements/admin/gr-repo-detail-list/gr-repo-detail-list.html
+++ b/polygerrit-ui/app/elements/admin/gr-repo-detail-list/gr-repo-detail-list.html
@@ -69,7 +69,7 @@ limitations under the License.
      .canEdit .revisionEdit{
        align-items: center;
        display: flex;
-        line-height: 1em;
+        line-height: 1;
      }
      .deleteButton:not(.show) {
        display: none;
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -85,7 +85,7 @@ limitations under the License.
        align-items: center;
        display: flex;
        flex: 1;
-        font-size: 1.2em;
+        font-size: 1.2rem;
      }
      .header-title .headerSubject {
        font-family: var(--font-family-bold);
@@ -120,7 +120,7 @@ limitations under the License.
      }
      .changeMetadata {
        border-right: 1px solid #ddd;
-        font-size: .95em;
+        font-size: .95rem;
        padding: 1em 0;
      }
      /* Prevent plugin text from overflowing. */
@@ -190,7 +190,7 @@ limitations under the License.
        overflow: hidden;
      }
      #relatedChanges {
-        font-size: .9em;
+        font-size: .9rem;
      }
      #relatedChanges.collapsed {
        margin-bottom: 1.1em;
@@ -270,7 +270,7 @@ limitations under the License.
        }
        .header-title {
          flex-wrap: wrap;
-          font-size: 1.1em;
+          font-size: 1.1rem;
        }
        .desktop {
          display: none;
@@ -292,7 +292,7 @@ limitations under the License.
        }
        .relatedChanges,
        .changeMetadata {
-          font-size: 1em;
+          font-size: var(--font-size-normal);
        }
        .changeMetadata {
          border-right: none;
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -160,7 +160,7 @@ limitations under the License.
        color: var(--color-link);
        cursor: pointer;
        display: block;
-        font-size: .8em;
+        font-size: var(--font-size-small);
        min-width: 2em;
      }
      gr-diff {
--- a/polygerrit-ui/app/elements/change/gr-related-changes-list/gr-related-changes-list.html
+++ b/polygerrit-ui/app/elements/change/gr-related-changes-list/gr-related-changes-list.html
@@ -48,17 +48,17 @@ limitations under the License.
      }
      .changeContainer.thisChange:before {
        content: '➔';
-        width: 1.2em
+        width: 1.2em;
      }
      h4,
      section div {
-        display: flex
+        display: flex;
      }
      h4:before,
      section div:before {
        content: ' ';
        flex-shrink: 0;
-        width: 1.2em
+        width: 1.2em;
      }
      .relatedChanges a {
        display: inline-block;
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.html
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.html
@@ -52,7 +52,7 @@ limitations under the License.
        color: #999;
      }
      .remove {
-        font-size: .9em;
+        font-size: var(--font-size-small);
      }
      gr-button {
        --gr-button: {
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
@@ -97,7 +97,7 @@ limitations under the License.
      }
      .loading {
        color: #777;
-        font-size: 2em;
+        font-size: 2rem;
        height: 100%;
        padding: 1em var(--default-horizontal-margin);
        text-align: center;
@@ -151,7 +151,7 @@ limitations under the License.
        }
        .fullFileName {
          display: block;
-          font-size: .9em;
+          font-size: var(--font-size-small);
          font-style: italic;
          min-width: 50%;
          padding: 0 .1em;
@@ -164,7 +164,7 @@ limitations under the License.
        }
        .mobileNavLink {
          color: #000;
-          font-size: 1.5em;
+          font-size: 1.5rem;
          font-family: var(--font-family-bold);
          text-decoration: none;
        }
--- a/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-theme-default.html
+++ b/polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-theme-default.html
@@ -30,7 +30,7 @@ limitations under the License.
      }
      .gr-syntax-keyword {
        color: #9E0069;
-        line-height: 1em;
+        line-height: 1;
      }
      .gr-syntax-number,
      .gr-syntax-selector-class {
--- a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html
+++ b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html
@@ -55,7 +55,7 @@ limitations under the License.
        --gr-autocomplete: {
          border: 1px solid #d1d2d3;
          border-radius: 2px;
-          font-size: 1em;
+          font-size: var(--font-size-normal);
          height: 2em;
          padding: 0 .15em;
        }
@@ -63,7 +63,7 @@ limitations under the License.
      input {
        border: 1px solid #d1d2d3;
        border-radius: 2px;
-        font-size: 1em;
+        font-size: var(--font-size-normal);
        height: 2em;
        margin: .5em 0;
        padding: 0 .15em;
--- a/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
+++ b/polygerrit-ui/app/elements/edit/gr-editor-view/gr-editor-view.html
@@ -48,7 +48,7 @@ limitations under the License.
        padding: .75em var(--default-horizontal-margin);
      }
      header gr-editable-label {
-        font-size: 1.2em;
+        font-size: 1.2rem;
        font-weight: bold;
      }
      .textareaWrapper {
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -113,14 +113,14 @@ limitations under the License.
        display: flex;
      }
      .errorEmoji {
-        font-size: 2.6em;
+        font-size: 2.6rem;
      }
      .errorText,
      .errorMoreInfo {
        margin-top: .75em;
      }
      .errorText {
-        font-size: 1.2em;
+        font-size: 1.2rem;
      }
      .errorMoreInfo {
        color: #999;
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
@@ -47,10 +47,10 @@ limitations under the License.
        --gr-button: {
          border: 0;
          color: #666;
-          font-size: 1.7em;
+          font-size: 1.7rem;
          font-weight: normal;
          height: .6em;
-          line-height: .6em;
+          line-height: .6;
          margin-left: .15em;
          margin-top: -.05em;
          padding: 0;
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
@@ -45,7 +45,7 @@ limitations under the License.
          min-width: 15em;
        }
        --paper-input-container-input: {
-          font-size: 1em;
+          font-size: var(--font-size-normal);
        }
        --paper-input-container-underline: {
          display: none;
@@ -60,7 +60,7 @@ limitations under the License.
      paper-input.warnUncommitted {
        --paper-input-container-input: {
          color: #ff0000;
-          font-size: 1em;
+          font-size: var(--font-size-normal);
        }
      }
    </style>
--- a/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.html
+++ b/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.html
@@ -28,7 +28,7 @@ limitations under the License.
        background-color: var(--chip-background-color);
        color: #fff;
        font-family: var(--font-family);
-        font-size: 13px;
+        font-size: var(--font-size-normal);
        padding: .1em .5em;
        white-space: nowrap;
      }
--- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
@@ -57,7 +57,7 @@ limitations under the License.
      paper-item {
        cursor: pointer;
        flex-direction: column;
-        font-size: 1em;
+        font-size: var(--font-size-normal);
        --paper-item: {
          min-height: 0;
          padding: 10px 16px;
@@ -77,13 +77,21 @@ limitations under the License.
      }
      .bottomContent {
        color: rgba(0,0,0,.54);
-        font-size: .9em;
-        line-height: 16px;
+        font-size: var(--font-size-small);
+        /*
+         * Should be 16px when the base font size is 13px (browser default of
+         * 16px.
+         */
+        line-height: 1.37rem;
      }
      .bottomContent,
      .topContent {
        display: flex;
-        line-height: 16px;
+        /*
+         * Should be 16px when the base font size is 13px (browser default of
+         * 16px.
+         */
+        line-height: 1.37rem;
        justify-content: space-between;
        flex-direction: row;
        width: 100%;
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
@@ -71,7 +71,7 @@ limitations under the License.
          min-width: 15em;
        }
        --paper-input-container-input: {
-          font-size: 1em;
+          font-size: var(--font-size-normal);
        }
      }
    </style>
--- a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
@@ -44,10 +44,10 @@ limitations under the License.
        --gr-button: {
          border: 0;
          color: #666;
-          font-size: 1.7em;
+          font-size: 1.7rem;
          font-weight: normal;
          height: .6em;
-          line-height: .6em;
+          line-height: .6;
          margin-left: .15em;
          margin-top: -.05em;
          padding: 0;
--- a/polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view.html
+++ b/polygerrit-ui/app/elements/shared/gr-list-view/gr-list-view.html
@@ -24,7 +24,7 @@ limitations under the License.
  <template>
    <style include="shared-styles">
      #filter {
-        font-size: 1em;
+        font-size: var(--font-size-normal);
        max-width: 25em;
      }
      #topContainer {
--- a/polygerrit-ui/app/styles/gr-form-styles.html
+++ b/polygerrit-ui/app/styles/gr-form-styles.html
@@ -42,7 +42,7 @@ limitations under the License.
        width: 15em;
      }
      .gr-form-styles iron-autogrow-textarea {
-        font-size: 1em;
+        font-size: var(--font-size-normal);
      }
      .gr-form-styles th {
        color: #666;
@@ -77,7 +77,7 @@ limitations under the License.
      .gr-form-styles textarea {
        border: 1px solid #d1d2d3;
        border-radius: 2px;
-        font-size: 1em;
+        font-size: var(--font-size-normal);
        height: 2em;
        padding: 0 .15em;
      }
@@ -96,7 +96,7 @@ limitations under the License.
          border: 1px solid #d1d2d3;
          border-radius: 2px;
          box-sizing: border-box;
-          font-size: 1em;
+          font-size: var(--font-size-normal);
          padding: .25em .15em 0 .15em;
        }
      }
@@ -105,7 +105,7 @@ limitations under the License.
        --gr-autocomplete: {
          border: 1px solid #d1d2d3;
          border-radius: 2px;
-          font-size: 1em;
+          font-size: var(--font-size-normal);
          height: 2em;
          padding: 0 .15em;
          width: 14em;
--- a/polygerrit-ui/app/styles/shared-styles.html
+++ b/polygerrit-ui/app/styles/shared-styles.html
@@ -67,15 +67,15 @@ limitations under the License.
      }
      /* Other Shared Styles*/
      h1 {
-        font-size: 2em;
+        font-size: 2rem;
        font-family: var(--font-family-bold);
      }
      h2 {
-        font-size: 1.5em;
+        font-size: 1.5rem;
        font-family: var(--font-family-bold);
      }
      h3 {
-        font-size: 1.17em;
+        font-size: var(--font-size-small);
        font-family: var(--font-family-bold);
      }
      iron-icon {