_text.scss

/* @author Bilal Cinarli */

/** -------------------------------------------
    Text Related Mixins
    ------------------------------------------- **/
/**
 * Fontface
 *
 * http://caniuse.com/#search=font-face
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
 * For modern approach, woff and ttf format is supported all major browsers. If you need to support
 * Internet Explorer 8, with setting "$support-for-ie8" variable to "true", the eot file format
 * also added to mixin output. You also need to provide related file formats in your fonts folder.
 *
 * @font-face {
              [ font-family: <family-name>; ]?
           || [ src: [ <uri> [format(<string>#)]? | <font-face-name> ]#; ]?
           || [ unicode-range: <urange>#; ]?
           || [ font-variant: <font-variant>; ]?
           || [ font-feature-settings: normal|<feature-tag-value>#; ]?
           || [ font-stretch: <font-stretch>; ]?
           || [ font-weight: <weight>; ]?
           || [ font-style: <style>; ]?
   }
 */
@mixin font-face($name, $file, $weight: normal, $style: normal) {
    $ie8-support: false;
    $woff2-support: false;
    $eot: "";
    $woff2: "";

    @if variable_exists(support-for-ie8) {
        $ie8-support: $support-for-ie8;
    }

    @if variable_exists(support-for-woff2){
        $woff2-support: $support-for-woff2;
    }

    @if ($ie8-support == true) {
        $eot: 'url("../fonts/#{$file}.eot?#caffeine") format("embedded-opentype"),'
    }

    @if ($woff2-support == true){
        $woff2: 'url("../fonts/#{$file}.woff2?#caffeine") format("woff2"),'
    }

    @font-face {
        font-family: "#{$name}";
        src: #{$eot}
             #{$woff2}
             url("../fonts/#{$file}.woff?caffeine") format("woff"),
             url("../fonts/#{$file}.ttf?caffeine") format("truetype");
        font-weight: $weight;
        font-style: $style;
    }
}

/**
 * fontface
 * This mixin is a callback support for very early versions of Caffeine
 */
@mixin fontface($name, $file, $weight: normal, $style: normal) {
    @include font-face($name, $file, $weight, $style);

    @warn "fontface mixin is going to be depreciated in newer versions. Please you font-face mixin instead";
}

/**
  * Font Icon
  *
  * Outputs an icon font definition with supporting class attribute selectors.
  * For preventing font misuse for the element, the class selector applied to :before pseuode element
  * instead of the element itself.
  */
@mixin font-icon($name, $file) {
    $prefix-icon: 'icon-';
    $placeholder-icon: '%font-icon';

    @if variable_exists(icon-prefix) {
        $prefix-icon: $icon-prefix;
    }

    @if variable_exists(icon-placeholder) {
        $placeholder-icon: $icon-placeholder;
    }

    @include font-face($name, $file);

    #{$placeholder-icon} {
        font: {
            family: $name;
            style: normal;
            variant: normal;
            weight: normal;
        }
    ;
        line-height: 1;
        text-transform: none;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    [class^="#{$prefix-icon}"]:before, [class*=" #{$prefix-icon}"]:before {
        @extend #{$placeholder-icon};
    }
}

/**
 * Font-Size callback
 * 
 * For modern usage, converts and output font-size with rem units.
 */
@mixin font-size($font-size) {
    $ie8-support: true;
    @if variable_exists(support-for-ie8) {
        $ie8-support: $support-for-ie8;
    }

    @if ($font-size == inherit) {
        font-size: inherit;
    } @else {
        @if ($ie8-support == true) {
            font-size: rem-to-px($font-size);
        }
        font-size: rem($font-size);
    }
}

/**
 * Disable Select
 * It is useful for mobil applications
 * Prevents text selection when swipe or double click
 * http://caniuse.com/#search=user-select
 * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
 * Formal syntax: none | text | all | element
 * Current spec, all vendors need prefixing
 */
@mixin disable-text-select() {
    @include prefixer('user-select', none, webkit moz ms);
}

/**
 * Selection
 *
 * The ::selection CSS pseudo-element applies rules to the portion of a document 
 * that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.
 * http://caniuse.com/#search=selection
 * https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
 * Formal syntax: content
 * Only a small part of text related properties supports. You can change the following properties in selectionsİ
 * color, background-color, cursor, outline, text-decoration, text-emphasis-color and text-shadow.
 *
 * Notes:
 * text-shadow in ::selection is supported by Chrome, Safari and Firefox 17+.
 *
 * The ::selection CSS pseudo-element was drafted for CSS Selectors Level 3 
 * but removed before it reached the Recommendation status. It was readded as part of the Pseudo-Elements Level 4 draft.
 */
@mixin selection($content...) {
    @include prefixer(selection, $content, moz);
}