mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
fix(typography): improve ionic global typography (#29628)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Updated tokens utilities to no longer add font-family to utillity-classes. That is something that should only be set at a global layer, no sense to have that on a utility-class. - Updated text token JSON as received by UX/UI Team. - Improved tokens utilities to correctly set font-style to italic with italic font tokens. - Adjusted typography Ionic scss to use the new typography classes and mixins based on tokens. - Removed old basic typography test, as it was testing utility-classes that do not exist anymore. - Added new typography test for ionic display tokens. - Added a TODO to tackle the Inter font loading scenario, as it envolves research that impact other contexts as well. ## Does this introduce a breaking change? - [x] Yes - [ ] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [Sample Typography Screen](https://ionic-framework-e2le05h3a-ionic1.vercel.app/src/css/test/typography/basic) --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
This commit is contained in:
Bernardo Cardoso
@ -69,12 +69,13 @@ function generateTypographyValue(prop, dictionary) {
|
||||
const fontWeightMap = getTypeMap(dictionary, 'font-weight');
|
||||
const lineHeightMap = getTypeMap(dictionary, 'line-height');
|
||||
const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
|
||||
const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal';
|
||||
|
||||
// This exact format is needed so that it compiles the tokens with the expected lint rules
|
||||
return `
|
||||
$${variablesPrefix}-${prop.name}: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]},
|
||||
font-style: ${fontStyle},
|
||||
font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]},
|
||||
letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0},
|
||||
line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]},
|
||||
@ -114,12 +115,13 @@ function generateTypographyUtilityClass(prop, dictionary) {
|
||||
const fontWeightMap = getTypeMap(dictionary, 'font-weight');
|
||||
const lineHeightMap = getTypeMap(dictionary, 'line-height');
|
||||
const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
|
||||
const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal';
|
||||
|
||||
// This exact format is needed so that it compiles the tokens with the expected lint rules
|
||||
return `
|
||||
.${variablesPrefix}-${prop.name} {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]};
|
||||
font-style: ${fontStyle};
|
||||
font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]};
|
||||
letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0};
|
||||
line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@use "../../themes/ionic/ionic.globals.scss" as globals;
|
||||
|
||||
// Ionic Font Family
|
||||
// Ionic Font
|
||||
// --------------------------------------------------
|
||||
|
||||
:root {
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
html {
|
||||
--ionic-dynamic-font: -apple-system-body;
|
||||
font-family: #{globals.$ionic-font-family};
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
@ -1,91 +1,35 @@
|
||||
@use "../../themes/ionic/ionic.globals.scss" as globals;
|
||||
|
||||
// TODO(ROU-10833): add font loading solution here, as a @font-face, base64 or cdn
|
||||
html {
|
||||
font-family: globals.$ionic-font-family;
|
||||
}
|
||||
|
||||
body {
|
||||
font-weight: globals.$ionic-font-weight-regular;
|
||||
font-size: globals.$ionic-font-size-350;
|
||||
|
||||
line-height: globals.$ionic-line-height-600;
|
||||
@include globals.typography(globals.$ionic-body-md-regular);
|
||||
}
|
||||
|
||||
/* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/
|
||||
h1,
|
||||
.ionic-heading1,
|
||||
h2,
|
||||
.ionic-heading2,
|
||||
h3,
|
||||
.ionic-heading3,
|
||||
h4,
|
||||
.ionic-heading4,
|
||||
h5,
|
||||
.ionic-heading5,
|
||||
h6,
|
||||
.ionic-heading6 {
|
||||
color: globals.$ionic-color-neutral-900;
|
||||
|
||||
font-weight: globals.$ionic-font-weight-semi-bold;
|
||||
/* Override html headings based on heading tokens */
|
||||
h1 {
|
||||
@include globals.typography(globals.$ionic-heading-h1-regular);
|
||||
}
|
||||
|
||||
h1,
|
||||
.ionic-heading1 {
|
||||
font-size: #{globals.$ionic-font-size-700};
|
||||
|
||||
line-height: globals.$ionic-line-height-900;
|
||||
h2 {
|
||||
@include globals.typography(globals.$ionic-heading-h2-regular);
|
||||
}
|
||||
|
||||
h2,
|
||||
.ionic-heading2 {
|
||||
font-size: globals.$ionic-font-size-800;
|
||||
|
||||
line-height: globals.$ionic-line-height-800;
|
||||
h3 {
|
||||
@include globals.typography(globals.$ionic-heading-h3-regular);
|
||||
}
|
||||
|
||||
h3,
|
||||
.ionic-heading3 {
|
||||
font-size: globals.$ionic-font-size-600;
|
||||
|
||||
line-height: globals.$ionic-line-height-800;
|
||||
h4 {
|
||||
@include globals.typography(globals.$ionic-heading-h4-regular);
|
||||
}
|
||||
|
||||
h4,
|
||||
.ionic-heading4 {
|
||||
font-size: globals.$ionic-font-size-550;
|
||||
|
||||
line-height: globals.$ionic-line-height-700;
|
||||
h5 {
|
||||
@include globals.typography(globals.$ionic-heading-h5-regular);
|
||||
}
|
||||
|
||||
h5,
|
||||
.ionic-heading5 {
|
||||
font-size: globals.$ionic-font-size-500;
|
||||
|
||||
line-height: globals.$ionic-line-height-700;
|
||||
}
|
||||
|
||||
h6,
|
||||
.ionic-heading6 {
|
||||
font-size: globals.$ionic-font-size-450;
|
||||
|
||||
line-height: globals.$ionic-line-height-600;
|
||||
}
|
||||
|
||||
.ionic-display-s {
|
||||
font-size: globals.$ionic-font-size-800;
|
||||
font-weight: globals.$ionic-font-weight-regular;
|
||||
|
||||
line-height: globals.$ionic-line-height-500;
|
||||
}
|
||||
|
||||
.ionic-display-m {
|
||||
font-size: globals.$ionic-font-size-900;
|
||||
font-weight: globals.$ionic-font-weight-regular;
|
||||
|
||||
line-height: globals.$ionic-line-height-600;
|
||||
}
|
||||
|
||||
/* Common */
|
||||
.ionic-font-italic {
|
||||
font-style: italic;
|
||||
h6 {
|
||||
@include globals.typography(globals.$ionic-heading-h6-regular);
|
||||
}
|
||||
|
||||
120
core/src/css/test/typography/basic/index.html
Normal file
120
core/src/css/test/typography/basic/index.html
Normal file
@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr" theme="ionic">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Typography - Display Tokens</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
|
||||
<!-- TODO(ROU-10833): remove this cdn for the font, when the font loading is solved -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<style>
|
||||
ion-title {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Typography - Display Tokens</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ionic-padding-space-400">
|
||||
<div>
|
||||
<ion-title>Display</ion-title>
|
||||
<ion-title>lg</ion-title>
|
||||
<p><ion-text class="ionic-display-lg-regular">display-lg-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-display-lg-light">display-lg-light</ion-text></p>
|
||||
<ion-title>sm</ion-title>
|
||||
<p><ion-text class="ionic-display-sm-regular">display-sm-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-display-sm-light">display-sm-light</ion-text></p>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<ion-title>Headings</ion-title>
|
||||
<ion-title>h1</ion-title>
|
||||
<p><ion-text class="ionic-heading-h1-regular">heading-h1-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h1-medium">heading-h1-medium</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h1-semi-bold">heading-h1-semi-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h1-bold">heading-h1-bold</ion-text></p>
|
||||
<ion-title>h2</ion-title>
|
||||
<p><ion-text class="ionic-heading-h2-regular">heading-h2-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h2-medium">heading-h2-medium</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h2-semi-bold">heading-h2-semi-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h2-bold">heading-h2-bold</ion-text></p>
|
||||
<ion-title>h3</ion-title>
|
||||
<p><ion-text class="ionic-heading-h3-regular">heading-h3-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h3-medium">heading-h3-medium</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h3-semi-bold">heading-h3-semi-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h3-bold">heading-h3-bold</ion-text></p>
|
||||
<ion-title>h4</ion-title>
|
||||
<p><ion-text class="ionic-heading-h4-regular">heading-h4-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h4-medium">heading-h4-medium</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h4-semi-bold">heading-h4-semi-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h4-bold">heading-h4-bold</ion-text></p>
|
||||
<ion-title>h5</ion-title>
|
||||
<p><ion-text class="ionic-heading-h5-regular">heading-h5-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h5-medium">heading-h5-medium</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h5-semi-bold">heading-h5-semi-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h5-bold">heading-h5-bold</ion-text></p>
|
||||
<ion-title>h6</ion-title>
|
||||
<p><ion-text class="ionic-heading-h6-regular">heading-h6-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h6-medium">heading-h6-medium</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h6-semi-bold">heading-h6-semi-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-heading-h6-bold">heading-h6-bold</ion-text></p>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<ion-title>Body</ion-title>
|
||||
<ion-title>sm</ion-title>
|
||||
<p><ion-text class="ionic-body-sm-regular">ionic-body-sm-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-body-sm-medium">ionic-body-sm-medium</ion-text></p>
|
||||
<p><ion-text class="ionic-body-sm-semi-bold">ionic-body-sm-semi-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-body-sm-bold">ionic-body-sm-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-body-sm-link">ionic-body-sm-link</ion-text></p>
|
||||
<p><ion-text class="ionic-body-sm-italic">ionic-body-sm-italic</ion-text></p>
|
||||
<ion-title>md</ion-title>
|
||||
<p><ion-text class="ionic-body-md-regular">ionic-body-md-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-body-md-medium">ionic-body-md-medium</ion-text></p>
|
||||
<p><ion-text class="ionic-body-md-semi-bold">ionic-body-md-semi-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-body-md-bold">ionic-body-md-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-body-md-link">ionic-body-md-link</ion-text></p>
|
||||
<p><ion-text class="ionic-body-md-italic">ionic-body-md-italic</ion-text></p>
|
||||
<ion-title>lg</ion-title>
|
||||
<p><ion-text class="ionic-body-lg-regular">ionic-body-lg-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-body-lg-medium">ionic-body-lg-medium</ion-text></p>
|
||||
<p><ion-text class="ionic-body-lg-semi-bold">ionic-body-lg-semi-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-body-lg-bold">ionic-body-lg-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-body-lg-link">ionic-body-lg-link</ion-text></p>
|
||||
<p><ion-text class="ionic-body-lg-italic">ionic-body-lg-italic</ion-text></p>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<ion-title>Action</ion-title>
|
||||
<p><ion-text class="ionic-action-sm">ionic-action-sm</ion-text></p>
|
||||
<p><ion-text class="ionic-action-md">ionic-action-md</ion-text></p>
|
||||
<p><ion-text class="ionic-action-lg">ionic-action-lg</ion-text></p>
|
||||
<p><ion-text class="ionic-action-xl">ionic-action-xl</ion-text></p>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<ion-title>Overline</ion-title>
|
||||
<p><ion-text class="ionic-overline-regular">ionic-overline-regular</ion-text></p>
|
||||
<p><ion-text class="ionic-overline-medium">ionic-overline-medium</ion-text></p>
|
||||
<p><ion-text class="ionic-overline-semi-bold">ionic-overline-semi-bold</ion-text></p>
|
||||
<p><ion-text class="ionic-overline-bold">ionic-overline-bold</ion-text></p>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,112 +1,14 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* Typography styles are only available in the Ionic theme
|
||||
*/
|
||||
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('typography: global styles'), () => {
|
||||
test('should apply the globals styles for each semantic tag', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
|
||||
<link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
|
||||
<div>
|
||||
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
|
||||
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
|
||||
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
|
||||
<h4>H4: The quick brown fox jumps over the lazy dog</h4>
|
||||
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
|
||||
<h6>H6: The quick brown fox jumps over the lazy dog</h6>
|
||||
<p><ion-text class="ionic-font-size-400"><p>Tag_P FontLarge: The quick brown fox jumps over the lazy dog</p></ion-text><p>
|
||||
<p><ion-text class="ionic-font-size-350">Tag_None FontMedium: The quick brown fox jumps over the lazydog</ion-text></p>
|
||||
<p><ion-text class="ionic-font-size-300"><span>Tag_Span FontSmall: The quick brown fox jumps over the lazy dog</span></ion-text></p>
|
||||
</div>
|
||||
`,
|
||||
config
|
||||
);
|
||||
test.describe(title('Typography: basic'), () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/css/test/typography/basic`, config);
|
||||
|
||||
const div = page.locator('div');
|
||||
await expect(div).toHaveScreenshot(screenshot(`ionic-semantic-global-styles`));
|
||||
});
|
||||
await page.setIonViewport();
|
||||
|
||||
test('should apply the utility classes for each heading', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
|
||||
<link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
|
||||
<div>
|
||||
<h1 class="ionic-heading2 ionic-font-weight-light">Tag H1 - Style Heading 2 - Font Light</h1>
|
||||
<h2 class="ionic-heading3 ionic-font-weight-light">Tag H2 - Style Heading 3 - Font Light</h2>
|
||||
<h3 class="ionic-heading4">Tag H3 - Style Heading 4 - Font Regular</h3>
|
||||
<h4 class="ionic-heading5 ionic-font-weight-medium">Tag H4 - Style Heading 5 - Font Medium</h4>
|
||||
<h5 class="ionic-heading6">Tag H5 - Style Heading 6 - Font Semibold</h5>
|
||||
<h6 class="ionic-heading1 ionic-font-weight-bold">Tag H6 - Style Heading 1 - Font Bold</h6>
|
||||
</div>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const div = page.locator('div');
|
||||
await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-semantic-tags`));
|
||||
});
|
||||
|
||||
test('should apply the heading classes on ion-text element', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
|
||||
<link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
|
||||
<div>
|
||||
<p><ion-text class="ionic-heading1">Utility class 'ionic-heading1'</ion-text></p>
|
||||
<p><ion-text class="ionic-heading2">Utility class 'ionic-heading2'</ion-text></p>
|
||||
<p><ion-text class="ionic-heading3">Utility class 'ionic-heading3'</ion-text></p>
|
||||
<p><ion-text class="ionic-heading4">Utility class 'ionic-heading4'</ion-text></p>
|
||||
<p><ion-text class="ionic-heading5">Utility class 'ionic-heading5'</ion-text></p>
|
||||
<p><ion-text class="ionic-heading6">Utility class 'ionic-heading6'</ion-text></p>
|
||||
</div>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const div = page.locator('div');
|
||||
await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-headings`));
|
||||
});
|
||||
|
||||
test('should apply the utility classes for font weights', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
|
||||
<link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
|
||||
<div>
|
||||
<p><ion-text class="ionic-font-weight-light">Utility class 'ionic-font-light'</ion-text></p>
|
||||
<p><ion-text class="ionic-font-weight-regular">Utility class 'ionic-font-regular'</ion-text></p>
|
||||
<p><ion-text class="ionic-font-weight-medium">Utility class 'ionic-font-medium'</ion-text></p>
|
||||
<p><ion-text class="ionic-font-weight-semi-bold">Utility class 'ionic-font-semibold'</ion-text></p>
|
||||
<p><ion-text class="ionic-font-weight-bold">Utility class 'ionic-font-bold'</ion-text></p>
|
||||
</div>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const div = page.locator('div');
|
||||
await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-weights`));
|
||||
});
|
||||
|
||||
test('should apply the utility classes for font display', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
|
||||
<link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
|
||||
<div>
|
||||
<p><ion-text class="ionic-display-s">Utility class 'ionic-display-s'</ion-text></p>
|
||||
<p><ion-text class="ionic-display-m">Utility class 'ionic-display-m'</ion-text></p>
|
||||
</div>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const div = page.locator('div');
|
||||
await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-displays`));
|
||||
await expect(page).toHaveScreenshot(screenshot(`ionic-typography-basic-styles`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
@ -1961,8 +1961,8 @@
|
||||
}
|
||||
|
||||
.ionic-display-sm-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-800;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-1100;
|
||||
@ -1971,8 +1971,8 @@
|
||||
}
|
||||
|
||||
.ionic-display-sm-light {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-800;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-light;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-1100;
|
||||
@ -1980,19 +1980,9 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-display-lg-light {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-900;
|
||||
font-weight: $ionic-font-weight-light;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-1200;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-display-lg-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-900;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-1200;
|
||||
@ -2000,9 +1990,19 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-display-lg-light {
|
||||
font-size: $ionic-font-size-900;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-light;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-1200;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-heading-h1-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-700;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-900;
|
||||
@ -2011,9 +2011,9 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h1-medium {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-700;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-900;
|
||||
text-transform: none;
|
||||
@ -2021,9 +2021,9 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h1-semi-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-700;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
font-size: $ionic-font-size-600;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-semi-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-900;
|
||||
text-transform: none;
|
||||
@ -2031,8 +2031,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h1-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-700;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-900;
|
||||
@ -2041,8 +2041,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h2-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-650;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-900;
|
||||
@ -2051,8 +2051,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h2-medium {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-650;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-900;
|
||||
@ -2061,9 +2061,9 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h2-semi-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-650;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-semi-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-900;
|
||||
text-transform: none;
|
||||
@ -2071,8 +2071,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h2-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-650;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-900;
|
||||
@ -2081,8 +2081,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h3-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-600;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-800;
|
||||
@ -2090,19 +2090,9 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-heading-h3-semi-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-600;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-800;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-heading-h3-medium {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-600;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-800;
|
||||
@ -2110,9 +2100,19 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-heading-h3-bold {
|
||||
font-family: $ionic-font-family;
|
||||
.ionic-heading-h3-semi-bold {
|
||||
font-size: $ionic-font-size-600;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-semi-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-800;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-heading-h3-bold {
|
||||
font-size: $ionic-font-size-600;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-800;
|
||||
@ -2121,8 +2121,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h4-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-550;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
@ -2131,8 +2131,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h4-medium {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-550;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
@ -2141,9 +2141,9 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h4-semi-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-550;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-semi-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
text-transform: none;
|
||||
@ -2151,8 +2151,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h4-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-550;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
@ -2161,8 +2161,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h5-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-500;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
@ -2171,8 +2171,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h5-medium {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-500;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
@ -2181,9 +2181,9 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h5-semi-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-500;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-semi-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
text-transform: none;
|
||||
@ -2191,8 +2191,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h5-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-500;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
@ -2201,8 +2201,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h6-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-450;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
@ -2211,8 +2211,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h6-medium {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-450;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
@ -2221,9 +2221,9 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h6-semi-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-450;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-semi-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
text-transform: none;
|
||||
@ -2231,8 +2231,8 @@
|
||||
}
|
||||
|
||||
.ionic-heading-h6-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-450;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-700;
|
||||
@ -2240,129 +2240,9 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-sm-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-300;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-400;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-sm-medium {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-300;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-400;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-sm-semi-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-300;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-400;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-sm-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-300;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-400;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-sm-link {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-300;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-400;
|
||||
text-transform: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.ionic-body-sm-italic {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-300;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-400;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-md-medium {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-350;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-md-semi-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-350;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-md-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-350;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-md-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-350;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-md-link {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-350;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.ionic-body-md-italic {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-350;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-lg-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-400;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
@ -2371,8 +2251,8 @@
|
||||
}
|
||||
|
||||
.ionic-body-lg-medium {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-400;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
@ -2381,9 +2261,9 @@
|
||||
}
|
||||
|
||||
.ionic-body-lg-semi-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-400;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-semi-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
@ -2391,8 +2271,8 @@
|
||||
}
|
||||
|
||||
.ionic-body-lg-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-400;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
@ -2401,8 +2281,8 @@
|
||||
}
|
||||
|
||||
.ionic-body-lg-link {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-400;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
@ -2411,8 +2291,8 @@
|
||||
}
|
||||
|
||||
.ionic-body-lg-italic {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-400;
|
||||
font-style: italic;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
@ -2420,19 +2300,129 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-action-sm {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-300;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-1;
|
||||
line-height: $ionic-line-height-400;
|
||||
.ionic-body-md-regular {
|
||||
font-size: $ionic-font-size-350;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-action-md {
|
||||
font-family: $ionic-font-family;
|
||||
.ionic-body-md-medium {
|
||||
font-size: $ionic-font-size-350;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-md-semi-bold {
|
||||
font-size: $ionic-font-size-350;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-semi-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-md-bold {
|
||||
font-size: $ionic-font-size-350;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-md-link {
|
||||
font-size: $ionic-font-size-350;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.ionic-body-md-italic {
|
||||
font-size: $ionic-font-size-350;
|
||||
font-style: italic;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-600;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-sm-regular {
|
||||
font-size: $ionic-font-size-300;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-sm-medium {
|
||||
font-size: $ionic-font-size-300;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-sm-semi-bold {
|
||||
font-size: $ionic-font-size-300;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-semi-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-sm-bold {
|
||||
font-size: $ionic-font-size-300;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-body-sm-link {
|
||||
font-size: $ionic-font-size-300;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.ionic-body-sm-italic {
|
||||
font-size: $ionic-font-size-300;
|
||||
font-style: italic;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-0;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-action-xl {
|
||||
font-size: $ionic-font-size-500;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-1;
|
||||
line-height: $ionic-line-height-600;
|
||||
@ -2441,8 +2431,8 @@
|
||||
}
|
||||
|
||||
.ionic-action-lg {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-400;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-1;
|
||||
line-height: $ionic-line-height-600;
|
||||
@ -2450,53 +2440,63 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-action-xl {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-500;
|
||||
.ionic-action-md {
|
||||
font-size: $ionic-font-size-350;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-1;
|
||||
line-height: $ionic-line-height-600;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-action-sm {
|
||||
font-size: $ionic-font-size-300;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-1;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-overline-regular {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-300;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-regular;
|
||||
letter-spacing: $ionic-letter-spacing-2;
|
||||
line-height: $ionic-line-height-400;
|
||||
text-transform: none;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-overline-medium {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-300;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-medium;
|
||||
letter-spacing: $ionic-letter-spacing-2;
|
||||
line-height: $ionic-line-height-400;
|
||||
text-transform: none;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-overline-semi-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-300;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-semi-bold;
|
||||
letter-spacing: $ionic-letter-spacing-2;
|
||||
line-height: $ionic-line-height-400;
|
||||
text-transform: none;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ionic-overline-bold {
|
||||
font-family: $ionic-font-family;
|
||||
font-size: $ionic-font-size-300;
|
||||
font-style: normal;
|
||||
font-weight: $ionic-font-weight-bold;
|
||||
letter-spacing: $ionic-letter-spacing-2;
|
||||
line-height: $ionic-line-height-400;
|
||||
text-transform: none;
|
||||
line-height: $ionic-line-height-500;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@ -653,8 +653,8 @@ $ionic-state-hover: var(--ionic-state-hover, rgba(36, 36, 36, 0.04));
|
||||
$ionic-state-pressed: var(--ionic-state-pressed, rgba(36, 36, 36, 0.08));
|
||||
|
||||
$ionic-display-sm-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-800,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-1100,
|
||||
@ -663,8 +663,8 @@ $ionic-display-sm-regular: (
|
||||
);
|
||||
|
||||
$ionic-display-sm-light: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-800,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-light,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-1100,
|
||||
@ -672,19 +672,9 @@ $ionic-display-sm-light: (
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-display-lg-light: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-900,
|
||||
font-weight: $ionic-font-weight-light,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-1200,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-display-lg-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-900,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-1200,
|
||||
@ -692,9 +682,19 @@ $ionic-display-lg-regular: (
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-display-lg-light: (
|
||||
font-size: $ionic-font-size-900,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-light,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-1200,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-heading-h1-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-700,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-900,
|
||||
@ -703,9 +703,9 @@ $ionic-heading-h1-regular: (
|
||||
);
|
||||
|
||||
$ionic-heading-h1-medium: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-700,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-900,
|
||||
text-transform: none,
|
||||
@ -713,9 +713,9 @@ $ionic-heading-h1-medium: (
|
||||
);
|
||||
|
||||
$ionic-heading-h1-semi-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-700,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
font-size: $ionic-font-size-600,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-semi-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-900,
|
||||
text-transform: none,
|
||||
@ -723,8 +723,8 @@ $ionic-heading-h1-semi-bold: (
|
||||
);
|
||||
|
||||
$ionic-heading-h1-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-700,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-900,
|
||||
@ -733,8 +733,8 @@ $ionic-heading-h1-bold: (
|
||||
);
|
||||
|
||||
$ionic-heading-h2-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-650,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-900,
|
||||
@ -743,8 +743,8 @@ $ionic-heading-h2-regular: (
|
||||
);
|
||||
|
||||
$ionic-heading-h2-medium: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-650,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-900,
|
||||
@ -753,9 +753,9 @@ $ionic-heading-h2-medium: (
|
||||
);
|
||||
|
||||
$ionic-heading-h2-semi-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-650,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-semi-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-900,
|
||||
text-transform: none,
|
||||
@ -763,8 +763,8 @@ $ionic-heading-h2-semi-bold: (
|
||||
);
|
||||
|
||||
$ionic-heading-h2-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-650,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-900,
|
||||
@ -773,8 +773,8 @@ $ionic-heading-h2-bold: (
|
||||
);
|
||||
|
||||
$ionic-heading-h3-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-600,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-800,
|
||||
@ -782,19 +782,9 @@ $ionic-heading-h3-regular: (
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-heading-h3-semi-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-600,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-800,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-heading-h3-medium: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-600,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-800,
|
||||
@ -802,9 +792,19 @@ $ionic-heading-h3-medium: (
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-heading-h3-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
$ionic-heading-h3-semi-bold: (
|
||||
font-size: $ionic-font-size-600,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-semi-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-800,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-heading-h3-bold: (
|
||||
font-size: $ionic-font-size-600,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-800,
|
||||
@ -813,8 +813,8 @@ $ionic-heading-h3-bold: (
|
||||
);
|
||||
|
||||
$ionic-heading-h4-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-550,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
@ -823,8 +823,8 @@ $ionic-heading-h4-regular: (
|
||||
);
|
||||
|
||||
$ionic-heading-h4-medium: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-550,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
@ -833,9 +833,9 @@ $ionic-heading-h4-medium: (
|
||||
);
|
||||
|
||||
$ionic-heading-h4-semi-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-550,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-semi-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
text-transform: none,
|
||||
@ -843,8 +843,8 @@ $ionic-heading-h4-semi-bold: (
|
||||
);
|
||||
|
||||
$ionic-heading-h4-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-550,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
@ -853,8 +853,8 @@ $ionic-heading-h4-bold: (
|
||||
);
|
||||
|
||||
$ionic-heading-h5-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-500,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
@ -863,8 +863,8 @@ $ionic-heading-h5-regular: (
|
||||
);
|
||||
|
||||
$ionic-heading-h5-medium: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-500,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
@ -873,9 +873,9 @@ $ionic-heading-h5-medium: (
|
||||
);
|
||||
|
||||
$ionic-heading-h5-semi-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-500,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-semi-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
text-transform: none,
|
||||
@ -883,8 +883,8 @@ $ionic-heading-h5-semi-bold: (
|
||||
);
|
||||
|
||||
$ionic-heading-h5-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-500,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
@ -893,8 +893,8 @@ $ionic-heading-h5-bold: (
|
||||
);
|
||||
|
||||
$ionic-heading-h6-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-450,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
@ -903,8 +903,8 @@ $ionic-heading-h6-regular: (
|
||||
);
|
||||
|
||||
$ionic-heading-h6-medium: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-450,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
@ -913,9 +913,9 @@ $ionic-heading-h6-medium: (
|
||||
);
|
||||
|
||||
$ionic-heading-h6-semi-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-450,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-semi-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
text-transform: none,
|
||||
@ -923,8 +923,8 @@ $ionic-heading-h6-semi-bold: (
|
||||
);
|
||||
|
||||
$ionic-heading-h6-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-450,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-700,
|
||||
@ -932,129 +932,9 @@ $ionic-heading-h6-bold: (
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-sm-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-300,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-400,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-sm-medium: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-300,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-400,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-sm-semi-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-300,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-400,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-sm-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-300,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-400,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-sm-link: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-300,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-400,
|
||||
text-transform: none,
|
||||
text-decoration: underline,
|
||||
);
|
||||
|
||||
$ionic-body-sm-italic: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-300,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-400,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-md-medium: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-350,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-md-semi-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-350,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-md-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-350,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-md-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-350,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-md-link: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-350,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: underline,
|
||||
);
|
||||
|
||||
$ionic-body-md-italic: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-350,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-lg-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-400,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
@ -1063,8 +943,8 @@ $ionic-body-lg-regular: (
|
||||
);
|
||||
|
||||
$ionic-body-lg-medium: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-400,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
@ -1073,9 +953,9 @@ $ionic-body-lg-medium: (
|
||||
);
|
||||
|
||||
$ionic-body-lg-semi-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-400,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-semi-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
@ -1083,8 +963,8 @@ $ionic-body-lg-semi-bold: (
|
||||
);
|
||||
|
||||
$ionic-body-lg-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-400,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
@ -1093,8 +973,8 @@ $ionic-body-lg-bold: (
|
||||
);
|
||||
|
||||
$ionic-body-lg-link: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-400,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
@ -1103,8 +983,8 @@ $ionic-body-lg-link: (
|
||||
);
|
||||
|
||||
$ionic-body-lg-italic: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-400,
|
||||
font-style: italic,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
@ -1112,19 +992,129 @@ $ionic-body-lg-italic: (
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-action-sm: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-300,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-1,
|
||||
line-height: $ionic-line-height-400,
|
||||
$ionic-body-md-regular: (
|
||||
font-size: $ionic-font-size-350,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-action-md: (
|
||||
font-family: $ionic-font-family,
|
||||
$ionic-body-md-medium: (
|
||||
font-size: $ionic-font-size-350,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-md-semi-bold: (
|
||||
font-size: $ionic-font-size-350,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-semi-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-md-bold: (
|
||||
font-size: $ionic-font-size-350,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-md-link: (
|
||||
font-size: $ionic-font-size-350,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: underline,
|
||||
);
|
||||
|
||||
$ionic-body-md-italic: (
|
||||
font-size: $ionic-font-size-350,
|
||||
font-style: italic,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-600,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-sm-regular: (
|
||||
font-size: $ionic-font-size-300,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-sm-medium: (
|
||||
font-size: $ionic-font-size-300,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-sm-semi-bold: (
|
||||
font-size: $ionic-font-size-300,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-semi-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-sm-bold: (
|
||||
font-size: $ionic-font-size-300,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-body-sm-link: (
|
||||
font-size: $ionic-font-size-300,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: none,
|
||||
text-decoration: underline,
|
||||
);
|
||||
|
||||
$ionic-body-sm-italic: (
|
||||
font-size: $ionic-font-size-300,
|
||||
font-style: italic,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-0,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-action-xl: (
|
||||
font-size: $ionic-font-size-500,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-1,
|
||||
line-height: $ionic-line-height-600,
|
||||
@ -1133,8 +1123,8 @@ $ionic-action-md: (
|
||||
);
|
||||
|
||||
$ionic-action-lg: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-400,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-1,
|
||||
line-height: $ionic-line-height-600,
|
||||
@ -1142,52 +1132,62 @@ $ionic-action-lg: (
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-action-xl: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-500,
|
||||
$ionic-action-md: (
|
||||
font-size: $ionic-font-size-350,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-1,
|
||||
line-height: $ionic-line-height-600,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-action-sm: (
|
||||
font-size: $ionic-font-size-300,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-1,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: none,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-overline-regular: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-300,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-regular,
|
||||
letter-spacing: $ionic-letter-spacing-2,
|
||||
line-height: $ionic-line-height-400,
|
||||
text-transform: none,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: uppercase,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-overline-medium: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-300,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-medium,
|
||||
letter-spacing: $ionic-letter-spacing-2,
|
||||
line-height: $ionic-line-height-400,
|
||||
text-transform: none,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: uppercase,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-overline-semi-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-300,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-semi-bold,
|
||||
letter-spacing: $ionic-letter-spacing-2,
|
||||
line-height: $ionic-line-height-400,
|
||||
text-transform: none,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: uppercase,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
$ionic-overline-bold: (
|
||||
font-family: $ionic-font-family,
|
||||
font-size: $ionic-font-size-300,
|
||||
font-style: normal,
|
||||
font-weight: $ionic-font-weight-bold,
|
||||
letter-spacing: $ionic-letter-spacing-2,
|
||||
line-height: $ionic-line-height-400,
|
||||
text-transform: none,
|
||||
line-height: $ionic-line-height-500,
|
||||
text-transform: uppercase,
|
||||
text-decoration: none,
|
||||
);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -22,3 +22,20 @@
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Typography mixin to be used with typography scss variables (ionic.vars.scss)
|
||||
//
|
||||
// ex: @include typography($ionic-heading-h3-medium);
|
||||
//
|
||||
// --------------------------------------------------
|
||||
@mixin typography($properties) {
|
||||
font-family: map-get($properties, font-family);
|
||||
font-size: map-get($properties, font-size);
|
||||
font-weight: map-get($properties, font-weight);
|
||||
|
||||
letter-spacing: map-get($properties, letter-spacing);
|
||||
line-height: map-get($properties, line-height);
|
||||
|
||||
text-decoration: map-get($properties, text-decoration);
|
||||
text-transform: map-get($properties, text-transform);
|
||||
}
|
||||
|
||||
@ -112,21 +112,6 @@
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Typography mixin to be used with typography scss variables (ionic.vars.scss)
|
||||
//
|
||||
// ex: @include typography($ionic-heading-h3-medium);
|
||||
//
|
||||
// --------------------------------------------------
|
||||
@mixin typography($properties) {
|
||||
font-family: map-get($properties, font-family);
|
||||
font-size: map-get($properties, font-size);
|
||||
font-weight: map-get($properties, font-weight);
|
||||
letter-spacing: map-get($properties, letter-spacing);
|
||||
line-height: map-get($properties, line-height);
|
||||
text-transform: map-get($properties, text-transform);
|
||||
text-decoration: map-get($properties, text-decoration);
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
Reference in New Issue
Block a user