From 1029df7b66317117752aebf718ff0d24d00a8242 Mon Sep 17 00:00:00 2001
From: Ramon Lapenta <ramon@cyber-duck.co.uk>
Date: Mon, 3 Aug 2015 14:23:36 +0100
Subject: [PATCH] Fix formatting Start new changes

---
 scss/_mixins.scss      | 84 +++++++++++++++++++++++-----------------
 scss/_vars.scss        | 57 ++++++++++++++-------------
 scss/_version.scss     |  2 +-
 scss/ie.scss           | 42 ++++++++++----------
 scss/large/_base.scss  | 66 +++++++++++++++----------------
 scss/large/_xl.scss    | 56 +++++++++++++--------------
 scss/medium/_base.scss | 88 +++++++++++++++++++++---------------------
 scss/responsive.scss   |  6 +--
 scss/small/_base.scss  | 70 ++++++++++++++++-----------------
 scss/style.scss        |  4 +-
 10 files changed, 243 insertions(+), 232 deletions(-)

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 6d75b66..13e9906 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -15,7 +15,7 @@
 // * @include box-shadow(2px 2px 2px 2px rgba(0,0,0,0.2));
 // *
 @mixin box-shadow($value: 0 0 4px 0 rgba(0, 0, 0, .5)) {
-  @include prefixer(box-shadow, $value, webkit);
+    @include prefixer(box-shadow, $value, webkit);
 }
 
 
@@ -27,12 +27,12 @@
 // * @include gradients(#FF0, #F00);
 // *
 @mixin gradients($first, $second) {
-  background-color: $first;
-  background-image: -o-linear-gradient(top, $first 0%, $second 100%);
-  background-image: -ms-linear-gradient(top, $first 0%, $second 100%);
-  background-image: -moz-linear-gradient(top, $first, $second);
-  background-image: -webkit-gradient(linear, left top, left bottom, from($first), to($second));
-  background-image: linear-gradient(top, $first 0%, $second 100%);
+    background-color: $first;
+    background-image: -o-linear-gradient(top, $first 0%, $second 100%);
+    background-image: -ms-linear-gradient(top, $first 0%, $second 100%);
+    background-image: -moz-linear-gradient(top, $first, $second);
+    background-image: -webkit-gradient(linear, left top, left bottom, from($first), to($second));
+    background-image: linear-gradient(top, $first 0%, $second 100%);
 }
 
 
@@ -43,7 +43,7 @@
 // * @include box-sizing;
 // *
 @mixin box-sizing($type: border-box) {
-  @include prefixer(box-sizing, $type, moz webkit);
+    @include prefixer(box-sizing, $type, moz webkit);
 }
 
 
@@ -55,11 +55,11 @@
 // * @include opacity(0.7, true);
 // *
 @mixin opacity($opac, $ie: false) {
-  @if $ie {
-    filter: alpha(opacity=$opac * 100);
-    -ms-filter: alpha(opacity=$opac * 100);
-  }
-  opacity: $opac;
+    @if $ie {
+        filter: alpha(opacity=$opac * 100);
+        -ms-filter: alpha(opacity=$opac * 100);
+    }
+    opacity: $opac;
 }
 
 
@@ -70,7 +70,7 @@
 // * @include transition(height 200ms ease-out);
 // *
 @mixin transition($value: .15s) {
-  @include prefixer(transition, $value, webkit);
+    @include prefixer(transition, $value, webkit);
 }
 
 
