diff --git a/font.scss b/font.scss new file mode 100644 index 0000000..83b92a3 --- /dev/null +++ b/font.scss @@ -0,0 +1,37 @@ +@import 'bower_components/vui-colors/colors.scss'; +@import 'px-to-base-rem.scss'; + +@mixin vui-typography-font( + $line-height: 1.5 + ) { + + color: $vui-color-ferrite; + font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; + font-size: 1rem; + font-weight: 300; + line-height: $line-height; + letter-spacing: px-to-base-rem(0.3px); + + &.vui-dyslexic, + .vui-dyslexic { + font-weight: 400; + font-family: 'Open Dyslexic', sans-serif; + } + + :lang(ar) { + font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif; + } + :lang(zh-CN) { + font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; + } + :lang(zh-TW) { + font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; + } + :lang(ko) { + font-family: 'Apple SD Gothic Neo', Dotum, sans-serif; + } + :lang(ja) { + font-family: 'Hiragino Kaku Gothic Pro', 'Meiyro', sans-serif; + } + +} diff --git a/package.json b/package.json index 48f0105..1e9d4ae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vui-typography", - "version": "2.0.1", + "version": "2.0.2", "description": "Mixins and CSS for applying basic typography styles", "scripts": { "clean": "rimraf *.css && rimraf ./test/*.css", diff --git a/typography.scss b/typography.scss index 39f8ac8..3bc107c 100644 --- a/typography.scss +++ b/typography.scss @@ -1,5 +1,4 @@ -@import 'bower_components/vui-colors/colors.scss'; -@import 'px-to-base-rem.scss'; +@import 'font.scss'; @import 'import-once.scss'; @include import-once('brightspace fonts') { @@ -15,36 +14,3 @@ } } - -@mixin vui-typography-font() { - - color: $vui-color-ferrite; - font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; - font-size: 1rem; - font-weight: 300; - line-height: 1.5; - letter-spacing: px-to-base-rem(0.3px); - - &.vui-dyslexic, - .vui-dyslexic { - font-weight: 400; - font-family: 'Open Dyslexic', sans-serif; - } - - :lang(ar) { - font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif; - } - :lang(zh-CN) { - font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; - } - :lang(zh-TW) { - font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; - } - :lang(ko) { - font-family: 'Apple SD Gothic Neo', Dotum, sans-serif; - } - :lang(ja) { - font-family: 'Hiragino Kaku Gothic Pro', 'Meiyro', sans-serif; - } - -}