Introduce -h1 -h2 -h3 css vars for font-size

Change -large to -h3.

Change-Id: I10c293c6e65896f2fdebaa5d24396ace3e6281db
This commit is contained in:
Ben Rohlfs
2019-10-20 22:14:14 +02:00
parent 65789b8287
commit 36919a5e3c
13 changed files with 22 additions and 20 deletions

View File

@@ -107,7 +107,7 @@ limitations under the License.
}
.label.u-green:not(.u-monospace),
.label.u-red:not(.u-monospace) {
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
}
.u-gray-background {
background-color: var(--table-header-background-color);

View File

@@ -55,7 +55,7 @@ limitations under the License.
vertical-align: top;
}
#help h1 {
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
}
#help p {
margin-bottom: var(--spacing-m);

View File

@@ -90,7 +90,7 @@ limitations under the License.
align-items: center;
display: flex;
flex: 1;
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
}
.headerTitle .headerSubject {
font-weight: var(--font-weight-bold);
@@ -300,7 +300,7 @@ limitations under the License.
}
.headerTitle {
flex-wrap: wrap;
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
}
.desktop {
display: none;

View File

@@ -42,7 +42,7 @@ limitations under the License.
}
#title {
display: inline-block;
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
margin-top: var(--spacing-xs);
}
h2 {

View File

@@ -161,7 +161,7 @@ limitations under the License.
}
@media screen and (max-width: 50em) {
.bigTitle {
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
}
gr-smart-search,

View File

@@ -106,7 +106,7 @@ limitations under the License.
}
.loading {
color: var(--deemphasized-text-color);
font-size: 2rem;
font-size: var(--font-size-h1);
height: 100%;
padding: var(--spacing-l);
text-align: center;
@@ -185,7 +185,7 @@ limitations under the License.
}
.mobileNavLink {
color: var(--primary-text-color);
font-size: 1.5rem;
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
text-decoration: none;
}

View File

@@ -51,7 +51,7 @@ limitations under the License.
padding: var(--spacing-m) var(--spacing-l);
}
header gr-editable-label {
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
--label-style: {
text-overflow: initial;
white-space: initial;
@@ -72,7 +72,7 @@ limitations under the License.
.controlGroup {
align-items: center;
display: flex;
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
}
.rightControls {
justify-content: flex-end;

View File

@@ -111,7 +111,7 @@ limitations under the License.
margin-top: var(--spacing-m);
}
.errorText {
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
}
.errorMoreInfo {
color: var(--deemphasized-text-color);

View File

@@ -165,7 +165,7 @@ limitations under the License.
}
@media only screen and (max-width: 50em) {
:host {
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
}
gr-change-list-item {
flex-wrap: wrap;

View File

@@ -35,7 +35,7 @@ limitations under the License.
}
.header .label {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
margin: 0 var(--spacing-l) 0 0;
}
.header .note {

View File

@@ -78,7 +78,7 @@ limitations under the License.
}
.genericList .groupHeader {
background-color: var(--table-subheader-background-color);
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
}
.genericList a {
color: var(--primary-text-color);

View File

@@ -75,15 +75,15 @@ limitations under the License.
}
/* Other Shared Styles*/
h1 {
font-size: 2rem;
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
}
h2 {
font-size: 1.5rem;
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
}
h3 {
font-size: var(--font-size-large);
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
}
iron-icon {

View File

@@ -74,9 +74,11 @@ html {
/* fonts */
--font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--font-size-normal: 1rem; /* 13 px */
--font-size-small: .92rem; /* 12 px */
--font-size-large: 1.154rem; /* 15 px */
--font-size-normal: 1rem; /* 13px */
--font-size-small: .92rem; /* 12px */
--font-size-h3: 1.154rem; /* 15px */
--font-size-h2: 1.5rem; /* 19.5px */
--font-size-h1: 2rem; /* 26px */
/* Used on text for change list that needs user's attention. */
--font-weight-bold: 500;
--monospace-font-family: 'Roboto Mono', Menlo, 'Lucida Console', Monaco, monospace;