@@ -82,11 +82,23 @@
 // * @include rotate(45deg);
 // *
 @mixin rotate($deg, $orig: 50% 50%) {
-  @include prefixer(transform, rotate(#{$deg}), webkit ms);
-  @if $orig != 50% and $orig != (50% 50%) 
-  and $orig != center and $orig != (center center) {
-    @include prefixer(transform-origin, $orig, webkit ms);
-  }
+    @include prefixer(transform, rotate(#{$deg}), webkit ms);
+    @if $orig != 50% and $orig != (50% 50%) 
+    and $orig != center and $orig != (center center) {
+        @include prefixer(transform-origin, $orig, webkit ms);
+    }
+}
+
+
+
+// * Translate 
+// * @param $hdist ($distance);
+// * @param $vdist ($distance);
+// *
+// * @include translate(20px, 20px);
+// *
+@mixin translate($hdist: 0, $vdist: 0) {
+    @include prefixer(transform, translate(#{$hdist}, #{$vdist}), webkit ms);
 }
 
 
@@ -97,7 +109,7 @@
 // * @include animation(myanimation 2s 3);
 // *
 @mixin animation($options) {
-  @include prefixer(animation, $options);
+    @include prefixer(animation, $options);
 }
 
 
@@ -108,17 +120,17 @@
 // * @include placeholder(#999);
 // *
 @mixin placeholder($color) {
-  &::-webkit-input-placeholder {
-    color: $color;
-  }
+    &::-webkit-input-placeholder {
+        color: $color;
+    }
 
-  &::-moz-placeholder {
-    color: $color; 
-  }
+    &::-moz-placeholder {
+        color: $color; 
+    }
 
-  &::-ms-input-placeholder {
-    color: $color;
-  }
+    &::-ms-input-placeholder {
+        color: $color;
+    }
 }
 
 
@@ -127,8 +139,8 @@
 // * @include noselect;
 // *
 @mixin noselect {
-  -webkit-touch-callout: none;
-  @include prefixer(user-select, none, webkit ms);
+    -webkit-touch-callout: none;
+    @include prefixer(user-select, none, webkit ms);
 }
 
 
@@ -140,7 +152,7 @@
 // *
 // * This mixin is deprecated, will be removed in future versions
 @mixin radius($radius) { 
-  @include prefixer(border-radius, $radius);
+    @include prefixer(border-radius, $radius);
 } 
 
 
@@ -153,8 +165,8 @@
 // * @include prefixer(animation, $options);
 // *
 @mixin prefixer($property, $value, $prefixes: webkit moz ms o) {
-  @each $prefix in $prefixes {
-    #{'-' + $prefix + '-' + $property}: #{$value};
-  }
-  #{$property}: #{$value};
+    @each $prefix in $prefixes {
+        #{'-' + $prefix + '-' + $property}: #{$value};
+    }
+    #{$property}: #{$value};
 }
diff --git a/scss/_vars.scss b/scss/_vars.scss
index 970340a..712342e 100644
--- a/scss/_vars.scss
+++ b/scss/_vars.scss
@@ -1,47 +1,46 @@
 // Colours
-$highlight:				#fa9200;
+$highlight:                     #fa9200;
 
-$error:             	#f00;
-$error-bg: 		    	#ffe5e5;
+$error:                         #f00;
+$error-bg:                      #ffe5e5;
 
-$success: 		    	#390;
-$success-bg: 	    	#eaf5e5;
+$success:                       #390;
+$success-bg:                    #eaf5e5;
 
-$info: 			    	#39f;
-$info-bg: 		    	#eaf5ff;
+$info:                          #39f;
+$info-bg:                       #eaf5ff;
 
-$warning: 				#ff0;
-$warning-bg: 			#ffffe5;
-
-$black:             	#000;
-$white:             	#fff;
-$text:              	#000;
-$title:					#000;
+$warning:                       #ff0;
+$warning-bg:                    #ffffe5;
 
+$black:                         #000;
+$white:                         #fff;
+$text:                          #000;
+$title:                         #000;
 
 // Grid
-$col-qty:				12;
-$col-width: 			60px;
-$gutter:				20px;
+$col-qty:                       12;
+$col-width:                     60px;
+$gutter:                        20px;
 
 // Large desktop grid
-$xl-col-width: 			70px;
-$xl-gutter:				30px;
+$xl-col-width:                  70px;
+$xl-gutter:                     30px;
 
 
 // Breakpoints
-$breakpoint-xl: 		1360px;
-$breakpoint-large: 		1024px;
-$breakpoint-medium: 	680px;
-$breakpoint-small: 		120px;
+$breakpoint-xl:                 1360px;
+$breakpoint-large:              1024px;
+$breakpoint-medium:             680px;
+$breakpoint-small:              120px;
 
 
 // Paths
-$img: 		    		'../img/';
-$sprite: 		    	'../img/sprite.png';
-$fonts: 		    	'../fonts/';
+$img:                           '../img/';
+$sprite:                        '../img/sprite.png';
+$fonts:                         '../fonts/';
 
-	
+    
 // Typography
-$body-font: 			sans-serif;
-$title-font: 			serif;
+$body-font:                     sans-serif;
+$title-font:                    serif;
diff --git a/scss/_version.scss b/scss/_version.scss
index 2f887c0..5cda62e 100644
--- a/scss/_version.scss
+++ b/scss/_version.scss
@@ -6,4 +6,4 @@
 // * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,
 // *             Ramon Lapenta <me@ramonlapenta.com>
 // *
-// *
+// *
\ No newline at end of file
diff --git a/scss/ie.scss b/scss/ie.scss
index e1cc969..9114c4d 100644
--- a/scss/ie.scss
+++ b/scss/ie.scss
@@ -12,57 +12,57 @@ header,
 hgroup, 
 nav, 
 section { 
-  display: block; 
+    display: block; 
 }
 
 $wrap: $col-width * $col-qty + $gutter * ($col-qty - 1);
 
 .container {
-  margin: 0 auto;
-  width: $wrap + $gutter;
+    margin: 0 auto;
+    width: $wrap + $gutter;
 }
 
 @for $i from 2 through $col-qty {
-  .col#{$i} {
-    float: left;
-    margin: 0 $gutter/2;
-    width: ($col-width * $i) + ($gutter * $i) - $gutter;
-  }
+    .col#{$i} {
+        float: left;
+        margin: 0 $gutter/2;
+        width: ($col-width * $i) + ($gutter * $i) - $gutter;
+    }
 }
 
 @for $i from 1 through ($col-qty - 1) {
-  .pre#{$i} {
-    padding-left: ($col-width * $i) + ($gutter * $i);
-  }
+    .pre#{$i} {
+        padding-left: ($col-width * $i) + ($gutter * $i);
+    }
 }
 
 @for $i from 1 through ($col-qty - 1) {
-  .suf#{$i} {
-    padding-right: ($col-width * $i) + ($gutter * $i);
-  }
+    .suf#{$i} {
+        padding-right: ($col-width * $i) + ($gutter * $i);
+    }
 }
 
 // Grid utilities
 .colr {
-  float: right;
-  margin: 0 $gutter/2;
+    float: right;
+    margin: 0 $gutter/2;
 }
 
 .alpha {
-  margin-left: 0;
+    margin-left: 0;
 }
 
 .omega {
-  margin-right: 0;
+    margin-right: 0;
 }
 
 .clear {
-  clear: both;
+    clear: both;
 }
 
 .center {
-  float: none;
-  margin: 0 auto;
+    float: none;
+    margin: 0 auto;
 }
 
 // * Import all sections and common files from desk folder
