Cleanup SCSS

_assets/css/_mixins.scss

@@ -1,376 +1,111 @@
 /* ==========================================================================
-   Utility mixins
+   MIXINS
    ========================================================================== */
 
-/*
-   Clearfix
-   For clearing floats like a boss h5bp.com/q
-   ========================================================================== */
-
-@mixin clearfix {
-  *zoom: 1;
-  &:before,
-  &:after {
-    display: table;
-    content: "";
-    /* Fixes Opera/contenteditable bug: */
-    /* http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 */
-    line-height: 0;
-  }
-  &:after {
-    clear: both;
-  }
-}
-
-/*
-   Webkit-style focus
-   ========================================================================== */
-
-@mixin tab-focus() {
-  /* Default */
-  outline: thin dotted #333;
-  /* Webkit */
-  outline: 5px auto -webkit-focus-ring-color;
+%tab-focus {
+  // Default
+  outline: thin dotted $warning-color;
+  // Webkit
+  outline: 5px auto $warning-color;
   outline-offset: -2px;
 }
 
 /*
-   Center-align a block level element
+   em function
    ========================================================================== */
 
-@mixin center-block() {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
+@function em($target, $context: $doc-font-size) {
+  @return ($target / $context) * 1em;
 }
 
-/* ==========================================================================
-   Typography related mixins
-   ========================================================================== */
-
-/*
-   Maintains vertical rhythm by setting a font-sizes proportional to
-   line-height and bottom margin
-   example: @font-size(16);
-   ========================================================================== */
-
-@mixin font-size($size) {
-  font-size: 0px + $size;
-  font-size: 0rem + $size / $doc-font-size;
-  line-height: 0 + round($doc-line-height / $size*10000) / 10000;
-  margin-bottom: 0px + $doc-line-height;
-  margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
-}
-
-/*
-   Just font-size (REMs + pixel fallback)
-   example: @include font-rem(16);
-   ========================================================================== */
-
-@mixin font-rem($size) {
-  font-size: 0px + $size;
-  font-size: 0rem + $size / $doc-font-size;
-}
-
-/*
-   Just font-size (REMs + pixel fallback) and line-height
-   @include font(16);
-   ========================================================================== */
-
-@mixin font($size) {
-  font-size: 0px + $size;
-  font-size: 0rem + $size / $doc-font-size;
-  line-height: 0 + round($doc-line-height / $size*10000) / 10000;
-}
-
-/*
-   Hide text overflow and end with ...
-   ========================================================================== */
-
-@mixin text-overflow() {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Indentation variable */
-
-$indent-var: 0rem + ($doc-line-height / $doc-font-size);
-
-/* ==========================================================================
-   Gradient mixins
-   ========================================================================== */
-
-@mixin horizontal($startColor : $white, $endColor : $lightergrey) {
-  background-color: $endColor;
-  background-image  : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
-  background-image  : -webkit-linear-gradient(left, $startColor, $endColor);           // Safari 5.1+, Chrome 10+
-  background-image  : -moz-linear-gradient(left, $startColor, $endColor);            // FF 3.6+
-  background-image  : -ms-linear-gradient(left, $startColor, $endColor);             // IE10
-  background-image  : -o-linear-gradient(left, $startColor, $endColor);              // Opera 11.10
-  background-image  : linear-gradient(left, $startColor, $endColor);               // W3C
-  background-repeat : repeat-x;
- }
-
-@mixin vertical($startColor : $white, $endColor:  $lightergrey) {
-  background-image  : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
-  background-image  : -webkit-linear-gradient(top, $startColor, $endColor);            // Safari 5.1+, Chrome 10+
-  background-color  : $endColor;
-  background-image  : -moz-linear-gradient(top, $startColor, $endColor);             // FF 3.6+
-  background-image  : -ms-linear-gradient(top, $startColor, $endColor);              // IE10
-  background-image  : -o-linear-gradient(top, $startColor, $endColor);             // Opera 11.10
-  background-image  : linear-gradient(top, $startColor, $endColor);                // W3C
-  background-repeat : repeat-x;
-}
-
-@mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
-  background-color  : $endColor;
-  background-image  : -moz-linear-gradient($deg, $startColor, $endColor);           // FF 3.6+
-  background-image  : -ms-linear-gradient($deg, $startColor, $endColor);            // IE10
-  background-image  : -webkit-linear-gradient($deg, $startColor, $endColor);          // Safari 5.1+, Chrome 10+
-  background-image  : -o-linear-gradient($deg, $startColor, $endColor);             // Opera 11.10
-  background-image  : linear-gradient($deg, $startColor, $endColor);              // W3C
-  background-repeat : repeat-x;
-}
-
-// .bordered(COLOR, COLOR, COLOR, COLOR);
-@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
-  border-top : solid 1px $top-color;
-  border-left : solid 1px $left-color;
-  border-right : solid 1px $right-color;
-  border-bottom : solid 1px $bottom-color;
-}
-
-/* ==========================================================================
-   Rounded corners
-   ========================================================================== */
-
-
 
 /*
-   Round all corners
-   example: @include rounded(4px);
+   Bourbon clearfix
    ========================================================================== */
 
-@mixin rounded($radius:4px) {
-  border-radius : $radius;
+// Provides an easy way to include a clearfix for containing floats.
+//
+// @link http://cssmojo.com/latest_new_clearfix_so_far/
+//
+// @example scss - Usage
+//   .element {
+//     @include clearfix;
+//   }
+//
+// @example css - CSS Output
+//   .element::after {
+//     clear: both;
+//     content: "";
+//     display: table;
+//   }
+
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
 }
 
+
 /*
-   Round individual corners (top right, bottom right, bottom left, top left)
-   example: @include border-radius(4px, 0, 0, 4px);
+   Grid
    ========================================================================== */
 
-@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
-  border-top-right-radius: $topright;
-  border-bottom-right-radius: $bottomright;
-  border-bottom-left-radius: $bottomleft;
-  border-top-left-radius: $topleft;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
+@mixin container() {
+  margin: 0 auto;
+  width: $width;
 }
 
-/*
-   Box shadow
-   example: @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR));
-   ========================================================================== */
+// Works out the width of elements based on total number of columns and width
+// number of columns being displayed. Removes 20px for margins.
 
-@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
-  -webkit-box-shadow: $shadow;
-  -moz-box-shadow: $shadow;
-  box-shadow: $shadow;
+@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline) {
+  display: $display;
+  float: $float;
+  width: (100%/$grid * $cols) - ($margin * 2);
 }
 
