doggystyle 0.1.0

data/core/mixins/_transition.scss

@@ -0,0 +1,189 @@
+/// Transition mixin handles animation for any number of transitions in any format/order
+///
+/// @author Mark Notton
+///
+/// @access public
+///
+/// @todo Stagger option. Make it so each transition happens one after the other, regardless of delay
+///
+/// @param {arglist} $args - Pass in the following transtion settings, in any order.
+///   [property]  - width, margin, rotate, skew, color, etc...
+///   [delay]     - delay times are always calculated in seconds (not miliseconds). You do not have to define the 's'
+///   [ease-type] - ease-in, ease-in-out etc... You can also refer to the eases variables. $easeInSine, $easeInOutBack
+///   [duration]  - duration times are always calculated in seconds (not miliseconds). You do not have to define the 's'
+///   [direction] - forwards, default, backwards, reverse. direction should be in it's own argment, not part of a list of transition settings. It can however be in the same argument as 'stagger'.
+///                 Directions can be backwards or forwards (default). Setting it backwards will reverse the order
+///                 of the delays if more than one argument has been made.
+///   [stagger]   - stagger should be in it's own argment, not part of a list of transition settings. It can however be in the same argument as 'direction'.
+///                 Stagger can be defined just by passing the string 'stagger'. This will add previous transition delays and directions to the current
+///                 transtion so each argument is called one after the other.
+///   [off]       - passing off within any argument will ignore everything and set the transition to 'initial'. Essentially disabling all transitions
+///
+/// @require {Mixin} contains
+/// @require {Mixin} prepend
+/// @require {Mixin} prefixer
+/// @require {Variables} eases - optional
+///
+/// @example scss - Usage
+/// .foo {
+///   @include transition(
+///      background-color 0 ease-in,
+///      border-radius 0.5 ease-out,
+///      rotate 1 1 $easeInOutBack,
+///      reverse
+///   );
+/// }
+///
+/// @example css - CSS output
+/// .foo {
+///   -webkit-transition: background-color 0.2s ease-in 0s, border-radius 0.2s ease-out 0.5s, -webkit-transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1s;
+///   transition: background-color 0.2s ease-in 0s, border-radius 0.2s ease-out 0.5s, transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1s; }
+/// }
+///
+
+@mixin transition($settings...) {
+
+  // Default Settings
+  $direction : forwards;
+  $stagger : false;
+
+  // Private Settings
+  $transitions : ();
+  $transitions-webkit : ();
+  $animations  : ();
+  $delays : ();
+  $eases : ();
+  $durations : ();
+  $off : false;
+
+  // Quick check to make sure anything at all has been passed.
+  // If not, set 'all' as the default transition
+  // $args: if(length($args) > 0, $args, all);
+
+  $settings-list : _arglist-to-list($settings);
+
+  // Loop through and check all arguments for any special options
+  @each $settings in $settings-list {
+    @if contains($settings, forwards default backwards reverse) {
+      $direction : $settings;
+    } @elseif contains($settings, stagger) {
+      $stagger : true;
+    } @elseif contains($settings, off) {
+      $off : true;
+    }
+  }
+
+  @if $off == true {
+    @include prefixer(transition, initial);
+  }
+
+  // Loop through and set all the necessary settings for each animation set
+  @each $settings in $settings-list {
+
+    // Default Settings
+    $animation : ();
+    $duration : 0.2;
+    $ease : ease-in-out;
+    $delay : 0;
+
+    // Private Settings
+    $excluded : false;
+    $value-counter : 0;
+
+    @each $setting in $settings {
+      // Check a range of special rules. Exclude this transition if this is true.
+      @if contains($setting, forwards default backwards reverse stagger) {
+        $excluded : true;
+      } @else {
+        // Checks for 'strings'
+        @if type-of($setting) == string {
+          @if contains(str-slice(#{$setting}, 0, 4), ease line step cubi init) {
+            // If the first 4 characters of the string match the first 4 characters
+            // of a ease type, update the ease variable
+            $ease : $setting;
+          } @elseif contains($setting, transform matrix translate translateX translateY scale scaleX scaleY rotate skew skewX skewY matrix3d translate3d translateZ scale3d scaleZ rotate3d rotateX rotateY rotateZ perspective) {
+            // If the string mataches a transform type, define the animation as a transform
+            $animation : append($animation, transform);
+          } @else {
+            $animation : append($animation, $setting);
+          }
+        }
+        // Checks for 'numbers'
+        @if type-of($setting) == number {
+          @if $value-counter < 1 {
+            // Add the first instance of a number as the delay
+            $delay : $setting;
+            $value-counter : $value-counter + 1;
+          } @elseif $value-counter >= 1 {
+            // Add the second instance of a number as the duration
+            $duration : $setting;
+          }
+        }
+      }
+    }
+
+    @if not $excluded {
+      // Quick check to make sure animation has a fallback if none were defined
+      $animations : if(length($animation) == 0, append($animations, all), append($animations, $animation));
+      // Quick check for the direction rule. If backwards or reversed, add delays the the start of the $delays list
+      $delays     : if(contains($direction, backwards reverse), prepend($delays, $delay), append($delays, $delay));
+      $eases      : append($eases, $ease);
+      $durations  : append($durations, $duration);
+    }
+  }
+
+  // Loop through all the animations and add the transition to the overall transitions list
+  @for $i from 1 through length($animations) {
+    $animation   : nth($animations, $i);
+    $duration    : nth($durations, $i);
+    $ease        : nth($eases, $i);
+    $delay       : nth($delays, $i);
+    @each $ani in $animation {
+      $transition  : ($ani #{$duration + 's'} $ease #{$delay + 's'});
+      $transitions : append($transitions, $transition, comma);
+
+      $transition-webkit  : (if($ani == transform, -#{webkit}-#{$ani}, $ani) #{$duration + 's'} $ease #{$delay + 's'});
+      $transitions-webkit : append($transitions-webkit, $transition-webkit, comma);
+    }
+  }
+
+  @include prefixer(transition, $transitions-webkit, webkit only);
+  @include prefixer(transition, $transitions, null);
+
+}
+
+@mixin transition-remove() {
+  @include prefixer(transition, initial, webkit);
+}
+
+
+/// @alias transition-delay
+///
+/// @access public
+///
+/// @require {mixin} transition-delay
+///
+/// @return
+
+@mixin ani-remove() {
+  @include transition-remove();
+}
+
+/// @alias transition
+@mixin ani($settings...) { @include transition($settings...); }
+
+@mixin transition-delay($time) {
+  @include prefixer(transition-delay, addUnit($time, s), webkit);
+}
+
+/// @alias transition-delay
+///
+/// @access public
+///
+/// @require {mixin} transition-delay
+///
+/// @return
+
+@mixin dalay($time) {
+  @include transition-delay($time);
+}

data/core/mixins/_triangle-classic.scss

@@ -0,0 +1,170 @@
+/// Create a triangle/carrat/arrow 
+///
+/// @param {list} $args
+///   In any order and without comma delimination, add any of the follwing arrow settings
+///   Colour { color } - Hex or RGBA
+///   Width { int } - First intiger is used as the width. 'px' units are used by defualt if not specified.
+///   Height { int } - Second intiger is used as the height. 'px' units are used by defualt if not specified. Width is used if second unit is not found.
+///   Direction { string } - top-left, up, top-right, left, right, bottom-left, down, bottom-right.
+///   Center { string } - In addition to the direction, you can add the unquote string 'center' to center the arrow
+///   Sudo { string } - Use an unquote string 'before' or 'after' to distinguish what sudo element to use
+///
+/// @param {bool} $position
+///   Determines wether the arrow should be positioned at all
+///
+/// @require {map} triangle-settings
+/// @require {function} random-color
+/// @require {function} map-fetch
+/// @require {function} is-calc
+///
+///
+/// @example {scss} - Usage
+///   @include triangle-classic(50% 20 purple right);
+///   @include triangle-classic(100 100 green up center after);
+///
+/// @return {sudo}
+
+
+@mixin triangle-classic($args...) {  
+
+  // Deafult Triangle Settings
+  $size      : ();
+  $sudo      : before;
+  $colour    : random-colour();
+  $direction : right;
+  $center    : false;
+  $triangle  : map-fetch($triangle-settings, $direction, points);
+  
+  // Deafult Position Settings
+  $position  : true;
+  $x-pos     : nth(map-fetch($triangle-settings, $direction, x), 1);
+  $x-amount  : nth(map-fetch($triangle-settings, $direction, x), 2);
+  $y-pos     : nth(map-fetch($triangle-settings, $direction, y), 1);
+  $y-amount  : nth(map-fetch($triangle-settings, $direction, y), 2);
+  
+  $args: if(length($args) > 0, $args, null); 
+
+  // Loop through and check all arguments for any special options.
+
+  @for $i from 1 through length($args) {
+    @each $option in nth($args, $i) {
+      // If there is an arugment, with just one value, and it's set to true or false.
+      // Assume this is the position condition. 
+      @if type-of($option) == bool and length(nth($args, $i)) == 1 {
+        $position : $option;
+      }
+    }
+  } 
+
+  // Check Triangle Settings
+  @each $rule in nth($args, 1) {    
+
+    @if type-of($rule) == number or is-calc($rule) and length($size) < 2 {
+      $size : append($size, $rule);
+    }
+    @elseif type-of($rule) == color {
+      $colour : $rule;
+    }
+    @elseif type-of($rule) == string {
+      @if $rule == before or $rule == after {
+        $sudo : unquote($rule);
+      }
+      @elseif $rule == center {
+        $center : true;
+      }
+      @elseif map-has-key($triangle-settings, $rule) {
+        $direction: $rule;
+
+        $x:map-fetch($triangle-settings, $direction, x);
+        $x-pos:nth($x, 1); 
+        $x-amount:nth($x, 2);
+
+        $y:map-fetch($triangle-settings, $direction, y);
+        $y-pos:nth($y, 1); 
+        $y-amount:nth($y, 2);
+      }
+    }
+  }
+
+  // Deafult size set if it remains empty
+  $size : if(length($size) == 0, 50, $size);
+  
+  // Define width and height
+  $width : nth($size, 1);
+  $height : if(length($size) == 1, $width, nth($size, 2));
+  
+  // Define all settings with strings
+  
+  &#{_sudo($sudo)} {
+    content:"";
+    position:absolute;    
+    height:0; 
+    width:0;
+    border-style:solid; 
+    border-color:transparent;
+    border-width:0;
+    pointer-events:none;
+
+    @if $center {
+      top:calc(50% - #{addUnit($height)}/2); left:calc(50% - #{addUnit($width)}/2);
+    } @elseif ($position) {
+      @if $direction == up or $direction == down {
+        #{$y-pos}:calc(#{$y-amount} - #{addUnit($width)}/2);
+        #{$x-pos}:$x-amount;
+      }
+      @elseif $direction == left {
+        #{$y-pos}:$y-amount;
+        #{$x-pos}:calc(#{$x-amount} - #{addUnit($height)}/2);
+      }
+      @elseif $direction == right {
+        #{$y-pos}:calc(#{$y-amount} - #{addUnit($height)}/2);
+        #{$x-pos}:$x-amount;
+      }
+      @else {
+        #{$y-pos}:$y-amount;
+        #{$x-pos}:$x-amount;
+      }
+    }
+
+    // Directions
+    @if $direction == left {
+      border-width:addUnit($height/2) addUnit($width) addUnit($height/2) 0;
+    }
+    @elseif $direction == right {
+      border-width:addUnit($height/2) 0 addUnit($height/2) addUnit($width);
+    }
+    @elseif $direction == up {
+      border-width:0 addUnit($width/2) addUnit($height) addUnit($width/2);
+    }
+    @elseif $direction == down {
+      border-width:addUnit($height) addUnit($width/2) 0 addUnit($width/2);
+    }
+    
+    @if contains(left right up down, $direction) {
+      border-#{opposite-direction($direction)}-color:$colour;
+    }
+    
+    @if $direction == top-left {
+      border-width:addUnit($height) addUnit($width) 0 0;
+      border-top-color:$colour;
+    }
+    @elseif $direction == top-right {
+      border-width:0 addUnit($width) addUnit($height) 0;
+      border-right-color:$colour;
+    }
+    @elseif $direction == bottom-left {
+      border-width:addUnit($height) 0 0 addUnit($width);
+      border-left-color:$colour;
+    }
+    @elseif $direction == bottom-right {
+      border-width:0 0 addUnit($height) addUnit($width);
+      border-bottom-color:$colour;
+    }
+
+     @if $direction == up { $direction : top; }
+     @if $direction == down { $direction : bottom; }
+
+
+    @content;
+  }
+}

data/core/mixins/_triangle.scss

@@ -0,0 +1,250 @@
+/// Triangle Settings
+///
+/// @author Mark Notton
+///
+/// @type variables
+
+$triangle-settings: (
+  top-left : (
+    points : "0,100 0,0 100,0",
+    y : ( left , 0 ),
+    x : ( top , 0 )
+  ),
+  up : (
+    points : "100,100 0,100 50,0",
+    y : ( left , 50% ),
+    x : ( bottom , 100% )
+  ),
+  top-right : (
+    points : "100,100 0,0 100,0",
+    y : ( right , 0 ),
+    x : ( top , 0 )
+  ),
+  left : (
+    points : "100,100 0,50 100,0",
+    y : ( right , 100% ),
+    x : ( top , 50% )
+  ),
+  right : (
+    points : "0,100 0,0 100,50",
+    y : ( top , 50% ),
+    x : ( left , 100% )
+  ),
+  bottom-left : (
+    points : "100,100 0,100 0,0",
+    y : ( left , 0 ),
+    x : ( bottom , 0 )
+  ),
+  down : (
+    points : "0,0 100,0 50,100",
+    y : ( left , 50% ),
+    x : ( top , 100% )
+  ),
+  bottom-right : (
+    points : "0,100 100,0 100,100",
+    y : ( bottom , 0 ),
+    x : ( right , 0 )
+  ),
+);
+
+
+/// Create a triangle/carrat/arrow 
+///
+/// @todo Figure a way to animate the fill colour of the svg background
+/// @todo Get Stroke Alignment to work "inner".
+///
+/// @param {list} $args
+///   In any order and without comma delimination, add any of the follwing arrow settings
+///   Colour { color } - Hex or RGBA
+///   Width { int } - First intiger is used as the width. 'px' units are used by defualt if not specified.
+///   Height { int } - Second intiger is used as the height. 'px' units are used by defualt if not specified. Width is used if second unit is not found.
+///   Direction { string } - top-left, up, top-right, left, right, bottom-left, down, bottom-right.
+///   Center { string } - In addition to the direction, you can add the unquote string 'center' to center the arrow
+///   Sudo { string } - Use an unquote string 'before' or 'after' to distinguish what sudo element to use
+///
+/// @param {bool} $position
+///   Determines wether the arrow should be positioned at all
+///
+/// @require {map} triangle-settings
+/// @require {function} random-color
+/// @require {function} map-fetch
+/// @require {function} is-calc
+///
+///
+/// @example {scss} - Usage
+///   @include arrow(50% 20 purple right);
+///   @include arrow(100 100 green up center after);
+///
+/// @return {sudo}
+
+@mixin triangle($args...) {  
+
+  // Deafult Triangle Settings
+  $size      : ();
+  $sudo      : before;
+  $colour    : random-colour();
+  $direction : right;
+  $center    : false;
+  $triangle  : map-fetch($triangle-settings, $direction, points);
+  
+  // Deafult Position Settings
+  $position  : true;
+  $x-pos     : nth(map-fetch($triangle-settings, $direction, x), 1);
+  $x-amount  : nth(map-fetch($triangle-settings, $direction, x), 2);
+  $y-pos     : nth(map-fetch($triangle-settings, $direction, y), 1);
+  $y-amount  : nth(map-fetch($triangle-settings, $direction, y), 2);
+  
+  // Deafult Stroke Settings
+  $stroke      : false;
+  $s-colour    : random-colour();
+  $s-width     : 5;
+  $s-linecap   : round;
+  $s-linejoin  : round;
+  $s-dasharray : null;
+
+  $args: if(length($args) > 0, $args, null); 
+  $value-counter : 0;
+
+  // Loop through and check all arguments for any special options
+  @for $i from 1 through length($args) {
+    @each $option in nth($args, $i) {
+      @if type-of($option) == bool and length(nth($args, $i)) == 1 {
+        $position : $option;
+      } @elseif length($args) > 1 {
+        $stroke : nth($args, $i);
+      }
+    }
+  } 
+
+  // Check Triangle Settings
+  @each $rule in nth($args, 1) {    
+
+    @if type-of($rule) == number or is-calc($rule) and length($size) < 2 {
+      $size : append($size, $rule);
+    }
+    @elseif type-of($rule) == color {
+      $colour : $rule;
+    }
+    @elseif type-of($rule) == string {
+      @if $rule == before or $rule == after {
+        $sudo : unquote($rule);
+      }
+      @elseif $rule == center {
+        $center : true;
+      }
+      @elseif map-has-key($triangle-settings, $rule) {
+        $direction: $rule;
+        $triangle: map-fetch($triangle-settings, $direction, points);
+
+        $x:map-fetch($triangle-settings, $direction, x);
+        $x-pos:nth($x, 1); 
+        $x-amount:nth($x, 2);
+
+        $y:map-fetch($triangle-settings, $direction, y);
+        $y-pos:nth($y, 1); 
+        $y-amount:nth($y, 2);
+      }
+    }
+  }
+
+  // Check Stroke Settings
+  @if $stroke {
+    @each $rule in $stroke {
+      @if type-of($rule) == string {
+        @if index((butt round square), $rule) {
+          $s-linecap : $rule;
+        } 
+        @if index((miter miter-clip round bevel arcs), $rule) {
+          $s-linejoin : $rule;
+        }
+      }
+      @elseif type-of($rule) == list {
+        @each $dash in $rule {
+          $s-dasharray: append($s-dasharray,  $dash, comma);
+        }
+      }
+      @elseif type-of($rule) == color {
+        $s-colour : $rule;
+      }
+      @elseif type-of($rule) == number {
+        @if $value-counter < 1 {
+          $s-width : $rule;
+          $value-counter : $value-counter + 1;
+        } @elseif $value-counter >= 1 {
+          $s-dasharray : ($rule, $rule);
+        }
+      }
+    }
+  }
+
+  // Deafult size set if it remains empty
+  $size : if(length($size) == 0, 50, $size);
+  
+  // Define width and height
+  $width : nth($size, 1);
+  $height : if(length($size) == 1, $width, nth($size, 2));
+  
+  // Define all settings with strings
+  $fill : "' fill='" + _hash-fix($colour);
+  
+  @if $stroke {
+    $s-colour    : "' stroke='" + _hash-fix($s-colour);
+    $s-width     : "' stroke-width='" + strip($s-width);
+    $s-alignment : "' stroke-alignment='inner";
+    $s-linecap   : if($s-linecap, "' stroke-linecap='" + $s-linecap, '');
+    $s-linejoin   : if($s-linejoin, "' stroke-linejoin='" + $s-linejoin, '');
+    $s-dasharray : if($s-dasharray, "' stroke-dasharray='" + $s-dasharray, '');
+  } 
+
+  &#{_sudo($sudo)} {
+    content:""; 
+    @include size($width $height);
+    position:absolute;
+    pointer-events:none;
+    background-image:svg("<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'><polygon points='" + $triangle + $fill + if($stroke, $s-colour + $s-linecap + $s-linejoin + $s-width + $s-alignment + $s-dasharray,'') + "'/></svg>");
+    background-size:100% 100%;
+    background-repeat:no-repeat;
+    @if $center {
+      top:calc(50% - #{addUnit($height)}/2); left:calc(50% - #{addUnit($width)}/2);
+    } @elseif ($position) {
+      @if $direction == up or $direction == down {
+        #{$y-pos}:calc(#{$y-amount} - #{addUnit($width)}/2);
+        #{$x-pos}:$x-amount;
+      }
+      @elseif $direction == left {
+        #{$y-pos}:$y-amount;
+        #{$x-pos}:calc(#{$x-amount} - #{addUnit($height)}/2);
+      }
+      @elseif $direction == right {
+        #{$y-pos}:calc(#{$y-amount} - #{addUnit($height)}/2);
+        #{$x-pos}:$x-amount;
+      }
+      @else {
+        #{$y-pos}:$y-amount;
+        #{$x-pos}:$x-amount;
+      }
+    }    
+
+    @content;
+  }
+
+  @include ie {
+    @include triangle-classic($width $height $colour $direction $sudo) { background-image:none $imp; @content };
+  }
+}
+
+
+/// @alias triangle
+///
+/// @access public
+/// 
+/// @require {mixin} triangle
+///
+/// @return {*}
+
+@mixin arrow($args...) { 
+  @include triangle($args...) { 
+    @content 
+  }
+}
+