diff --git a/scss/large/_base.scss b/scss/large/_base.scss
index 2f105bc..072288a 100644
--- a/scss/large/_base.scss
+++ b/scss/large/_base.scss
@@ -10,35 +10,35 @@
 $wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);
 
 .container {
-  margin: 0 auto;
-  width: $wrap + $gutter;
+    margin: 0 auto;
+    width: $wrap + $gutter;
 
-  &:after {
-    clear: both;
-    content: '';
-    display: block;
-  }
+    &:after {
+        clear: both;
+        content: '';
+        display: block;
+    }
 }
 
 // * Loop through the cols to generate size of nested containers
 @for $i from 2 through $col-qty {
-    .col#{$i} > .container {
-        margin: 0 0 0 -#{$gutter/2};
-        width: ($col-width * $i) + ($gutter * $i);
-    }
+        .col#{$i} > .container {
+                margin: 0 0 0 -#{$gutter/2};
+                width: ($col-width * $i) + ($gutter * $i);
+        }
 }
 
 // * Empty declaration as a base for all spans common styles
 %base-col {
-  float: left;
-  margin: 0 $gutter/2;
+    float: left;
+    margin: 0 $gutter/2;
 }
 
 // * Mixin to loop through spans using the empty declaration
 @mixin cols {
-  @for $i from 1 through $col-qty {
-    .col#{$i} { @extend %base-col; }
-  }
+    @for $i from 1 through $col-qty {
+        .col#{$i} { @extend %base-col; }
+    }
 }
 
 // * Output all the spans common styles
