

// All mixin stuff goes here

@mixin transition($args) {
    transition: $args;
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    
}

@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

@mixin border-radius($radius) {
    border-radius: $radius;
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    
}

@mixin box-sizing( $type:'border-box') {
    box-sizing: $type;
    -webkit-box-sizing: $type;
    -moz-box-sizing: $type;
    -o-box-sizing: $type;
    -ms-box-sizing: $type;
    
}





@mixin padding($value) {
    // padding
    padding: $value;
}

// grid function 

$max-width:12;
$one_portion: (100/$max-width);
@for $i from 1 through $max-width {
    .supa-#{column}-#{$i} {
        width: (($max-width*$one_portion)/$i)*1%;
    }
}

// mixin  for box shadow  
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
    -webkit-box-shadow:$top $left $blur $color #{$inset};
    -moz-box-shadow:$top $left $blur $color #{$inset};
    box-shadow:$top $left $blur $color #{$inset};
}

// Mixin  for anchor tag  
@mixin linx ($link, $visit, $hover, $active) {
    a {
        color: $link;
        &:visited {
            color: $visit;
        }
        &:hover {
            color: $hover;
        }
        &:active {
            color: $active;
        }
    }
}

// placeholder 
@mixin placeholder {
    ::-webkit-input-placeholder {
        @content
    }
    :-moz-placeholder {
        @content
    }
    ::-moz-placeholder {
        @content
    }
    :-ms-input-placeholder {
        @content
    }
}

// clear fix

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

// calc mixin
@mixin calc($property, $expression) {
    #{$property}: -moz-calc(#{$expression});
    #{$property}: -webkit-calc(#{$expression});
    #{$property}: calc(#{$expression});
}
