skeleton/styles/less/lib.less
/*  ###########################################################################
    Author:     Lunatech Research
    ########################################################################### */
    
    
//  LESS LIBRARY ##############################################################
//  THESE ARE THE VARIABLES TO SKIN THIS PROJECT ##############################



//  Base units that set overall proportions ------------------------------------

    @view:                  1200;           // VIEWPORT target based on pixels
    @w:                     @view / 100px;  // Smallest horizontal unit
    @h:                     0.2em;          // Smallest vertical unit
    @em:                    @h*7;           // Vertical space for boundries like top & bottom padding
    
    @block:                 @w * 2;         // White space for paddings or margins
    @text-block:            @view * 48%;    // alt: 52em; 
    @max-width:             @view * 1px;    // alt: @w * 80 = 960
    
    @l:                     1px;            // Line or border
    @rad:                   @w/3;           // Standard radius
    
    
//  Font elements -------------------------------------------------------------
    
    @font-root:             "../fonts/";
                            
    @font-face {}

    @body-scale:            100%;          // Used on the body element
    @transport:             1.6;            // For line height (no units!)
    @interline:             @h*5;           // Interline / leading  http://en.wikipedia.org/wiki/Interline_spacing
    @typeface:              Arial, sans-serif;
    @typeface-header:       Georgia, serif;
    @typeface-brand:        Arial, sans-serif;
    
    @em-scale:              0.9em;
    @header-weight:         normal;
    @header-lineheight:     1.2;
    

/*  TYPOGRAPHIC FONT SCALE ---------------------------------------------------- */
    
    .nonpareil              { font-size: @em-scale * 0.6; }
    .minion                 { font-size: @em-scale * 0.7; }
    .brevier                { font-size: @em-scale * 0.8; }
    .galliard               { font-size: @em-scale * 0.9; }
    .garamond               { font-size: @em-scale *   1; }
    .small-pica             { font-size: @em-scale * 1.1; }
    .pica                   { font-size: @em-scale * 1.2; }
    .augustin               { font-size: @em-scale * 1.4; }
    .great-primer           { font-size: @em-scale * 1.8; }
    .double-pica            { font-size: @em-scale * 2.1; }
    .two-line-pica          { font-size: @em-scale * 2.4; }
    .double-great-primer    { font-size: @em-scale * 3.6; }
    
//  Basic colour values -------------------------------------------------------

    @light-color:           #ffffff;
    @dark-color:            #222222;
    @text-color:            #333333;
    
    
//  Color sets ----------------------------------------------------------------
    
    @brand-color:           #7abcff;

    @blue1:                 @brand-color;
    @blue2:                 darken(@blue1, 15%);
    
    @green1:                #57c26c;
    @green2:                darken(@green1, 15%);
    
    @yellow1:               #ffe362;
    @yellow2:               darken(@yellow1, 25%);
    
    @red1:                  #f83f21;
    @red2:                  darken(@red1, 15%);
    
    @error:                 #cd0a0a;

    @grey0:                 #fafafa;
    @grey1:                 darken(@grey0, 8%);
    @grey2:                 darken(@grey0, 16%);
    @grey3:                 darken(@grey0, 26%);
    @grey4:                 darken(@grey0, 38%);
    @grey5:                 darken(@grey0, 54%);
    @grey6:                 darken(@grey0, 76%);
   

//  Link colour values --------------------------------------------------------

    @link-color:            #0080ff;
    @link-color-visited:    #8000ff;
    @link-color-hover:      @link-color;
    @link-color-active:     @link-color;
    

//  Form elements -------------------------------------------------------------

    @form-width:            @text-block;
    @field-width:           @form-width;
    
    @input-padding-height:  @em/4;
    @input-padding-width:   @block/6;
    @text-input-padding:    @input-padding-height @input-padding-width;
    
    @label-width:           100%;
    @text-input-width:      100%;
    @label-orientation:     none; /* float value: left, right, none */
    
    @label-text-orientation:left;


//  Box elements --------------------------------------------------------------

    .box {
        margin:             0 0 @interline ;
        padding:            @interline @block;
        }
        
    //  Use this to have block elements override the '.panel' padding.    
    //  This is great for headings, <header> and <footer> tags.
    .box-inset {
        margin:             0 - @interline 0 - @block;
        padding:            @interline/2 @block;
        }


