Merge pull request #145 from Shopify/mixin-cleanup

Mixin cleanup

assets/timber.scss.liquid

@@ -46,12 +46,6 @@
   #Demo Styles - for empty store state
 ==============================================================================*/
 
-*, input, :before, :after {
-  -webkit-box-sizing:border-box;
-  -moz-box-sizing:border-box;
-  box-sizing:border-box;
-}
-
 /*============================================================================
   #Breakpoint and Grid Variables
 ==============================================================================*/
@@ -166,34 +160,36 @@ $socialIconFontStack: 'icons';
   @extend .clearfix;
 }
 
-@mixin box-shadow($shadow) {
-  -webkit-box-shadow: #{$shadow};
-  -moz-box-shadow:    #{$shadow};
-  box-shadow:         #{$shadow};
+@mixin prefix($property, $value) {
+  -webkit-#{$property}: #{$value};
+  -moz-#{$property}: #{$value};
+  -ms-#{$property}: #{$value};
+  -o-#{$property}: #{$value};
+  #{$property}: #{$value};
 }
 
-@mixin transition($transition:0.1s all) {
-  -webkit-transition: #{$transition};
-  -moz-transition: #{$transition};
-  -o-transition: #{$transition};
-  transition: #{$transition};
+@mixin transition($transition: 0.1s all) {
+  @include prefix('transition', #{$transition});
 }
 
 @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%);
+  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) {
-  -moz-backface-visibility: $visibility;
-  -webkit-backface-visibility: $visibility;
-  -o-backface-visibility: $visibility;
-  backface-visibility: $visibility;
+  @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};
 }
 
 @function color-control($color) {
@@ -232,6 +228,10 @@ $max: max-width;
 ==============================================================================*/
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}table{border-collapse:collapse;border-spacing:0;}code,pre{background-color:#faf7f5;font-family:Consolas,monospace;border:0 none;padding:0 2px;color:#51ab62;}pre{overflow:auto;padding:0.5em;margin:0 0 1em;}
 
+*, input, :before, :after {
+  @include box-sizing();
+}
+
 /*============================================================================
   #Grid Setup
     - Based on csswizardry grid, but with floated columns and a fixed gutter size
@@ -315,9 +315,7 @@ $class-type: unquote(".");
   @if $mobile-first == true {
     width:100%;
   }
-  -webkit-box-sizing:border-box;
-  -moz-box-sizing:border-box;
-  box-sizing:border-box;
+  @include box-sizing();
 }
 
 /*============================================================================
@@ -945,11 +943,7 @@ a:focus {
   white-space: nowrap;
   cursor: pointer;
   border: 1px solid transparent;
-  -webkit-user-select: none;
-  -moz-user-select:    none;
-  -ms-user-select:     none;
-  -o-user-select:      none;
-  user-select:         none;
+  @include prefix('user-select', 'none');
   -webkit-appearance: none;
   border-radius: $radius;
 
@@ -1422,11 +1416,7 @@ label.error {
 .icon-youtube:before { content: "\79"; }
 
 .payment-icons {
-  -webkit-user-select: none;
-  -moz-user-select:    none;
-  -ms-user-select:     none;
-  -o-user-select:      none;
-  user-select:         none;
+  @include prefix('user-select', 'none');
   cursor: default;
 
   li {