@@ -46,21 +46,21 @@ $wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);
 
 // * Loop to generate each span 
 @for $i from 2 through $col-qty {
-  .col#{$i} {
-    width: ($col-width * $i) + ($gutter * $i) - $gutter;
-  }
+    .col#{$i} {
+        width: ($col-width * $i) + ($gutter * $i) - $gutter;
+    }
 }
 
 @for $i from 1 through ($col-qty - 2) {
-  .pre#{$i} {
-    margin-left: ($col-width * $i) + ($gutter * $i) + ($gutter / 2);
-  }
+    .pre#{$i} {
+        margin-left: ($col-width * $i) + ($gutter * $i) + ($gutter / 2);
+    }
 }
 
 @for $i from 1 through ($col-qty - 2) {
-  .suf#{$i} {
-    margin-right: ($col-width * $i) + ($gutter * $i);
-  }
+    .suf#{$i} {
+        margin-right: ($col-width * $i) + ($gutter * $i);
+    }
 }
 
 // *
@@ -69,29 +69,29 @@ $wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);
 
 // * Force float a span to the right
 .colr {
-  float: right;
-  margin: 0 $gutter/2;
+    float: right;
+    margin: 0 $gutter/2;
 }
 
 // * Remove left margin from span
 .alpha {
-  margin-left: 0;
+    margin-left: 0;
 }
 
 // * Remove right margin from span
 .omega {
-  margin-right: 0;
+    margin-right: 0;
 }
 
 // * Clear helper
 .clear {
-  clear: both;
+    clear: both;
 }
 
 // * center span in container
 .center {
-  float: none;
-  margin: 0 auto;
+    float: none;
+    margin: 0 auto;
 }
 
 
@@ -103,6 +103,6 @@ $wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);
 // * Extra large screens
 @media (min-width: $breakpoint-xl) {
 
-  @import 'xl';
+    @import 'xl';
 
 }
diff --git a/scss/large/_xl.scss b/scss/large/_xl.scss
index 01ffb66..144abcd 100644
--- a/scss/large/_xl.scss
+++ b/scss/large/_xl.scss
@@ -6,14 +6,14 @@ $wrap: $xl-col-width * 12 + $xl-gutter * 11;
 
 // * Generate a common style for all spans
 %base-xl-col {
-  float: left;
-  margin: 0 $xl-gutter/2;
+    float: left;
+    margin: 0 $xl-gutter/2;
 }
 
 @mixin cols {
-  @for $i from 1 to $col-qty - 1 {
-    .col#{$i} { @extend %base-xl-col; }
-  }
+    @for $i from 1 to $col-qty - 1 {
+        .col#{$i} { @extend %base-xl-col; }
+    }
 }
 
 // * Output the common span styles
@@ -21,58 +21,58 @@ $wrap: $xl-col-width * 12 + $xl-gutter * 11;
 
 // Define widths for each span
 .col#{$col-qty} {