//  Basic UI elements ---------------------------------------------------------

    .text-shadow(@loc, @color) {
        text-shadow:            0 @loc @l @color;
        }
    .box-shadow(@x:0,@y:@l,@blur:@l,@color:fadeout(@dark-color,80%)) {
        //-moz-box-shadow:        @arguments;
        //-webkit-box-shadow:     @arguments;
        box-shadow:             @arguments;
        }
    .gradient(@start,@stop){
        background-color:       @start;
        background-image:       -moz-linear-gradient(top, @start 0%, @stop 100%); /* firefox */
        background-image:       -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(100%,@stop)); /* webkit */
        background-image:       -ms-linear-gradient(top, @start 0%, @stop 100%); /* ie10 */
        background-image:       linear-gradient(top, @start 0%, @stop 100%); /* w3c */
                                // IE HACK!!
        filter:                 ~"progid:DXImageTransform.Microsoft.Gradient( StartColorStr=@{start} , EndColorStr=@{stop},GradientType=0 )";/* ie */
        }   
    
    .sidebar(@width:25%,@col:@grey0,@back:@light-color){
        background-color: @back;
        background-image: -moz-linear-gradient(left, @col @width, @back @width);
        background-image: -webkit-linear-gradient(left, @col @width, @back @width); /* Chrome10+,Safari5.1+ */
        background-image: -o-linear-gradient(left, @col @width, @back @width); /* Opera 11.10+ */
        background-image: -ms-linear-gradient(left, @col @width, @back @width); /* IE10+ */
        background-image: linear-gradient(left, @col @width, @back @width); /* W3C */
       }
    
    .background-clip {
        // Background clip to allow borders to blend properly with the background
        -moz-background-clip:   padding; 
        -webkit-background-clip:padding-box;
        background-clip:        padding-box;
        }
    .rounded-corners(@r:@rad) {
        border-radius:          @arguments;
        .background-clip;
        }
    .rounded-corners-top(@r:@rad) {
        border-top-left-radius: @arguments;
        border-top-right-radius: @arguments;  
        .background-clip;
        }
    .rounded-corners-bottom(@r:@rad) {
        border-bottom-right-radius: @arguments;
        border-bottom-left-radius: @arguments;
        .background-clip;
        }
    .rounded-corners-left(@r:@rad) {
        border-top-left-radius: @arguments;
        border-bottom-left-radius: @arguments;  
        .background-clip;
        }
    .rounded-corners-right(@r:@rad) {
        border-top-right-radius: @arguments;
        border-bottom-right-radius: @arguments;  
        .background-clip;
        }
    .columns(@col:2) {
        -moz-column-count:      @col; 
        -moz-column-gap:        @w; 
        -webkit-column-count:   @col; 
        -webkit-column-gap:     @w; 
        column-count:           @col; 
        column-gap:             @w; 
        }
        
    .display-box(@orient:horizontal) {
        display:                -moz-box;
        display:                -webkit-box;
        -moz-box-orient:        @arguments;
        -webkit-box-orient:     @arguments;
        }
    .box-flex(@flex:1) {
        -moz-box-flex:          @arguments;
        -webkit-box-flex:       @arguments;
        }
    .box-sizing(@box:content-box){
        -webkit-box-sizing: @arguments; /* content-box */
        -moz-box-sizing: @arguments;
        box-sizing: @arguments;
        }
    .clear-fix {
        content:                "\0020";
        display:               block;
        clear:                 both;
        visibility:            hidden;
        line-height:           0;
        height:                0;
        }
        
    .opacity(@alpha:0.5) { 
        @ieopacity:             @arguments * 100;
        opacity:                @arguments; 
        -ms-filter:             ~"Alpha(Opacity=@{ieopacity})";
        filter:                 ~"Alpha(Opacity=@{ieopacity})";
        }
    .transition(@transition:none) {
    	-webkit-transition: @arguments;
    	-moz-transition: @arguments;
    	-o-transition: @arguments;
    	-ms-transition: @arguments;
    	transition: @arguments;
    }
    .appearance(@appearance:inherit) {
        -webkit-appearance:@arguments; /* Safari and Chrome */
        -moz-appearance:@arguments; /* Firefox */
        appearance:@arguments;
        }
