vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Add variables for the App Bar's font size and weight. (#1518) 

Add variables for the App Bar's font size and weight and align the defaults to Google's Material Design specs, which say "Across form factors, text that appears in the app bar should use the Title style, Medium 20sp." (see https://material.io/guidelines/style/typography.html).
old
Jared Tarnasky 2017-08-02 11:29:04 -05:00 committed by Javi Velasco
parent cd6a130bac
commit f93040ee4d
2 changed files with 4 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/app_bar/config.css
View File

@ -1,6 +1,8 @@
:root {
--appbar-color: var(--color-primary-dark);
--appbar-contrast: var(--color-primary-contrast);
--appbar-title-font-size: calc(2 * var(--unit));
--appbar-title-font-weight: 500;
--appbar-title-total-distance: calc(8 * var(--unit));
--appbar-height: calc(6.4 * var(--unit));
--appbar-height-m-portrait: calc(5.6 * var(--unit));

9
components/app_bar/theme.css
View File

@ -54,16 +54,11 @@
.title {
flex-grow: 1;
font-size: calc(1.8 * var(--unit));
font-weight: bold;
font-size: var(--appbar-title-font-size);
font-weight: var(--appbar-title-font-weight);
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
& > small {
font-size: calc(1.8 * var(--unit));
font-weight: normal;
}
}
.leftIcon {