// 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); }
}