-/*
-   Drop shadow
-   example: @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
-   ========================================================================== */
+// Add x amount of column padding before an element
+// Example: @include prefix(1,12);
 
-@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
-  -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-  -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-  box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+@mixin prefix($grid:$def_grid,$cols:'') {
+  margin-left: (100%/$grid * $cols);
 }
 
-/*
-   Text shadow
-   example: @include text-shadow(0 2px 3px rgba(0,0,0,.25));
-   ========================================================================== */
+// Add x amount of column padding after an element
+// Example: @include suffix(2,12);
 
-@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
-text-shadow: $shadow; }
-
-/*
-   Opacity
-   example: @include opacity(0.5); // 50% opacity
-   ========================================================================== */
-
-@mixin opacity($opacity: 0.5) {
-  opacity: $opacity;
+@mixin suffix($grid:$def_grid,$cols:'') {
+  margin-right: (100%/$grid * $cols);
 }
 
-/* ==========================================================================
-   Transformations
-   ========================================================================== */
+// Remove left margin
+// Example: @include first;
 
-/*
-   @include rotate(VALUEdeg);
-   ========================================================================== */
-
-@mixin rotate($deg) {
-  -webkit-transform: rotate($deg);
-  -moz-transform: rotate($deg);
-  -ms-transform: rotate($deg);
-  -o-transform: rotate($deg);
-  transform: rotate($deg);
+@mixin first() {
+  margin-left: 0;
 }
 
-/*
-   @include scale(VALUE);
-   ========================================================================== */
+// Remove right margin
+// Example: @include last;
 
-@mixin scale($ratio) {
-  -webkit-transform: scale($ratio);
-  -moz-transform: scale($ratio);
-  -ms-transform: scale($ratio);
-  -o-transform: scale($ratio);
-  transform: scale($ratio);
+@mixin last() {
+  margin-right: 0;
 }
 
-/*
-   @include skew(VALUE, VALUE);
-   ========================================================================== */
+// Push an element x amount of column(s) to the right
+// Example: @include push(2,12);
 
-@mixin skew($x: 0, $y: 0) {
-  -webkit-transform: skew($x, $y);
-  -moz-transform: skew($x, $y);
-  -ms-transform: skew($x, $y);
-  -o-transform: skew($x, $y);
-  transform: skew($x, $y);
+@mixin push($grid:$def_grid,$move:'') {
+  position: relative;
+  left: (100%/$grid * $move);
 }
 
-/*
-   @include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
-   ========================================================================== */
+// Pull an element x amount of column(s) to the left
+// Example: @include pull(1,12);
 
-@mixin transition($transition) {
-  -webkit-transition: $transition;
-  -moz-transition: $transition;
-  -ms-transition: $transition;
-  -o-transition: $transition;
-  transition: $transition;
+@mixin pull($grid:$def_grid,$move:'') {
+  position: relative;
+  left: (100%/$grid * $move) * -1;
 }
-
-/*
-   @include translate(VALUE, VALUE);
-   ========================================================================== */
-
-@mixin translate($x: 0, $y: 0) {
-  -webkit-transform: translate($x, $y);
-  -moz-transform: translate($x, $y);
-  -ms-transform: translate($x, $y);
-  -o-transform: translate($x, $y);
-  transform: translate($x, $y);
-}
-
-@mixin translate3d($x: 0, $y: 0, $z: 0) {
-  -webkit-transform: translate($x, $y, $z);
-  -moz-transform: translate($x, $y, $z);
-  -ms-transform: translate($x, $y, $z);
-  -o-transform: translate($x, $y, $z);
-  transform: translate($x, $y, $z);
-}
-
-@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
-  -webkit-animation: $name $duration $delay $ease;
-  -moz-animation:    $name $duration $delay $ease;
-  -ms-animation:     $name $duration $delay $ease;
-}
-
-/* ==========================================================================
-   Background
-   ========================================================================== */
-
-/*
-   @include background-alpha(VALUE VALUE);
-   ========================================================================== */
-
-@mixin background-alpha($color: $white, $alpha: 1) {
-  background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
-}
-
-/*
-   @include background-size(VALUE VALUE);
-   ========================================================================== */
-
-@mixin background-size($size){
-  -webkit-background-size: $size;
-  -moz-background-size: $size;
-  -o-background-size: $size;
-  background-size: $size;
-}
-
-/*
-   Box-sizing
-   example: @include box-sizing(VALUE); //(border-box, padding-box, content-box)
-   ========================================================================== */
-
-@mixin box-sizing($boxsize: border-box) {
-  -webkit-box-sizing: $boxsize;
-  -moz-box-sizing: $boxsize;
-  -ms-box-sizing: $boxsize;
-  box-sizing: $boxsize;
-}
-
-/* ==========================================================================
-   Image replacement
-   ========================================================================== */
-
-@mixin hide-text() {
-  text-indent: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-/*
-   Hide from visual and speaking browsers
-   ========================================================================== */
-
-@mixin hidden {
-  display: none;
-  visibility: hidden;
-}
-
-/*
-   Hide but maintain layout
-   ========================================================================== */
-
-@mixin invisible() {
-  visibility: hidden;
-}
-
-/*
-   Resize
-   example: @include resize(VALUE); //(none, both, horizontal, vertical, inherit)
-
-   ========================================================================== */
-
-@mixin resize($direction: both) {
-  resize: $direction;
-  overflow: auto;
-}
-
-/*
-   Hidden but available to speaking browsers
-   ========================================================================== */
-
-@mixin visuallyhidden() {
-overflow: hidden;
-position: absolute;
-clip: rect(0 0 0 0);
-height: 1px;
-width: 1px;
-margin: -1px;
-padding: 0;
-border: 0; }