skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(typography): allow font-family to be set per typography level (#5905)

Browse Source 
Fixes #5563.
This commit is contained in:
Kristiyan Kostadinov
2017-07-21 05:37:48 +03:00
committed by Kara
parent 1e0c1fca6b
commit 3b41c0c23e
9 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/button/_button-theme.scss
+1 -1
View File
@@ -109,7 +109,7 @@
@mixin mat-button-typography($config) {
.mat-button, .mat-raised-button, .mat-icon-button {
font: {
family: mat-font-family($config);
family: mat-font-family($config, button);
size: mat-font-size($config, button);
weight: mat-font-weight($config, button);
}
src/lib/core/option/_option-theme.scss
+1 -1
View File
@@ -47,7 +47,7 @@
@mixin mat-option-typography($config) {
.mat-option {
font: {
family: mat-font-family($config);
family: mat-font-family($config, subheading-2);
size: mat-font-size($config, subheading-2);
}
}
src/lib/core/typography/_typography-utils.scss
+9 -3
View File
@@ -19,8 +19,14 @@
}
// Gets the font-family from a typography config and removes the quotes around it.
@function mat-font-family($config) {
@return unquote(map-get($config, font-family));
@function mat-font-family($config, $level: null) {
$font-family: map-get($config, font-family);
@if $level != null {
$font-family: _mat-get-type-value($config, $level, font-family);
}
@return unquote($font-family);
}
// Converts a typography level into CSS styles.
@@ -28,7 +34,7 @@
$font-size: mat-font-size($config, $level);
$font-weight: mat-font-weight($config, $level);
$line-height: mat-line-height($config, $level);
$font-family: mat-font-family($config);
$font-family: mat-font-family($config, $level);
// Use the shorthand `font` to represent a typography level, because it's the shortest. Notes that
// we need to use interpolation for `font-size/line-height` in order to prevent SASS from dividing
src/lib/core/typography/_typography.scss
+25 -6
View File
@@ -1,11 +1,17 @@
@import 'typography-utils';
// Represents a typography level from the Material design spec.
@function mat-typography-level($font-size, $line-height: $font-size, $font-weight: 400) {
@function mat-typography-level(
$font-size,
$line-height: $font-size,
$font-weight: 400,
$font-family: null) {
@return (
font-size: $font-size,
line-height: $line-height,
font-weight: $font-weight
font-weight: $font-weight,
font-family: $font-family
);
}
@@ -28,8 +34,9 @@
// Line-height must be unit-less fraction of the font-size.
$input: mat-typography-level(inherit, 1.125, 400)
) {
@return (
font-family: $font-family,
// Declare an initial map with all of the levels.
$config: (
display-4: $display-4,
display-3: $display-3,
display-2: $display-2,
@@ -44,6 +51,18 @@
button: $button,
input: $input,
);
// Loop through the levels and set the `font-family` of the ones that don't have one to the base.
// Note that SASS can't modify maps in place, which means that we need to merge and re-assign.
@each $key, $level in $config {
@if map-get($level, font-family) == null {
$new-level: map-merge($level, (font-family: $font-family));
$config: map-merge($config, ($key: $new-level));
}
}
// Add the base font family to the config.
@return map-merge($config, (font-family: $font-family));
}
// Adds the base typography styles, based on a config.
@@ -74,7 +93,7 @@
.mat-h5, #{$selector} h5 {
font-size: mat-font-size($config, body-1) * 0.83;
font-weight: mat-font-weight($config, body-1);
font-family: mat-font-family($config);
font-family: mat-font-family($config, body-1);
line-height: mat-line-height($config, body-1);
margin: 0 0 12px;
}
@@ -82,7 +101,7 @@
.mat-h6, #{$selector} h6 {
font-size: mat-font-size($config, body-1) * 0.67;
font-weight: mat-font-weight($config, body-1);
font-family: mat-font-family($config);
font-family: mat-font-family($config, body-1);
line-height: mat-line-height($config, body-1);
margin: 0 0 12px;
}
src/lib/expansion/_expansion-theme.scss
+1 -1
View File
@@ -36,7 +36,7 @@
@mixin mat-expansion-panel-typography($config) {
.mat-expansion-panel-header {
font: {
family: mat-font-family($config);
family: mat-font-family($config, subheading-1);
size: mat-font-size($config, subheading-1);
weight: mat-font-weight($config, subheading-1);
}
src/lib/menu/_menu-theme.scss
+1 -1
View File
@@ -38,7 +38,7 @@
@mixin mat-menu-typography($config) {
.mat-menu-item {
font: {
family: mat-font-family($config);
family: mat-font-family($config, subheading-2);
size: mat-font-size($config, subheading-2);
}
}
src/lib/paginator/_paginator-theme.scss
+2 -8
View File
@@ -31,16 +31,10 @@
}
@mixin mat-paginator-typography($config) {
.mat-paginator {
font: {
family: mat-font-family($config);
size: mat-font-size($config, caption);
}
}
.mat-paginator,
.mat-paginator-page-size .mat-select-trigger {
font: {
family: mat-font-family($config);
family: mat-font-family($config, caption);
size: mat-font-size($config, caption);
}
}
src/lib/snack-bar/_simple-snack-bar-theme.scss
+1 -1
View File
@@ -5,7 +5,7 @@
@mixin mat-simple-snack-bar-typography($config) {
.mat-simple-snackbar {
font: {
family: mat-font-family($config);
family: mat-font-family($config, body-1);
size: mat-font-size($config, body-1);
}
}
src/lib/tabs/_tabs-theme.scss
+1 -1
View File
@@ -47,7 +47,7 @@
.mat-tab-label, .mat-tab-link {
font: {
family: mat-font-family($config);
family: mat-font-family($config, button);
size: mat-font-size($config, button);
weight: mat-font-weight($config, button);
}