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

## Installation

/*=========================
BASE IMPORTS
=========================*/

//css reset
@import (less) '../lib/normalize.css';

//useful mixins - documentation at http://lesshat.madebysource.com/
@import '../lib/lesshat.less';

/*=========================
ADD MIX-INS
=========================*/

// TODO: Remove the @primary from
.init(@imports:false) when (@imports = true){
    @import (reference) url('framework.less');
    @import (reference) url('colors.less');
    @import (reference) url('typography.less');
    @import (reference) url('images.less');
    @import (reference) url('backgrounds.less');
    @import (reference) url('buttons.less');
    @import (reference) url('links.less');
    @import (reference) url('video-controls.less');
    @import (reference) url('inputs.less');
    @import (reference) url('grid.less');
    @import (reference) url('embedded-scenes.less');
    @import (reference) url('responsive.less');
    @import (reference) url('icons.less');
    @import (reference) url('animations.less');

    ._setupBaseStyles();
    .addAllMixins();
}

.init(@imports:false) when not (@imports = true){
    ._setupBaseStyles();
}

._setupBaseStyles(@primary:#000){
    /*=========================
    BASE STYLES
    =========================*/

    html,body{
        height: 100%;
    }

    //headings and dividers
    h1:first-child,
    h2:first-child,
    h3:first-child,
    h4:first-child{
        margin-top: 0;
    }

    *.divider:after,[class*="divider-"]:after{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: black;
        margin: 1em auto;
    }
    *.divider-inverted:after,[class*="inverted-divider-"]:after{
        background: white;
    }
    *[class*="divider-10"]:after{ width: 10%; }
    *[class*="divider-20"]:after{ width: 20%; }
    *[class*="divider-30"]:after{ width: 30%; }
    *[class*="divider-40"]:after{ width: 40%; }
    *[class*="divider-50"]:after{ width: 50%; }
    *[class*="divider-60"]:after{ width: 60%; }
    *[class*="divider-70"]:after{ width: 70%; }
    *[class*="divider-80"]:after{ width: 80%; }
    *[class*="divider-90"]:after{ width: 90%; }

    //alignment
    .text-left{ text-align: left; }
    .text-right{ text-align: right; }
    .text-center{ text-align: center; }

    .pull-left{ float: left; }
    .pull-right{ float: right; }

    //fix extra space with videos
    .video-player-container{
        line-height: 0;
    }

    .clearfix:after {
        content:" ";
        display:block;
        clear:both;
    }

    //for screen readers
    .hidden{
        position:absolute;
        left:-10000px;
        top:auto;
        width:1px;
        height:1px;
        overflow:hidden;
    }

}

.addAllMixins(){
    .framework-mixins();
    .color-palette-mixins();
    .typography-mixins();
    .image-mixins();
    .background-mixins();
    .button-mixins();
    .link-mixins();
    .video-control-mixins();
    .form-input-mixins();
    .grid-mixins();
    .embedded-scene-mixins();
    .responsive-mixins();
    .icon-mixins();
    .ivx-animations();
}