From f47d4927d383909e7bc18b1e3e362cee81f867d9 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 13 Feb 2017 11:43:56 -0500 Subject: [PATCH] refactor(typography): move main typography styles to app --- src/components/app/app.scss | 170 ++++++++++++++++++++++ src/components/typography/typography.scss | 167 --------------------- src/themes/ionic.components.scss | 1 - 3 files changed, 170 insertions(+), 168 deletions(-) delete mode 100644 src/components/typography/typography.scss diff --git a/src/components/app/app.scss b/src/components/app/app.scss index 24a9e44d23..5c6c49b4db 100644 --- a/src/components/app/app.scss +++ b/src/components/app/app.scss @@ -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 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; +} diff --git a/src/components/typography/typography.scss b/src/components/typography/typography.scss deleted file mode 100644 index 8ea799a371..0000000000 --- a/src/components/typography/typography.scss +++ /dev/null @@ -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 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; -} diff --git a/src/themes/ionic.components.scss b/src/themes/ionic.components.scss index ba1ada043e..47837c27cc 100644 --- a/src/themes/ionic.components.scss +++ b/src/themes/ionic.components.scss @@ -220,7 +220,6 @@ "../components/toolbar/toolbar.wp"; @import -"../components/typography/typography", "../components/typography/typography.ios", "../components/typography/typography.md", "../components/typography/typography.wp";