-  margin: 0 $xl-gutter/2; // Full width, doesn't need float
-  width: ($xl-col-width * $col-qty) + ($xl-gutter * $col-qty) - $xl-gutter;
+    margin: 0 $xl-gutter/2; // Full width, doesn't need float
+    width: ($xl-col-width * $col-qty) + ($xl-gutter * $col-qty) - $xl-gutter;
 }
 
 @for $i from 2 to $col-qty {
-  .col#{$i} {
-    width: $xl-col-width * $i + $xl-gutter * $i - $xl-gutter;
-  }
+    .col#{$i} {
+        width: $xl-col-width * $i + $xl-gutter * $i - $xl-gutter;
+    }
 }
 
 @for $i from 1 through 10 {
-  .pre#{$i} {
-    margin-left: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);
-  }
+    .pre#{$i} {
+        margin-left: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);
+    }
 }
 
 @for $i from 1 through 10 {
-  .suf#{$i} {
-    margin-right: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);
-  }
+    .suf#{$i} {
+        margin-right: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);
+    }
 }
 
 .container {
-  width: $wrap + $xl-gutter;
+    width: $wrap + $xl-gutter;
 }
 
 @for $i from 2 through $col-qty {
-    .col#{$i} > .container {
-        margin: 0 0 0 -#{$xl-gutter/2};
-        width: ($xl-col-width * $i) + ($xl-gutter * $i);
-    }
+        .col#{$i} > .container {
+                margin: 0 0 0 -#{$xl-gutter/2};
+                width: ($xl-col-width * $i) + ($xl-gutter * $i);
+        }
 }
 
 // * Grid utilities
 .colr {
-  float: right;
-  margin: 0 $xl-gutter/2;
+    float: right;
+    margin: 0 $xl-gutter/2;
 }
 
 .alpha {
-  margin-left: 0;
+    margin-left: 0;
 }
 
 .omega {
-  margin-right: 0;
+    margin-right: 0;
 }
 
 .clear {
-  clear: both;
+    clear: both;
 }
 
 .center {
-  float: none;
-  margin: 0 auto;
+    float: none;
+    margin: 0 auto;
 }
diff --git a/scss/medium/_base.scss b/scss/medium/_base.scss
index 6b128f8..5df7757 100644
--- a/scss/medium/_base.scss
+++ b/scss/medium/_base.scss
@@ -6,23 +6,23 @@
 // *
 
 .wrap {
-  overflow: hidden;
-  width: 100%;
+    overflow: hidden;
+    width: 100%;
 }
 
 .container {
-  width: 100%;
-  &::after {
-    clear: both;
-    content: '';
-    display: block;
-  }
-
-  .container {
-    width: 102%;
-    width: calc(100% + 20px);
-    margin-left: -10px;
-  }
+    width: 100%;
+    &::after {
+        clear: both;
+        content: '';
+        display: block;
+    }
+
+    .container {
+        width: 102%;
+        width: calc(100% + 20px);
+        margin-left: -10px;
+    }
 }
 
 .col12, 
@@ -31,73 +31,73 @@
 .col9, 
 .col8, 
 .col7 {
-  margin: 0;
-  padding: 0 10px;
-  width: 100%;
-  @include box-sizing(border-box);
+    margin: 0;
+    padding: 0 10px;
+    width: 100%;
+    @include box-sizing(border-box);
 }
 
 .col6, 
 .col5, 
 .col4, 
 .col3 {
-  float: left;
-  margin: 0;
-  padding: 0 10px;
-  width: 50%;
-  @include box-sizing(border-box);
+    float: left;
+    margin: 0;
+    padding: 0 10px;
+    width: 50%;
+    @include box-sizing(border-box);
 }
 
 .col2 {
-  float: left;
-  margin: 0;
-  padding: 0 10px;
-  width: 33.33%;
-  @include box-sizing(border-box);
+    float: left;
+    margin: 0;
+    padding: 0 10px;
+    width: 33.33%;
+    @include box-sizing(border-box);
 }
 
 .full-medium {
-  width: 100%;
-  &.colr {
-    float: none;
-  }
+    width: 100%;
+    &.colr {
+        float: none;
+    }
 }
 
 .half-medium {
-  float: left;
-  width: 50%;
+    float: left;
+    width: 50%;
 }
 
 .one-third-medium {
-  float: left;
-  width: 33.33%;
+    float: left;
+    width: 33.33%;
 }
 
 .two-thirds-medium {
-  float: left;
-  width: 66.66%;
+    float: left;
+    width: 66.66%;
 }
 
 // * Additional grid utilities
 .colr {
-  float: right;
+    float: right;
 }
 
 .alpha {
-  margin-left: 0;
+    margin-left: 0;
 }
 
 .omega {
-  margin-right: 0;
+    margin-right: 0;
 }
 
 .clear {
-  clear: both;
+    clear: both;
 }
 
 .center {
-  float: none;
-  margin: 0 auto;
+    float: none;
+    margin: 0 auto;
 }
 
 @import 'header';
