KNI mixins

kni-mixins

@mixin transition-all($time) {
    -webkit-transition: all $time+s ease;
    -moz-transition: all $time+s ease;
    -o-transition: all $time+s ease;
    transition: all  $time+s ease;
}

@mixin transition($property, $time) {
    -webkit-transition: $property $time+s ease;
    -moz-transition: $property $time+s ease;
    -o-transition: $property $time+s ease;
    transition: $property $time+s ease;
}


@mixin box-shadow($top, $left, $color) {
    -webkit-box-shadow: $top $left $color;
    box-shadow: $top $left $color;
}


@mixin hide-text {
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

@mixin navigation-list {
    list-style-type:none;
    padding:0;
    margin:0;
    overflow:hidden;
    > li{
        display:block;
        float:left;
        &:last-child{
            margin-right:0px;
        }
    }
}

@mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



@mixin calc($property, $expression) { 
  #{$property}: -moz-calc(#{$expression}); 
  #{$property}: -o-calc(#{$expression}); 
  #{$property}: -webkit-calc(#{$expression}); 
  #{$property}: calc(#{$expression}); 
} 

// Calc Mixin Usage:
// .test {
//   @include calc(width, "25% - 1em");
// }



// Media queries

@mixin respond-to($media) {
    @if $media == small-mode {
        @media only screen and (max-width: 420px) { @content }
    }
    @else if $media == medium-mode {
        @media only screen and (max-width: 768px) { @content }
    }
    @else if $media == large-mode {
        @media only screen and (max-width: 980px) { @content }
    }
}