doggystyle 0.1.0

data/core/helpers/symbols/_punctuation.scss

@@ -0,0 +1,214 @@
+@charset "UTF-8";
+
+// ‐ Hyphen
+$hyphen: "/2010";
+
+// ‑ Non-breaking Hyphen
+$non-breaking-hyphen: "/2011";
+
+// ‒ Figure Dash
+$figure-dash: "/2012";
+
+// – En Dash
+$en-dash: "/2013";
+
+// — Em Dash
+$em-dash: "/2014";
+
+// ― Horizontal Bar
+$horizontal-bar: "/2015";
+
+// ‖ Double Vertical Line
+$double-vertical-line: "/2016";
+
+// ‗ Double Low Line
+$double-low-line: "/2017";
+
+// ‘ Left Single Quotation Mark
+$left-single-quotation-mark: "/2018";
+
+// ’ Right Single Quotation Mark
+$right-single-quotation-mark: "/2019";
+
+// ‚ Single Low-9 Quotation Mark
+$single-low-9-quotation-mark: "/201A";
+
+// ‛ Single High-reversed-9 Quotation Mark
+$single-high-reversed-9-quotation-mark: "/201B";
+
+// “ Left Double Quotation Mark
+$left-double-quotation-mark: "/201C";
+
+// ” Right Double Quotation Mark
+$right-double-quotation-mark: "/201D";
+
+// „ Double Low-9 Quotation Mark
+$double-low-9-quotation-mark: "/201E";
+
+// ‟ Double High-reversed-9 Quotation Mark
+$double-high-reversed-9-quotation-mark: "/201F";
+
+// † Dagger
+$dagger: "/2020";
+
+// ‡ Double Dagger
+$double-dagger: "/2021";
+
+// • Bullet
+$bullet: "/2022";
+
+// ‣ Triangular Bullet
+$triangular-bullet: "/2023";
+
+// ․ One Dot Leader
+$one-dot-leader: "/2024";
+
+// ‥ Two Dot Leader
+$two-dot-leader: "/2025";
+
+// … Horizontal Ellipsis
+$horizontal-ellipsis: "/2026";
+
+// ‧ Hyphenation Point
+$hyphenation-point: "/2027";
+
+// ‰ Per Mille Sign
+$per-mille-sign: "/2030";
+
+// ‱ Per Ten Thousand Sign
+$per-ten-thousand-sign: "/2031";
+
+// ′ Prime
+$prime: "/2032";
+
+// ″ Double Prime
+$double-prime: "/2033";
+
+// ‴ Triple Prime
+$triple-prime: "/2034";
+
+// ‵ Reversed Prime
+$reversed-prime: "/2035";
+
+// ‶ Reversed Double Prime
+$reversed-double-prime: "/2036";
+
+// ‷ Reversed Triple Prime
+$reversed-triple-prime: "/2037";
+
+// ‸ Caret
+$caret: "/2038";
+
+// ‹ Single Left-pointing Angle Quotation Mark
+$single-left-pointing-angle-quotation-mark: "/2039";
+
+// › Single Right-pointing Angle Quotation Mark
+$single-right-pointing-angle-quotation-mark: "/203A";
+
+// ※ Reference Mark
+$reference-mark: "/203B";
+
+// ‼ Double Exclamation Mark
+$double-exclamation-mark: "/203C";
+
+// ‽ Interrobang
+$interrobang: "/203D";
+
+// ‾ Overline
+$overline: "/203E";
+
+// ‿ Undertie
+$undertie: "/203F";
+
+// ⁀ Character Tie
+$character-tie: "/2040";
+
+// ⁁ Caret Insertion Point
+$caret-insertion-point: "/2041";
+
+// ⁂ Asterism
+$asterism: "/2042";
+
+// ⁃ Hyphen Bullet
+$hyphen-bullet: "/2043";
+
+// ⁄ Fraction Slash
+$fraction-slash: "/2044";
+
+// ⁅ Left Square Bracket With Quill
+$left-square-bracket-with-quill: "/2045";
+
+// ⁆ Right Square Bracket With Quill
+$right-square-bracket-with-quill: "/2046";
+
+// ⁇ Double Question Mark
+$double-question-mark: "/2047";
+
+// ⁈ Question Exclamation Mark
+$question-exclamation-mark: "/2048";
+
+// ⁉ Exclamation Question Mark
+$exclamation-question-mark: "/2049";
+
+// ⁊ Tironian Sign Et
+$tironian-sign-et: "/204A";
+
+// ⁋ Reversed Pilcrow Sign
+$reversed-pilcrow-sign: "/204B";
+
+// ⁌ Black Leftwards Bullet
+$black-leftwards-bullet: "/204C";
+
+// ⁍ Black Rightwards Bullet
+$black-rightwards-bullet: "/204D";
+
+// ⁎ Low Asterisk
+$low-asterisk: "/204E";
+
+// ⁏ Reversed Semicolon
+$reversed-semicolon: "/204F";
+
+// ⁐ Close Up
+$close-up: "/2050";
+
+// ⁑ Two Asterisks Aligned Vertically
+$two-asterisks-aligned-vertically: "/2051";
+
+// ⁒ Commercial Minus Sign
+$commercial-minus-sign: "/2052";
+
+// ⁓ Swung Dash
+$swung-dash: "/2053";
+
+// ⁔ Inverted Undertie
+$inverted-undertie: "/2054";
+
+// ⁕ Flower Punctuation Mark
+$flower-punctuation-mark: "/2055";
+
+// ⁖ Three Dot Punctuation
+$three-dot-punctuation: "/2056";
+
+// ⁗ Quadruple Prime
+$quadruple-prime: "/2057";
+
+// ⁘ Four Dot Punctuation
+$four-dot-punctuation: "/2058";
+
+// ⁙ Five Dot Punctuation
+$five-dot-punctuation: "/2059";
+
+// ⁚ Two Dot Punctuation
+$two-dot-punctuation: "/205A";
+
+// ⁛ Four Dot Mark
+$four-dot-mark: "/205B";
+
+// ⁜ Dotted Cross
+$dotted-cross: "/205C";
+
+// ⁝ Tricolon
+$tricolon: "/205D";
+
+// ⁞ Vertical Four Dots
+$vertical-four-dots: "/205E";

