mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 11:46:13 +02:00
96717cc9e0
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
158 lines
3.4 KiB
SCSS
158 lines
3.4 KiB
SCSS
$fa-font-path: 'fonts/fontawesome';
|
|
|
|
@import '../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
|
|
@import '../../../../node_modules/@fortawesome/fontawesome-free/scss/solid';
|
|
@import '../../../../node_modules/@fortawesome/fontawesome-free/scss/regular';
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
font-style: normal;
|
|
font-weight: 100;
|
|
src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Roboto';
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Euclid';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('fonts/Euclid/EuclidCircularB-Regular-WebXL.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Euclid';
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
src: url('fonts/Euclid/EuclidCircularB-RegularItalic-WebXL.ttf') format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Euclid';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('fonts/Euclid/EuclidCircularB-Bold-WebXL.ttf') format('truetype');
|
|
}
|
|
|
|
$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: $font-size-h1;
|
|
font-family: $font-family;
|
|
line-height: 140%;
|
|
}
|
|
|
|
|
|
@mixin H2 {
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: $font-size-h2;
|
|
font-family: $font-family;
|
|
line-height: 140%;
|
|
}
|
|
|
|
@mixin H3 {
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: $font-size-h3;
|
|
font-family: $font-family;
|
|
line-height: 140%;
|
|
}
|
|
|
|
@mixin H4 {
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: $font-size-h4;
|
|
font-family: $font-family;
|
|
line-height: 140%;
|
|
}
|
|
|
|
@mixin H5 {
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: $font-size-h5;
|
|
line-height: 140%;
|
|
}
|
|
|
|
@mixin H6 {
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: $font-size-h6; // 14px @default
|
|
line-height: 140%;
|
|
}
|
|
|
|
@mixin Paragraph {
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: $font-size-paragraph;
|
|
line-height: 140%;
|
|
}
|
|
|
|
@mixin H7 {
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: $font-size-h7;
|
|
line-height: 140%;
|
|
}
|
|
|
|
@mixin H8 {
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: $font-size-h8;
|
|
line-height: 140%;
|
|
}
|
|
|
|
@mixin H9 {
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: $font-size-h9;
|
|
line-height: 140%;
|
|
}
|