_global.scss

/*
* Global mixins for without effort framework
*/

/* Assuming pixel size of 14px or 87.5% instead of 10px */
@mixin em-font-size($sizeValue: 1.0714){
    // We use a base of 15px
    font-size: $sizeValue + rem;
    font-size: ($sizeValue * 14) + px;
    // fall back for older browsers
    font-size: $sizeValue + em;
}

/* Assuming pixel size of 14px or 87.5% instead of 10px */
@mixin pixel-font-size($font-size: 15){
    font-size: ($font-size * 0.0714) + rem;
    font-size: $font-size + px;
    //fall back for older browsers
    font-size: ($font-size * 0.0714) + em;
}

@mixin user-agent($media){
    @if $media == webkit {
        @media screen and (-webkit-min-device-pixel-ratio:0){@content;}
    }
}


@mixin responsive($media){
    @if $media == phone {
        @media only screen and (min-device-width: 320px) and (orientation: portrait) { @content; }
    }
    @else if $media == phone-landscape {
        @media only screen and (min-device-width: 480px) and (orientation: landscape) { @content; }
    }
    @else if $media == phone-retina {
        @media only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: portrait), only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait), only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait), only screen and (min-resolution: 1.5dppx) and (orientation: portrait) { @content; }
    }
    @else if $media == phone-retina-landscape {
        @media only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape), only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: landscape), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape), only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape), only screen and (min-resolution: 1.5dppx) and (orientation: landscape) { @content; }
    }
    @else if $media == tablets {
        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { @content; }
    }
    @else if $media == tablets-landscape {
        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { @content; }
    }
    @else if $media == netbook {
        @media only screen and (min-width: 800px) and (max-width: 1024px) {@content;}
    }
    @else if $media == tablets-retina{
        @media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min--moz-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-o-min-device-pixel-ratio: 2/1) and (orientation: portrait), only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-resolution: 2dppx) and (orientation: portrait) { @content; }
    }
    @else if $media == tablets-retina-landscape  {
        @media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min--moz-device-pixel-ratio: 2) and (orientation: landscape), only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-o-min-device-pixel-ratio: 2/1) and (orientation: landscape), only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape), only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-device-pixel-ratio: 2) and (orientation: landscape), only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (min-resolution: 2dppx) and (orientation: landscape) { @content; }
    }
    @else if $media == desktop {
        @media only screen and (min-width: 1024px) { @content; }
    }
    @else if $media == widescreen {
        @media only screen and (min-width: 1299px) { @content; }
    }
    @else if $media == desktop-retina-medium {
        @media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-width: 800px), only screen and (min-device-pixel-ratio: 1.3) and (max-width: 800px), only screen and (min--moz-device-pixel-ratio: 1.3) and (max-width: 800px), only screen and (-o-min-device-pixel-ratio: (1.3*10)/10) and (max-width: 800px), only screen and (min-resolution: #{round(1.3*96)}dpi) and (max-width: 800px), only screen and (min-resolution: 120dpi) and (max-width: 800px){@content}
    }
    @else if $media == desktop-retina-small {
        @media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-width: 450px), only screen and (min-device-pixel-ratio: 1.3) and (max-width: 450px), only screen and (min--moz-device-pixel-ratio: 1.3) and (max-width: 450px), only screen and (-o-min-device-pixel-ratio: (1.3*10)/10) and (max-width: 450px), only screen and (min-resolution: #{round(1.3*96)}dpi) and (max-width: 450px), only screen and (min-resolution: 120dpi) and (max-width: 450px){@content}
    }
    @else if $media == desktop-retina {
        @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: (1.3*10)/10), only screen and (min-resolution: #{round(1.3*96)}dpi) only screen and (min-resolution: 120dpi) {@content}
    }
}

// The default color for box shadows
$box-shadow-color: rgba(0,0,0,0.25) !default;

// The default horizontal offset. Positive is to the right.
$box-shadow-x: 0px !default;

// The default vertical offset. Positive is down.
$box-shadow-y: 0px !default;

// The default blur length.
$box-shadow-blur: 5px !default;

// The default spread length.
$box-shadow-spread : false !default;

// The default shadow inset: inset or false (for standard shadow).
$box-shadow-inset : false !default;

@mixin box-sizing($size: content-box){
    -webkit-box-sizing: $size;
    -moz-box-sizing: $size;
    box-sizing: $size;
}

@mixin font-smoothing($aliased: subpixel-antialiased){
    -webkit-font-smoothing: $aliased;
     font-smoothing: $aliased;
}

@mixin border-radius($radius:6px){
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius:$radius;
    -o-border-radius: $radius;
    border-radius: $radius;
    -webkit-background-clip: padding-box;-moz-background-clip: padding-box;background-clip: padding-box;
}

@mixin custom-border-radius($topleft: 6px, $topright: 6px, $bottomleft: 6px, $bottomright: 6px){
    -webkit-border-radius: $topleft $topright $bottomright $bottomleft;
    -moz-border-radius: $topleft $topright $bottomright $bottomleft;
    -ms-border-radius: $topleft $topright $bottomright $bottomleft;
    -o-border-radius: $topleft $topright $bottomright $bottomleft;
    border-radius: $topleft $topright $bottomright $bottomleft;
    -webkit-background-clip: padding-box;-moz-background-clip: padding-box;background-clip: padding-box;
}