data/core/mixins/_align.scss

@@ -0,0 +1,15 @@
+// Center vertically and horizontally
+@mixin align($axis:null, $width:null, $height:null) {
+  position:absolute;
+  @if ( $axis == vertical or $axis == v) {
+    // Vertical
+    top:50%; height:$height#{px}; margin-top:- $height/2#{px};
+  } @else if ( $axis == horizontal or $axis == h) {
+    // Horizontal
+    left:50%; width:$width#{px}; margin-left:- $width/2#{px};
+  } @else { 
+    // Both
+    @if ($height == null) { $height : $width; }
+    top:50%; left:50%; height:$height#{px}; width:$width#{px}; margin-left:- $width/2#{px}; margin-top:- $height/2#{px};
+  }
+}

data/core/mixins/_animate.scss

@@ -0,0 +1,16 @@
+// Keyframe animation [name, duration, ease, delay, iteration-count, direction, fill]
+
+//@include keyframes(testing) { to { @include rotate(360deg);}}
+//@include animate(testing, 1, linear, null, infinite);
+@mixin animate($name, $duration:0.2, $ease:ease-in-out, $delay:0, $replay:1, $direction:normal, $fill:forwards) {
+  @if ($duration == null) { $duration:0.3;}
+  @if ($ease == null) { $ease:ease-in-out;}
+  @if ($delay == null) { $delay:0;}
+  @if ($replay == null) { $replay:1;}
+  @if ($direction == null) { $direction:normal;}
+  @if ($fill == null) { $fill:forwards;}
+
+  $vendors : "-webkit-", "";
+  $ani: #{$name} #{$duration+"s"} #{$ease} #{$delay+"s"} #{$replay} #{$direction} #{$fill};
+  @each $vendor in $vendors { #{$vendor+"animation"}:$ani; }
+}

data/core/mixins/_aspect-ratio.scss

@@ -0,0 +1,86 @@
+/// A collection of common aspect ratios
+///
+/// @access public
+///
+/// @type number
+
+// Common Aspect Ratios
+$ratio-4-3       : 75%;
+$ratio-16-9      : 56.25%;
+$ratio-16-10     : 62.5%;
+
+// Common Resolution Aspect Ratios
+$ratio-800-600   : $ratio-4-3;
+$ratio-1024-768  : $ratio-4-3;
+$ratio-1152-864  : $ratio-4-3;
+$ratio-1600-1200 : $ratio-4-3;
+
+$ratio-1280-720  : $ratio-16-9;
+$ratio-1360-768  : $ratio-16-9;
+$ratio-1366-768  : $ratio-16-9;
+$ratio-1600-900  : $ratio-16-9;
+$ratio-1920-1080 : $ratio-16-9;
+$ratio-2560-1440 : $ratio-16-9;
+$ratio-3840-2160 : $ratio-16-9;
+$ratio-7680-4320 : $ratio-16-9;
+
+$ratio-1280-800  : $ratio-16-10;
+$ratio-1440-900  : $ratio-16-10;
+$ratio-1680-1050 : $ratio-16-10;
+$ratio-1920-1200 : $ratio-16-10;
+$ratio-2560-1600 : $ratio-16-10;
+
+$ratio-2k        : $ratio-1920-1080;
+$ratio-4k        : $ratio-3840-2160;
+$ratio-8k        : $ratio-7680-4320;
+
+
+/// Create a pseudo element which will retain a parent elements' aspect ratio responsively. 
+///
+/// @author Mark Notton
+///
+/// @access public
+///
+/// @param {number | list} $ratio - Use a predefined variable, directly enter a percentage, or pass in one or two numbers to be calculated.
+///
+/// @param {string} $sudo - Set the type of pseudo to use. Defaults to "before".
+///
+/// @require {function} sudo
+/// @require {function} _unit-fallback
+/// @require {function} first
+/// @require {function} second
+/// @require {function} is-percentage
+///
+/// @example scss - Usage
+/// .foo { 
+///   @include aspect-ratio($ratio-16-9);
+/// }
+///
+/// .bar { 
+///   @include aspect-ratio(2 1, after);
+/// }
+///
+/// @example css - CSS output
+/// .foo:before {
+///   content: "";
+///   display: block;
+///   padding-top: 56.25%;
+/// }
+///
+/// .bar:after {
+///   content: "";
+///   display: block;
+///   padding-top: 50%;
+/// }
+
+@mixin aspect-ratio($ratio:1, $sudo:before) {
+
+  $width  : check(first($ratio), 1); 
+  $height : check(second($ratio), first($ratio));
+
+  &#{_sudo($sudo)} { 
+    content:"";
+    display:block;
+    padding-top: if(is-percentage($width), $width, percentage($height / $width)); 
+  }
+}

