javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(headings): update heading sizes

Browse Source
This commit is contained in:
Adam Bradley
2015-12-10 13:49:20 -06:00
parent ecb35c7c6c
commit 025176d67c
3 changed files with 56 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ionic/components/app/test/typography/index.ts Normal file
View File

@@ -0,0 +1,11 @@
import {App, IonicApp} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class E2EApp {
constructor(app: IonicApp) {
app.setTitle('Basic Buttons');
}
}

32
ionic/components/app/test/typography/main.html Normal file
View File

@@ -0,0 +1,32 @@
<ion-toolbar>
<ion-title>Typography</ion-title>
</ion-toolbar>
<ion-content padding>
<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>
p: The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
</p>
</ion-content>

19
ionic/components/app/typography.scss
View File

@@ -11,6 +11,13 @@ $font-size-root: 62.5% !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$h1-font-size: 3.6rem !default;
$h2-font-size: 3.0rem !default;
$h3-font-size: 2.4rem !default;
$h4-font-size: 2.0rem !default;
$h5-font-size: 1.6rem !default;
$h6-font-size: 1.4rem !default;
html {
font-size: $font-size-root;
@@ -42,29 +49,29 @@ h2 + h3 {
}
h1 {
font-size: 3.6rem;
font-size: $h1-font-size;
margin-top: 2rem;
}
h2 {
font-size: 3rem;
font-size: $h2-font-size;
margin-top: 1.8rem;
}
h3 {
font-size: 2.4rem;
font-size: $h3-font-size;
}
h4 {
font-size: 2rem;
font-size: $h4-font-size;
}
h5 {
font-size: 1.6rem;
font-size: $h5-font-size;
}
h6 {
font-size: 1.4rem;
font-size: $h6-font-size;
}
small {