From 61ec43d774b1e8e37ca2e31c4ebd3c0c7d3787dd Mon Sep 17 00:00:00 2001
From: Benjamin Knight <ben@benknight.me>
Date: Mon, 11 May 2015 22:10:52 -0700
Subject: [PATCH 1/9] Removing transition mixin

---
 assets/timber.scss.liquid | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
index 8b6bd40d2..708d796b2 100755
--- a/assets/timber.scss.liquid
+++ b/assets/timber.scss.liquid
@@ -186,10 +186,6 @@ $socialIconFontStack: 'icons';
   #{$property}: #{$value};
 }
 
-@mixin transition($transition: 0.1s all) {
-  @include prefix('transition', #{$transition});
-}
-
 @mixin transform($transform: 0.1s all) {
   @include prefix('transform', #{$transform});
 }
@@ -1934,13 +1930,13 @@ label.error {
   max-height: 0;
   visibility: hidden;
   overflow: hidden;
+  transition: all 300ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
   @include backface(hidden);
-  @include transition(all 300ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
 
   .mobile-nav--expanded + & {
     visibility: visible;
     max-height: 700px;
-    @include transition(all 700ms cubic-bezier(0.57, 0.06, 0.05, 0.95));
+    transition: all 700ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
   }
 
   .mobile-nav__item:after {
@@ -1974,7 +1970,7 @@ label.error {
   z-index: $zindexDrawer;
   color: $colorDrawerText;
   background-color: $colorDrawers;
-  @include transition($drawerTransition);
+  transition: $drawerTransition;
 
   a {
     color: $colorDrawerText;
@@ -2026,7 +2022,7 @@ label.error {
 }
 
 .is-moved-by-drawer {
-  @include transition($drawerTransition);
+  transition: $drawerTransition;
 
   .js-drawer-open-left & {
     @include transform(translateX($drawerNavWidth));
@@ -2315,8 +2311,8 @@ label.error {
     max-height: 0;
     overflow: hidden;
     visibility: hidden;
+    transition: all 450ms cubic-bezier(0.57,.06,.05,.95);
     @include backface(hidden);
-    @include transition(all 450ms cubic-bezier(0.57,.06,.05,.95));
   }
 }
 
@@ -2401,7 +2397,7 @@ label.error {
 
   .is-loading & {
     opacity: 0.5;
-    @include transition(none);
+    transition: none;
   }
 }
 

From 36e7aff0f213fc1abb4b21e443606263d42fe58c Mon Sep 17 00:00:00 2001
From: Benjamin Knight <ben@benknight.me>
Date: Mon, 11 May 2015 22:13:26 -0700
Subject: [PATCH 2/9] Removing gradient mixin

---
 assets/timber.scss.liquid | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
index 708d796b2..43a804c87 100755
--- a/assets/timber.scss.liquid
+++ b/assets/timber.scss.liquid
@@ -190,16 +190,6 @@ $socialIconFontStack: 'icons';
   @include prefix('transform', #{$transform});
 }
 
-@mixin gradient($from, $to, $fallback) {
-  background: $fallback;
-  background: -moz-linear-gradient(top, $from 0%, $to 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
-  background: -webkit-linear-gradient(top, $from 0%, $to 100%);
-  background: -o-linear-gradient(top, $from 0%, $to 100%);
-  background: -ms-linear-gradient(top, $from 0%, $to 100%);
-  background: linear-gradient(top bottom, $from 0%, $to 100%);
-}
-
 @mixin backface($visibility: hidden) {
   @include prefix('backface-visibility', #{$visibility});
 }

From a5763bce70325f96544e22680bf8682451104ad8 Mon Sep 17 00:00:00 2001
From: Benjamin Knight <ben@benknight.me>
Date: Mon, 11 May 2015 22:28:05 -0700
Subject: [PATCH 3/9] Adding Bourbon-inspired prefixer mixin

---
 assets/timber.scss.liquid | 42 +++++++++++++++++++--------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
index 43a804c87..e2dbbc906 100755
--- a/assets/timber.scss.liquid
+++ b/assets/timber.scss.liquid
@@ -178,26 +178,26 @@ $socialIconFontStack: 'icons';
   *zoom: 1;
 }
 
-@mixin prefix($property, $value) {
-  -webkit-#{$property}: #{$value};
-  -moz-#{$property}: #{$value};
-  -ms-#{$property}: #{$value};
-  -o-#{$property}: #{$value};
-  #{$property}: #{$value};
+@mixin prefixer($property, $value, $prefixes) {
+  @each $prefix in $prefixes {
+    @if $prefix == webkit {
+      -webkit-#{$property}: $value;
+    } @else if $prefix == moz {
+      -moz-#{$property}: $value;
+    } @else if $prefix == ms {
+      -ms-#{$property}: $value;
+    } @else if $prefix == o {
+      -o-#{$property}: $value;
+    } @else if $prefix == spec {
+      #{$property}: $value;
+    } @else  {
+      @warn "Unrecognized prefix: #{$prefix}";
+    }
+  }
 }
 
 @mixin transform($transform: 0.1s all) {
-  @include prefix('transform', #{$transform});
-}
-
-@mixin backface($visibility: hidden) {
-  @include prefix('backface-visibility', #{$visibility});
-}
-
-@mixin box-sizing($box-sizing: border-box) {
-  -webkit-box-sizing: #{$box-sizing};
-  -moz-box-sizing: #{$box-sizing};
-  box-sizing: #{$box-sizing};
+  @include prefixer(transform, $transform, webkit spec);
 }
 
 @function em($target, $context: $baseFontSize) {
@@ -247,7 +247,7 @@ $max: max-width;
   #Normalize
 ==============================================================================*/
 *, input, :before, :after {
-  @include box-sizing();
+  box-sizing: border-box;
 }
 
 html, body {
@@ -350,6 +350,7 @@ $class-type: unquote(".");
 }
 
 #{$class-type}grid__item {
+  box-sizing: border-box;
   float: left;
   min-height: 1px;
   padding-left: $gridGutter;
@@ -357,7 +358,6 @@ $class-type: unquote(".");
   @if $mobile-first == true {
     width: 100%;
   }
-  @include box-sizing();
 }
 
 /*============================================================================
@@ -1921,7 +1921,7 @@ label.error {
   visibility: hidden;
   overflow: hidden;
   transition: all 300ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
-  @include backface(hidden);
+  @include prefixer(backface-visiblity, hidden, webkit spec);
 
   .mobile-nav--expanded + & {
     visibility: visible;
@@ -2302,7 +2302,7 @@ label.error {
     overflow: hidden;
     visibility: hidden;
     transition: all 450ms cubic-bezier(0.57,.06,.05,.95);
-    @include backface(hidden);
+    @include prefixer(backface-visiblity, hidden, webkit spec);
   }
 }
 

From c477e3cf035a132760133ba2e573df47d1ba3bd7 Mon Sep 17 00:00:00 2001
From: Benjamin Knight <ben@benknight.me>
Date: Mon, 11 May 2015 22:43:16 -0700
Subject: [PATCH 4/9] Adding user-select mixin

---
 assets/timber.scss.liquid | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
index e2dbbc906..26080a8e0 100755
--- a/assets/timber.scss.liquid
+++ b/assets/timber.scss.liquid
@@ -200,6 +200,10 @@ $socialIconFontStack: 'icons';
   @include prefixer(transform, $transform, webkit spec);
 }
 
+@mixin user-select($value) {
+  @include prefixer(user-select, $value, webkit moz ms spec);
+}
+
 @function em($target, $context: $baseFontSize) {
   @if $target == 0 {
     @return 0;
@@ -1047,7 +1051,7 @@ html input[disabled] {
   white-space: nowrap;
   cursor: pointer;
   border: 1px solid transparent;
-  @include prefix('user-select', 'none');
+  @include user-select(none);
   -webkit-appearance: none;
   -moz-appearance: none;
   border-radius: $radius;
@@ -1264,7 +1268,7 @@ button,
 select {
   padding: 0;
   margin: 0;
-  @include prefix('user-select', 'text');
+  @include user-select(text);
 }
 
 button {
@@ -1583,7 +1587,7 @@ label.error {
 .icon-youtube:before { content: "\79"; }
 
 .payment-icons {
-  @include prefix('user-select', 'none');
+  @include user-select(none);
   cursor: default;
 
   li {
@@ -2362,7 +2366,7 @@ label.error {
   background: none;
   text-align: center;
   overflow: hidden;
-  @include prefix('user-select', 'none');
+  @include user-select(none);
 
   &:hover,
   &:focus {

From a9b8aaf9579627d709b72877836045ed51fbc6f9 Mon Sep 17 00:00:00 2001
From: Benjamin Knight <ben@benknight.me>
Date: Mon, 11 May 2015 22:53:47 -0700
Subject: [PATCH 5/9] Fixing transitions

---
 assets/timber.scss.liquid | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
index 26080a8e0..61d44d6c3 100755
--- a/assets/timber.scss.liquid
+++ b/assets/timber.scss.liquid
@@ -126,7 +126,7 @@ $drawerCartWidth: 300px;
 $colorDrawers: #f6f6f6;
 $colorDrawerBorder: darken($colorDrawers, 5%);
 $colorDrawerText: #333;
-$drawerTransition: 'all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1)';
+$drawerTransition: all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1);
 
 // Sizing variables
 $siteWidth: 1180px;
@@ -1949,9 +1949,11 @@ label.error {
 ==============================================================================*/
 .js-drawer-open {
   overflow: hidden;
+  height: 100%;
 }
 
 .drawer {
+  will-change: transform;
   display: none;
   position: fixed;
   overflow-y: auto;
@@ -2016,6 +2018,7 @@ label.error {
 }
 
 .is-moved-by-drawer {
+  will-change: transform;
   transition: $drawerTransition;
 
   .js-drawer-open-left & {

From 48725dfe9a95d747232bb14f49ce5294eb7a6646 Mon Sep 17 00:00:00 2001
From: Benjamin Knight <ben@benknight.me>
Date: Tue, 12 May 2015 10:36:53 -0700
Subject: [PATCH 6/9] Getting rid of rendering tweaks which should have been
 added to this branch

---
 assets/timber.scss.liquid | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
index 61d44d6c3..3d8a11138 100755
--- a/assets/timber.scss.liquid
+++ b/assets/timber.scss.liquid
@@ -1949,11 +1949,9 @@ label.error {
 ==============================================================================*/
 .js-drawer-open {
   overflow: hidden;
-  height: 100%;
 }
 
 .drawer {
-  will-change: transform;
   display: none;
   position: fixed;
   overflow-y: auto;
@@ -2018,7 +2016,6 @@ label.error {
 }
 
 .is-moved-by-drawer {
-  will-change: transform;
   transition: $drawerTransition;
 
   .js-drawer-open-left & {

From 15c08c2aeb956842d36fe90964a2b39323ab2a77 Mon Sep 17 00:00:00 2001
From: Benjamin Knight <ben@benknight.me>
Date: Tue, 12 May 2015 13:24:48 -0700
Subject: [PATCH 7/9] Transforms should get ms prefix too

---
 assets/timber.scss.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
index 3d8a11138..fdec0681b 100755
--- a/assets/timber.scss.liquid
+++ b/assets/timber.scss.liquid
@@ -197,7 +197,7 @@ $socialIconFontStack: 'icons';
 }
 
 @mixin transform($transform: 0.1s all) {
-  @include prefixer(transform, $transform, webkit spec);
+  @include prefixer(transform, $transform, ms webkit spec);
 }
 
 @mixin user-select($value) {

From 1b361080120a6d4b0b44a5a25e3a44706e33d68d Mon Sep 17 00:00:00 2001
From: Benjamin Knight <ben@benknight.me>
Date: Wed, 13 May 2015 10:41:44 -0700
Subject: [PATCH 8/9] Restoring backface mixin

---
 assets/timber.scss.liquid | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
index fdec0681b..25445c41f 100755
--- a/assets/timber.scss.liquid
+++ b/assets/timber.scss.liquid
@@ -178,6 +178,24 @@ $socialIconFontStack: 'icons';
   *zoom: 1;
 }
 
+/*
+  Bourbon-inspired prefixer mixin for generating vendor prefixes.
+
+  Usage:
+
+    .element {
+      @include prefixer(transform, scale(1), ms webkit spec);
+    }
+
+  Output:
+
+    .element {
+      -ms-transform: scale(1);
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
+*/
+
 @mixin prefixer($property, $value, $prefixes) {
   @each $prefix in $prefixes {
     @if $prefix == webkit {
@@ -204,6 +222,10 @@ $socialIconFontStack: 'icons';
   @include prefixer(user-select, $value, webkit moz ms spec);
 }
 
+@mixin backface($visibility: hidden) {
+  @include prefixer(backface-visiblity, $visibility, webkit spec);
+}
+
 @function em($target, $context: $baseFontSize) {
   @if $target == 0 {
     @return 0;
@@ -1925,7 +1947,7 @@ label.error {
   visibility: hidden;
   overflow: hidden;
   transition: all 300ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
-  @include prefixer(backface-visiblity, hidden, webkit spec);
+  @include backface();
 
   .mobile-nav--expanded + & {
     visibility: visible;
@@ -2306,7 +2328,7 @@ label.error {
     overflow: hidden;
     visibility: hidden;
     transition: all 450ms cubic-bezier(0.57,.06,.05,.95);
-    @include prefixer(backface-visiblity, hidden, webkit spec);
+    @include backface();
   }
 }
 

From 47e3abdbadf950a63613603b5f0fe854dceba061 Mon Sep 17 00:00:00 2001
From: Benjamin Knight <ben@benknight.me>
Date: Sat, 23 May 2015 12:02:29 -0700
Subject: [PATCH 9/9] Editting prefixer mixin comment

---
 assets/timber.scss.liquid | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
index 25445c41f..2466b26c6 100755
--- a/assets/timber.scss.liquid
+++ b/assets/timber.scss.liquid
@@ -178,23 +178,23 @@ $socialIconFontStack: 'icons';
   *zoom: 1;
 }
 
-/*
-  Bourbon-inspired prefixer mixin for generating vendor prefixes.
-
-  Usage:
-
-    .element {
-      @include prefixer(transform, scale(1), ms webkit spec);
-    }
+/*============================================================================
+  Prefixer mixin for generating vendor prefixes:
+    - Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
+    - Usage:
 
-  Output:
+      // Input:
+      .element {
+        @include prefixer(transform, scale(1), ms webkit spec);
+      }
 
-    .element {
-      -ms-transform: scale(1);
-      -webkit-transform: scale(1);
-      transform: scale(1);
-    }
-*/
+      // Output:
+      .element {
+        -ms-transform: scale(1);
+        -webkit-transform: scale(1);
+        transform: scale(1);
+      }
+==============================================================================*/
 
 @mixin prefixer($property, $value, $prefixes) {
   @each $prefix in $prefixes {