data/core/mixins/_backface-visibility.scss

@@ -0,0 +1,7 @@
+@mixin backface-visibility($value) {
+  @if contains((visible hidden initial inherit), $value) {
+    @include prefixer(transform-style, $value, webkit);
+  } @else {
+    @include warning($value + ": is an invalid value for 'backface-visibility'");
+  }
+}

data/core/mixins/_background-image.scss

@@ -0,0 +1,13 @@
+// Add a background image
+@mixin background-image($img, $bg-colour:null, $width:null, $height:null, $y:center, $x:center, $repeat:no-repeat ) {
+  $y : if(number-check($y), $y#{px}, $y);
+  $x : if(number-check($x), $x#{px}, $x);
+  // Use image width if not supplied. 
+  $width: if($width == null, image-width($img), if(number-check($width), $width#{px}, $width));
+  // Use image height if not supplied. 
+  $height: if($height == null, image-height($img), if(number-check($height), $height#{px}, $height));
+  // Now reset the img variable but include the directory path if it exists. If it doesn't use the compass/sass default path. 
+  $img: if(not $image-url, image-url($image-url + $img), url($image-url + $img));
+
+  background:$bg-colour $img $x $y #{"/"} $width $height $repeat;
+}

data/core/mixins/_blend.scss

@@ -0,0 +1,10 @@
+@mixin blendy($img, $color: null, $grad: null, $blend: multiply) {
+  $img-path: url('#{$img}');
+  @if $grad {
+    background: $grad, $img-path;
+  } @else {
+    background-image: $img-path;
+    background-color: $color;
+  }
+  background-blend-mode: $blend;
+}

data/core/mixins/_blendmodes.scss

@@ -0,0 +1,24 @@
+$blend-modes : (initial inherit unset screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity normal);
+
+
+// Blend Background
+@mixin blend-background($mode) {
+
+  $blends : ();
+
+  @each $blend in $mode {
+    $blends : append($blends, $blend, comma);
+  }
+  
+  @if contains($blend-modes, $blends) {
+    @include prefixer(background-blend-mode, $blends, moz webkit);
+  }
+}
+
+
+// Blend Mix
+@mixin blend-mix($blend) {
+  @if contains($blend-modes, $blend) {
+    @include prefixer(mix-blend-mode, $blend, moz webkit);
+  }
+}

data/core/mixins/_border-radius.scss

@@ -0,0 +1,105 @@
+/// 10px on each corner. Call also use the string "all"
+/// @include border-radius(10) 
+/// @include border-radius(all 10) 
+
+/// 10 top left, 20 top right, 0 bottom right, 0 bottom left
+/// @include border-radius(10 20) 
+
+/// 10 top left, 20 top right, 30 bottom right, 0 bottom left
+/// @include border-radius(10 20 30) 
+
+/// 10 top left, 20 top right, 30 bottom right, 40 bottom left
+/// @include border-radius(10 20 30 40) 
+
+/// 10 top left, 10 top right, 0 bottom right, 0 bottom left
+/// @include border-radius(10 top) 
+
+/// 0 top left, 10 top right, 10 bottom right, 0 bottom left
+/// @include border-radius(10 right) 
+
+/// 0 top left, 0 top right, 10 bottom right, 10 bottom left
+/// @include border-radius(10 bottom) 
+
+/// 10 top left, 0 top right, 0 bottom right, 10 bottom left
+/// @include border-radius(10 left) 
+
+/// 10 top left, 0 top right, 30 bottom right, 0 bottom left
+/// @include border-radius(10 top-left, 30 bottom-right) 
+
+@mixin border-radius($args...) {
+  $corners : ();
+  $directions : ();
+  $excess-units : 0;
+
+  $args: if(length($args) > 0, $args, null);
+
+  @for $i from 1 through length($args) {    
+
+    @each $rad in nth($args, $i) {
+      @if type-of($rad) == number and length($corners) < 4 {
+        $corners : append($corners, $rad);
+      } @elseif type-of($rad) == number and length($corners) == 4 {
+        $excess-units : $excess-units + 1;
+      }
+    }
+    @each $dir in nth($args, $i) {
+      @if type-of($dir) == string {
+        @if $dir == circle {
+          $corners : 100%;
+        } @else {
+          $directions : append($directions, $dir);
+        }
+      }
+    }
+  }
+  
+  @if $excess-units > 0 {
+    @include warning("You can't have more than 4 units per argument. You have added '#{$excess-units}' number"+ if($excess-units != 1, 's', '') +" too many. Squares don't work that way.");
+  }
+  
+  $corners : if(length($corners) == 0, $border-radius, $corners);
+  $corner-count : length($corners);
+  
+  @if length($directions) == 0 {
+    $directions : if($corner-count == 1, all, slice((top-left top-right bottom-right bottom-left), 1, $corner-count));
+  }
+
+  $direction-count : length($directions);
+
+  @for $i from 1 through $direction-count {    
+    $direction : nth($directions, $i);
+    $radius : 0;
+    @if $corner-count == $direction-count {
+      $radius: nth($corners, $i);
+    } @else {
+      @if $corner-count > $direction-count and $i == $direction-count { 
+        $radius: nth($corners, $i);
+        @include warning('You have entered more units than directions. Reverting back to the first numbers you entered');
+      } @else {
+        $radius: nth($corners, 1);
+      }
+    }
+
+    @if $direction == all { 
+      @include prefixer(border-radius, addUnit($radius));
+    }
+    @elseif $direction == top {
+      @include prefixer(border-top-left-radius border-top-right-radius, addUnit($radius));
+    }
+    @elseif $direction == right {
+      @include prefixer(border-top-right-radius border-bottom-right-radius, addUnit($radius));
+    }
+    @elseif $direction == bottom {
+      @include prefixer(border-bottom-left-radius border-bottom-right-radius, addUnit($radius));
+    }
+    @elseif $direction == left {
+      @include prefixer(border-top-left-radius border-bottom-left-radius, addUnit($radius));      
+    }
+    @else {
+      @include prefixer(border-#{$direction}-radius, addUnit($radius));
+    }
+  }
+}
+
+/// @alias transition
+@mixin radius($settings...) { @include border-radius($settings...); }