diff --git a/scss/responsive.scss b/scss/responsive.scss
index e141141..18a0ca3 100644
--- a/scss/responsive.scss
+++ b/scss/responsive.scss
@@ -4,16 +4,16 @@
 
 @media (min-width: $breakpoint-large) {
 
-  @import 'large/base';
+    @import 'large/base';
 
 }
 @media (min-width: $breakpoint-medium) and (max-width: ($breakpoint-large - 1)) {
 
-  @import 'medium/base';
+    @import 'medium/base';
 
 }
 @media (min-width: $breakpoint-small) and (max-width: ($breakpoint-medium - 1)) {
 
-  @import 'small/base';
+    @import 'small/base';
 
 }
diff --git a/scss/small/_base.scss b/scss/small/_base.scss
index 5480e5c..b567c0f 100644
--- a/scss/small/_base.scss
+++ b/scss/small/_base.scss
@@ -6,24 +6,24 @@
 // *
 
 .wrap {
-  overflow: hidden;
-  width: 100%;
+    overflow: hidden;
+    width: 100%;
 }
 
 .container {
-  width: 100%;
+    width: 100%;
 
-  &:after {
-    clear: both;
-    content: '';
-    display: block;
-  }
-  
-  .container {
-    width: 102%;
-    width: calc(100% + 20px);
-    margin-left: -10px;
-  }
+    &:after {
+        clear: both;
+        content: '';
+        display: block;
+    }
+    
+    .container {
+        width: 102%;
+        width: calc(100% + 20px);
+        margin-left: -10px;
+    }
 }
 
 .col12, 
@@ -36,42 +36,42 @@
 .col5, 
 .col4, 
 .col3 {
-  margin: 0;
-  padding: 0 10px;
-  width: 100%;
-  @include box-sizing(border-box);
+    margin: 0;
+    padding: 0 10px;
+    width: 100%;
+    @include box-sizing(border-box);
 }
 
 .col2 {
-  float: left;
-  margin: 0;
-  padding: 0 10px;
-  width: 50%;
-  @include box-sizing(border-box);
+    float: left;
+    margin: 0;
+    padding: 0 10px;
+    width: 50%;
+    @include box-sizing(border-box);
 }
 
 .full-small {
-  float: none;
-  margin: 0;
-  padding: 0 10px;
-  width: 100%;
-  @include box-sizing(border-box);
+    float: none;
+    margin: 0;
+    padding: 0 10px;
+    width: 100%;
+    @include box-sizing(border-box);
 }
 
 .half-small {
-  float: left;
-  margin: 0;
-  padding: 0 10px;
-  width: 50%;
-  @include box-sizing(border-box);
+    float: left;
+    margin: 0;
+    padding: 0 10px;
+    width: 50%;
+    @include box-sizing(border-box);
 }
 
 .clear {
-  clear: both;
+    clear: both;
 }
 
 body {
-  font-size: 16px;
+    font-size: 16px;
 }
 
 @import 'header';
diff --git a/scss/style.scss b/scss/style.scss
index a5980b9..dc72afa 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -4,6 +4,6 @@
 
 // * Only styles common for all screen sizes
 body {
-  background: $white;
-  color: $text;
+    background: $white;
+    color: $text;
 }