@mixin column($count: 2, $gap: 10px){
    -moz-column-count: $count;
    -moz-column-gap: $gap;
    -webkit-column-count: $count;
    -webkit-column-gap: $gap;
    -o-column-count: $count;
    -o-column-gap: $gap;
    -ms-column-count: $count;
    -ms-column-gap: $gap;
    column-count: $count;
    column-gap: $gap;
}

@mixin default-box-shadow($shadow){
    -webkit-box-shadow:$shadow;
    -moz-box-shadow: $shadow;
    -ms-box-shadow:$shadow;
    -o-box-shadow:$shadow;
    box-shadow:$shadow;
}

@mixin box-shadow($shadow-1: $default, $shadow-2: 0, $shadow-3: 0, $shadow-4: 0, $shadow-5: 0, $shadow-6: 0, $shadow-7: 0, $shadow-8: 0, $shadow-9: 0, $shadow-10: 0) {
    $shadow : compact($shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
    $other: $shadow-1;
    @each $new in $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10 {
        @if not ($new == 0){$other: $other, $new};
    }
    @include default-box-shadow($other);
}

@mixin single-box-shadow($x: 0px, $y: 0px, $blur: false, $color: rgba(0,0,0,0.25), $inset: false, $spread: false){
    @if not ($inset == true or $inset == false or $inset == inset){
        @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
    } @else {
        $full : $x $y;
        @if $blur {$full: $full $blur;}
        @if $color {$full: $full $color;}
        @if $inset {$full: $full $inset;}
        @if $spread {$full: $full $spread;}
    }
    @include box-shadow($full);
}

@mixin box-sizing($params){
    -webkit-box-sizing: $params;
    -moz-box-sizing: $params;
    -ms-box-sizing: $params;
    box-sizing: $params;
}

@mixin appearance($params){
    -webkit-appearance: $params;
    -moz-appearance: $params;
    appearance: $params;
}

@mixin transitions($property: all, $duration: .5s, $animation: ease-in-out, $delay: 0s){
    -webkit-transition: $property $duration $animation $delay;
    -moz-transition: $property $duration $animation $delay;
    -ms-transition: $property $duration $animation $delay;
    -o-transition: $property $duration $animation $delay;
    transition: $property $duration $animation $delay;
}

@mixin transforms($deg: 0deg){
    -webkit-transform: rotate($deg);
    -moz-transform: rotate($deg);
    -ms-transform: rotate($deg);
    -o-transform: rotate($deg);
    transform: rotate($deg);
}

@mixin image-linear-gradient($url, $origin: top, $start: rgba(255,255,255,1), $stop: rgba(0,0,0,1)){
    background: $url $start;
    background: $url, -webkit-linear-gradient($origin, $start, $stop);
    background: $url, -moz-linear-gradient($origin, $start, $stop);
    background: $url, -ms-linear-gradient($origin, $start, $stop);
    background: $url, -o-linear-gradient($origin, $start, $stop);
    background: $url, linear-gradient($origin, $start, $stop);
}

@mixin linear-gradient($origin: top, $start: rgba(255,255,255,1), $stop: rgba(0,0,0,1)){
    background-color: $start;
    background: -webkit-linear-gradient($origin, $start, $stop);
    background: -moz-linear-gradient($origin, $start, $stop);
    background: -ms-linear-gradient($origin, $start, $stop);
    background: -o-linear-gradient($origin, $start, $stop);
    background: linear-gradient($origin, $start, $stop);
}

@mixin default-linear-gradient($origin, $gradient){
    background: -webkit-linear-gradient($origin, $gradient);
    background: -moz-linear-gradient($origin, $gradient);
    background: -ms-linear-gradient($origin, $gradient);
    background: -o-linear-gradient($origin, $gradient);
    background: linear-gradient($origin, $gradient);
}

@mixin complex-linear-gradient($origin, $gradient-1: $default, $gradient-2: 0, $gradient-3: 0, $gradient-4: 0, $gradient-5: 0, $gradient-6: 0, $gradient-7: 0, $gradient-8: 0, $gradient-9: 0, $gradient-10: 0) {
    $gradient : compact($gradient-2, $gradient-3, $gradient-4, $gradient-5, $gradient-6, $gradient-7, $gradient-8, $gradient-9, $gradient-10);
    $other: $gradient-1;
    @each $new in $gradient-2, $gradient-3, $gradient-4, $gradient-5, $gradient-6, $gradient-7, $gradient-8, $gradient-9, $gradient-10 {
        @if not ($new == 0){$other: $other, $new};
    }
    @include default-linear-gradient($origin, $other);
}

@mixin retina_filename($image, $type, $default){
    background: $default url($image + '_@2x.' + $type);
}

@mixin background-image-retina($image, $type: 'png', $default: transparent) {
    background: $default url($image + '.' + $type);
    // If we have a retina image then add styles for it too
    @if file_exists(retina_filename($image)){
        @media only screen and (min--moz-device-pixel-ratio:1.3), (-o-min-device-pixel-ratio:2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx){
            @include retina_filename($image, $type, $default);
        }
    }
}

@mixin inline-background-image-retina($image) {
    background-image: inline-image($image);

    // If we have a retina image then add styles for it too
    @if file_exists(retina_filename($image)){
        @media only screen and (-webkit-min-device-pixel-ratio: 2){
            @include background-size(image-width($image) auto);
            background-image: inline-image(retina_filename($image));
        }
    }
}

@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
  @font-face {
      font-family: $font-family;
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
           url('#{$file-path}.woff') format('woff'),
           url('#{$file-path}.ttf') format('truetype'),
           url('#{$file-path}.svg##{$font-family}') format('svg');
      font-weight: $weight;
      font-style: $style;
  }
}