// Global Variables //—————————————————— $modules: () !default;

$experimental: true !default;

// prefix elements $prefix-webkit: true !global; $prefix-moz: true !global; $prefix-spec: true !global;

// color elements $white: #FFF !default; $black: #000 !default;

$bluejeans-dark: #4A89DC !default; $bluejeans-light: #5D9CEC !default;

$aqua-dark: #3BAFDA !default; $aqua-light: #4FC1E9 !default;

$mint-dark: #37BC9B !default; $mint-light: #48CFAD !default;

$grass-dark: #8CC152 !default; $grass-light: #A0D468 !default;

$sunflower-dark: #F6BB42 !default; $sunflower-light: #FFCE54 !default;

$bittersweet-dark: #E9573F !default; $bittersweet-light: #FC6E51 !default;

$grapefruit-dark: #DA4453 !default; $grapefruit-light: #ED5565 !default;

$lavender-dark: #967ADC !default; $lavender-light: #AC92EC !default;

$pinkrose-dark: #D770AD !default; $pinkrose-light: #EC87C0 !default;

$lightgray-dark: #E6E9ED !default; $lightgray-light: #F5F7FA !default;

$mediumgray-dark: #AAB2BD !default; $mediumgray-light: #CCD1D9 !default;

$darkgray-dark: #434A54 !default; $darkgray-light: #656D78 !default;

// Global Mixins //——————————————————

// We use this to loading scss files @mixin exports($name) {

@if index($modules, $name) {
} @else {
  $modules: append($modules, $name) !global;
  @content;
}

}

// We use this to do set opacity @mixin opacity($opacity:50, $filter: true) {

opacity: $opacity / 100;
@if $filter {
        filter: alpha(opacity=$opacity);
}

}

// We use this to ellipsis text @mixin ellipsis($width: 100%) {

display: inline-block;
max-width: $width;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

}

// We use this to add across browser prefixes @mixin prefixer($property, $value, $prefixes: webkit moz spec) {

@if $experimental {
        @each $prefix in $prefixes {
                @if $prefix != spec {
                        @if $property == border-top-left-radius and $prefix == moz {
                                @if $prefix-moz {
                                        -moz-border-radius-topleft: $value;
                                }
                        } @else if $property == border-top-right-radius and $prefix == moz {
                                @if $prefix-moz {
                                        -moz-border-radius-topright: $value;
                                }
                        } @else if $property == border-bottom-right-radius and $prefix == moz {
                                @if $prefix-moz {
                                        -moz-border-radius-bottomright: $value;
                                }
                        } @else if $property == border-bottom-left-radius and $prefix == moz {
                                @if $prefix-moz {
                                        -moz-border-radius-bottomleft: $value;
                                }
                        } @else {
                                @if $prefix == webkit {
                                  @if $prefix-webkit {
                                    -webkit-#{$property}: $value;
                                  }
                                }
                                @if $prefix == moz {
                                  @if $prefix-moz {
                                    -moz-#{$property}: $value;
                                  }
                                }
                        }
                } @else {
                  @if $prefix-spec {
                    #{$property}: $value;
                  }
                }
        }
}

}

// We use this to add box-sizing across browser prefixes @mixin box-sizing($value: border-box) {

@include prefixer($property: box-sizing, $value: $value, $prefixes: webkit moz spec);

}

// We use this to control border radius. @mixin radius($type: border-radius, $value: $global-radius) {

@include prefixer($property: $type, $value: $value, $prefixes: webkit moz spec);

}

// We use this to control box shadow. @mixin box-shadow($value) {

@include prefixer($property: box-shadow, $value: $value, $prefixes: webkit moz spec);

} // We use this to creat animation effect. // Examples: // @include keyframes(move-the-object) { // 0% { left: 100px; } // 100% { left: 200px; } // } // .object-to-animate { // @include animation(move-the-object .5s 1); // } @mixin animation ($value…) {

@include prefixer($property: animation, $value: $value, $prefixes: webkit moz spec);

} // Individual Animation Properties @mixin animation-name ($value…) {

@include prefixer($property: animation-name, $value: $value, $prefixes: webkit moz spec);

} @mixin animation-duration ($value…) {

@include prefixer($property: animation-duration, $value: $value, $prefixes: webkit moz spec);

} @mixin animation-timing-function ($value…) {

// ease | linear | ease-in | ease-out | ease-in-out
@include prefixer($property: animation-timing-function, $value: $value, $prefixes: webkit moz spec);

} @mixin animation-iteration-count ($value…) {

// infinite | <number>
@include prefixer($property: animation-iteration-count, $value: $value, $prefixes: webkit moz spec);

} @mixin animation-direction ($value…) {

@include prefixer($property: animation-direction, $value: $value, $prefixes: webkit moz spec);

} @mixin animation-play-state ($value…) {

// running | paused
@include prefixer($property: animation-play-state, $value: $value, $prefixes: webkit moz spec);

} @mixin animation-delay ($value…) {

@include prefixer($property: animation-delay, $value: $value, $prefixes: webkit moz spec);

} @mixin animation-fill-mode ($value…) {

// none | forwards | backwards | both
@include prefixer($property: animation-fill-mode, $value: $value, $prefixes: webkit moz spec);

} @mixin keyframes($name) {

$original-prefix-webkit:    $prefix-webkit;
$original-prefix-moz:       $prefix-moz;
$original-prefix-spec:      $prefix-spec;

@if $original-prefix-webkit {
        @include disable-prefix();
        $prefix-webkit: true !global;
    @-webkit-keyframes #{$name} {
      @content;
    }
}
@if $original-prefix-moz {
        @include disable-prefix();
        $prefix-moz: true !global;
    @-moz-keyframes #{$name} {
      @content;
    }
}
@if $original-prefix-spec {
        @include disable-prefix();
        $prefix-spec: true !global;
    @keyframes #{$name} {
      @content;
    }
}

$prefix-webkit:       $original-prefix-webkit !global;
$prefix-moz:          $original-prefix-moz !global;
$prefix-spec:         $original-prefix-spec !global;

}

// We use this to set transform. @mixin transform($value: none) {

//  none | <transform-function>
@include prefixer($property: transform, $value: $value, $prefixes: webkit moz spec);

}

@mixin transform-origin($value: 50%) {

// x-axis - left | center | right  | length | %
// y-axis - top  | center | bottom | length | %
// z-axis -                          length
@include prefixer($property: transform-origin, $value: $value, $prefixes: webkit moz spec);

}

@mixin transform-style ($value: flat) {

@include prefixer($property: transform-style, $value: $value, $prefixes: webkit moz spec);

}

// We use this to set transition. // example: @include transition (all 2s ease-in-out); // @include transition (opacity 1s ease-in 2s, width 2s ease-out); // @include transition-property (transform, opacity);

@mixin transition ($value…) {

@if length($value) >= 1 {
@include prefixer($property: transition, $value: $value, $prefixes: webkit moz spec);
} @else {
$value: all 0.15s ease-out 0s;
        @include prefixer($property: transition, $value: $value, $prefixes: webkit moz spec);
}

}