doggystyle 0.1.0

data/core/mixins/_gradient.scss

@@ -0,0 +1,72 @@
+@mixin gradient($args...) {
+  background-image: -webkit-linear-gradient($args); 
+  background-image: -o-linear-gradient($args); 
+  background-image: linear-gradient($args);
+}
+
+@mixin gradient-right($start-colour:white, $end-colour:black, $direction:left) {
+  @include gradient-horizontal($start-colour, $end-colour, $direction);
+}
+
+@mixin gradient-left($start-colour:white, $end-colour:black, $direction:right) {
+  @include gradient-horizontal($start-colour, $end-colour, $direction);
+}
+
+@mixin gradient-top($start-colour:white, $end-colour:black, $direction:top) {
+  @include gradient-vertical($start-colour, $end-colour, $direction);
+}
+
+@mixin gradient-bottom($start-colour:white, $end-colour:black, $direction:bottom) {
+  @include gradient-vertical($start-colour, $end-colour, $direction);
+}
+
+@mixin gradient-directional($start-colour:white, $end-colour:black, $deg:45) {
+  background-repeat: repeat-x;
+  background-image: -webkit-linear-gradient(addUnit($deg, deg), $start-colour, $end-colour);
+  background-image: -o-linear-gradient(addUnit($deg, deg), $start-colour, $end-colour);
+  background-image: linear-gradient(addUnit($deg, deg), $start-colour, $end-colour);
+}
+
+@mixin gradient-horizontal($args...) {
+  $properties : _gradient-properties($args...);
+
+  // $properties : @if(contains($properties, left right), to $properties, $properties);
+
+  background-image: -webkit-linear-gradient(#{$properties}); // Safari 5.1-6, Chrome 10+
+  background-image: -o-linear-gradient(#{$properties}); // Opera 12
+  background-image: linear-gradient(#{$properties}); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  background-repeat: repeat-x;
+}
+
+@mixin gradient-vertical($args...) {
+  $properties : _gradient-properties($args...);
+
+  // $properties : @if(contains($properties, left right), to $properties, $properties);
+
+  background-image: -webkit-linear-gradient(#{$properties}); // Safari 5.1-6, Chrome 10+
+  background-image: -o-linear-gradient(#{$properties}); // Opera 12
+  background-image: linear-gradient(#{$properties}); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  background-repeat: repeat-x;
+}
+
+@mixin gradient-radial($args...) {
+  $properties : _gradient-properties($args...);
+
+  background: -webkit-radial-gradient(#{$properties});
+  background: -o-radial-gradient(#{$properties});
+  background: -moz-radial-gradient(#{$properties});
+  background: radial-gradient(#{$properties});
+  background-repeat: no-repeat;
+}
+
+@function _gradient-properties($args...) {
+  $properties : ();
+
+  $args: if(length($args) > 0, $args, null);
+
+  @for $i from 1 through length($args) {
+    $properties : append($properties, nth($args, $i), comma);
+  }
+
+  @return $properties;
+}

data/core/mixins/_image-size.scss

@@ -0,0 +1,18 @@
+// WARNING: Compass used Ruby to support certain functions. imageHeight and imageWidth were dependant on this. 
+
+// Set width and height using image dimensions. You can also attribute max or min too.
+// Note: Image url's are relative to the image directory set in your config.rb file.
+@mixin image-size($img, $property:null) {
+  @if $property == null {
+    // Set image width and height as normal
+    height:imageHeight($img); width:imageWidth($img);
+  } @else if $property == half {
+    // Set the width and height, but half the actual output. Ideal if you're using x2 resolution images for retina screens.
+    height:imageHeight($img, half); width:imageWidth($img, half);
+  } @else if (str-index(#{$property}, "%")) {
+    // Use the width and height, but only as a defiend percentage
+    height:imageHeight($img, $property); width:imageWidth($img, $property);
+  } @else {
+    #{$property}-height:imageHeight($img); #{$property}-width:imageWidth($img);
+  }
+}

data/core/mixins/_image.scss

@@ -0,0 +1,12 @@
+// Insert image into background, and change the size of the element to the image size too.
+@mixin image($img, $responsive:true, $property:null){
+  @include background-image($img); display:block; 
+  @if ($responsive) { 
+    @include aspect-ratio($img); 
+    @include image-size($img, "max"); 
+    background-size:100%;
+  } @else { 
+    background-size:100% auto;
+    @include image-size($img, $property); 
+  }
+}

data/core/mixins/_inputs.scss

@@ -0,0 +1,18 @@
+// Style up all sorts of text input fields
+
+@mixin input-text($types:color date datetime datetime-local email month number password search tel text time url week textarea) {
+
+  $new-list:();
+
+  @each $type in $types {   
+    @if $type == textarea {
+      $new-list: append($new-list, textarea, comma);    
+    } @else {
+      $new-list: append($new-list, #{'input[type=' + $type + ']'}, comma);    
+    }
+  }
+  #{$new-list} {
+    font-size:$fs;
+    @content;
+  }
+}

data/core/mixins/_keyframes.scss

@@ -0,0 +1,8 @@
+@mixin keyframes($animationName) {
+  @at-root (without: media) {
+    @-webkit-keyframes #{$animationName} { @content; }
+    @-moz-keyframes #{$animationName} { @content; }
+    @-o-keyframes #{$animationName} { @content; }
+    @keyframes #{$animationName} { @content; }
+  }
+}

data/core/mixins/_last.scss

@@ -0,0 +1,5 @@
+@mixin last() { 
+  &:last-of-type, &.last { 
+    @content
+  }
+}

data/core/mixins/_nth-last.scss

@@ -0,0 +1,7 @@
+@mixin nth-last($nth:1, $repeat:null) {
+  @if ($repeat == true) {
+    &:nth-last-of-type(#{$nth + n + "+" + $nth}) { @content }
+  } @else {
+    &:nth-last-of-type(#{$nth}) { @content }
+  }
+}

data/core/mixins/_nth.scss

@@ -0,0 +1,10 @@
+@mixin nth($nth:1, $repeat:null) {
+  // TODO: Make is so you can add an array of nth numbers so you can target specific items by number, e.g. @include nth((1,2,5,6,8)) { ... }
+  @if ($repeat == true) {
+    // Repeat this for every instance. So if repeat is trye, and nth is 3, the @content will be assigned to every third element.
+    &:nth-of-type(#{$nth + n + "+" + $nth}) { @content }
+  } @else {
+    // Only apply the @content to one specific element.
+    &:nth-of-type(#{$nth}) { @content }
+  }
+}

data/core/mixins/_placeholder.scss

@@ -0,0 +1,15 @@
+// Place holder animation
+@mixin placeholder($colour:#a9a9a9) {
+
+  $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
+  @each $placeholder in $placeholders {
+    &:focus:#{$placeholder}-placeholder {
+      color:transparent; @content;
+    }
+
+    &:#{$placeholder}-placeholder {
+      color:$colour; @include ani(color);
+    }
+  }
+
+}

data/core/mixins/_prefixer.scss

@@ -0,0 +1,55 @@
+$vendors : webkit moz ms o;
+
+/// Prefix a property with a given vendor type
+///
+/// @author Mark Notton
+///
+/// @access public
+///
+/// @param {String} $properties - Property string that will get prefixed
+/// @param {String} $value - Value string
+/// @param {List | String} $prefixes - optional - Define the vendor prefixes you want to use
+///   Only vendors in the $vendors variable will be allowed.
+///   Add 'only' if you want to exclude a non-prefixed property
+///   Add 'all' if you want to use all the vendors in the $vendors variable
+/// @param {Bool} $important - If true, an important tag will be added to the end of each value;
+///
+/// @require {Mixin} contains
+/// @require {Mixin} list-remove
+/// @require {Variable} $vendors
+///
+/// @example scss - Usage
+/// .foo { @include prefixer(height, 100px); }
+/// .bar { @include prefixer(height, 200px, webkit only, true); }
+///
+/// @example css - CSS output
+/// .foo {
+///   -webkit-height: 100px;
+///   -moz-height: 100px;
+///   height: 100px;
+/// }
+///
+/// .bar { -webkit-height: 200px !important; }
+///
+@mixin prefixer($properties, $value, $prefixes:webkit moz, $important:false) {
+
+  $prefixes : if($prefixes == all, $vendors, $prefixes);
+  $strict : false;
+
+  @if contains($prefixes, only) {
+    $prefixes: remove($prefixes, only);
+    $strict : true;
+  }
+
+  @each $property in $properties {
+    @each $prefix in $prefixes {
+
+      @if index($vendors, $prefix) {
+        #{"-" + $prefix + "-" + $property}: $value if($important == true, $imp, null);
+      }
+    }
+    @if not $strict {
+      #{$property}: $value if($important == true, $imp, null);
+    }
+  }
+}

data/core/mixins/_selection.scss

@@ -0,0 +1,15 @@
+@mixin selection($background-color:$selection, $text-colour:$background-color) {
+  @if ($text-colour == null or $text-colour == $background-color) { 
+    $text-colour:colour-contrast($background-color);
+  }
+  ::-moz-selection { 
+    color: $text-colour;
+    background: col($background-color 0.5);
+    @content;
+  }
+  ::selection {
+    color: $text-colour; 
+    background: col($background-color 0.5);
+    @content;
+  }
+}

data/core/mixins/_shadow.scss

@@ -0,0 +1,7 @@
+// Shadow
+@mixin shadow($height:5, $width:100%, $strength:0.2, $gap:0, $sudo:before) {
+  &:#{$sudo} { content:""; position:absolute; top:100%; left:0; margin-top:$gap#{px}; width:$width; height:$height#{px}; opacity:$strength; 
+    background: $svg-gradient-shadow no-repeat top left / 100% 100%;
+    @content;
+  }
+}

data/core/mixins/_size.scss

@@ -0,0 +1,13 @@
+/// Sets the width and height to the same values
+/// If the second para "special" is defined as min or max, the dimenstions will be prefixed with that
+@mixin size($sizes, $special:null) {
+  $prefix : null;
+  $width: first($sizes);
+  @if contains($special, (min, max)) {
+    $prefix : $special + "-";
+  }
+
+  $height : check($special, check(second($sizes), first($sizes)));
+  #{$prefix}width: addUnit($width);
+  #{$prefix}height: addUnit($height);
+}

data/core/mixins/_smart-horizontal.scss

@@ -0,0 +1,21 @@
+@mixin smart-horizontal($width, $gutter:$pad, $break:null) {
+  $gutter      : if($gutter == 0, null, $gutter);
+  $max-width   : $width;
+  $width       : if(is-null($gutter), 100%, calc(100% - #{$gutter*2}));
+  $margin-left : if(is-null($gutter), #{- addUnit($max-width/2)}, calc(0% - #{addUnit($max-width/2)} - #{addUnit($gutter)}));
+  $left1       : if(is-null($gutter), 50%, calc(50% + #{addUnit($gutter)}));
+  $left2       : if(is-null($gutter), 0, addUnit($gutter));
+  $break       : if(is-null($break), if(is-null($gutter), $max-width, $max-width + $gutter*2), $break);
+
+  position:absolute;
+  width:$width; 
+  max-width:addUnit($max-width); 
+  left:$left1;
+  margin-left:$margin-left;
+  @include ani(left margin-left);
+  @include break($break) { 
+    left:$left2; 
+    margin-left:0;
+  }
+  @content;
+}

data/core/mixins/_sudo-image.scss

@@ -0,0 +1,12 @@
+@mixin sudo-image($image, $size, $sudo:before) {
+  &#{_sudo($sudo)} {
+    content:""; 
+    position:absolute;
+    top:0; left:0; 
+    background:url($image-url + $image) center center / 100% 100% no-repeat; 
+    @include aspect-ratio($size, null); 
+    @include size(100%);
+    @include size($size, max);
+    @content;
+  }
+}

data/core/mixins/_text-shadow.scss

@@ -0,0 +1,30 @@
+/// Text Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [2px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+
+@mixin text-shadow($x: 0px, $y: 0px, $blur: 5px, $color: rgba(0,0,0,0.4)) {
+    @include prefixer(text-shadow, addUnit($x) addUnit($y) addUnit($blur) $color);
+}
+
+
+/// Box Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [2px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+
+@mixin box-shadow($x: 0px, $y: 0px, $blur: 5px, $color: rgba(0,0,0,0.4)) {
+  @include prefixer(box-shadow, addUnit($x) addUnit($y) addUnit($blur) $color);
+}
+
+/// Box Inner Shadow
+/// @param {Size} $x [2px] - X
+/// @param {Size} $y [2px] - Y
+/// @param {Size} $blur [2px] - Blur
+/// @param {Color} $color [rgba(0,0,0,.4)] - Color
+
+@mixin box-inner-shadow($x: 0px, $y: 0px, $blur: 5px, $color: rgba(0,0,0,0.4)) {
+  @include prefixer(box-shadow, inset addUnit($x) addUnit($y) addUnit($blur) $color);
+}

data/core/mixins/_transforms.scss

@@ -0,0 +1,264 @@
+// Transform types
+$transform-types : matrix translate translateX translateY scale scaleX scaleY rotate skew skewX skewY matrix3d translate3d translateZ scale3d scaleZ rotate3d rotateX rotateY rotateZ perspective;
+
+// Transform values
+$transform-values : inherit initial unset none;
+
+/// Transforms mixin that allows various syntax's
+///
+/// @author Mark Notton
+///
+/// @access public
+///
+/// @param {Map} $settings - Each argument should consist of a transform type and it's value
+///
+/// @require {variable} transform-types
+/// @require {variable} transform-values
+/// @require {function} _arglist-to-list
+/// @require {function} contains
+/// @require {function} is-function
+/// @require {function} is-string
+/// @require {mixin} prefixer
+///
+/// @example scss - Usage
+///   Doggy Style Syntax
+///   @include transform(rotate 90, scale 0.8);
+///   Bourbon Syntax
+///   @include transform(rotate(90deg) scale(0.8));
+///   Generic Syntax
+///   @include transform(rotate(90deg), scale(0.8));
+///
+/// @example css - CSS Output
+///    -webkit-transform: rotate(90deg) scale(0.8);
+///    -moz-transform: rotate(90deg) scale(0.8);
+///    transform: rotate(90deg) scale(0.8);
+
+@mixin transform($settings...) {
+
+  $transforms : ();
+  $fallback-settings : ();
+  $important : null;
+
+  @if not contains($transform-values, $settings, true) and length($settings) >= 1 {
+
+    // This is an over-engineered section of code to to allow for all types of syntaxes.
+    // Essestially making it work with Bourbon and other frameworks.
+    @if length($settings) == 1  {
+      @for $i from 1 through length($settings) {
+        @each $setting in nth($settings, $i) {
+          @if is-function($setting) {
+            $fallback-settings : append($fallback-settings, $setting, comma);
+          }
+        }
+      }
+    }
+    $settings-lists : if(length($fallback-settings) > 1, $fallback-settings,  _arglist-to-list($settings));
+
+    @each $settings in $settings-lists {
+
+      @if is-function($settings) {
+        $settings : is-function($settings);
+      }
+
+      $transform : null;
+
+      $value : ();
+
+      // Check for transforms
+      @each $setting in $settings {
+        @if is-string($setting) and contains($transform-types, $setting) {
+          $transform : $setting;
+        }
+      }
+
+      // Check and validate all transform types
+      @each $setting in $settings {
+        @if not is-string($setting) {
+          @if contains($transform, (translate translateY translateX translateZ translate3d perspective)) {
+            // Values that require a unit
+            @each $val in $setting {
+              $value : append($value, addUnit($val), comma);
+            }
+          } @elseif contains($transform, (rotate rotateX rotateY rotateZ skew skewX skewY)) {
+            // Values that require an angle
+            @each $val in $setting {
+              $value : append($value, addUnit($val, deg), comma);
+            }
+          } @else {
+            // All other values
+            $value : append($value, $setting);
+          }
+        } @elseif contains($transform-values, $setting) {
+          // Values that are strings and are global values
+           $value : append($value, $setting);
+        }
+      }
+
+      // Append transform and value to the transforms list
+      @if $transform != null {
+        $transforms : append($transforms, $transform+"("+$value+")");
+      }
+
+    }
+  } @else {
+   $transforms : nth($settings, 1);
+  }
+
+
+  @include prefixer(transform, $transforms, webkit moz, $important);
+
+}
+
+
+/// Transform origin
+@mixin transform-origin($value) {
+
+  $values : ();
+
+  @if length($value) > 1 {
+    @each $val in $value {
+      $values : append($values, addUnit($val));
+    }
+  } @else {
+    $values : addUnit($value);
+  }
+
+  @include prefixer(transform-origin, $values, webkit);
+}
+
+
+@mixin transform-style($value) {
+  @if contains((flat preserve-3d initial inherit), $value) {
+    @include prefixer(transform-style, $value, webkit);
+  } @else {
+    @include warning($value + ": is an invalid value for 'transform-style'");
+  }
+}
+
+/// Matrix
+@mixin matrix($args...) {
+  @include transform(matrix($args));
+}
+
+@mixin matrix3d($args...) {
+  @include transform(matrix3d($args));
+}
+
+
+/// Translate
+@mixin translate($values) {
+  $x : nth($values, 1);
+  $y : if( length($values) > 1, nth($values, 2), 0);
+  @include transform(translate(addUnit($x), addUnit($y)));
+}
+
+@mixin translateX($x) {
+  @include transform(translateX(addUnit($x)));
+}
+
+@mixin translateY($y) {
+  @include transform(translateY(addUnit($y)));
+}
+
+@mixin translate3d($values) {
+  $x : nth($values, 1);
+  $y : if( length($values) > 1, nth($values, 2), 0);
+  $z : if( length($values) > 2, nth($values, 3), 0);
+  @include transform(translate3d($x, $y, $z));
+}
+
+@mixin translateZ($value) {
+  @include transform(translateZ(addUnit($value)));
+}
+
+
+/// Scale
+@mixin scale($values) {
+  $width: nth($values, 1);
+  $height : if(length($values) > 1, nth($values, 2), $width);
+
+
+  @include transform(scale($width, $height));
+}
+
+@mixin scaleX($value) {
+  @include transform(scaleX(strip($value)));
+}
+
+@mixin scaleY($value) {
+  @include transform(scaleY(strip($value)));
+}
+
+@mixin scale3d($values) {
+  $x : strip(nth($values, 1));
+  $y : if( length($values) > 1, strip(nth($values, 2)), 0);
+  $z : if( length($values) > 2, strip(nth($values, 3)), 0);
+  @include transform(scale3d($x, $y, $z));
+}
+
+@mixin scaleZ($value) {
+  @include transform(scaleZ(strip($value)));
+}
+
+
+/// Rotate
+@mixin rotate($value) {
+  @include transform(rotate(addUnit($value, deg)));
+}
+
+@mixin rotateX($value) {
+  @include transform(rotateX(addUnit($value, deg)));
+}
+
+@mixin rotateY($value) {
+  @include transform(rotateY(addUnit($value, deg)));
+}
+
+@mixin rotateZ($value) {
+  @include transform(rotateZ(addUnit($value, deg)));
+}
+
+@mixin rotate3d($values) {
+  $x : strip(nth($values, 1));
+  $y : if( length($values) > 1, strip(nth($values, 2)), 0);
+  $z : if( length($values) > 2, strip(nth($values, 3)), 0);
+  $deg : if( length($values) > 3, addUnit(nth($values, 4), deg), 0);
+  @include transform(rotate3d($x, $y, $z, $deg));
+}
+
+
+/// Skew
+@mixin skew($values) {
+  $x : addUnit(nth($values, 1), deg);
+  $y : addUnit(if( length($values) > 1, nth($values, 2), 0), deg);
+  @include transform(skew($x, $y));
+}
+
+@mixin skewX($value) {
+  @include transform(skewX(addUnit($value, deg)));
+}
+
+@mixin skewY($value) {
+  @include transform(skewY(addUnit($value, deg)));
+}
+
+
+/// Perspective
+@mixin perspective($value:600) {
+  @include prefixer(perspective, addUnit($value), webkit);
+}
+
+@mixin perspective-origin($value:50% 50%) {
+
+  $values : ();
+
+  @if length($value) > 1 {
+    @each $val in $value {
+      $values : append($values, addUnit($val));
+    }
+  } @else {
+    $values : addUnit($value);
+  }
+
+  @include prefixer(perspective-origin, $values, webkit);
+}