javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(typography): move main typography styles to app

Browse Source
This commit is contained in:
Brandy Carney
2017-02-13 11:43:56 -05:00
parent 41b063b7ae
commit f47d4927d3
3 changed files with 170 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
src/components/app/app.scss
View File

@ -14,6 +14,41 @@
@import "../../themes/util";
// App
// --------------------------------------------------
// All font sizes use rem units
// By default, 1rem equals 10px. For example, 1.4rem === 14px
// $font-size-root value, which is on the <html> element
// is what can scale all fonts
/// @prop - Font size of the root html
$font-size-root: 62.5% !default;
/// @prop - Font weight of all headings
$headings-font-weight: 500 !default;
/// @prop - Line height of all headings
$headings-line-height: 1.2 !default;
/// @prop - Font size of heading level 1
$h1-font-size: 2.6rem !default;
/// @prop - Font size of heading level 2
$h2-font-size: 2.4rem !default;
/// @prop - Font size of heading level 3
$h3-font-size: 2.2rem !default;
/// @prop - Font size of heading level 4
$h4-font-size: 2rem !default;
/// @prop - Font size of heading level 5
$h5-font-size: 1.8rem !default;
/// @prop - Font size of heading level 6
$h6-font-size: 1.6rem !default;
// App Structure
// --------------------------------------------------
@ -28,6 +63,8 @@ html {
width: 100%;
height: 100%;
font-size: $font-size-root;
text-size-adjust: 100%;
}
@ -60,6 +97,99 @@ body {
}
// App Typography
// --------------------------------------------------
a {
background-color: transparent;
}
.enable-hover a:hover {
opacity: .7;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1.6rem;
margin-bottom: 1rem;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
}
[padding] {
h1,
h2,
h3,
h4,
h5,
h6 {
&:first-child {
margin-top: -.3rem;
}
}
}
h1 + h2,
h1 + h3,
h2 + h3 {
margin-top: -.3rem;
}
h1 {
margin-top: 2rem;
font-size: $h1-font-size;
}
h2 {
margin-top: 1.8rem;
font-size: $h2-font-size;
}
h3 {
font-size: $h3-font-size;
}
h4 {
font-size: $h4-font-size;
}
h5 {
font-size: $h5-font-size;
}
h6 {
font-size: $h6-font-size;
}
small {
font-size: 75%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
// Nav Container Structure
// --------------------------------------------------
@ -158,3 +288,43 @@ ion-footer {
.nav-decor {
display: none;
}
// Text Alignment
// --------------------------------------------------
[text-left] {
text-align: left;
}
[text-center] {
text-align: center;
}
[text-right] {
text-align: right;
}
[text-justify] {
text-align: justify;
}
[text-nowrap] {
white-space: nowrap;
}
// Text Transformation
// --------------------------------------------------
[text-uppercase] {
text-transform: uppercase;
}
[text-lowercase] {
text-transform: lowercase;
}
[text-capitalize] {
text-transform: capitalize;
}

167
src/components/typography/typography.scss
View File

@ -1,167 +0,0 @@
@import "../../themes/ionic.globals";
// Typography
// --------------------------------------------------
// All font sizes use rem units
// By default, 1rem equals 10px. For example, 1.4rem === 14px
// $font-size-root value, which is on the <html> element
// is what can scale all fonts
/// @prop - Font size of the root html
$font-size-root: 62.5% !default;
/// @prop - Font weight of all headings
$headings-font-weight: 500 !default;
/// @prop - Line height of all headings
$headings-line-height: 1.2 !default;
/// @prop - Font size of heading level 1
$h1-font-size: 2.6rem !default;
/// @prop - Font size of heading level 2
$h2-font-size: 2.4rem !default;
/// @prop - Font size of heading level 3
$h3-font-size: 2.2rem !default;
/// @prop - Font size of heading level 4
$h4-font-size: 2rem !default;
/// @prop - Font size of heading level 5
$h5-font-size: 1.8rem !default;
/// @prop - Font size of heading level 6
$h6-font-size: 1.6rem !default;
html {
font-size: $font-size-root;
}
a {
background-color: transparent;
}
.enable-hover a:hover {
opacity: .7;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1.6rem;
margin-bottom: 1rem;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
}
[padding] {
h1,
h2,
h3,
h4,
h5,
h6 {
&:first-child {
margin-top: -.3rem;
}
}
}
h1 + h2,
h1 + h3,
h2 + h3 {
margin-top: -.3rem;
}
h1 {
margin-top: 2rem;
font-size: $h1-font-size;
}
h2 {
margin-top: 1.8rem;
font-size: $h2-font-size;
}
h3 {
font-size: $h3-font-size;
}
h4 {
font-size: $h4-font-size;
}
h5 {
font-size: $h5-font-size;
}
h6 {
font-size: $h6-font-size;
}
small {
font-size: 75%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
// Text Alignment
// --------------------------------------------------
[text-left] {
text-align: left;
}
[text-center] {
text-align: center;
}
[text-right] {
text-align: right;
}
[text-justify] {
text-align: justify;
}
[text-nowrap] {
white-space: nowrap;
}
// Text Transformation
// --------------------------------------------------
[text-uppercase] {
text-transform: uppercase;
}
[text-lowercase] {
text-transform: lowercase;
}
[text-capitalize] {
text-transform: capitalize;
}

1
src/themes/ionic.components.scss
View File

@ -220,7 +220,6 @@
"../components/toolbar/toolbar.wp";
@import
"../components/typography/typography",
"../components/typography/typography.ios",
"../components/typography/typography.md",
"../components/typography/typography.wp";