m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

expose variables for typography sizes (#9693)

Browse Source 
This will allow usage in areas where getting the line-height, etc
of the typography settings will introduce issues. The mixins have been
updated to references these variables so that they can be changed in
one place in the future
This commit is contained in:
Brad Decker 2020-10-28 09:03:38 -05:00 committed by GitHub
parent 5b67cf1009
commit 96717cc9e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui/app/css/design-system/typography.scss
View File

@ -69,11 +69,22 @@ $fa-font-path: 'fonts/fontawesome';
$font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
$font-size-h1: 2.5rem;
$font-size-h2: 2rem;
$font-size-h3: 1.5rem;
$font-size-h4: 1.125rem;
$font-size-h5: 1rem;
$font-size-h6: 0.875rem;
$font-size-paragraph: 1rem;
$font-size-h7: 0.75rem;
$font-size-h8: 0.625rem;
$font-size-h9: 0.5rem;
// Typography
@mixin H1 {
font-style: normal;
font-weight: normal;
font-size: 2.5rem;
font-size: $font-size-h1;
font-family: $font-family;
line-height: 140%;
}
@ -82,7 +93,7 @@ $font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
@mixin H2 {
font-style: normal;
font-weight: normal;
font-size: 2rem;
font-size: $font-size-h2;
font-family: $font-family;
line-height: 140%;
}
@ -90,7 +101,7 @@ $font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
@mixin H3 {
font-style: normal;
font-weight: normal;
font-size: 1.5rem;
font-size: $font-size-h3;
font-family: $font-family;
line-height: 140%;
}
@ -98,7 +109,7 @@ $font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
@mixin H4 {
font-style: normal;
font-weight: normal;
font-size: 1.125rem;
font-size: $font-size-h4;
font-family: $font-family;
line-height: 140%;
}
@ -106,46 +117,41 @@ $font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
@mixin H5 {
font-style: normal;
font-weight: normal;
font-size: 1rem;
font-family: $font-family;
font-size: $font-size-h5;
line-height: 140%;
}
@mixin H6 {
font-style: normal;
font-weight: normal;
font-size: 0.875rem; // 14px @default
font-size: $font-size-h6; // 14px @default
line-height: 140%;
}
@mixin Paragraph {
font-style: normal;
font-weight: normal;
font-size: 1rem;
font-family: $font-family;
font-size: $font-size-paragraph;
line-height: 140%;
}
@mixin H7 {
font-style: normal;
font-weight: normal;
font-size: 0.75rem;
font-family: $font-family;
font-size: $font-size-h7;
line-height: 140%;
}
@mixin H8 {
font-style: normal;
font-weight: normal;
font-size: 0.625rem;
font-family: $font-family;
font-size: $font-size-h8;
line-height: 140%;
}
@mixin H9 {
font-style: normal;
font-weight: normal;
font-size: 0.5rem;
font-family: $font-family;
font-size: $font-size-h9;
line-height: 140%;
}