@charset "UTF-8";
///************** ✁ COPY + PASTE ✁ **************//
/// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
/// |c|l|a|s|s|a|n|i|m|a|t|i|o|n|.|s|c|s|s|
/// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
/// OPTIMIZATIONS FOR BANNER ANIMATION?
/// Uses transitions as the animation engine
/// Saves easings in easy to use names
/// Standardizes times for different animations
/// Helps to create banner size and appearance classes easily
/// Outputs prefixed css
/// Uses timeScale to change timeline and animation duration
/// Use Koala for SCSS compilation: http://koala-app.com/
/// +-+-+-+-+-+
/// |U|t|i|l|s|
/// +-+-+-+-+-+
/// Helper function to get a random a number
@function getRandom($val) {
@return if($val != 0, random($val) - $val/2, 0);
}
/// Helper function to get a random a number between 2 values
@function getRandomRange($min, $max){
@return floor(random($max - $min) + $min)
}
/// +-+-+-+-+-+-+-+-+-+
/// |C|o|n|s|t|a|n|t|s|
/// +-+-+-+-+-+-+-+-+-+
$NONE: 'none';
$NORMAL: 'normal';
$CENTER: 'center';
$PAUSED: 'paused';
$TOP: 'top';
$BOTTOM: 'bottom';
$LEFT: 'left';
$RIGHT: 'right';
$XS: 'xs';
$SM: 'sm';
$MD: 'md';
$LG: 'lg';
$XL: 'xl';
$XXL: 'xxl';
$BOUNCE: 'bounce';
$SWING: 'swing';
$SNAP: 'snap';
/// +-+-+-+-+-+-+-+-+-+
/// |V|a|r|i|a|b|l|e|s|
/// +-+-+-+-+-+-+-+-+-+
$time-scale: 1;
/// Function to change the time scale of the animations
@function timeScale($val){
$time-scale: $val !global;
@return $time-scale;
}
@mixin timeScale($val){
$temp: timeScale($val);
}
$force3D: false;
@function force3D(){
$force3D: true !global;
@return $force3D;
}
@mixin force3D(){
$temp: force3D();
}
/// +-+-+-+-+-+
/// |T|i|m|e|s|
/// +-+-+-+-+-+
$times: (
'intro': 0.5s,
'outro': 0.3s,
'timeline': 15s,
'none': 0s,
'xs': 0.1s,
'sm': 0.2s,
'md': 0.4s,
'lg': 0.6s,
'xl': 0.8s,
'xxl': 1s,
'fast': 0.25s,
'normal': 0.5s,
'slow': 0.75s,
'short': 0.3s,
'long': 0.7s,
'frame': 2s,
'slide': 4s,
'paused': 8
);
@function time($duration) {
@if map-has-key($times, $duration) {
@return map-get($times, $duration);
}
@return 0.5s;
}
/// +-+-+-+-+-+-+-+
/// |E|a|s|i|n|g|s|
/// +-+-+-+-+-+-+-+
$eases: (
'sine-ease-in': cubic-bezier(.47, 0, .745, .715),
'sine-ease-out': cubic-bezier(.39, .575, .565, 1),
'sine-ease-in-out': cubic-bezier(.39, .575, .565, 1),
'quad-ease-out': cubic-bezier(0.25, 0.46, 0.45, 0.94),
'quad-ease-in': cubic-bezier(0.55, 0.09, 0.68, 0.53),
'quad-ease-in-out': cubic-bezier(.455, .03, .515, .955),
'cubic-ease-in': cubic-bezier(0.55, 0.06, 0.68, 0.19),
'cubic-ease-out': cubic-bezier(0.22, 0.61, 0.36, 1),
'cubic-ease-in-out': cubic-bezier(0.65, 0.05, 0.36, 1),
'quart-ease-in': cubic-bezier(.895, .03, .685, .22),
'quart-ease-out': cubic-bezier(.165, .84, .44, 1),
'quart-ease-in-out': cubic-bezier(.77, 0, .175, 1),
'quint-ease-in': cubic-bezier(.755, .05, .855, .06),
'quint-ease-out': cubic-bezier(.23, 1, .32, 1),
'quint-ease-in-out': cubic-bezier(.86, 0, .07, 1),
'circ-ease-in': cubic-bezier(.6, .04, .98, .335),
'circ-ease-out': cubic-bezier(.075, .82, .165, 1),
'circ-ease-in-out': cubic-bezier(.785, .135, .15, .86),
'expo-ease-out': cubic-bezier(.19, 1, .22, 1),
'expo-ease-in': cubic-bezier(.6, .04, .98, .335),
'expo-ease-in-out': cubic-bezier(.785, .135, .15, .86),
'back-in': cubic-bezier(0.6, -0.28, 0.74, 0.05),
'back-out': cubic-bezier(0.18, 0.89, 0.32, 1.28),
'back-in-out': cubic-bezier(.68, -.55, .265, 1.55),
'bounce-in': cubic-bezier(.24, -0.44, .17, .27),
'bounce-out': cubic-bezier(.64, .57, .67, 1.53),
'bounce-in-out': cubic-bezier(0.76, -0.245, 0.24, 1.245),
'snap-out': cubic-bezier(0, 1, .5, 1),
'snap-in': cubic-bezier(.06, .98, .19, .99),
'smooth': cubic-bezier(.365, .005, .355, 1),
'sine': cubic-bezier(0.39, 0.58, 0.57, 1),
'quad': cubic-bezier(0.25, 0.46, 0.45, 0.94),
'cubic': cubic-bezier(0.22, 0.61, 0.36, 1),
'expo': cubic-bezier(.19, 1, .22, 1),
'circ': cubic-bezier(.075, .82, .165, 1),
'bounce': cubic-bezier(.65, 1.95, .03, .32),
'spring': cubic-bezier(.25, 2, .75, .5),
'elastic': cubic-bezier(0.47, 2.02, 0.31, -0.36),
'swing': cubic-bezier(.175, .885, .32, 1.275),
'overshoot': cubic-bezier(.41, .41, .35, 1.2),
'anticipate': cubic-bezier(.5, 0, .8, .15),
'hesitate': cubic-bezier(.2, 1, .9, -0.5),
'snap': cubic-bezier(.755, .05, .855, .06),
'sharp': cubic-bezier(0.4, 0.0, 0.6, 1),
'acceleration': cubic-bezier(0.4, 0.0, 1, 1),
'deceleration': cubic-bezier(0.0, 0.0, 0.2, 1),
'standard': cubic-bezier(0.4, 0.0, 0.2, 1),
'paused': cubic-bezier(0.00, 1.00, 1.00, 0.00),
'circ-in-out': cubic-bezier(0.88, 0.14, 0.12, 0.86),
'cubic-in-out': cubic-bezier(0.66, 0.00, 0.34, 1.00),
'ease-in-out': cubic-bezier(0.42, 0.00, 0.58, 1.00),
'expo-in-out': cubic-bezier(0.90, 0.00, 0.10, 1.00),
'quad-in-out': cubic-bezier(0.48, 0.04, 0.52, 0.96),
'quart-in-out': cubic-bezier(0.76, 0.00, 0.24, 1.00),
'quint-in-out': cubic-bezier(0.84, 0.00, 0.16, 1.00),
'fast-slow': cubic-bezier(0.00, 0.45, 0.45, 1.00),
'fast-fast-slow': cubic-bezier(0.00, 0.90, 0.45, 1.00),
'fast-slow-slow': cubic-bezier(0.00, 0.45, 0.10, 1.00),
'slow-fast': cubic-bezier(0.45, 0.00, 1.00, 0.45),
'slow-fast-fast': cubic-bezier(0.45, 0.00, 1.00, 0.15),
'slow-slow-fast': cubic-bezier(0.90, 0.00, 1.00, 0.45),
'ant-s1': cubic-bezier(1.00, -0.51, 0.00, 1.51),
'ant-s2': cubic-bezier(0.99, -2.18, 0.01, 3.18),
'ant-q1': cubic-bezier(0.50, -1.00, 0.50, 2.00),
'ant-q2': cubic-bezier(0.50, -1.50, 0.50, 2.50),
'smooth-operator': cubic-bezier(0.64, 0.03, 0.07, 0.97),
'endless-bummer': cubic-bezier(0.99, 0.03, 0.42, 0.97),
'get-around': cubic-bezier(1.00, 0.07, 0.11, 1.00),
'unknown-soldier': cubic-bezier(0.33, 0.02, 0.11, 1.00),
'spanish-caravan': cubic-bezier(0.76, 0.00, 0.43, 0.94),
'five-to-one': cubic-bezier(0.32, 0.05, 0.27, 1.00),
'wild-in-the-streets': cubic-bezier(0.50, 1.00, 0.35, 1.00),
'daniel': cubic-bezier(0.00, 0.10, 0.53, 1.34),
'cocodrile-tears': cubic-bezier(0.47, 1.35, 0.53, 1.33),
'crystal-ship': cubic-bezier(0.99, -0.55, 0.73, 1.00),
'tencc': cubic-bezier(0.14, -0.14, 0.00, 1.00),
'bishop': cubic-bezier(1.00, -0.66, 0.42, 0.97),
'scarborough-fair': cubic-bezier(1.00, 0.06, 0.73, 0.98),
'tulsa-time': cubic-bezier(0.19, 2.51, 0.43, 1.00),
'norwegian-skog': cubic-bezier(0.25, 0.51, 0.35, 0.95),
'weird-fishes': cubic-bezier(0.88, 0.04, 0.88, 0.95),
'brave-strangers': cubic-bezier(0.00, 0.01, 0.00, 1.00),
'stranger-than-diction': cubic-bezier(1.00, 0.00, 0.74, 1.00),
'the-gambler': cubic-bezier(0.47, -0.48, 0.00, 1.03),
'cracklin-rose': cubic-bezier(0.05, 0.03, 0.00, 1.16),
'ease-10': cubic-bezier(.1, 0, .9, 1),
'ease-20': cubic-bezier(.2, 0, .8, 1),
'ease-30': cubic-bezier(.3, 0, .7, 1),
'ease-40': cubic-bezier(.4, 0, .6, 1),
'ease-50': cubic-bezier(.5, 0, .5, 1),
'ease-60': cubic-bezier(.6, 0, .4, 1),
'ease-70': cubic-bezier(.7, 0, .3, 1),
'ease-80': cubic-bezier(.8, 0, .2, 1),
'ease-90': cubic-bezier(.9, 0, .1, 1),
'ease-100': cubic-bezier(1, 0, 0, 1),
'ease-0-10': cubic-bezier(0, 0, .1, 1),
'ease-0-20': cubic-bezier(0, 0, .2, 1),
'ease-0-30': cubic-bezier(0, 0, .3, 1),
'ease-0-40': cubic-bezier(0, 0, .4, 1),
'ease-0-50': cubic-bezier(0, 0, .5, 1),
'ease-0-60': cubic-bezier(0, 0, .6, 1),
'ease-0-70': cubic-bezier(0, 0, .7, 1),
'ease-0-80': cubic-bezier(0, 0, .8, 1),
'ease-0-90': cubic-bezier(0, 0, .9, 1),
'ease-50-0': cubic-bezier(.5, 0, 0, 1),
'ease-50-10': cubic-bezier(.5, 0, .1, 1),
'ease-50-20': cubic-bezier(.5, 0, .2, 1),
'ease-50-30': cubic-bezier(.5, 0, .3, 1),
'ease-50-40': cubic-bezier(.5, 0, .4, 1),
'ease-50-50': cubic-bezier(.5, 0, .5, 1),
'ease-50-60': cubic-bezier(.5, 0, .6, 1),
'ease-50-70': cubic-bezier(.5, 0, .7, 1),
'ease-50-80': cubic-bezier(.5, 0, .8, 1),
'ease-50-90': cubic-bezier(.5, 0, .9, 1),
'ease-50-100': cubic-bezier(.5, 0, 1, 1),
'boing': cubic-bezier(.35, 2, .1, .2),
'boingPast': cubic-bezier(.88, 2, .48, .71),
'swoosh': cubic-bezier(.63, -0.28, .13, 1.55),
'gottaDash': cubic-bezier(.9, -1.4, .61, 1.61),
'slowMo': cubic-bezier(0, 1.35, 1, -0.35),
'slowInOut': cubic-bezier(.36, -0.14, .29, 1.21)
);
@function ease($ease) {
@if map-has-key($eases, $ease) {
@return map-get($eases, $ease);
}
@return ease;
}
@function stepsEase($steps:2){
@return steps($steps + 1, end);
}
/// +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
/// |T|r|a|n|s|f|o|r|m| |o|r|i|g|i|n|s|
/// +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
$positions: (
'top': 50% 0%,
'bottom': 50% 100%,
'left': 0% 50%,
'right': 100% 50%,
'top-left': 0% 0%,
'bottom-right': 100% 100%,
'top-right': 100% 0%,
'bottom-left': 0% 100%,
'center': 50% 50%
);
@function position($val) {
@return map-get($positions, $val);
}
@mixin transformOrigin($val:$CENTER) {
@if map-has-key($positions, $val) {
@include prefix(transform-origin, map-get($positions, $val));
}
@else {
@include prefix(transform-origin, $val);
}
}
/// +-+-+-+-+-+-+
/// |C|o|l|o|r|s|
/// +-+-+-+-+-+-+
$colors: (
'black': #000000,
'white': #FFFFFF,
'red': #880000,
'crimson': #DC143C,
'cyan': #AAFFEE,
'violet': #CC44CC,
'green': #00CC55,
'blue': #0000AA,
'yellow': #EEEE77,
'orange': #DD8855,
'brown': #664400,
'pink': #FF7777,
'lime': #AAFF66,
'sky': #0088FF,
'seagreen': #2E8B57,
'aquamarine': #66CDAA,
'olive': #808000,
'gray': #777777,
'darkgray': #333333,
'lightgray': #BBBBBB,
'chocolate': #D2691E,
'teal': #008080,
'tomato': #FF6347,
'plum': #DDA0DD,
'steel': #4682B4,
'salmon': #FA9072
);
@function color($color) {
@return map-get($colors, $color);
}
/// +-+-+-+-+ +-+-+-+-+-+-+
/// |T|e|x|t| |s|h|a|d|o|w|
/// +-+-+-+-+ +-+-+-+-+-+-+
$textShadows: (
'none': none,
'xs': 1px 1px 1px rgba(0, 0, 0, .16),
'sm': 2px 2px 2px rgba(0, 0, 0, .16),
'md': 4px 4px 4px rgba(0, 0, 0, .16),
'lg': 8px 8px 8px rgba(0, 0, 0, .16),
'sl': 10px 10px 10px rgba(0, 0, 0, .16)
);
@mixin textShadow($h-shadow: 3px, $v-shadow: 4px, $blur: 2px, $color: rgba(0,0,0,.3)) {
@if map-has-key($textShadows, $h-shadow) {
text-shadow: map-get($textShadows, $h-shadow);
}
@else {
text-shadow: $h-shadow $v-shadow $blur $color;
}
}
/// +-+-+-+ +-+-+-+-+-+-+
/// |B|o|x| |s|h|a|d|o|w|
/// +-+-+-+ +-+-+-+-+-+-+
$boxShadows: (
'none': none,
'normal': 0 0 5px 2px rgba(0,0,0,.35),
'top': 0 -4px 2px -2px rgba(0,0,0,0.4),
'bottom': 0 4px 2px -2px rgba(0,0,0,0.4),
'right': 4px 0 2px -2px rgba(0,0,0,0.4),
'left': -4px 0 2px -2px rgba(0,0,0,0.4),
'xs': 0 1px 1px rgba(0,0,0,.16),
'sm': 0px 2px 2px 0px rgba(0,0,0,.16),
'md': 0px 4px 4px 0px rgba(0,0,0,.16),
'lg': 0px 8px 8px 0px rgba(0,0,0,.16),
'xl': 0px 16px 16px 0px rgba(0,0,0,.16),
'xxl': 0px 32px 32px 0px rgba(0,0,0,.16),
'xs-inverse': 0 -1px 1px rgba(0,0,0,.16),
'sm-inverse': 0px -2px 2px 0px rgba(0,0,0,.16),
'md-inverse': 0px -4px 4px 0px rgba(0,0,0,.16),
'lg-inverse': 0px -8px 8px 0px rgba(0,0,0,.16),
'xl-inverse': 0px -16px 16px 0px rgba(0,0,0,.16),
'xxl-inverse': 0px -32px 32px 0px rgba(0,0,0,.16),
'inset': inset 0px 3px 3px 0px rgba(0,0,0,.16),
'inset-inverse': 0px 32px 32px 0px rgba(0,0,0,.16),
'watermark': 0 -2px 4px #F4F6F9,
'drag': 0px 2px 4px 0px rgba(0,0,0,.40),
'drop-down': 0px 2px 3px 0px rgba(0,0,0,.16),
'header': 0 2px 4px rgba(0,0,0,.07),
'focus': 0 0 3px #0070D2,
'focus-inverse': 0 0 3px #E0E5EE,
'inline-edit': 0 2px 4px 4px rgba(0,0,0,.16),
'focus-inset': 0 0 2px 2px inset #1589EE
);
@function boxShadow($val){
@return map-get($boxShadows, $val);
}
@mixin boxShadow($h-shadow: 0px, $v-shadow: 4px, $blur: 2px, $spread: 0px, $color: rgba(0,0,0,.16)) {
@if map-has-key($boxShadows, $h-shadow) {
box-shadow: map-get($boxShadows, $h-shadow);
}
@else {
box-shadow: $h-shadow $v-shadow $blur $spread $color;
}
}
/// +-+-+-+-+-+-+ +-+-+-+-+-+-+
/// |B|o|r|d|e|r| |r|a|d|i|u|s|
/// +-+-+-+-+-+-+ +-+-+-+-+-+-+
$roundedCorners: (
'none': 0,
'sm': .125rem,
'md': .25rem,
'lg': .5rem,
'pill': 15rem,
'barrel': unquote(20rem + '/' + 60rem),
'tab': 5rem 20rem 0 0,
'round-tab': 15rem 15rem 0 0,
'inverse-round-tab': 0 0 15rem 15rem,
'leaf': 15rem 0 15rem 0,
'inverse-leaf': 0 15rem 0 15rem,
'bullet': 0 15rem 15rem 0,
'inverse-bullet': 15rem 0 0 15rem,
'circle': 50%
);
@mixin borderRadius($corners) {
@if map-has-key($roundedCorners, $corners) {
border-radius: map-get($roundedCorners, $corners);
}
@else {
border-radius: $corners;
}
}
/// +-+-+-+-+
/// |R|e|c|t|
/// +-+-+-+-+
@mixin rect($bg:#FFFFFF, $width: $_bannerWidth, $height: $_bannerHeight, $overflow: visible){
background-color: $bg;
width: $width;
height: $height;
overflow: $overflow;
}
/// +-+-+-+-+
/// |M|a|s|k|
/// +-+-+-+-+
@mixin mask($width: $_bannerWidth, $height: $_bannerHeight, $bg:transparent){
@include rect($bg, $width, $height, hidden);
}
/// +-+-+-+-+-+-+
/// |C|i|r|c|l|e|
/// +-+-+-+-+-+-+
@mixin circle($bg:#FFFFFF, $size: 100px){
background-color: $bg;
width: $size;
height: $size;
border-radius: 50%;
box-sizing: border-box;
}
/// +-+-+-+-+-+ +-+-+-+-+-+-+
/// |B|a|s|i|c| |m|i|x|i|n|s|
/// +-+-+-+-+-+ +-+-+-+-+-+-+
$_prefixes: "webkit", "ms", "moz" !global;
@mixin prefix($property, $value) {
@each $prfx in $_prefixes {
#{"-" + $prfx + "-" + $property}: $value;
}
#{$property}: $value;
}
@mixin cssReset {
*, *:before, *:after, html, body {
border: 0;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: #000;
border: none;
}
//https://css-tricks.com/making-animations-wait/
.banner-loading *, .banner-loading *:before, .banner-loading *:after {
animation-play-state: paused !important;
}
}
/// +-+-+-+-+ +-+-+-+-+-+-+
/// |T|e|x|t| |m|i|x|i|n|s|
/// +-+-+-+-+ +-+-+-+-+-+-+
@mixin sup($currentFontSize:100%) {
font-size: $currentFontSize/2;
vertical-align: super;
}
@mixin antialiased {
font-smoothing: antialiased;
}
/// +-+-+-+-+-+-+ +-+-+-+-+-+-+
/// |D|e|s|i|g|n| |m|i|x|i|n|s|
/// +-+-+-+-+-+-+ +-+-+-+-+-+-+
@mixin linearGradient($top, $bottom) {
background: $top; /* Old browsers */
background: -moz-linear-gradient(top, $top 0%, $bottom 100%); /* FF3.6+ */
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, $top),
color-stop(100%, $bottom)
); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(
top,
$top 0%,
$bottom 100%
); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, $top 0%, $bottom 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, $top 0%, $bottom 100%); /* IE10+ */
background: linear-gradient(to bottom, $top 0%, $bottom 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ffffff',
endColorstr='#000000',
GradientType=0
); /* IE6-9 */
}
@mixin radialGradient($from, $to) {
background: -moz-radial-gradient(center, circle cover, $from 0%, $to 100%);
background: -webkit-gradient(
radial,
center center,
0px,
center center,
100%,
color-stop(0%, $from),
color-stop(100%, $to)
);
background: -webkit-radial-gradient(center, circle cover, $from 0%, $to 100%);
background: -o-radial-gradient(center, circle cover, $from 0%, $to 100%);
background: -ms-radial-gradient(center, circle cover, $from 0%, $to 100%);
background: radial-gradient(center, circle cover, $from 0%, $to 100%);
background-color: $from;
}
/// +-+-+-+-+-+-+ +-+-+-+-+-+-+
/// |L|a|y|o|u|t| |m|i|x|i|n|s|
/// +-+-+-+-+-+-+ +-+-+-+-+-+-+
@mixin fullSize() {
width: 100%;
height: 100%;
}
@mixin fullWidth() {
width: 100%;
}
@mixin position($x, $y) {
top: $x;
left: $y;
}
/// +-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
/// |T|r|a|n|s|i|t|i|o|n| |m|i|x|i|n|s|
/// +-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
@mixin transition($duration:time($NORMAL), $ease:ease, $delay:time($NONE), $useOpacity:true) {
@if $useOpacity {
$vals: opacity $duration * $time-scale linear $delay * $time-scale,
transform $duration * $time-scale $ease $delay * $time-scale;
@include prefix(transition, $vals);
}
@else {
$vals: transform $duration * $time-scale $ease $delay * $time-scale;
@include prefix(transition, $vals);
}
}
@mixin transitionAll($duration:time($NORMAL), $ease:ease, $delay:time($NONE)) {
@include prefix(transition, all $duration * $time-scale $ease $delay * $time-scale);
}
@mixin transitionProp($prop: all, $duration:time($NORMAL), $ease:ease, $delay:time($NONE)){
@include prefix(transition, $prop $duration * $time-scale $ease $delay * $time-scale);
}
@mixin noTransition() {
@include prefix(transition, none);
}
@mixin transitionDelay($delay:0.5s){
@include prefix(transition-delay, $delay * $time-scale);
}
@mixin staggerTransitions($elements:(), $delay: time($XS), $initial: 0s) {
$count: 0;
@each $elem in $elements {
#{$elem} {
@include prefix(transition-delay, ($delay * $count * $time-scale) + $initial);
}
$count: $count + 1;
}
}
@mixin staggerChildrenTransitions($qty: 8, $delay: time($XS), $initial: 0s) {
@for $i from 1 through $qty {
&:nth-child(#{$i}) {
@include prefix(transition-delay, ($delay * $i * $time-scale) + $initial);
}
}
}
/// +-+-+-+-+-+-+ +-+-+-+-+-+-+
/// |B|a|n|n|e|r| |m|i|x|i|n|s|
/// +-+-+-+-+-+-+ +-+-+-+-+-+-+
@mixin animatable($display:block, $position:absolute) {
display: $display;
position: $position;
box-sizing: border-box;
img {
display: block;
position: relative;
margin: 0;
padding: 0;
}
}
@mixin animated($display:block, $position:absolute, $time: time($NORMAL), $ease: ease, $delay: 0s) {
@include animatable($display, $position);
@include prefix(transform-style, preserve-3d);
@include prefix(backface-visibility, hidden);
@include transition($time, $ease, $delay);
@include prefix(animation-timing-function, $ease);
@include prefix(animation-duration, $time);
img {
@include transition($time, $ease, $delay);
@include prefix(animation-timing-function, $ease);
@include prefix(animation-duration, $time);
}
}
@mixin bannerBase($includeAnimated:false) {
@include cssReset;
.animatable {
@include animatable();
}
@if $includeAnimated{
.animated {
@include animated();
}
}
}
@mixin expanding($fromWidth:970, $fromHeight:30, $toWidth:970, $toHeight:250, $bgColor:#FFF, $borderColor:#666, $includeAnimated: false) {
@include bannerBase($includeAnimated);
#banner {
#collapsed-state, #expanded-state {
top: 0;
left: 0;
position: absolute;
box-sizing: border-box;
background-color: $bgColor;
border: 1px solid $borderColor;
cursor: pointer;
overflow: hidden;
}
#collapsed-state {
display: block;
width: $fromWidth * 1px;
height: $fromHeight * 1px;
}
#expanded-state {
display: none;
width: $toWidth * 1px;
height: $toHeight * 1px;
}
}
}
@mixin banner($width:300, $height:250, $bgColor:#FFF, $borderColor:#666, $image: null, $includeAnimated: false) {
$_bannerWidth: $width !global;
$_bannerHeight: $height !global;
@include bannerBase($includeAnimated);
#banner {
display: block;
position: absolute;
overflow: hidden;
background-color: $bgColor;
border: 1px solid $borderColor;
@if $image {
background-image: url($image);
background-repeat: no-repeat;
}
box-sizing: content-box;
width: ($_bannerWidth - 2) + 0px;
height: ($_bannerHeight - 2) + 0px;
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
@include prefix(transform-style, preserve-3d);
@include prefix(transform, translate3d(0, 0, 0));
perspective: 800px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
}
@mixin mediaRectangle() {
@include banner(300,250);
}
@mixin leaderboard() {
@include banner(728,90);
}
@mixin halfPageAd() {
@include banner(300,600);
}
@mixin wideSkyscraper() {
@include banner(160,600);
}
@mixin banner300x250() {
@include mediaRectangle();
}
@mixin banner728x90() {
@include leaderboard();
}
@mixin banner160x600() {
@include wideSkyscraper();
}
/// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
/// |T|r|a|n|s|f|o|r|m|a|t|i|o|n| |m|i|x|i|n|s|
/// +-+-+-+-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
@mixin centerHorizontal() {
left: 50%;
@include x(-50%);
}
@mixin centerVertical() {
top: 50%;
@include y(-50%);
}
@mixin center() {
//@include position(50%, 50%);
//@include transform(-50%, -50%);
///position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
@mixin _hasTransitionArgs($val, $max: 1) {
@if (length($val) > $max) {
$dur: time($NORMAL);
$ease: ease;
$delay: time($NONE);
@if (length($val) == $max + 1) {
@include transition(nth($val,$max + 1));
}
@if (length($val) == $max + 2) {
@include transition(nth($val,$max + 1), nth($val,$max + 2));
}
@if (length($val) == $max + 3) {
@include transition(nth($val,$max + 1), nth($val,$max + 2), nth($val,$max + 3));
}
}
}
@mixin x($x...) {
$args: length($x) > 1;
@if $args {
@if $force3D {
@include prefix(transform, translate3d(nth($x,1), 0px, 0px));
}
@else {
@include prefix(transform, translateX(nth($x,1)));
}
} @else {
@if $force3D {
@include prefix(transform, translate3d($x, 0px, 0px));
}
@else {
@include prefix(transform, translateX($x));
}
}
@include _hasTransitionArgs($x);
}
@mixin y($y...) {
$args: length($y) > 1;
@if $args {
@if $force3D {
@include prefix(transform, translate3d(0px, nth($y,1), 0px));
}
@else {
@include prefix(transform, translateY(nth($y,1)));
}
} @else {
@if $force3D {
@include prefix(transform, translate3d(0px, $y, 0px));
}
@else {
@include prefix(transform, translateY($y));
}
}
@include _hasTransitionArgs($y);
}
@mixin rotate($rotate...) {
@if $force3D {
@include prefix(transform, rotate3d(0, 0, 1, $rotate));
}
@else {
@include prefix(transform, rotate($rotate));
}
@include _hasTransitionArgs($rotate);
}
@mixin scale($scale...) {
@if $force3D {
@include prefix(transform, scale3d($scale, $scale, $scale));
}
@else {
@include prefix(transform, scale($scale));
}
@include _hasTransitionArgs($scale);
}
@mixin translate($xy...) {
$x: nth($xy, 1);
$y: nth($xy, 2);
@if $force3D {
@include prefix(transform, translate3d($x, $y, 0px));
}
@else {
@include prefix(transform, translate($x, $y));
}
@include _hasTransitionArgs($xy,2);
}
@mixin scaleXY($xy...) {
$x: nth($xy, 1);
$y: nth($xy, 2);
@if $force3D {
@include prefix(transform, scale3d($x, $y, 1));
}
@else {
@include prefix(transform, scale($x, $y));
}
@include _hasTransitionArgs($xy,2);
}
@mixin scaleRotate($scaleRotation...) {
$scale: nth($scaleRotation, 1);
$rotation: nth($scaleRotation, 2);
@if $force3D {
@include prefix(transform, rotate3d(0, 0, 1, $rotation) scale3d($scale, $scale, $scale));
}
@else {
@include prefix(transform, rotate($rotation) scale($scale, $scale));
}
@include _hasTransitionArgs($scaleRotation,2);
}
@mixin matrix($matrix...) {
@include prefix(transform, $matrix);
@include _hasTransitionArgs($matrix);
}
@mixin transform($x:0, $y:0, $scale:1, $rotation:0) {
@if $force3D {
@include prefix(transform, rotate3d(0, 0, 1, $rotation) scale3d($scale, $scale, $scale) translate3d($x, $y, 0px));
}
@else {
@include prefix(transform, rotate($rotation) scale($scale, $scale) translate($x, $y));
}
}
@mixin transformNone() {
@include prefix(transform, none);
}
@mixin origin($position) {
@include prefix(transform-origin, $position);
}
@mixin transformObject($object) {
$x: 0;
$y: 0;
$scale: 1;
$rotate: 0;
$val: "";
@if map-has-key($object, 'x') and map-has-key($object, 'y') {
$x: map-get($object, 'x');
$y: map-get($object, 'y');
@if $force3D {
$val: $val + " translate3d(" + $x + "," + $y + ",0 )";
}
@else {
$val: $val + " translate(" + $x + "," + $y + ")";
}
}
@else if map-has-key($object, 'x'){
$x: map-get($object, 'x');
@if $force3D {
$val: $val + " translate3d(" + $x + ", 0 ,0 )";
}
@else {
$val: $val + " translate(" + $x + ", 0)";
}
}@else if map-has-key($object, 'y'){
$y: map-get($object, 'y');
@if $force3D {
$val: $val + " translate3d( 0, " + $y + ", 0)";
}
@else {
$val: $val + " translate( 0, " + $y + ")";
}
}
@if map-has-key($object, 'scale') {
$scale: map-get($object, 'scale');
@if $force3D {
$val: $val + " scale3d(" + $scale + "," + $scale + "," + $scale + ")";
}
@else {
$val: $val + " scale(" + $scale + "," + $scale + ")";
}
}
@if map-has-key($object, 'rotate') {
$rotate: map-get($object, 'rotate');
@if $force3D {
$val: $val + " rotate3d(0, 0, 1, " + $rotate + ")";
}
@else {
$val: $val + " rotate(" + $rotate + ")";
}
}
@if map-has-key($object, 'ease') {
@include prefix(animation-timing-function, map-get($object, 'ease'));
}
@if map-has-key($object, 'origin') {
@include prefix(transform-origin, map-get($object, 'origin'));
}
@if map-has-key($object, 'opacity') {
opacity: map-get($object, 'opacity');
}
@if map-has-key($object, 'transform'){
$val: map-get($object, 'transform');
}
@include prefix(transform, unquote($val));
}
/// +-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
/// |T|r|a|n|s|i|t|i|o|n| |p|r|e|s|e|t|s|
/// +-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
@mixin hide() {
visibility: hidden;
}
@mixin show($val:block) {
visibility: visible;
}
@mixin attach($display: block){
display: $display;
}
@mixin remove(){
display: none;
}
@mixin opacityTo($val:1, $duration: time($NORMAL), $delay: time($NONE)){
opacity: $val;
$vals: opacity $duration * $time-scale ease-out $delay * $time-scale;
@include prefix(transition, $vals);
}
@mixin fadeIn($duration: time($NORMAL), $delay: time($NONE)) {
opacity: 1;
$vals: opacity $duration * $time-scale ease-out $delay * $time-scale;
@include prefix(transition, $vals);
}
@mixin fadeOut($duration: time($NORMAL), $delay: time($NONE)) {
opacity: 0;
$vals: opacity $duration * $time-scale ease-in $delay * $time-scale;
@include prefix(transition, $vals);
}
@mixin from($x:0, $y:0, $scale:1, $rotation:0, $opacity: 1) {
opacity: $opacity;
@include transform($x, $y, $scale, $rotation);
@include noTransition;
}
@mixin to($duration: time($NORMAL), $x:0, $y:0, $scale:1, $rotation:0, $opacity: 1, $ease: ease, $delay: time($NONE)) {
opacity: $opacity;
@include transform($x, $y, $scale, $rotation);
@include transition($duration, $ease, $delay);
}
@mixin reset($duration: null, $ease: ease, $delay: time($NONE)) {
@include transformNone();
@if $duration {
@include transition($duration, $ease, $delay);
}
}
@mixin resetCenter($duration: null, $ease: ease, $delay: time($NONE)) {
@include transform(-50%, -50%);
@if $duration {
@include transition($duration, $ease, $delay);
}
}
@mixin resetFade($alpha:1, $duration: null, $ease: ease, $delay: time($NONE)) {
opacity: $alpha;
@include transformNone();
@if $duration {
@include transition($duration, $ease, $delay);
}
}
@mixin resetCenterFade($alpha:1, $duration: null, $ease: ease, $delay: time($NONE)) {
opacity: $alpha;
@include transform(-50%, -50%);
@if $duration {
@include transition($duration, $ease, $delay);
}
}
/// +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
/// |A|n|i|m|a|t|i|o|n| |m|i|x|i|n|s|
/// +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
@mixin keyframes($name) {
@at-root {
@keyframes #{$name} {
@content;
}
@-webkit-keyframes #{$name} {
@content;
}
}
}
@mixin simpleAnimation($name, $duration: 1s, $ease: ease, $delay: 0s, $loops:1, $fill: both, $direction: normal){
@include prefix(animation, $name $duration $ease $delay $loops $fill $direction);
@include keyframes($name){
@content;
}
}
@mixin noAnimation(){
@include prefix(animation, none !important);
}
@mixin animation($name, $duration: 1s, $ease: linear, $delay: 0s, $loops: infinite) {
@include prefix(animation, $name $duration $ease $delay $loops );
}
@mixin animationBase($name, $duration: 1s, $ease: linear, $delay: 0s, $loops: null) {
@include prefix(animation-name, $name);
@include prefix(animation-duration, $duration);
@include prefix(animation-timing-function, $ease);
@if $delay not 0s {
@include prefix(animation-delay, $delay);
}
@if $loops {
@include prefix(animation-iteration-count, $loops);
}
}
@mixin keyframesFromTo($name, $from, $to) {
@include keyframes($name) {
from {
@include transformObject($from);
}
to {
@include transformObject($to);
}
}
}
@mixin animationDelay($delay:0.5s){
@include prefix(animation-delay, $delay * $time-scale);
}
@mixin staggerChildrenAnimations($qty: 8, $delay: time($XS), $initial: 0s) {
@for $i from 1 through $qty {
&:nth-child(#{$i}) {
@include prefix(animation-delay, ($delay * $i * $time-scale) + $initial);
}
}
}
@mixin staggerAnimations($elements:(), $delay: time($XS), $initial: 0s) {
$count: 0;
@each $elem in $elements {
@at-root {
#{unquote($elem)} {
@include prefix(animation-delay, ($delay * $count * $time-scale) + $initial);
}
}
$count: $count + 1;
}
}
@mixin randomAnimations($elements:(), $min: 0, $max: 1) {
$count: 0;
@each $elem in $elements {
@at-root {
#{unquote($elem)} {
@include prefix(animation-duration, (random() * $max + $min) * 1s * $time-scale);
}
}
$count: $count + 1;
}
}
@mixin playBackwards() {
@include prefix(animation-direction, reverse);
}
@mixin playAlternate() {
@include prefix(animation-direction, alternate);
}
@mixin cancelAnimation() {
@include prefix(animation, none);
}
@mixin playAnimation() {
@include prefix(animation-play-state, running);
}
@mixin pauseAnimation() {
@include prefix(animation-play-state, paused);
}
@mixin animationFill($fill:both) {
@include prefix(animation-fill-mode, $fill);
}
$animationCounter: 0;
@function animationName($val, $overwrite:false) {
@if $overwrite {
$animationCounter: $animationCounter + 1 !global;
@return unquote($val + '-' + ($animationCounter));
}
@return unquote($val);
}
@mixin spinKeyframes($anim, $direction: 'cw'){
@include keyframes($anim) {
100% {
@if $direction == 'ccw' {
@include rotate(-1turn);
}
@else {
@include rotate(1turn);
}
}
}
}
@mixin spinLoop($duration: 1s, $direction: 'cw', $overwrite:false) {
$anim: animationName(spin, $overwrite);
@include spinKeyframes($anim, $direction);
@include animation($anim, $duration, linear);
}
@mixin bounceKeyframes($anim){
@include keyframes($anim) {
from, 20%, 53%, 80%, to {
@include prefix(animation-timing-function, cubic-bezier(0.215, 0.610, 0.355, 1.000));
@include y(0px);
}
40%, 43% {
@include prefix(animation-timing-function, cubic-bezier(0.755, 0.050, 0.855, 0.060));
@include y(-30px);
}
70% {
@include prefix(animation-timing-function, cubic-bezier(0.755, 0.050, 0.855, 0.060));
@include y(-15px);
}
90% {
@include y(-4px);
}
}
}
@mixin bounceLoop($duration: 1.2s, $loops: infinite, $overwrite:false) {
$anim: animationName(bounce, $overwrite);
@include bounceKeyframes($anim);
@include animation($anim, $duration, linear, 0s, $loops);
}
@mixin flipLoop($duration: 1s, $loops: infinite, $overwrite:false){
@include prefix(backface-visibility, visible);
$anim: animationName(flipLoop, $overwrite);
@include keyframes($anim){
0% {
@include prefix(transform, perspective(400px) rotate3d(0, 1, 0, -360deg));
@include prefix(animation-timing-function, ease-out);
}
40% {
@include prefix(transform, perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg));
@include prefix(animation-timing-function, ease-out);
}
50% {
@include prefix(transform, perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg));
@include prefix(animation-timing-function, ease-in);
}
80% {
@include prefix(transform, perspective(400px) scale3d(.95, .95, .95));
@include prefix(animation-timing-function, ease-in);
}
100% {
@include prefix(transform, perspective(400px));
@include prefix(animation-timing-function, ease-in);
}
}
@include animation($anim, $duration, linear, 0s, $loops);
}
@mixin flashKeyframes(){
@include keyframes(flash) {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
}
@mixin flashLoop($loops: infinite) {
@include flashKeyframes();
@include animation(flash, 1s, ease, 0s, $loops);
}
@mixin pulseKeyframes($anim, $direction: 0.05){
@include keyframes($anim) {
from, to {
@include scale(1);
}
50% {
@include scale(1 + $direction);
}
}
}
@mixin pulseLoop($duration: 1s, $direction: 0.1, $overwrite: false) {
$anim: animationName(pulse, $overwrite);
@include pulseKeyframes($anim, $direction);
@include animation($anim, $duration, ease);
}
@mixin tadaLoop($duration:1s, $loops:infinite) {
@include keyframes(tada) {
from, to {
@include scale(1);
}
10%, 20% {
@include transform(0,0,0.9,-3deg);
}
30%, 50%, 70%, 90% {
@include transform(0,0,1.1,3deg);
}
40%, 60%, 80% {
@include transform(0,0,1.1,-3deg);
}
}
@include animation(tada, $duration, ease, 0s, $loops);
}
@mixin heartbeatLoop($duration:1s) {
@include keyframes(heartbeat) {
from {
@include scale(1);
@include prefix(animation-timing-function, ease-out);
}
10% {
@include scale(0.91);
@include prefix(animation-timing-function, ease-in);
}
17% {
@include scale(0.98);
@include prefix(animation-timing-function, ease-out);
}
33% {
@include scale(0.87);
@include prefix(animation-timing-function, ease-in);
}
45% {
@include scale(1);
@include prefix(animation-timing-function, ease-out);
}
}
@include animation(heartbeat);
}
@mixin pingKeyframes($anim, $min: 0.2m, $max: 2.2){
@include keyframes($anim) {
0% {
@include scale($min);
opacity: 0.8;
}
80% {
@include scale($max - 1);
opacity: 0.2;
}
100% {
@include scale($max);
opacity: 0;
}
}
}
@mixin pingLoop($duration:0.8s, $min:0.2, $max:2.2, $overwrite: false) {
$anim: animationName(ping, $overwrite);
@include pingKeyframes($anim, $min, $max);
@include animation($anim, $duration, ease-in-out);
}
@mixin squashKeyframes($anim, $scale: 1, $ration: 0.5){
@include keyframes($anim) {
50% {
@include prefix(transform, scale($scale * ($ratio + 1), $scale * (1 - $ratio)));
}
}
}
@mixin squashLoop($duration: 1s, $scale: 1, $ratio: 0.5, $loops: infinite, $overwrite: false) {
$anim: animationName(squash, $overwrite);
@include squashKeyframes($anim, $scale, $ratio);
@include animation($anim, $duration, ease, 0s, $loops);
}
@mixin shakeKeyframes($anim, $x: 2px, $y: 2px, $rotate: 2deg){
@include keyframes($anim) {
@for $i from 0 through 10 {
$percent: $i * 10%;
#{$percent} {
@include transform(getRandom($x), getRandom($y), 1, getRandom($rotate));
}
}
}
}
@mixin shakeLoop($duration: 0.5s, $x: 2px, $y: 2px, $rotate: 2deg, $overwrite: false) {
$anim: animationName(shake, $overwrite);
@include shakeKeyframes($anim, $x, $y, $rotate);
@include animation($anim, $duration);
@include playAlternate;
}
@mixin orbitKeyframes($anim, $distance: 100px, $direction: 'cw'){
$dir: 1;
@if $direction not 'cw' {
$dir: -1;
}
@include keyframes($anim) {
0% {
@include prefix(transform, rotate(0deg) translate3d($distance * -1, $distance * -1, 0) rotate(0deg));
}
100% {
@include prefix(transform, rotate(360deg * $dir) translate3d($distance * -1, $distance * -1, 0) rotate(-360deg * $dir));
}
}
}
@mixin orbitLoop($duration: 1s, $distance: 100px, $direction: 'cw', $overwrite: false) {
$anim: animationName(orbit, $overwrite);
@include orbitKeyframes($anim, $distance: 100px, $direction: 'cw');
@include animation($anim, $duration);
}
@mixin floatKeyframes($anim, $distance: 3px, $rotation: 0deg){
@include keyframes($anim) {
0%, 50%, 100% {
@include transform(0, $distance * -1, 1, 0);
}
25% {
@include transform(0, $distance, 1, $rotation);
}
75% {
@include transform(0, $distance, 1, $rotation * -1);
}
}
}
@mixin floatLoop($duration:5s, $distance: 3px, $rotation: 0deg, $overwrite: false) {
$anim: animationName(float, $overwrite);
@include floatKeyframes($anim, $distance, $rotation);
@include animation($anim, $duration, ease-in-out);
}
@mixin swayKeyframes($anim, $angle: 5deg){
@include keyframes($anim) {
from {
@include rotate(0);
}
50% {
@include rotate($angle * -1);
}
to {
@include rotate($angle);
}
}
}
@mixin swayLoop($duration: 2s, $angle: 5deg, $overwrite: false) {
$anim: animationName(sway, $overwrite);
@include swayKeyframes($anim, $angle);
@include animation($anim, $duration, ease-in-out);
@include playAlternate;
}
@mixin zoomKeyframes($anim, $scalar: 2){
@include keyframes($anim) {
from {
@include scale(1);
}
to {
@include scale($scalar);
}
}
}
@mixin zoomLoop($duration: 2s, $scalar: 2, $overwrite: false) {
$anim: animationName(zoom, $overwrite);
@include zoomKeyframes($anim, $scalar);
@include animation($anim, $duration, ease-in-out);
@include playAlternate;
}
@mixin moveKeyframes($anim, $x: 100%, $y: 100%){
@include keyframes($anim) {
from {
@include translate(0, 0);
}
to {
@include translate($x, $y);
}
}
}
@mixin moveLoop($duration: 2s, $x: 100%, $y: 100%, $overwrite: false) {
$anim: animationName(wander, $overwrite);
@include movKeyframes($anim, $x, $y);
@include animation($anim, $duration);
}
@mixin wanderKeyframes($anim, $stops: 5, $x: 100px, $y: 100px){
@include keyframes($anim) {
from, to {
@include translate(0,0);
}
$inc: 100%/($stops + 1);
@for $i from 1 through $stops {
$percent: $inc * $i;
#{$percent} {
@include translate(getRandom($x),getRandom($y));
}
}
}
}
@mixin wanderLoop($duration: 2s, $stops: 5, $x: 100px, $y: 100px, $overwrite: false) {
$anim: animationName(wander, $overwrite);
@include wanderKeyframes($anim, $stops: 5, $x: 100px, $y: 100px);
@include animation($anim, $duration);
}
/// +-+-+-+-+-+-+-+-+-+-+-+
/// |A|n|i|m|a|t|e|.|c|s|s|
/// +-+-+-+-+-+-+-+-+-+-+-+
@mixin bounceIn($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-bounce-in, false);
@include simpleAnimation($anim, $duration, cubic-bezier(0.215, 0.610, 0.355, 1.000), $delay, 1, backwards, normal){
0% {
opacity: 0;
@include scale(0.3);
}
50% {
opacity: 1;
@include scale(1.05);
}
70% {
@include scale(0.9);
}
100% {
@include scale(1);
}
}
}
@mixin bounceInDown($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-bounce-in-down, false);
@include simpleAnimation($anim, $duration, cubic-bezier(0.215, 0.610, 0.355, 1.000), $delay, 1, backwards, normal){
0% {
opacity: 0;
@include y(-300px);
}
60% {
opacity: 1;
@include y(25px);
}
75% {
@include y(-10px);
}
90% {
@include y(5px);
}
100% {
@include transformNone;
}
}
}
@mixin bounceInUp($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-bounce-in-up, false);
@include simpleAnimation($anim, $duration, cubic-bezier(0.215, 0.610, 0.355, 1.000), $delay, 1, backwards, normal){
0% {
opacity: 0;
@include y(300px);
}
60% {
opacity: 1;
@include y(-20px);
}
75% {
@include y(10px);
}
90% {
@include y(-5px);
}
100% {
@include transformNone;
}
}
}
@mixin bounceInLeft($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-bounce-in-left, false);
@include simpleAnimation($anim, $duration, cubic-bezier(0.215, 0.610, 0.355, 1.000), $delay, 1, backwards, normal){
0% {
opacity: 0;
@include x(-300px);
}
60% {
opacity: 1;
@include x(25px);
}
75% {
@include x(-10px);
}
90% {
@include x(5px);
}
100% {
@include transformNone;
}
}
}
@mixin bounceInRight($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-bounce-in-right, false);
@include simpleAnimation($anim, $duration, cubic-bezier(0.215, 0.610, 0.355, 1.000), $delay, 1, backwards, normal){
0% {
opacity: 0;
@include x(300px);
}
60% {
opacity: 1;
@include x(-25px);
}
75% {
@include x(10px);
}
90% {
@include x(-5px);
}
100% {
@include transformNone;
}
}
}
@mixin bounceOut($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-bounce-out, false);
@include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal){
20% {
@include scale(0.9);
}
50%, 55% {
opacity: 1;
@include scale(1.1);
}
100% {
opacity: 0;
@include scale(0.3);
}
}
}
@mixin bounceOutDown($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-bounce-out-down, false);
@include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal){
20% {
@include y(10px);
}
40%, 45% {
opacity: 1;
@include y(-20px);
}
100% {
opacity: 0;
@include y(2000px);
}
}
}
@mixin bounceOutUp($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-bounce-out-up, false);
@include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal){
20% {
@include y(-10px);
}
40%, 45% {
opacity: 1;
@include y(20px);
}
100% {
opacity: 0;
@include y(-2000px);
}
}
}
@mixin bounceOutLeft($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-bounce-out-left, false);
@include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal){
20% {
opacity: 1;
@include x(20px);
}
100% {
opacity: 0;
@include x(-2000px);
}
}
}
@mixin bounceOutRight($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-bounce-out-right, false);
@include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal){
20% {
opacity: 1;
@include x(-20px);
}
100% {
opacity: 0;
@include x(2000px);
}
}
}
@mixin fadeInY($duration: 0.75s, $delay: 0s, $y:100%, $ease: ease){
$anim: animationName(animate-css-fade-in-y, true);
@include simpleAnimation($anim, $duration, $ease, $delay, 1, backwards, normal) {
0% {
opacity: 0;
@include y($y);
}
100% {
opacity: 1;
@include transformNone;
}
}
}
@mixin fadeInDown($duration: 0.75s, $delay: 0s){
@include fadeInY($duration, $delay, -100%, ease-out);
}
@mixin fadeInDownBig($duration: 0.75s, $delay: 0s){
@include fadeInY($duration, $delay, -2000px, ease-out);
}
@mixin fadeInUp($duration: 0.75s, $delay: 0s){
@include fadeInY($duration, $delay, 100%, ease-out);
}
@mixin fadeInUpBig($duration: 0.75s, $delay: 0s){
@include fadeInY($duration, $delay, 2000px, ease-out);
}
@mixin fadeInX($duration: 0.75s, $delay: 0s, $x:100%, $ease: ease){
$anim: animationName(animate-css-fade-in-x, true);
@include simpleAnimation($anim, $duration, $ease, $delay, 1, backwards, normal) {
0% {
opacity: 0;
@include x($x);
}
100% {
opacity: 1;
@include transformNone;
}
}
}
@mixin fadeInLeft($duration: 0.75s, $delay: 0s){
@include fadeInX($duration, $delay, -100%, ease-out);
}
@mixin fadeInLeftBig($duration: 0.75s, $delay: 0s){
@include fadeInX($duration, $delay, -2000px, ease-out);
}
@mixin fadeInRight($duration: 0.75s, $delay: 0s){
@include fadeInX($duration, $delay, 100%, ease-out);
}
@mixin fadeInRightBig($duration: 0.75s, $delay: 0s){
@include fadeInX($duration, $delay, 2000px, ease-out);
}
@mixin fadeOutY($duration: 0.75s, $delay: 0s, $y:100%, $ease: ease){
$anim: animationName(animate-css-fade-out-y, true);
@include simpleAnimation($anim, $duration, $ease, $delay, 1, backwards, normal) {
0% {
opacity: 1;
}
100% {
opacity: 0;
@include y($y);
}
}
}
@mixin fadeOutDown($duration: 0.75s, $delay: 0s){
@include fadeOutY($duration, $delay, 100%, ease-in);
}
@mixin fadeOutDownBig($duration: 0.75s, $delay: 0s){
@include fadeOutY($duration, $delay, 2000px, ease-in);
}
@mixin fadeOutUp($duration: 0.75s, $delay: 0s){
@include fadeOutY($duration, $delay, -100%, ease-in);
}
@mixin fadeOutUpBig($duration: 0.75s, $delay: 0s){
@include fadeOutY($duration, $delay, 2000px, ease-in);
}
@mixin fadeOutX($duration: 0.75s, $delay: 0s, $x:100%, $ease: ease){
$anim: animationName(animate-css-fade-out-x, true);
@include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal) {
0% {
opacity: 1;
}
100% {
opacity: 0;
@include x($x);
}
}
}
@mixin fadeOutLeft($duration: 0.75s, $delay: 0s){
@include fadeOutX($duration, $delay, -100%, ease-in);
}
@mixin fadeOutLeftBig($duration: 0.75s, $delay: 0s){
@include fadeOutX($duration, $delay, -2000px, ease-in);
}
@mixin fadeOutRight($duration: 0.75s, $delay: 0s){
@include fadeOutX($duration, $delay, 100%, ease-in);
}
@mixin fadeOutRightBig($duration: 0.75s, $delay: 0s){
@include fadeOutX($duration, $delay, 2000px, ease-in);
}
@mixin flipInX($duration: 1s, $delay: 0s){
$anim: animationName(animate-css-flip-in-x, false);
@include prefix(backface-visibility, visible !important);
@include simpleAnimation($anim, $duration, ease, $delay, 1, backwards, normal) {
0% {
opacity: 0;
@include prefix(transform, perspective(400px) rotate3d(1, 0, 0, 90deg));
@include prefix(animation-timing-function, ease-in);
}
40% {
@include prefix(transform, perspective(400px) rotate3d(1, 0, 0, -20deg));
@include prefix(animation-timing-function, ease-in);
}
60% {
opacity: 1;
@include prefix(transform, perspective(400px) rotate3d(1, 0, 0, 10deg));
}
80% {
@include prefix(transform, perspective(400px) rotate3d(1, 0, 0, -5deg));
}
100% {
@include prefix(transform, perspective(400px));
}
}
}
@mixin flipInY($duration: 1s, $delay: 0s){
$anim: animationName(animate-css-flip-in-y, false);
@include prefix(backface-visibility, visible !important);
@include simpleAnimation($anim, $duration, ease, $delay, 1, backwards, normal) {
0% {
opacity: 0;
@include prefix(transform, perspective(400px) rotate3d(0, 1, 0, 90deg));
@include prefix(animation-timing-function, ease-in);
}
40% {
@include prefix(transform, perspective(400px) rotate3d(0, 1, 0, -20deg));
@include prefix(animation-timing-function, ease-in);
}
60% {
opacity: 1;
@include prefix(transform, perspective(400px) rotate3d(0, 1, 0, 10deg));
}
80% {
@include prefix(transform, perspective(400px) rotate3d(0, 1, 0, -5deg));
}
100% {
@include prefix(transform, perspective(400px));
}
}
}
@mixin flipOutX($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-flip-out-x, false);
@include prefix(backface-visibility, visible !important);
@include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal) {
0% {
@include prefix(transform, perspective(400px));
}
30% {
opacity: 1;
@include prefix(transform, perspective(400px) rotate3d(1, 0, 0, -20deg));
}
100% {
opacity: 0;
@include prefix(transform, perspective(400px) rotate3d(1, 0, 0, 90deg));
}
}
}
@mixin flipOutY($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-flip-out-y, false);
@include prefix(backface-visibility, visible !important);
@include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal) {
0% {
@include prefix(transform, perspective(400px));
}
30% {
opacity: 1;
@include prefix(transform, perspective(400px) rotate3d(0, 1, 0, -20deg));
}
100% {
opacity: 0;
@include prefix(transform, perspective(400px) rotate3d(0, 1, 0, 90deg));
}
}
}
@mixin lightSpeedIn($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-light-speed-in, false);
@include simpleAnimation($anim, $duration, ease-out, $delay, 1, backwards, normal) {
0% {
opacity: 0;
@include prefix(transform, translate3d(100%, 0, 0) skewX(-30deg));
}
60% {
opacity: 1;
@include prefix(transform, skewX(20deg));
}
80% {
@include prefix(transform, skewX(-5deg));
}
100% {
@include prefix(transform, translate3d(0, 0, 0));
}
}
}
@mixin lightSpeedOut($duration: 0.75s, $delay: 0s){
$anim: animationName(animate-css-light-speed-out, false);
@include simpleAnimation($anim, $duration, ease-in, $delay, 1, forwards, normal) {
0% {
opacity: 1;
}
100%{
opacity: 0;
@include prefix(transform, translate3d(100%, 0, 0) skewX(30deg));
}
}
}
@mixin rotateIn($duration: 0.75s, $delay: 0s, $ease:ease, $deg: -200deg, $to: "center", $name: animate-css-rotate-in){
$anim: animationName($name, false);
@include transformOrigin($to);
@include simpleAnimation($anim, $duration, $ease, $delay, 1, backwards, normal) {
0% {
opacity: 0;
@include rotate($deg);
}
100% {
opacity: 1;
@include rotate(0deg);
}
}
}
@mixin rotateOut($duration: 0.75s, $delay: 0s, $ease:ease, $deg: 200deg, $to: "center", $name: animate-css-rotate-out){
$anim: animationName($name, false);
@include transformOrigin($to);
@include simpleAnimation($anim, $duration, $ease, $delay, 1, forwards, normal) {
0% {
opacity: 1;
}
100%{
opacity: 0;
@include rotate($deg);
}
}
}
@mixin rotateInDownLeft($duration: 0.75s, $delay: 0s){
@include rotateIn($duration, $delay, ease-in, -45deg, "bottom-left", animate-css-rotate-in-down-left);
}
@mixin rotateInDownRight($duration: 0.75s, $delay: 0s){
@include rotateIn($duration, $delay, ease-in, 45deg, "bottom-right", animate-css-rotate-in-down-right);
}
@mixin rotateInUpLeft($duration: 0.75s, $delay: 0s){
@include rotateIn($duration, $delay, ease-in, 45deg, "top-left", animate-css-rotate-in-up-left);
}
@mixin rotateInUpRight($duration: 0.75s, $delay: 0s){
@include rotateIn($duration, $delay, ease-in, -90deg, "top-right", animate-css-rotate-in-up-right);
}
@mixin rotateOutDownLeft($duration: 0.75s, $delay: 0s){
@include rotateOut($duration, $delay, ease-out, -45deg, "bottom-left", animate-css-rotate-out-down-left);
}
@mixin rotateOutDownRight($duration: 0.75s, $delay: 0s){
@include rotateOut($duration, $delay, ease-out, 45deg, "bottom-right", animate-css-rotate-out-down-right);
}
@mixin rotateOutUpLeft($duration: 0.75s, $delay: 0s){
@include rotateOut($duration, $delay, ease-out, 45deg, "top-left", animate-css-rotate-out-up-left);
}
@mixin rotateOutUpRight($duration: 0.75s, $delay: 0s){
@include rotateOut($duration, $delay, ease-out, -90deg, "top-right", animate-css-rotate-out-up-right);
}
// +-+-+-+-+-+ +-+-+-+-+-+-+-+-+-+
// |C|l|i|c|k| |r|e|a|c|t|i|o|n|s|
// +-+-+-+-+-+ +-+-+-+-+-+-+-+-+-+
///https://github.com/webkul/micron
@mixin actionPop($duration:1s, $delay:0s){
$anim: animationName(click-pop, false);
@include simpleAnimation($anim, $duration, ease("ease-out"), $delay, 1, none, normal){
0%, 100% {
@include prefix(transform, scaleX(1) scaleY(1));
}
20%, 45% {
@include prefix(transform, scaleX(1.35) scaleY(0.1));
}
65% {
@include prefix(transform, scaleX(0.8) scaleY(1.7));
}
80% {
@include prefix(transform, scaleX(0.6) scaleY(0.85));
}
}
}
/// +-+-+-+-+ +-+-+-+-+-+-+-+-+-+-+
/// |T|e|x|t| |a|n|i|m|a|t|i|o|n|s|
/// +-+-+-+-+ +-+-+-+-+-+-+-+-+-+-+
///Animations by https://codepen.io/kh-mamun/
@mixin _txtAnimation($name, $chars, $duration: 1s, $ease: linear, $delay: 0s, $loops: 1) {
& > span {
display: inline-block;
@include animation($name, $duration, $ease, $delay, $loops);
@include animationFill;
@include staggerChildrenAnimations($chars, time($XS), $delay);
}
}
@mixin revolve-scaleKeyframes(){
@include keyframes(revolve-scaleLoop) {
0% {
opacity: 0;
@include transform(-150px, -50px, 3, -180deg);
}
60% {
@include transform(20px, 20px, .3, 30deg);
}
100% {
opacity: 1;
@include transform(0, 0, 1, 0);
}
}
}
@mixin revolveScaleText($chars:10, $duration: 1s, $delay: 0s) {
@include revolve-scaleKeyframes;
@include _txtAnimation(revolve-scaleLoop, $chars, $duration, linear, $delay);
}
@mixin ball-dropKeyframes(){
@include keyframes(ball-dropLoop) {
0% {
opacity: 0;
@include transform(200px, -100px, 2, 0);
}
60% {
@include transform(0, 20px, .5, -180deg);
}
100% {
opacity: 1;
@include transform(0, 0, 1, 0);
}
}
}
@mixin ballDropText($chars:10, $duration: 1s, $delay: 0s) {
@include ball-dropKeyframes;
@include _txtAnimation(ball-dropLoop, $chars, $duration, linear, $delay);
}
@mixin side-slideKeyframes(){
@include keyframes(side-slideLoop) {
0% {
opacity: 0;
@include transform(-300px, 0, 0, 0);
}
60%, 80% {
@include transform(20px, 0, 1, 0);
}
99% {
@include transform(0,0,1.2,0);
}
100% {
opacity: 1;
@include transform(0, 0, 1, 0);
}
}
}
@mixin sideSlideText($chars:10, $duration: 1s, $delay: 0s) {
@include side-slideKeyframes;
@include _txtAnimation(side-slideLoop, $chars, $duration, linear, $delay);
}
@mixin revolve-dropKeyframes{
@include keyframes(revolve-dropLoop) {
0% {
opacity: 0;
@include transform(0, -100px, 0, 360deg);
}
30% {
@include transform(0, -50px, 1, 180deg);
}
60% {
@include transform(0, 20px, .8, 0);
}
100% {
opacity: 1;
@include transform(0, 0, 1, 0);
}
}
}
@mixin revolveDropText($chars:10, $duration: 1s, $delay: 0s) {
@include revolve-dropKeyframes;
@include _txtAnimation(revolve-dropLoop, $chars, $duration, linear, $delay);
}
@mixin drop-vanishKeyframes(){
@include keyframes(drop-vanishLoop) {
0% {
opacity: 0;
@include transform(0, -100px, 0, 360deg);
}
30% {
@include transform(0, -50px, 1, 180deg);
}
50% {
opacity: 1;
@include transform(0, 20px, .8, 0deg);
}
80% {
opacity: 0;
@include transform(-100px, -100px, 1.5, -180deg);
}
100% {
opacity: 1;
@include transform(0, 0, 1, 0);
}
}
}
@mixin dropVanishText($chars:10, $duration: 1s, $delay: 0s) {
@include drop-vanishKeyframes();
@include _txtAnimation(drop-vanishLoop, $chars, $duration, linear, $delay);
}
@mixin twisterKeyframes {
@include keyframes(twister-textLoop) {
0% {
opacity: 0;
@include transform(150px, 0, 1, -180deg);
}
10% {
opacity: 1;
}
100% {
@include transform(0, 0, 1, 0);
}
}
}
@mixin twisterText($chars:10, $duration: 1s, $delay: 0s) {
@include twisterKeyframes;
@include _txtAnimation(twister-textLoop, $chars, $duration, linear, $delay);
}
@mixin left-to-rightKeyframes {
@include keyframes(left-to-rightKeyframes) {
0% {
opacity: 0;
@include transform(-150px,0,.3);
}
40% {
opacity: 1;
@include transform(50px,0,.7);
}
80% {
opacity: 0;
@include transform(0,0,2);
}
100% {
@include transform(0, 0, 1, 0);
}
}
}
@mixin leftToRightText($chars:10, $duration: 1s, $delay: 0s) {
@include left-to-rightKeyframes();
@include _txtAnimation(left-to-rightKeyframes, $chars, $duration, linear, $delay);
}
//3D TRANSFORM
@mixin transformable3D($transform, $t-origin: null, $p-origin: null, $perspective: 400px, $backface: hidden) {
@include prefix(backface-visibility, $backface);
@if $t-origin{
@include prefix(transform-origin, $t-origin);
}
@if $p-origin{
@include prefix(perspective-origin, $p-origin);
}
@include prefix(transform, perspective($perspective) $transform);
}
@mixin card--3D{
@include transformable3D(translate3d(0, -100px, -100px) rotateX(90deg), position("bottom"), position("center"), 300px);
}
@mixin flip--3D{
@include transformable3D(rotateY(1turn), null, null, 500px)
}
@mixin page-bottom--3D{
@include transformable3D(rotateX(90deg), position("center"));
}
/// +-+-+-+-+-+-+-+-+ +-+-+
/// |T|i|m|e|l|i|n|e| |v|1|
/// +-+-+-+-+-+-+-+-+ +-+-+
$timeline-duration: 15s;
@function timelineDuration($val: 15s) {
$timeline-duration: $val !global;
}
@mixin timelineDuration($val: 15s) {
$temp: timelineDuration($val);
}
$timeline-position: 0s;
@function timeline($increment: 0s) {
$timeline-position: $timeline-position + $increment !global;
@return $timeline-position * $time-scale;
}
$slide-duration: 2s;
@function slideDuration($val:$slide-duration) {
$slide-duration: $val !global;
@return $slide-duration;
}
@mixin slideDuration($val) {
$temp: slideDuration($val);
}
@mixin slideAmount($val){
$temp: slideDuration($timeline-duration/$val);
}
$intro-duration: 0.5s;
$outro-duration: 0.3s;
@function playhead($increment: 0s, $dir: 1, $reduceSlide: false){
$inc: 0;
@if $increment == "intro"{
$inc: $intro-duration;
}@else if $increment == "outro"{
$inc: $outro-duration;
}@else if $increment == "slide"{
@if($reduceSlide){
$inc: ($slide-duration - ($intro-duration + $outro-duration));
}@else{
$inc: $slide-duration;
}
}@else if $increment == "none"{
$inc: 0s;
}@else {
$inc: $increment;
}
$inc: $inc * $dir;
$timeline-position: $timeline-position + $inc !global;
@if $timeline-position > $timeline-duration {
@return $timeline-duration;
}
@return $timeline-position * $time-scale;
}
@mixin currentAnimationDuration(){
@include prefix(animation-duration, $timeline-position);
}
@function ff($inc, $overlap: true){
@return playhead($inc, 1, $overlap);
}
@function rw($inc, $overlap: true){
@return playhead($inc, -1, true);
}
@function keyframePercent($position) {
@return round(($position/$timeline-duration) * 1000)/1000 * 100%;
}
@mixin keyframePercent($position, $fromTo: null) {
@if $fromTo {
#{unquote($fromTo)}, #{keyframePercent($position)} {
@content;
}
}
@else {
#{keyframePercent($position)} {
@content;
}
}
}
@mixin timelineToKeyframes($timeline) {
$len: length($timeline);
$i: 0;
@each $time, $css in $timeline {
$i: $i + 1;
@if $i == 1 {
@if($time == 0s){
@include keyframePercent($time) {
@include transformObject($css);
}
}@else {
@include keyframePercent($time, "0%") {
@include transformObject($css);
}
}
}
@else if $i == $len {
@if($time < $timeline-duration){
@include keyframePercent($time, "100%") {
@include transformObject($css);
}
}@else {
@include keyframePercent($time) {
@include transformObject($css);
}
}
}
@else {
@include keyframePercent($time) {
@include transformObject($css);
}
}
}
}
@mixin timelineAnimation($name, $keyframes, $ease: ease, $loops: 1){
@include keyframes($name){
@include timelineToKeyframes($keyframes);
}
@include animationBase($name, $timeline-duration, $ease, 0s, $loops);
@include animationFill;
}
//preset objects
$slide-left--transform: (opacity: 0, x: -100%);
$slide-right--transform: (opacity: 0, x: 100%);
$slide-top--transform: (opacity: 0, y: -100%);
$slide-bottom--transform: (opacity: 0, y: 100%);
$scale-in--transform: (opacity: 0, scale: 0);
$scale-out--transform: (opacity: 0, scale: 2);
$rotate-in--transform: (opacity: 0, rotate: 90deg);
$rotate-out--transform: (opacity: 0, rotate: -90deg);
$spin-in--transform: (opacity: 0, rotate: 2turn, scale: 0.7);
$spin-out--transform: (opacity: 0, rotate: -2turn, scale: 1.3);
$fade--transform: (opacity: 0);
$reset--transform: (opacity: 1, transform: "none");
@mixin slide($intro, $outro:null, $overlap: true){
$_frames: (ff("none"): $intro);
$_frames: join($_frames, (ff("intro"): $reset--transform));
@if $outro{
$_frames: join($_frames, (ff("slide", $overlap): $reset--transform));
$_frames: join($_frames, (ff("outro"): $outro));
}
@include timelineAnimation(animationName("element-animation", true), $_frames);
}
$slide-in-down--timeline: (
0s: (y: -150%, origin: 50% 100%, opacity: 0),
0.25s: (y:0, rotate: 1deg),
0.35s: (y:0, rotate: -1deg),
0.425s: (y: 0, rotate: 1deg),
0.475s: (y: 0, rotate: -1deg),
0.5s: (y: 0, opacity: 1)
);
$slide-out-up--timeline: (
0.5: (y: 150%, opacity: 0)
);
@function offsetTimeline($keyframes, $offset: 0s){
$final: ();
@each $time, $map in $keyframes {
$nootime: ($time + $offset);
$noomap: ($nootime: $map);
$final: map-merge($final, $noomap);
}
@return $final;
}
/***
* +-+-+-+-+-+-+-+-+ +-+-+
* |T|i|m|e|l|i|n|e| |v|2|
* +-+-+-+-+-+-+-+-+ +-+-+
@mixin moveTimeline($increment:0s) {
@include prefix(animation-delay, timeline($increment));
}
$in-duration: 0.5s;
$out-duration: 0.3s;
$entrance-ease: ease-out;
$exit-ease: ease-in;
@mixin entranceSettings($duration: 0.5s, $ease: ease-out) {
$in-duration: $duration !global;
$entrance-ease: $ease !global;
}
@mixin exitSettings($duration: 0.5s, $ease: ease-in) {
$out-duration: $duration !global;
$exit-ease: $ease !global;
}
@function nextSlide() {
$timeline-position: $timeline-position + $slide-duration !global;
@return $timeline-position;
}
@mixin nextSlide() {
$temp: nextSlide();
}
@mixin multipleAnimations($intro, $outro, $duration: $slide-duration, $delay: 0s) {
$t1: timeline() + $delay;
$t2: $t1 + $delay + $duration;
@include prefix(animation, unquote($intro + " " + $in-duration + " " + $entrance-ease + " " + $t1 + " backwards" + ", " + $outro + " " + $out-duration + " " + $exit-ease + " " + $t2 + " forwards"));
}*/
/// +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
/// |A|n|i|m|a|t|i|o|n| |p|r|e|s|e|t|s|
/// +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
/// +-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
/// |I|n|t|e|r|a|c|t|i|v|e| |m|i|x|i|n|s|
/// +-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
$children: '>';
$sibling: '~';
$adjacent: '+';
$checked: 'checked';
$notChecked: 'notChecked';
$active: 'active';
$link: 'link';
$hover: 'hover';
$focus: 'focus';
$target: 'target';
$visited: 'visited';
$mouseover: 'mouseover';
@mixin onEvent($event, $currentTarget, $target:null, $mouseOn:'') {
@if $target == null or $currentTarget == $target {
@if $event == $mouseover {
#{unquote($currentTarget)}:hover, #{unquote($currentTarget)}:focus {
@content;
cursor: pointer;
}
}
@else if $event == $checked {
#{unquote($currentTarget)}:checked {
@content;
}
}
@else if $event == $notChecked {
#{unquote($currentTarget)}:not(:checked) {
@content;
}
}
@else {
#{unquote($currentTarget)}:#{$event} #{unquote($target)} {
@content;
}
}
}
@else {
@if $event == $mouseover {
@if $mouseOn == $children {
#{$currentTarget}:hover > #{$target},
#{$currentTarget}:focus > #{$target} {
@content;
cursor: pointer;
}
}
@else if $mouseOn == $sibling {
#{$currentTarget}:hover ~ #{$target},
#{$currentTarget}:focus ~ #{$target} {
@content;
cursor: pointer;
}
}
@else if $mouseOn == $adjacent {
#{$currentTarget}:hover + #{$target},
#{$currentTarget}:focus + #{$target} {
@content;
cursor: pointer;
}
}
@else {
#{$currentTarget}:hover #{$target}, #{$currentTarget}:focus #{$target} {
@content;
cursor: pointer;
}
}
}
@else if $event == $checked {
@if $mouseOn == $children {
#{unquote($currentTarget)}:checked > #{$target} {
@content;
}
}
@else if $mouseOn == $sibling {
#{unquote($currentTarget)}:checked ~ #{$target} {
@content;
}
}
@else if $mouseOn == $adjacent {
#{unquote($currentTarget)}:checked + #{$target} {
@content;
}
}
@else {
#{unquote($currentTarget)}:checked #{$target} {
@content;
}
}
}
@else if $event == $notChecked {
@if $mouseOn == $children {
#{unquote($currentTarget)}:not(:checked) > #{$target} {
@content;
}
}
@else if $mouseOn == $sibling {
#{unquote($currentTarget)}:not(:checked) ~ #{$target} {
@content;
}
}
@else if $mouseOn == $adjacent {
#{unquote($currentTarget)}:not(:checked) + #{$target} {
@content;
}
}
@else {
#{unquote($currentTarget)}:not(:checked) #{$target} {
@content;
}
}
}
@else {
@if $mouseOn == $children {
#{unquote($currentTarget)}:#{unquote($event)} > #{$target} {
@content;
}
}
@else if $mouseOn == $sibling {
#{unquote($currentTarget)}:#{unquote($event)} ~ #{$target} {
@content;
}
}
@else if $mouseOn == $adjacent {
#{unquote($currentTarget)}:#{unquote($event)} + #{$target} {
@content;
}
}
@else {
#{unquote($currentTarget)}:#{unquote($event)} #{$target} {
@content;
}
}
}
}
}
@mixin noClick() {
pointer-events: none;
}
@mixin allowClick() {
pointer-events: auto;
}
@mixin noTapDelay() {
/*<meta name="viewport" content="width=device-width">*/
touch-action: manipulation;
}
@mixin button($from: color('red'), $to: color('white'), $radius: 'md', $thickness: 2px) {
background-color: $from;
color: $to;
border: $thickness solid $to;
@include borderRadius('pill');
@include hover {
background-color: $to;
color: $from;
border: $thickness solid $from;
}
}
///Mixin to add hover events
///
///@param {Element} $currentTarget - Element receiving the interaction from #banner
///
///@example scss - Interacting with the '.cta'
/// @include onRollOver('.cta'){
/// background-color: #F000;
/// }
@mixin onRollOver($currentTarget) {
@include onEvent($mouseover, #banner, $currentTarget, $children);
}
///.test{
/// @include hover(1s, $bounce, 0.3s) {
/// font-size: 48px;
/// }
///}
@mixin hover($duration:time($NORMAL), $ease:ease, $delay:time($NONE)) {
@include transitionAll($duration, $ease, $delay);
&:hover {
@content;
}
}
/// +-+-+-+-+-+-+-+-+-+-+
/// |L|o|a|d|i|n|g|.|.|.|
/// +-+-+-+-+-+-+-+-+-+-+
@mixin loading() {
&:after {
content: '.';
@include keyframes(loading-dots) {
60% {
text-shadow: 0.35em 0 0 currentColor;
}
100% {
text-shadow: 0.35em 0 0 currentColor, 0.75em 0 0 currentColor;
}
}
animation: loading-dots 1s ease alternate infinite;
}
}
/// +-+-+-+-+-+
/// |s|h|e|e|n|
/// +-+-+-+-+-+
@mixin sheen($duration: 2s, $rotation: -60deg) {
//Hide the sheen
overflow: hidden;
&:after {
content: '';
position: absolute;
display: block;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0) 100%
);
@include prefix(transform, translate(-100%, 0) rotate($rotation) );
}
&:hover:after, &:focus:after {
@include transition($duration, ease);
@include prefix(transform, translate(100%, 0) rotate($rotation));
}
}
/// +-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
/// |D|e|v|e|l|o|p|m|e|n|t| |m|i|x|i|n|s|
/// +-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
@mixin invisibleButton($alpha:0, $color: #00FFFF, $border: #FF00FF) {
position: absolute;
display: block;
border: 1px solid $border;
background-color: $color;
opacity: $alpha;
cursor: pointer;
}
@mixin fixSafariFlicker{
@at-root{
* {
@include prefix(transform-style, preserve-3d);
@include prefix(backface-visibility, hidden);
}
}
}
/// +-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
/// |P|a|r|t|i|c|l|e| |s|y|s|t|e|m|s|
/// +-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
@mixin position($left: 0, $top: 0){
left: $left;
top: $top;
}
@mixin positionGrid($positions){
$i: 1;
@each $pos in $positions {
&:nth-child(#{$i}){
$obj: nth($positions, $i);
@include position(map-get($obj, x), map-get($obj, y));
}
$i: $i + 1;
}
}
@mixin particleSystem($positions, $delay: time($XS), $initial: 0s, $min: 0, $max: 0){
$i: 1;
@each $pos in $positions {
&:nth-child(#{$i}){
$obj: nth($positions, $i);
@include position(map-get($obj, x), map-get($obj, y));
@if $delay not 0 {
@include prefix(animation-delay, ($delay * $i * $time-scale) + $initial);
}
@if $min != $max {
@include prefix(animation-duration, (random() * $max + $min) * 1s * $time-scale);
}
}
$i: $i + 1;
}
}
@function grid($cols: 1, $rows: 1, $hSpace: 10px, $vSpace: 10px, $x: 0px, $y: 0px){
$positions: ();
@for $i from 1 through $rows{
@for $ii from 1 through $cols{
$noo-point: (x: ($ii * $hSpace + $x), y: ($i * $vSpace + $y));
$positions: append($positions, $noo-point);
}
}
@return $positions;
}
@mixin grid($cols: 1, $rows: 1, $hSpace: 10px, $vSpace: 10px, $x: 0px, $y: 0px){
$positions: grid($cols, $rows, $hSpace, $vSpace, $x, $y);
@include positionGrid($positions);
}
@function matrixGrid($qty, $matrix, $width: $_bannerWidth, $height: $_bannerHeight, $x: 0, $y: 0){
$positions: ();
$i: $qty;
$lx: length($matrix);
$ly: length(nth($matrix, 1));
@while $i > 0 {
$rx: random() * $lx;
$ry: random() * $ly;
$cx: ceil($rx);
$cy: ceil($ry);
@debug $cx;
@debug $cy;
$row: nth($matrix, $cx);
$col: nth($row, $cy);
@if $col != 0{
$positions: append($positions, (x: round($ry / $ly * $width + $x) * 1px, y: round($rx / $lx * $height + $y) * 1px));
$i: $i - 1;
}
}
@return $positions;
}
@mixin matrixGrid($qty, $matrix, $width: $_bannerWidth, $height: $_bannerHeight, $x: 0, $y: 0){
$positions: matrixGrid($qty, $matrix, $width, $height, $x, $y);
@include positionGrid($positions);
}
@function randomGrid($qty: 5, $rect: (-50, -50, 50, 50)){
$positions: ();
@for $i from 1 through $qty {
$positions: append($positions, (x: getRandomRange(nth($rect,1), nth($rect,3)) * 1px, y: getRandomRange(nth($rect,2), nth($rect,4)) * 1px));
}
$positions: append($positions, nth($positions, 1));
@return $positions;
}
@mixin randomGrid($qty: 5, $rect: (-50, -50, 50, 50)){
$positions: randomGrid($qty, $rect);
@include positionGrid($positions);
}
/// +-+-+
/// |3|D|
/// +-+-+
$cube-sides: (
front: "rotateY(0deg)",
right: "rotateY(-90deg)",
left: "rotateY(90deg)",
back: "rotateY(-180deg)",
top: "rotateX(-90deg)",
bottom: "rotateX(90deg)"
);
@function rotate3D($face:"front") {
@if map-has-key($cube-sides, $face) {
@return map-get($cube-sides, $face);
}
@return map-get($cube-sides, "front");
}
@function position3D($size: 100px, $face: "front") {
@return "translateZ(" + ($size/2 * -1) + ") " + rotate3D($face);
}
@mixin side3D(){
}
@mixin createCube($sides: 2, $width:100px, $height:50px, $x: 0, $y: 0, $perspective: 1000px, $name: ".cube") {
/* EMMET command .cube>ul>li*4 */
@at-root {
#{unquote($name)} {
perspective: 1000px;
position: absolute;
display: block;
top: $y;
left: $x;
width: $width;
height: $height;
box-sizing: border-box;
///transform: ;
///DEV
///border: 1px solid red;
}
//front, right, left, back, top, right
$show-sides-transform: (
position3D($width, "front"),
position3D($width, "right"),
position3D($width, "left"),
position3D($width, "back"),
position3D($width, "top"),
position3D($width, "bottom")
);
#{unquote($name)} > ul {
margin: 0;
padding: 0;
list-style: none;
transform-style: preserve-3d;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
@include prefix(transition, 1s ease("swing"));
@include prefix(transform, unquote(nth($show-sides-transform, 1)));
}
#{unquote($name)}.front > ul {
@include prefix(transform, unquote(nth($show-sides-transform, 1)));
}
#{unquote($name)}.right > ul {
@include prefix(transform, unquote(nth($show-sides-transform, 2)));
}
#{unquote($name)}.left > ul {
@include prefix(transform, unquote(nth($show-sides-transform, 3)));
}
#{unquote($name)}.back > ul {
@include prefix(transform, unquote(nth($show-sides-transform, 4)));
}
#{unquote($name)}.top > ul {
@include prefix(transform, unquote(nth($show-sides-transform, 5)));
}
#{unquote($name)}.bottom > ul {
@include prefix(transform, unquote(nth($show-sides-transform, 6)));
}
#{unquote($name)} > ul > li {
backface-visibility: hidden;
position: absolute;
display: block;
list-style-type: none;
overflow: hidden;
backface-visibility: hidden;
margin: 0;
padding: 0;
top: 0;
left: 0;
width: $width;
height: $height;
box-sizing: border-box;
///DEV
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
///Create sides
$trans-z: " translateZ(" + $width/2 + ")";
$sides-transform: (
"rotateY(0deg)" + $trans-z,
"rotateY(90deg)" + $trans-z,
"rotateY(180deg)" + $trans-z,
"rotateY(-90deg)" + $trans-z,
"rotateX(90deg)" + $trans-z,
"rotateX(-90deg)" + $trans-z
);
@for $i from 1 through $sides {
&:nth-child(#{$i}) {
@include prefix(transform, unquote(nth($sides-transform, $i)));
}
}
}
}
}
@mixin interactiveCube($name: ".cube") {
@at-root {
#{unquote($name)} > ul {
cursor: pointer;
&:hover {
@content;
}
}
}
}
/// _____ _____
/// / __\ \ / / __|
/// \__ \\ V / (_ |
/// |___/ \_/ \___|
///
///https://codepen.io/noahblon/pen/qEByrR?editors=0100
//<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M0 0h24v24H0z"/>
//
/// Function to create an optimized svg url
//
///https://codepen.io/jakob-e/pen/doMoML?editors=0110
@function svg-url($svg){
//
/// Add missing namespace
//
@if not str-index($svg,xmlns) {
$svg: str-replace($svg, '<svg','<svg xmlns="http://www.w3.org/2000/svg"');
}
///
/// Chunk up string in order to avoid
/// "stack level too deep" error
///
$encoded:'';
$slice: 2000;
$index: 0;
$loops: ceil(str-length($svg)/$slice);
@for $i from 1 through $loops {
$chunk: str-slice($svg, $index, $index + $slice - 1);
//
/// Encode
//
$chunk: str-replace($chunk,'"', '\'');
$chunk: str-replace($chunk,'%', '%25');
$chunk: str-replace($chunk,'&', '%26');
$chunk: str-replace($chunk,'#', '%23');
$chunk: str-replace($chunk,'{', '%7B');
$chunk: str-replace($chunk,'}', '%7D');
$chunk: str-replace($chunk,'<', '%3C');
$chunk: str-replace($chunk,'>', '%3E');
///
/// The maybe list
//
/// Keep size and compile time down
/// ... only add on documented fail
///
/// $chunk: str-replace($chunk, '|', '%7C');
/// $chunk: str-replace($chunk, '[', '%5B');
/// $chunk: str-replace($chunk, ']', '%5D');
/// $chunk: str-replace($chunk, '^', '%5E');
/// $chunk: str-replace($chunk, '`', '%60');
/// $chunk: str-replace($chunk, ';', '%3B');
/// $chunk: str-replace($chunk, '?', '%3F');
/// $chunk: str-replace($chunk, ':', '%3A');
/// $chunk: str-replace($chunk, '@', '%40');
/// $chunk: str-replace($chunk, '=', '%3D');
$encoded: #{$encoded}#{$chunk};
$index: $index + $slice;
}
@return url("data:image/svg+xml,#{$encoded}");
}
/// Background svg mixin
@mixin background-svg($svg){
background-image: svg-url($svg);
}
/// Helper function to replace characters in a string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@return if($index,
str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index +
str-length($search)), $search, $replace),
$string);
}
@mixin icon($id, $color: #000, $borderColor: transparent, $border: 0, $css: ""){
$SVG : (
play: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M4.2 2v20l15.7-10L4.2 2z"/>',
pause: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M3.4 22h5.7V2H3.4v20zM14.9 2v20h5.7V2h-5.7z"/>',
stop: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 2h20v20H2V2z"/>',
replay: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 6V2L7 7l5 5V8c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8z"/>',
rew: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12.5 2v9.1l9-9.1v20l-9.1-9.1V22l-10-10L12.5 2z"/>',
ff: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M11.5 22v-9.1l-9 9.1V2l9.1 9.1V2l10 10-10.1 10z"/>',
first: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 22V2h3.3v9.2l8.3-8.3v8.3L22 2.8v18.3l-8.3-8.3v8.3l-8.3-8.3V22H2z"/>',
last: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 2v20h-3.3v-9.2l-8.3 8.3v-8.3L2 21.2V2.8l8.3 8.3V2.8l8.3 8.3V2H22z"/>',
prev: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M6.2 22V2h3.3v9.2l8.3-8.3v18.3l-8.3-8.3V22H6.2z"/>',
next: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M17.8 2v20h-3.3v-9.2l-8.3 8.3V2.8l8.3 8.3V2h3.3z"/>',
sound: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M1.7 8.6v6.8h4.6l5.7 5.7V2.9L6.3 8.6H1.7zM17.1 12c0-1.9-1.1-3.7-2.9-4.6v9.2c1.8-.8 2.9-2.6 2.9-4.6zM14.3 2v2.3c3.3 1 5.7 4 5.7 7.7s-2.4 6.7-5.7 7.7V22c4.6-1 8-5.1 8-10s-3.4-9-8-10z"/>',
sound-on: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M18.4 19.5c-.5 0-.9-.4-.9-.9 0-.2.1-.5.3-.6 1.6-1.6 2.5-3.8 2.5-6s-.9-4.4-2.5-6c-.3-.3-.3-.9 0-1.2s.9-.3 1.2 0c1.9 1.9 3 4.5 3 7.3s-1.1 5.3-3 7.3c-.2 0-.4.1-.6.1zm-3.2-1.6c-.5 0-.9-.4-.9-.9 0-.2.1-.5.3-.6C17 14 17 10 14.6 7.6c-.3-.3-.3-.9 0-1.2s.9-.3 1.2 0c1.5 1.5 2.3 3.5 2.3 5.6s-.8 4.1-2.3 5.6c-.1.2-.3.3-.6.3zm-3.1-1.7c-.5 0-.9-.4-.9-.9 0-.2.1-.5.3-.6 1.5-1.5 1.5-3.9 0-5.4-.3-.3-.3-.9 0-1.2.3-.3.9-.3 1.2 0 2.2 2.2 2.2 5.7 0 7.9-.1.1-.4.2-.6.2z"></path><path d="M9.6 20.2c-.2 0-.3-.1-.4-.2l-4.5-4.5H2.6c-.3 0-.6-.3-.6-.6V9.1c0-.3.3-.6.6-.6h2.1L9.2 4c.2-.2.6-.2.8 0 .1.1.2.3.2.4v15.3c0 .3-.2.5-.6.5z"/>',
sound-off: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M9.6 20.2c-.2 0-.3-.1-.4-.2l-4.5-4.5H2.6c-.3 0-.6-.3-.6-.6V9.1c0-.3.3-.6.6-.6h2.1L9.2 4c.2-.2.6-.2.8 0 .1.1.2.3.2.4v15.3c0 .3-.2.5-.6.5z"/>',
mute: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M1.7 8.6v6.8h4.6l5.7 5.7V2.9L6.3 8.6H1.7zm18.5 5.1V15h-1.3l-1.7-1.7-1.6 1.7h-1.3v-1.3L16 12l-1.7-1.7V9h1.3l1.7 1.7L18.9 9h1.3v1.3L18.6 12l1.6 1.7z"/>',
mouse: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M18.2 13.6c.2.2.3.5.2.8-.1.3-.3.4-.7.4h-4.3l2.2 5.3c.1.2.1.4 0 .5-.1.2-.2.3-.4.4l-2 .8c-.2.1-.4.1-.5 0-.2-.1-.3-.2-.4-.4l-2.1-5L6.8 20c-.1.1-.3.2-.5.2-.1 0-.2 0-.3-.1-.3-.1-.4-.3-.4-.7V2.7c0-.3.1-.5.4-.7h.3c.2 0 .4.1.5.2l11.4 11.4z"/>',
pointer: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M10.8 13.5v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6H17zm-6.2 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6H17zm0 0v4.6h.4v-4.6H17zm-3.1 0v4.6h.4v-4.6h-.4zm-3.1 0v4.6h.4v-4.6h-.4zm0 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6H17zm-6.2 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6H17zm0 0v4.6h.4v-4.6H17zm-3.1 0v4.6h.4v-4.6h-.4zm-3.1 0v4.6h.4v-4.6h-.4zm0 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6H17z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.2 9.3c-.5-.5-1.2-.8-1.9-.8-.2 0-.5 0-.7.1-.6-.7-1.3-1-2.2-1-.4 0-.8.1-1.2.3-.6-.6-1.3-.9-2-.9h-.4V4.4c0-.9-.3-1.6-.9-2.2-.6-.6-1.3-.9-2.2-.9-.8 0-1.6.3-2.2.9s-.9 1.3-.9 2.1v6.6c-.5-.3-1-.4-1.6-.4-.8 0-1.6.3-2.2.9-.5.6-.8 1.3-.8 2.1 0 .7.2 1.3.6 1.9l4.6 6.2c.3.4.7.7 1.1.9.4.2.9.3 1.4.3h8.6c.5 0 1-.2 1.4-.5.4-.3.7-.7.8-1.3l1.1-4.4c.2-.9.3-1.8.3-2.7v-2.6c.1-.8-.2-1.4-.7-2zm-.7 4.6c0 .8-.1 1.6-.3 2.3l-1.1 4.4c0 .2-.1.3-.3.4s-.3.2-.5.2H9.7c-.5 0-.9-.2-1.2-.6l-4.6-6.2c-.2-.3-.3-.6-.3-.9 0-.4.1-.8.4-1.1.3-.2.6-.4 1.1-.4.5 0 1 .2 1.3.6L8.2 15V4.3c0-.4.2-.8.5-1.1s.7-.5 1.1-.5c.4 0 .8.2 1.1.5.3.3.4.7.4 1.1v6.9h.4V10c0-.4.2-.8.5-1.1s.7-.5 1.1-.5c.4 0 .8.2 1.1.5.3.3.4.7.4 1.1v1.1h.4v-.8c0-.4.1-.7.4-.9.3-.3.6-.4.9-.4.4 0 .7.1 1 .4s.4.6.4 1v.7h.4c0-.3.1-.6.3-.8.2-.2.5-.3.8-.3s.6.1.8.4.3.5.3.9v2.6z"/><path d="M20.1 10.4c-.2-.2-.5-.4-.8-.4s-.6.1-.8.3c-.2.2-.3.5-.3.8h-.4v-.7c0-.4-.1-.7-.4-1s-.6-.4-1-.4-.7.1-.9.4c-.3.3-.4.6-.4.9v.8h-.4V10c0-.4-.1-.8-.4-1.1-.3-.3-.7-.5-1.1-.5-.4 0-.8.2-1.1.5s-.5.7-.5 1.1v1.2h-.4V4.4c0-.4-.1-.8-.4-1.1-.3-.3-.7-.5-1.1-.5-.4 0-.8.2-1.1.5s-.4.6-.4 1v10.8l-1.8-2.4c-.4-.5-.8-.7-1.3-.7-.4 0-.8.2-1.1.5-.3.3-.4.7-.4 1.1 0 .3.1.7.3.9l4.6 6.2c.3.4.7.6 1.2.6h8.6c.2 0 .3-.1.5-.2s.2-.2.3-.4l1.1-4.4c.2-.8.3-1.5.3-2.3v-2.6c0-.4-.2-.7-.4-1zm-8.9 7.8h-.4v-4.6h.4v4.6zm3.1 0h-.4v-4.6h.4v4.6zm3.1 0H17v-4.6h.4v4.6z" fill="#ffffff"/>',
like: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.4 13.3c.4-.7.6-1.4.6-2.1 0-.9-.3-1.7-1-2.3-.7-.7-1.4-1-2.3-1h-2.3c.4-.9.6-1.8.6-2.6 0-1-.2-1.8-.5-2.4-.3-.6-.7-1-1.3-1.3-.6-.3-1.2-.4-2-.4-.4 0-.8.2-1.2.5-.3.3-.6.8-.7 1.3-.2.6-.3 1.1-.4 1.7-.1.5-.2.9-.5 1.1-.4.5-.9 1-1.4 1.7-.9 1.1-1.5 1.8-1.8 2H3.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v8.3c0 .5.2.8.5 1.2.3.3.7.5 1.2.5h3.8c.2 0 .8.2 1.8.5 1.1.4 2 .7 2.8.8.8.2 1.6.3 2.5.3h1.7c1.2 0 2.2-.4 3-1 .7-.7 1.1-1.7 1.1-2.9.5-.7.8-1.4.8-2.3V16c.3-.6.5-1.2.5-1.9-.2-.2-.3-.5-.3-.8zM5.1 19.2c-.2.2-.4.2-.6.2s-.4-.1-.6-.2c-.2-.2-.2-.4-.2-.6 0-.2.1-.4.2-.6.2-.2.4-.2.6-.2s.4.1.6.2c.2.2.2.4.2.6 0 .3-.1.5-.2.6zm14.9-7c-.2.4-.4.6-.7.6.1.1.2.4.3.6.1.3.1.5.1.7 0 .6-.2 1.1-.7 1.5.2.3.2.6.2.9s-.1.6-.2 1-.4.5-.6.7c0 .3.1.5.1.7 0 1.5-.8 2.2-2.5 2.2h-1.6c-1.1 0-2.6-.3-4.5-1 0 0-.2-.1-.4-.1 0 0-.2 0-.3-.1-.1 0-.2-.1-.5-.1-.2-.1-.4-.1-.5-.2-.1 0-.3 0-.4-.1H7v-8.3h.4c.1 0 .3 0 .5-.1s.3-.2.5-.3l.5-.5c.2-.2.3-.3.5-.6.2-.2.3-.4.5-.5s.2-.3.4-.5.3-.4.3-.4c.5-.6.8-1 1-1.2.4-.4.6-.8.8-1.4.2-.6.3-1.1.4-1.6.1-.5.3-.9.5-1.1.8 0 1.4.2 1.7.6.3.4.4 1 .4 1.9 0 .5-.2 1.2-.6 2.1-.4.9-.6 1.6-.6 2.1h4.6c.4 0 .8.2 1.2.5.3.3.5.7.5 1.2-.2.1-.3.4-.5.8z"/><path d="M5.3 18.7c0 .2-.1.4-.2.6-.2.2-.4.2-.6.2s-.4-.1-.6-.2c-.2-.2-.2-.4-.2-.6 0-.2.1-.4.2-.6.2-.2.4-.2.6-.2s.4.1.6.2c.1.1.2.3.2.6zM19.4 12.8c.1.1.2.4.3.6.1.3.1.5.1.7 0 .6-.2 1.1-.7 1.5.2.3.2.6.2.9s-.1.6-.2 1-.4.5-.6.7c0 .3.1.5.1.7 0 1.5-.8 2.2-2.5 2.2h-1.6c-1.1 0-2.6-.3-4.5-1 0 0-.2-.1-.4-.1-.1 0-.3 0-.4-.1-.1 0-.2-.1-.5-.1-.2-.1-.4-.1-.5-.2-.1 0-.3 0-.4-.1H7v-8.3h.4c.1 0 .3 0 .5-.1s.3-.2.5-.3l.5-.5c.2-.2.3-.3.5-.6.2-.2.3-.4.5-.5s.2-.3.4-.5.3-.4.3-.4c.5-.6.8-1 1-1.2.4-.4.6-.8.8-1.4.2-.6.3-1.1.4-1.6.1-.5.3-.9.5-1.1.8 0 1.4.2 1.7.6.3.4.4 1 .4 1.9 0 .5-.2 1.2-.6 2.1-.4.9-.6 1.6-.6 2.1h4.6c.4 0 .8.2 1.2.5.3.3.5.7.5 1.2 0 .3-.1.7-.3 1-.3.2-.6.4-.8.4z" fill="#ffffff"/>',
close: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 3.9L20.1 2 12 10.1 3.9 2 2 3.9l8.1 8.1L2 20.1 3.9 22l8.1-8.1 8.1 8.1 1.9-1.9-8.1-8.1L22 3.9z"/>',
close-bold: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.8 18.1L15.7 12l6.1-6.1c.2-.2.2-.6 0-.9L19 2.2c-.2-.2-.6-.2-.9 0L12 8.3 5.9 2.2c-.2-.3-.6-.3-.9 0L2.2 5c-.2.2-.2.6 0 .9L8.3 12l-6.1 6.1c-.2.2-.2.6 0 .9L5 21.8c.2.2.6.2.9 0l6.1-6.1 6.1 6.1c.2.2.6.2.9 0l2.9-2.9c.2-.2.2-.6-.1-.8z"/>',
close-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18.1c-4.5 0-8.1-3.6-8.1-8.1S7.5 3.9 12 3.9s8.1 3.6 8.1 8.1-3.6 8.1-8.1 8.1z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M15.1 7L12 10.1 8.9 7 7 8.9l3.1 3.1L7 15.1 8.9 17l3.1-3.1 3.1 3.1 1.9-1.9-3.1-3.1L17 8.9 15.1 7z"/>',
close-o-inv: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm5 13.6L15.6 17 12 13.4 8.4 17 7 15.6l3.6-3.6L7 8.4 8.4 7l3.6 3.6L15.6 7 17 8.4 13.4 12l3.6 3.6z"/>',
down: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 7l10 10L22 7H2z"/>',
up: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 7L2 17h20L12 7z"/>',
nav-left: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M18.2 4.4L15.8 2l-10 10 10 10 2.4-2.4-7.7-7.6 7.7-7.6z"/>',
nav-right: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M8.2 2L5.8 4.4l7.6 7.6-7.6 7.6L8.2 22l10-10-10-10z"/>',
up-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 12c0 5.5 4.5 10 10 10s10-4.5 10-10S17.5 2 12 2 2 6.5 2 12zm18.1 0c0 4.5-3.6 8.1-8.1 8.1S3.9 16.5 3.9 12 7.5 3.9 12 3.9s8.1 3.6 8.1 8.1z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M15.8 15.1l1.8-1.8L12 7.7l-5.6 5.6 1.8 1.8 3.8-3.8 3.8 3.8z"/>',
down-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 12c0 5.5 4.5 10 10 10s10-4.5 10-10S17.5 2 12 2 2 6.5 2 12zm18.1 0c0 4.5-3.6 8.1-8.1 8.1S3.9 16.5 3.9 12 7.5 3.9 12 3.9s8.1 3.6 8.1 8.1z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M8.2 8.9l-1.8 1.8 5.6 5.6 5.6-5.6-1.8-1.8-3.8 3.8-3.8-3.8z"/>',
left-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 12c0 5.5 4.5 10 10 10s10-4.5 10-10S17.5 2 12 2 2 6.5 2 12zm18.1 0c0 4.5-3.6 8.1-8.1 8.1S3.9 16.5 3.9 12 7.5 3.9 12 3.9s8.1 3.6 8.1 8.1z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M15.1 8.2l-1.8-1.8L7.7 12l5.6 5.6 1.8-1.8-3.8-3.8 3.8-3.8z"/>',
right-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 12c0 5.5 4.5 10 10 10s10-4.5 10-10S17.5 2 12 2 2 6.5 2 12zm18.1 0c0 4.5-3.6 8.1-8.1 8.1S3.9 16.5 3.9 12 7.5 3.9 12 3.9s8.1 3.6 8.1 8.1z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M8.9 15.8l1.8 1.8 5.6-5.6-5.6-5.6-1.8 1.8 3.8 3.8-3.8 3.8z"/>',
arrow-left: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 11.1v1.7c0 .5-.1.9-.4 1.2s-.7.5-1.1.5h-9.6l4 4c.3.3.5.7.5 1.2s-.2.9-.5 1.2l-1 1c-.3.3-.7.5-1.2.5s-.9-.2-1.2-.5L2.7 13c-.5-.1-.7-.5-.7-1s.2-.9.5-1.2L11.3 2c.3-.3.8-.5 1.2-.5.5 0 .9.2 1.2.5l1 1c.3.3.5.8.5 1.2s-.2.9-.5 1.2l-4 4h9.6c.5 0 .9.2 1.1.5s.6.8.6 1.2z"/>',
arrow-right: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 12c0 .5-.2.9-.5 1.2L12.7 22c-.4.3-.8.5-1.2.5-.5 0-.9-.2-1.2-.5l-1-1c-.3-.3-.5-.8-.5-1.2 0-.5.2-.9.5-1.2l4-4H3.6c-.5 0-.9-.2-1.1-.5s-.5-.8-.5-1.2v-1.7c0-.5.1-.9.4-1.2s.7-.5 1.1-.5h9.6l-4-4c-.3-.4-.4-.8-.4-1.3s.1-.9.5-1.2l1-1c.3-.3.8-.5 1.2-.5.5 0 .9.2 1.2.5l8.8 8.8c.4.3.6.7.6 1.2z"/>',
arrow-up: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22.6 12.6c0 .5-.2.9-.5 1.2l-1 1c-.3.3-.8.5-1.2.5-.5 0-.9-.2-1.2-.5l-4-4v9.6c0 .5-.2.9-.5 1.1s-.9.5-1.3.5h-1.7c-.5 0-.9-.1-1.2-.4s-.5-.7-.5-1.1v-9.6l-4 4c-.3.3-.7.5-1.2.5s-1-.2-1.3-.6l-1-1c-.3-.3-.5-.8-.5-1.2 0-.5.2-.9.5-1.2l8.8-8.8c.3-.4.7-.6 1.2-.6s.9.2 1.2.5l8.8 8.8c.4.4.6.8.6 1.3z"/>',
arrow-down: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22.5 11.5c0 .5-.2.9-.5 1.2l-8.8 8.8c-.3.3-.7.5-1.2.5s-.9-.2-1.2-.5L2 12.7c-.3-.3-.5-.7-.5-1.2s.2-.9.5-1.2l1-1c.4-.3.8-.5 1.2-.5.5 0 .9.2 1.2.5l4 4V3.7c0-.5.2-.9.5-1.2.4-.3.8-.5 1.2-.5h1.7c.5 0 .9.2 1.2.5.3.3.5.7.5 1.2v9.5l4-4c.3-.3.7-.5 1.2-.5s.9.2 1.2.5l1 1c.4.4.6.8.6 1.3z"/>',
dropdown: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"/>',
search: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.4 19l-4.7-4c-.5-.4-1-.6-1.4-.6 2.7-3.2 2.3-7.9-.8-10.6s-8-2.3-10.7.8-2.3 7.9.8 10.6c2.8 2.4 6.9 2.4 9.7 0 0 .4.2.9.6 1.4l4 4.7c.7.8 1.8.8 2.5.1.8-.6.7-1.7 0-2.4zM9.5 14.5c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z"/>',
check: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M18.9 4.2l-9.4 9.4-4.4-4.4L2 12.3l7.5 7.5L22 7.3l-3.1-3.1z"/>',
plus: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.4 9.5h-6.9V2.6c0-.3-.3-.6-.6-.6h-3.8c-.3 0-.6.3-.6.6v6.9H2.6c-.3 0-.6.3-.6.6v3.8c0 .3.3.6.6.6h6.9v6.9c0 .3.3.6.6.6h3.8c.3 0 .6-.3.6-.6v-6.9h6.9c.3 0 .6-.3.6-.6v-3.8c0-.3-.3-.6-.6-.6z"/>',
minus: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 10.1v3.8c0 .3.3.6.6.6h18.8c.3 0 .6-.3.6-.6v-3.8c0-.3-.3-.6-.6-.6H2.6c-.3 0-.6.3-.6.6z"/>',
grid: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>',
menu: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>',
dots: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>',
marker: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 2C8.5 2 5.8 4.8 5.8 8.2 5.8 14.5 12 22 12 22s6.2-7.5 6.2-13.8C18.2 4.8 15.5 2 12 2zm0 10c-2.1 0-3.8-1.7-3.8-3.8S9.9 4.5 12 4.5s3.8 1.7 3.8 3.8S14.1 12 12 12z"/>',
star: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 9.8l-6.9-1L12 2.5 8.9 8.8 2 9.8l5 4.9-1.2 6.9 6.2-3.2 6.2 3.2-1.2-7 5-4.8z"/>',
love: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M16.7 2.7c-2.1 0-3.9 1.7-4.7 3.5-.8-1.8-2.6-3.5-4.8-3.5C4.4 2.7 2 5.1 2 8c0 5.9 5.9 7.4 10 13.3 3.8-5.8 10-7.6 10-13.3 0-2.9-2.4-5.3-5.3-5.3z"/>',
shop: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M9.5 19.5c0 1-.8 1.9-1.9 1.9s-1.9-.8-1.9-1.9c0-1 .8-1.9 1.9-1.9 1.1 0 1.9.9 1.9 1.9zm12.5 0c0 1-.8 1.9-1.9 1.9-1 0-1.9-.8-1.9-1.9 0-1 .8-1.9 1.9-1.9 1.1 0 1.9.9 1.9 1.9zm0-8.1V3.9H7c0-.7-.6-1.2-1.2-1.2H2v1.2h2.5l.9 8c-1.1.9-1.3 2.4-.4 3.5.5.6 1.2.9 2 .9h15v-1.2H7c-.7 0-1.2-.6-1.2-1.2L22 11.4z"/>',
reload: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 9.5h-7.5l2.8-2.8C15.9 5.3 14 4.5 12 4.5s-3.9.8-5.3 2.2C5.3 8.1 4.5 10 4.5 12s.8 3.9 2.2 5.3c1.4 1.4 3.3 2.2 5.3 2.2 2.2 0 4.2-.9 5.6-2.6l1.9 1.6c-3.6 4.2-10 4.6-14.1.9s-4.6-9.8-.9-14 10-4.6 14.1-.9c.2.1.3.3.5.5L22 2v7.5z"/>',
loader-lines: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12.2 7.9c-.7 0-1.2-.5-1.2-1.2V3c0-.7.5-1.2 1.2-1.2s1.2.5 1.2 1.2v3.7c0 .7-.5 1.2-1.2 1.2zm0 14.3c-.4 0-.8-.3-.8-.8v-3.7c0-.4.3-.8.8-.8.4 0 .8.3.8.8v3.7c0 .4-.4.8-.8.8zM9.4 8.6c-.4 0-.8-.2-1-.6L6.6 4.8c-.3-.5-.1-1.2.4-1.5s1.3-.1 1.6.4l1.8 3.2c.3.5.1 1.3-.4 1.6-.2 0-.4.1-.6.1zm7.4 12.3c-.2 0-.5-.1-.6-.3l-1.8-3.2c-.2-.3-.1-.8.2-.9.3-.2.8-.1.9.2l1.8 3.2c.2.3.1.8-.3.9 0 .1-.1.1-.2.1zM7.4 10.5c-.2 0-.4 0-.5-.1L3.7 8.6c-.5-.4-.7-1-.3-1.5.3-.5.9-.6 1.4-.4L8 8.5c.5.3.7 1 .4 1.5-.3.3-.6.5-1 .5zm12.8 6.9c-.1 0-.2 0-.3-.1l-3.2-1.8c-.3-.2-.4-.6-.2-.8.2-.3.5-.4.8-.2l3.2 1.8c.3.2.4.5.2.8-.1.2-.3.3-.5.3zM6.7 13.2H3c-.6 0-1-.4-1-1 0-.5.4-1 1-1h3.7c.6 0 1 .4 1 1s-.5 1-1 1zm14.7-.4h-3.7c-.3 0-.6-.3-.6-.6s.3-.6.6-.6h3.7c.3 0 .6.3.6.6s-.3.6-.6.6zM4.2 17.7c-.5 0-.9-.4-.9-.9 0-.3.2-.6.5-.8L7 14.2c.4-.3 1-.1 1.3.3.3.4.1 1-.3 1.3l-3.2 1.8c-.3.1-.4.1-.6.1zM17 10.1c-.3 0-.6-.3-.6-.6 0-.2.1-.4.3-.5l3.2-1.8c.3-.2.7-.1.8.2.2.3.1.7-.2.8L17.3 10c-.1.1-.2.1-.3.1zM7.6 21c-.5 0-.8-.4-.8-.8 0-.1 0-.3.1-.4l1.8-3.2c.2-.4.7-.5 1.2-.3.4.2.5.7.3 1.2l-1.8 3.2c-.2.2-.5.3-.8.3zm7.3-12.9c-.3 0-.6-.3-.6-.6 0-.1 0-.2.1-.3L16.3 4c.2-.3.6-.4.8-.2.3.2.4.5.2.8l-1.8 3.2c-.1.1-.3.3-.6.3z"/>',
loader-dots: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M8.9 4.3c0-1.5 1.2-2.7 2.7-2.8s2.7 1.2 2.8 2.7v.1c0 1.5-1.3 2.7-2.8 2.7C10.1 7 9 5.8 8.9 4.3zm8.6 8.2c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2zm-2.1 5.7c0-1.1.8-2 2-2.1s2 .8 2.1 2v.1c0 1.1-1 2-2.1 2s-2-.9-2-2zm-5.6 2.4c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8-.8 1.8-1.8 1.8-1.8-.8-1.8-1.8zm-5.6-2.4c0-.9.7-1.7 1.6-1.7s1.7.7 1.7 1.6v.1c0 .9-.8 1.6-1.7 1.6-.8 0-1.5-.7-1.6-1.6zM2 12.5c0-.8.6-1.5 1.5-1.5s1.5.6 1.5 1.4v.1c0 .8-.7 1.5-1.5 1.5-.8-.1-1.5-.7-1.5-1.5zm2.5-5.8c0-.7.6-1.4 1.4-1.4s1.3.7 1.3 1.4-.6 1.4-1.3 1.4-1.4-.6-1.4-1.4zm15.3 0c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5c1.4.1 2.5 1.2 2.5 2.5z"/>',
comet: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 12.3c0-2.7-1.2-5.3-3.1-7.2-2.9-2.8-7.3-3.6-11-2-1.2.6-2.3 1.3-3.2 2.3s-1.6 2-2.1 3.2c-.9 2.4-.8 5 .2 7.4.5 1.2 1.2 2.2 2.1 3.1.9.9 2 1.5 3.1 2 1.2.4 2.4.7 3.6.6 3.7-.1 7.1-2.4 8.4-5.9.3-.7.4-1.4.5-2.1h.1c.7 0 1.3-.6 1.3-1.3.1 0 .1 0 .1-.1zm-2.1 3.4c-.5 1.1-1.2 2-2 2.8-.8.8-1.8 1.4-2.9 1.9-1.1.4-2.2.6-3.4.6-2.3 0-4.5-1-6-2.7-.8-.8-1.4-1.8-1.8-2.8-.7-2-.7-4.3.2-6.4.4-1 1.1-1.9 1.9-2.6s1.7-1.3 2.7-1.7c1-.4 2.1-.6 3.1-.5s2.1.3 3.1.7c1 .4 1.8 1 2.5 1.8s1.3 1.6 1.6 2.6c.4 1 .5 2 .5 3-.1.7.5 1.3 1.1 1.4-.1.6-.3 1.3-.6 1.9z"/>',
comets: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 2C6.6 2 2.1 6.3 2 11.8c.1-4.8 3.7-8.6 8.1-8.6 4.5 0 8.1 3.9 8.1 8.8 0 1 .8 1.9 1.9 1.9S22 13 22 12c0-5.5-4.5-10-10-10zm0 20c5.4 0 9.9-4.3 10-9.8-.1 4.7-3.7 8.5-8.1 8.5-4.5 0-8.1-3.9-8.1-8.8 0-1-.8-1.9-1.9-1.9S2 11 2 12c0 5.5 4.5 10 10 10z"/>',
refresh: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.7 14.1s0 .1 0 0c-.6 2.4-1.7 4.3-3.5 5.7S14.3 22 11.9 22c-1.3 0-2.5-.2-3.7-.7S6 20.1 5 19.3L3.3 21c-.2.2-.4.2-.6.2s-.4-.1-.6-.2-.1-.4-.1-.7v-5.8c0-.2.1-.4.2-.6s.4-.2.6-.2h5.8c.2 0 .4.1.6.2.2.2.2.4.2.6s-.1.4-.2.6l-1.8 1.8c.6.6 1.3 1 2.1 1.3s1.6.5 2.4.5c1.2 0 2.2-.3 3.3-.8s1.8-1.3 2.4-2.3c.1-.1.3-.7.7-1.5.1-.2.2-.3.4-.3h2.5c.1 0 .2 0 .3.1.1 0 .2.1.2.2zM22 3.7v5.8c0 .2-.1.4-.2.6s-.4.2-.6.2h-5.8c-.2 0-.4-.1-.6-.2-.2-.2-.2-.4-.2-.6s.1-.4.2-.6l1.8-1.8c-1.3-1.2-2.8-1.8-4.5-1.8-1.2 0-2.2.3-3.3.8S6.9 7.5 6.3 8.5c-.1.2-.3.7-.7 1.5-.1.2-.2.3-.4.3H2.7c-.1 0-.2 0-.3-.1-.1-.1-.2-.2-.2-.3v-.1C2.8 7.5 4 5.6 5.8 4.2S9.6 2 12 2c1.3 0 2.5.2 3.7.7s2.3 1.2 3.2 2L20.6 3c.2-.2.4-.2.6-.2s.4.1.6.2.2.4.2.7z"/>',
ban: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M19.1 12c0-1.4-.4-2.7-1.1-3.8L8.1 18c1.2.8 2.5 1.2 3.9 1.2 1 0 1.9-.2 2.8-.6.9-.4 1.6-.9 2.3-1.5s1.1-1.4 1.5-2.3.5-1.8.5-2.8zm-13 3.9l9.8-9.8c-1.2-.8-2.5-1.2-3.9-1.2-1.3 0-2.5.3-3.6 1S6.5 7.3 5.9 8.4s-1 2.3-1 3.6c0 1.4.4 2.7 1.2 3.9zM22 12c0 1.4-.3 2.7-.8 3.9-.5 1.2-1.2 2.3-2.1 3.2-.9.9-2 1.6-3.2 2.1s-2.5.8-3.9.8-2.6-.3-3.9-.8-2.3-1.2-3.2-2.1c-.9-.9-1.6-2-2.1-3.2S2 13.4 2 12s.3-2.7.8-3.9S4 5.8 4.9 4.9s2-1.6 3.2-2.1S10.6 2 12 2s2.6.3 3.9.8 2.3 1.2 3.2 2.1 1.6 2 2.1 3.2c.5 1.2.8 2.5.8 3.9z"/>',
trash: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M9.5 18.2V9.1c0-.1 0-.2-.1-.3s-.2-.1-.3-.1h-.9c-.1 0-.2 0-.2.1-.1.1-.2.2-.2.3v9.2c0 .1 0 .2.1.3.1.1.2.1.3.1H9c.1 0 .2 0 .3-.1s.2-.2.2-.4zm3.3 0V9.1c0-.1 0-.2-.1-.3s-.2-.1-.3-.1h-.8c-.1 0-.2 0-.3.1s-.1.2-.1.3v9.2c0 .1 0 .2.1.3s.2.1.3.1h.8c.1 0 .2 0 .3-.1s.1-.2.1-.4zm3.4 0V9.1c0-.1 0-.2-.1-.3-.1-.1-.2-.1-.3-.1H15c-.1 0-.2 0-.3.1s-.2.2-.2.3v9.2c0 .1 0 .2.1.3s.2.1.3.1h.8c.1 0 .2 0 .3-.1.1-.1.2-.2.2-.4zM9.1 5.3h5.8l-.6-1.5c-.1-.1-.1-.1-.2-.1H9.9c-.1 0-.2.1-.2.1l-.6 1.5zm12.1.5v.8c0 .1 0 .2-.1.3s-.2.1-.3.1h-1.2v12.3c0 .7-.2 1.3-.6 1.9-.5.5-1 .8-1.6.8H6.6c-.6 0-1.1-.3-1.5-.8s-.6-1.1-.6-1.8V7H3.2C3.1 7 3 7 3 6.9s-.2-.2-.2-.3v-.8c0-.1 0-.2.1-.3s.2-.1.3-.1h4l.9-2.2c.1-.3.4-.6.7-.8.4-.3.8-.4 1.1-.4h4.2c.3 0 .7.1 1 .3.3.2.6.5.7.8l.9 2.2h4c.1 0 .2 0 .3.1s.2.2.2.4z"/>',
trash-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M9.5 9.9v7.5c0 .1 0 .2-.1.3s-.2.1-.3.1h-.9c-.1 0-.2 0-.3-.1-.1-.1-.1-.2-.1-.3V9.9c0-.1 0-.2.1-.3.1-.1.2-.1.3-.1H9c.1 0 .2 0 .3.1s.2.2.2.3zm3.3 0v7.5c0 .1 0 .2-.1.3s-.2.1-.3.1h-.8c-.1 0-.2 0-.3-.1s-.1-.2-.1-.3V9.9c0-.1 0-.2.1-.3s.2-.1.3-.1h.8c.1 0 .2 0 .3.1s.1.2.1.3zm3.4 0v7.5c0 .1 0 .2-.1.3-.1.1-.2.1-.3.1H15c-.1 0-.2 0-.3-.1s-.1-.2-.1-.3V9.9c0-.1 0-.2.1-.3s.2-.1.3-.1h.8c.1 0 .2 0 .3.1 0 .1.1.2.1.3zm1.6 9.4V7H6.2v12.3c0 .2 0 .4.1.5s.1.3.2.4l.1.1h10.8s.1 0 .1-.1c.1-.1.1-.2.2-.4s.1-.3.1-.5zm-8.7-14h5.8l-.6-1.5c-.1-.1-.1-.1-.2-.1H9.9c-.1 0-.2.1-.2.1l-.6 1.5zm12.1.5v.8c0 .1 0 .2-.1.3s-.2.1-.3.1h-1.2v12.3c0 .7-.2 1.3-.6 1.9-.5.5-1 .8-1.6.8H6.6c-.6 0-1.1-.3-1.5-.8s-.6-1.1-.6-1.8V7H3.2C3.1 7 3 7 3 6.9s-.2-.2-.2-.3v-.8c0-.1 0-.2.1-.3s.2-.1.3-.1h4l.9-2.2c.1-.3.4-.6.7-.8.4-.3.8-.4 1.1-.4h4.2c.3 0 .7.1 1 .3.3.2.6.5.7.8l.9 2.2h4c.1 0 .2 0 .3.1s.2.2.2.4z"/>',
wifi: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 19.1c-.1 0-.5-.2-.9-.7-.5-.5-.7-.8-.7-1 0-.2.2-.4.6-.5.4-.1.8-.2 1.1-.2.3 0 .6.1 1.1.2.4.1.6.3.6.5 0 .1-.2.5-.7 1-.6.5-1 .7-1.1.7zm2.7-2.8s-.1-.1-.4-.3c-.3-.2-.6-.3-1-.5s-.9-.3-1.3-.3-.9.1-1.3.3c-.4.2-.8.3-1 .5-.3.2-.4.3-.4.3-.1 0-.4-.3-1-.8-.5-.5-.8-.8-.8-.9 0-.1 0-.2.1-.2.5-.5 1.2-.9 2-1.2s1.6-.4 2.4-.4c.8 0 1.6.1 2.4.4.8.3 1.5.7 2 1.2.1.1.1.1.1.2s-.3.4-.8.9-.8.8-1 .8zm2.8-2.7c-.1 0-.2 0-.2-.1-.9-.7-1.8-1.2-2.6-1.6-.8-.3-1.7-.5-2.7-.5-.6 0-1.2.1-1.7.2-.6.1-1.1.3-1.5.5l-1.2.6c-.4.2-.6.5-.8.6-.2.1-.3.2-.3.2-.1 0-.4-.3-.9-.8s-.8-.7-.8-.8c0-.1 0-.2.1-.2.9-.9 2-1.6 3.3-2.1s2.6-.7 3.9-.7 2.6.2 3.9.7 2.4 1.2 3.3 2.1c.1.1.1.1.1.2s-.3.4-.8.9-1 .8-1.1.8zm2.8-2.8c-.1 0-.1 0-.2-.1-1.2-1.1-2.5-1.9-3.8-2.4s-2.8-.8-4.3-.8-3 .3-4.3.8-2.6 1.3-3.8 2.4c-.1.1-.1.1-.2.1s-.4-.3-.9-.8-.8-.8-.8-.9c0-.1 0-.2.1-.2C3.4 7.6 4.9 6.7 6.6 6s3.5-1 5.4-1 3.6.3 5.4 1 3.3 1.7 4.5 2.9c.1 0 .1.1.1.2s-.3.4-.8.9-.8.8-.9.8z"/>',
facebook-f: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M17.2 2.1v3.2h-1.9c-.7 0-1.2.1-1.4.4-.2.3-.3.8-.3 1.3v2.3h3.5l-.5 3.6h-3.1V22H9.9v-9.1H6.8V9.3h3.1V6.7c0-1.5.4-2.6 1.2-3.5s2-1.2 3.4-1.2c1.1 0 2 0 2.7.1z"/>',
facebook-logo: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22.7 0H1.3C.6 0 0 .6 0 1.3v21.4c0 .7.6 1.3 1.3 1.3h11.5v-9.3H9.7v-3.6h3.1V8.4c0-3.1 1.9-4.8 4.7-4.8 1.3 0 2.5.1 2.8.1V7h-1.9c-1.5 0-1.8.7-1.8 1.8v2.3h3.6l-.5 3.6h-3.1V24h6.1c.7 0 1.3-.6 1.3-1.3V1.3c0-.7-.6-1.3-1.3-1.3z"/>',
twitter-bird: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M7.52 19.54c9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.1-.2-7.7-2.2-10.1-5.1-.4.7-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 4 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2 1.2 4.5 2.1 7.3 2.1"/>',
youtube-play: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M9.9 14.6l5.4-2.8L9.9 9v5.6zM12 5c1.2 0 2.5 0 3.6.1 1.2 0 2 .1 2.6.1h1.3c.1 0 .1 0 .3.1s.2.1.3.1c.1 0 .2.1.3.1.1.1.2.1.3.2l.3.3.2.2c.1.1.2.3.3.7.1.3.2.7.3 1.1.1.5.1 1 .1 1.5s.1 1 .1 1.3v2c0 1.1-.1 2.2-.2 3.2-.1.4-.1.8-.3 1.1-.1.3-.3.6-.4.7l-.1.2-.3.3c-.1.1-.2.2-.3.2-.1.1-.2.1-.3.1-.1 0-.2.1-.3.1-.1 0-.2 0-.3.1H19c-1.9.2-4.2.2-7 .2-1.5 0-2.9 0-4-.1s-1.9-.1-2.2-.1h-.9c-.3 0-.5-.1-.6-.1-.1 0-.3-.1-.6-.2-.3-.2-.5-.3-.7-.5l-.2-.2c-.1-.1-.2-.3-.3-.7-.1-.3-.2-.7-.3-1.1-.1-.5-.1-1-.1-1.5s-.1-1-.1-1.3v-2c0-1 .1-2.1.2-3.2.1-.4.1-.8.3-1.1.1-.3.3-.6.4-.7L3 6l.3-.3c.1-.1.2-.2.3-.2.2-.1.3-.1.4-.1s.2-.1.3-.1c.1 0 .2 0 .3-.1h.5C6.9 5 9.2 5 12 5z"/>',
);
$element: map-get($SVG, $id);
$tag: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">#{$element}</svg>';
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
///background-image: url('data:image/svg+xml;utf8,#{$tag}');
@include background-svg('#{$tag}');
}
///@import "classanimation";
///@include banner(300,250,#FFF,#000);
///************** ✁ COPY + PASTE ✁ **************//
/***********************************************************************************************************************
MessageBox - A jQuery Plugin to replace Javascript's window.alert(), window.confirm() and window.prompt() functions
Author : Gaspare Sganga
Version : 2.2.1
License : MIT
Documentation : http://gasparesganga.com/labs/jquery-message-box/
***********************************************************************************************************************/
/*
You can customize your MessageBox style directly in this file
or override some classes/styles using an external CSS file loaded after this.
*/
/* Overlay */
.messagebox_overlay {
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
}
.messagebox_overlay *:focus {
outline: 0;
}
/* MessageBox */
.messagebox {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
font-weight: normal;
text-align: left;
color: #303030;
background-color: #fcfcfc;
border: 1px solid #c8c8c8;
box-shadow: 0px 2px 4px #a0a0a0;
max-height: 90%;
/* This value is useful only when "top" option is set to "auto" */
max-width: 90%;
min-width: 300px;
}
/* Content */
.messagebox_content {
padding: 20px;
padding-bottom: 0;
/* In order to preserve "padding-bottom" when the content is taller than the MessageBox and thus scrolled on the Y-axis, use the following :after pseudo-class "height" value instead of "padding-bottom" here! */
}
.messagebox_content:after {
content: "";
display: block;
flex: 0 0 auto;
height: 20px;
/* Use this value as if it was #messagebox_content's "padding-bottom" to preserve it when the content overflows Y-axis and the scrollbar is shown */
}
/* Label for Input */
.messagebox_content_label {
display: block;
width: 100%;
margin: auto;
margin-top: 10px;
//font-style: italic;
}
/* Input (it applies to selects too) */
.messagebox_content_input {
display: block;
width: 100%;
margin: auto;
margin-top: 10px;
padding: 3px;
color: #303030;
border: 1px solid #909090;
font-family: inherit;
font-size: inherit;
font-style: normal;
font-weight: inherit;
text-align: left;
}
.messagebox_content_input:hover {
border-color: #707070;
}
.messagebox_content_input:focus {
border-color: #707070;
box-shadow: inset 0px 0px 3px #ffd540;
}
/* Input style when placed inside a label */
.messagebox_content_label .messagebox_content_input {
margin-top: 4px;
}
/* Select's "fake placeholder" */
.messagebox_content_input_selectplaceholder {
color: #909090;
}
/* Error */
.messagebox_content_error {
background-color: #fad0d5;
color: #a02020;
margin-top: 15px;
margin-bottom: -10px;
padding: 4px 6px;
border-radius: 2px;
}
/* Buttons */
.messagebox_buttons {
background-color: #f5f5f5;
border-top: 1px solid #c8c8c8;
padding: 10px 20px 0px 20px;
text-align: center;
}
.messagebox_buttons button {
font-family: inherit;
font-size: inherit;
font-weight: bold;
text-align: center;
min-width: 75px;
margin: 0px 4px 10px 4px;
padding: 5px 10px;
cursor: pointer;
color: #404040;
background-color: #e9e9e9;
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.1) 51%,
rgba(255, 255, 255, 0) 100%
);
border: 1px solid #c0c0c0;
border-radius: 2px;
}
.messagebox_buttons button:hover {
color: #202020;
background-color: #f0f0f0;
}
.messagebox_buttons button:active {
background-color: #e6e6e6;
border: 1px solid #a0a0a0;
box-shadow: inset 0px 0px 6px #d0d0d0;
}
.messagebox_buttons button::-moz-focus-inner {
padding: 0;
border: 0;
}
//***********************************************//
//***********************************************//
//***********************************************//
@mixin simpleButton {
cursor: pointer;
margin: 0 3px;
padding: 3px;
border: 1px solid #666666;
border-radius: 3px;
display: inline-block;
width: auto;
text-align: center;
color: #FFF;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
background: #959595; /* Old browsers */
background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
&:hover {
color: #000;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,e5ebee+50,d7dee3+51,f5f7f9+100;White+Gloss */
background: #f6f8f9; /* Old browsers */
background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
}
}
@import url("https://fonts.googleapis.com/css?family=Anton|Ropa+Sans|Source+Code+Pro");
@include banner(300,250);
.hero {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
top: 50%;
position: relative;
display: inline-block;
width: 100%;
text-align: center;
font-size: 2.2em;
font-family: "Anton", sans-serif;
@include y(-50%);
.letter {
display: inline-block;
opacity: 1;
//@include transform(0px, 500px, 0.1, 2turn);
}
}
.slogan {
position: absolute;
top: 60%;
text-align: center;
display: block;
width: 100%;
//opacity: 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
//@include y(200%);
}
body {
background-color: #333333;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJElEQVQoU2MMDQ39z0AA3Lt3j4FxVCGuUCIteIyNjQkGOMgmAFO5KvuiODFKAAAAAElFTkSuQmCC);
background-repeat: repeat;
font-family: "Ropa Sans", sans-serif;
font-size: 16px;
overflow: hidden;
scroll: auto;
}
#banner {
top: 50%;
left: 50%;
@include transform(-50%,-50%, 1, 0);
}
#editor-wrapper {
color: #dddddd;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
background-color: rgba(0, 0, 0, 0.6);
bottom: 0px;
left: 50%;
display: block;
position: absolute;
width: 95%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
@include x(-50%);
& #click-expander {
font-size: 1.1em;
text-align: center;
width: 100%;
padding: 10px 0 5px 0;
cursor: pointer;
display: inline-block;
height: 18px;
& #expander-btn {
display: inline-block;
@include antialiased;
@include transition(1s, ease("overshoot"));
&.close {
@include rotate(45deg);
}
&.open {
@include rotate(0);
}
}
}
#editor-hider {
padding: 0px 15px 10px 15px;
font-size: 0.9em;
}
h1,
h2,
h3,
h4 {
font-weight: bold;
padding: 5px;
}
p {
padding: 5px;
}
input,
select,
button {
color: white;
background-color: dodgerblue;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.16);
padding: 5px;
font-size: 0.8em;
line-height: 1em;
border-radius: 5px;
cursor: pointer;
outline: none;
display: inline-block;
height: 20px;
margin: 1px;
@include transitionAll;
&:hover {
color: dodgerblue;
background-color: white;
}
}
textarea {
font-size: 1em;
line-height: 1.3em;
font-family: "Source Code Pro", monospace;
width: 100%;
height: 200px;
display: block;
color: #dddddd;
border: 1px solid #333333;
outline: none;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px;
box-sizing: border-box;
resize: none;
white-space: pre;
overflow: auto;
caret-color: dodgerblue;
&::selection {
background-color: yellow;
color: black;
}
}
#_fx {
@include simpleButton;
}
#size_sl {
width: auto;
}
#_color {
padding: 0px;
border: none;
width: 40px;
height: 22px;
}
#template {
width: auto;
}
#_frames {
width: 30px;
height: 12px;
}
.small-checkbox {
display: none;
}
.small-checkbox-label {
cursor: pointer;
margin: 0;
padding: 0;
&:before{
margin-left: 3px;
margin-right: -3px;
vertical-align: middle;
}
}
.small-checkbox + .small-checkbox-label {
&:before {
content: "❌";
}
}
.small-checkbox:checked + .small-checkbox-label {
&:before {
content: "✅";
}
}
}
#minitweensass,
#minitweenjs {
display: none;
}
.separator {
color: #555555;
}
#actual-size {
color: red;
}
///Animations
.hero {
@include revolveDropText(14, 1s, timeline(1.8s));
}
.slogan {
@include keyframes (slogan-animation) {
from {
opacity: 0;
@include y(100%);
}
to {
opacity: 1;
@include y(0);
}
}
display: inline-block;
@include animation(slogan-animation, 1s, ease("bounce"), timeline(2.5s), 1);
@include animationFill();
}
///LAYERS
.layer-comps {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 0.5);
padding: 100px 0;
display: none;
.title,
.close {
display: inline-block;
width: 50%;
margin-bottom: 10px;
}
.title {
float: left;
text-align: left;
font-size: 1.2rem;
}
p{
clear: both;
float: left;
width: 100%;
font-size: 0.8rem;
margin-bottom: 5px;
}
.close {
float: right;
text-align: right;
cursor: pointer;
}
.hidden {
display: none;
}
.small {
font-size: 0.8em;
}
.input-box {
font-size: 1.2em;
line-height: 1em;
border-radius: 5px;
cursor: pointer;
outline: none;
display: inline-block;
width: 50px;
height: 20px;
margin: 1px;
}
.form-controls {
padding-top: 5px;
button {
display: inline-block;
@include simpleButton;
}
}
.layer-window {
margin: auto;
width: 80%;
padding: 16px;
border-radius: 8px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.16);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
background: #f2f5f6; /* Old browsers */
background: -moz-linear-gradient(
top,
#f2f5f6 0%,
#e3eaed 37%,
#c8d7dc 100%
); /* FF3.6-15 */
background: -webkit-linear-gradient(
top,
#f2f5f6 0%,
#e3eaed 37%,
#c8d7dc 100%
); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(
to bottom,
#f2f5f6 0%,
#e3eaed 37%,
#c8d7dc 100%
); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr="#f2f5f6",
endColorstr="#c8d7dc",
GradientType=0
); /* IE6-9 */
.sort-styles{
clear: both;
width: 100%;
padding-bottom: 5px;
select {
background-color: black;
color: white;
font-weight: bold;
border-radius: 3px;
outline: none;
}
}
}
.element-list {
width: 100%;
margin: auto;
clear: both;
height: 50vh;
border: 1px solid #999;
background-color: #333;
overflow: auto;
box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.16),
inset 0px 3px 3px 0px rgba(0, 0, 0, 0.16);
.line {
display: inline-block;
clear: both;
float: left;
width: 100%;
cursor: pointer;
padding: 3px;
box-sizing: border-box;
color: #DEDEDE;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;White+Gloss+%232 */
background-color: #323232; /* Old browsers */
border-bottom: 1px solid #4a4a4a;
&.selected {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcecfc+0,fba6e1+50,fd89d7+51,ff7cd8+100;Pink+Gloss+%232 */
background: #4a4a4a; /* Old browsers */
}
.small-checkbox{
width: 5%;
}
.small-checkbox-label {
width: 95%;
}
&:hover {
color: #FFF;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
background: #959595; /* Old browsers */
background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
}
.small-checkbox,
.small-checkbox-label {
cursor: pointer;
}
.small-checkbox {
margin-right: 3px;
}
}
}
}
!
