@mixin font-size($size: 1.4, $important: false) { @if $important == true { font-size: ($size * 10) + px !important; font-size: $size + rem !important; } @else { font-size: ($size * 10) + px; font-size: $size + rem; } } @mixin line-height($size: 1.6, $force-height: false) { @if $force-height == true { height: ($size * 10) + px; } line-height: ($size * 10) + px; line-height: $size + rem; } @mixin text-underline-hover { text-decoration: none; &:hover { text-decoration: underline; } } $line-height-modifiers: ( default: 1.1875, mac: 1, ie: 1.25 ); @mixin text-underline-line-height($line-height) { text-decoration: none; @include line-height($line-height * map-get($line-height-modifiers, default)); background-repeat: repeat-x; body.mac &, body.ios & { @include line-height($line-height); } body.ie & { @include line-height($line-height * map-get($line-height-modifiers, ie)); } } // @text-underline-line-height() @mixin text-underline-stroke($stroke-color, $stroke-width) { @include text-shadow( 0 $stroke-width 0 $stroke-color, $stroke-width 0 0 $stroke-color, 0 -1 * $stroke-width 0 $stroke-color, -1 * $stroke-width 0 0 $stroke-color ); } // @text-underline-stroke() @mixin text-underline( $color: black, $background-color: transparent, $stroke-color: white, $font-size: 1.4, $line-height: 1.8, $stroke-width: 2px, $line-width: 1px, $line-offset: 0px ) { @include text-underline-line-height($line-height); @include text-underline-stroke($stroke-color, $stroke-width); } // @text-underline() @mixin text-underline-hover( $color: black, $background-color: transparent, $stroke-color: white, $font-size: 1.4, $line-height: 1.8, $stroke-width: 2px, $line-width: 1px, $line-offset: 0px ) { @include text-underline-line-height($line-height); &:hover { @include text-underline-stroke($stroke-color, $stroke-width); } } // @text-underline-hover() @mixin text-no-underline-hover { &:hover { text-decoration: none; } } @mixin text-overflow-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @mixin font-family( $fontname, $filename, $weight: normal, $style: normal, $stretch: normal, $range: false ) { @font-face { font-family: $fontname; src: font-url($filename + '.eot'); src: local($fontname), // disable this to test without the font installed locally font-url($filename + '.eot?#iefix') format('embedded-opentype'), font-url($filename + '.woff') format('woff'), font-url($filename + '.ttf') format('truetype'), font-url($filename + '.svg#' + $filename) format('svg'); font-weight: $weight; font-style: $style; font-stretch: $stretch; @if $range { unicode-range: $range; } } }