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

refactor(typography): add mixin for shorthand declaration and use shorthand for h5 and h6 (#9346)

Browse Source 
* Moves our `font` declaration shorthand logic into the `mat-typography-font-shorthand` mixin to make it easier to use without passing in a typography config.
* Switches the `h5` and `h6` to use the shorthands.
This commit is contained in:
Kristiyan Kostadinov
2018-01-23 16:53:07 +01:00
committed by Jeremy Elbourn
parent 8de5e83dcf
commit 4e8aa52d32
2 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/core/typography/_typography-utils.scss
+16 -10
View File
@@ -29,13 +29,9 @@
@return if($font-family == null, $font-family, unquote($font-family));
}
// Converts a typography level into CSS styles.
@mixin mat-typography-level-to-styles($config, $level) {
$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, $level);
// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
// the individual properties if a value that isn't allowed in the shorthand is passed in.
@mixin mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
// If any of the values are set to `inherit`, we can't use the shorthand
// so we fall back to passing in the individual properties.
@if ($font-size == inherit or
@@ -53,9 +49,19 @@
font-family: $font-family;
}
@else {
// Otherwise use the shorthand `font` to represent a typography level, because it's the the
// least amount of bytes. Note that we need to use interpolation for `font-size/line-height`
// in order to prevent Sass from dividing the two values.
// Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
// that we need to use interpolation for `font-size/line-height` in order to prevent
// Sass from dividing the two values.
font: $font-weight #{$font-size}/#{$line-height} $font-family;
}
}
// Converts a typography level into CSS styles.
@mixin mat-typography-level-to-styles($config, $level) {
$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, $level);
@include mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
}
src/lib/core/typography/_typography.scss
+14 -8
View File
@@ -91,18 +91,24 @@
// consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
// and h6 at 0.67em.
.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, body-1);
line-height: mat-line-height($config, body-1);
@include mat-typography-font-shorthand(
mat-font-size($config, body-1) * 0.83,
mat-font-weight($config, body-1),
mat-line-height($config, body-1),
mat-font-family($config, body-1)
);
margin: 0 0 12px;
}
.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, body-1);
line-height: mat-line-height($config, body-1);
@include mat-typography-font-shorthand(
mat-font-size($config, body-1) * 0.67,
mat-font-weight($config, body-1),
mat-line-height($config, body-1),
mat-font-family($config, body-1)
);
margin: 0 0 12px;
}