@viewdo/dxp-story-player-assets/less/base/typography.less

## Installation

.typography-mixins(){

    .setGlobalFont(@fontFamily, @lineHeight: 1.5){
        html{
            @fontFamily();
            line-height: @lineHeight;
        }
    }
    .setFontSystem(@fontSystem, @bodyFont, @headingFont, @headingLineHeight: 1.3, @headingWeight: 700, @portraitFontSize : 16px, @landscapeFontSize: 16px, @largerDevicesFontSize: 16px){

        .setBodyFont(@fontSystem, @bodyFont);
        .setHeadingFont(@fontSystem, @headingFont, @headingLineHeight, @headingWeight);

        .ivx-font-@{fontSystem}{
            //larger devices
            @media only screen and (min-width: 46.0625em) and (min-height: 30.0625em) {
                font-size:@largerDevicesFontSize;
            }
            //mobile landscape
            @media only screen and (min-width: 320px) and (max-width: 812px) and (orientation: landscape) {
                font-size:@portraitFontSize;
            }
            //mobile portrait
            @media only screen and (min-width: 320px) and (max-width: 812px) and (orientation: portrait) {
                font-size:@landscapeFontSize;
            }
        }

        @h1DefaultStyles: font-weight @headingWeight, font-size 2em;
        .setStatementFromList(@fontSystem, h1, @h1DefaultStyles);

        @h2DefaultStyles: font-weight @headingWeight, font-size 1.5em;
        .setStatementFromList(@fontSystem, h2, @h2DefaultStyles);

        @h3DefaultStyles: font-weight @headingWeight, font-size 1.17em;
        .setStatementFromList(@fontSystem, h3, @h3DefaultStyles);

        @h4DefaultStyles: font-weight @headingWeight, font-size 1.14em;
        .setStatementFromList(@fontSystem, h4, @h4DefaultStyles);

        @paragraphLargeStyles: font-weight 400, font-size 1.17em;
        @paragraphLargeStylesBold: font-weight 700, font-size 1.17em;
        .setStatementFromList(@fontSystem, ~"p.ivx-font-large", @paragraphLargeStyles);
        .setStatementFromList(@fontSystem, ~"p.ivx-font-large.ivx-font-bold", @paragraphLargeStylesBold);

        @paragraphStyles: font-weight 400, font-size 1em;
        @paragraphStylesBold: font-weight 700, font-size 1em;
        .setStatementFromList(@fontSystem, ~"p", @paragraphStyles);
        .setStatementFromList(@fontSystem, ~"p.ivx-font-bold", @paragraphStylesBold);
        .ivx-font-bold{
            font-weight: 700;
            font-size: 1em;
        }
        //.setStatementFromList(@fontSystem, ~"div", @paragraphStyles);
        //.setStatementFromList(@fontSystem, ~"div.ivx-font-bold", @paragraphStylesBold);
        //.setStatementFromList(@fontSystem, ~"span", @paragraphStyles);
        //.setStatementFromList(@fontSystem, ~"span.ivx-font-bold", @paragraphStylesBold);

        @paragraphSmallStyles: font-weight 400, font-size .83em;
        @paragraphSmallStylesBold: font-weight 700, font-size .83em;
        .setStatementFromList(@fontSystem, ~"p.ivx-font-small", @paragraphSmallStyles);
        .setStatementFromList(@fontSystem, ~"p.ivx-font-small.ivx-font-bold", @paragraphSmallStylesBold);

        @smallStyles: @paragraphSmallStyles;
        @smallStylesBold: @paragraphSmallStylesBold;
        .setStatementFromList(@fontSystem, ~"small", @smallStyles);
        .setStatementFromList(@fontSystem, ~"small.ivx-font-bold", @smallStylesBold);

        @paragraphTinyStyles: font-weight 400, font-size .67em;
        @paragraphTinyStylesBold: font-weight 700, font-size .67em;
        .setStatementFromList(@fontSystem, ~"p.ivx-font-tiny", @paragraphTinyStyles);
        .setStatementFromList(@fontSystem, ~"p.ivx-font-tiny.ivx-font-bold", @paragraphTinyStylesBold);

        @defaultSubtitle: display block, opacity .7, font-size .675em;
        .setSubTitles(@fontSystem, default, @defaultSubtitle);

        @alternativeSubtitle: display inline;
        .setSubTitles(@fontSystem, alternative, @alternativeSubtitle);

        @anchorDefault: display ~"inline-block";
        @anchorVisited: ;
        @anchorHover:color;
        @anchorFocus: ;
        @anchorActive: ;
        .setStatementFromList(@fontSystem, ~"a", @anchorDefault);
        .setStatementFromList(@fontSystem, ~"a:hover", @anchorHover);

    }

    .setHeadingFont(@fontSystem, @fontFamily, @lineHeight: 1.3, @font-weight: 700){
        .ivx-font-@{fontSystem}{
            h1,h2,h3,h4{
                font-family: @fontFamily;
                line-height: @lineHeight;
                font-weight: @font-weight;
                small{
                    font-family: @fontFamily;
                }
            }
        }
    }

    .setSubTitles(@fontSystem, @type, @style) when (@type = default){
        .setStatementFromList(@fontSystem, ~"h1 small, h2 small, h3 small, h4 small", @style);
    }

    .setSubTitles(@fontSystem, @type, @style) when not (@type = default){
        .setStatementFromList(@fontSystem, ~"h1.ivx-header-@{type} small, h2.ivx-header-@{type} small", @style);
    }

    .setBodyFont(@fontSystem, @fontFamily){
        .ivx-font-@{fontSystem}{
            *{
                font-family:@fontFamily;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }
    }

}