diff --git a/dist/ratchet.css b/dist/ratchet.css
index 8c2c360..eaa5be8 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -254,13 +254,13 @@ strong {
   left: 0;
   overflow: auto;
   background-color: #efeff4;
+  -webkit-overflow-scrolling: touch;
   -webkit-transition-property: top, bottom;
   transition-property: top, bottom;
-  -webkit-transition-duration: .2s, .2s;
-  transition-duration: .2s, .2s;
+  -webkit-transition-duration: 0.2s, 0.2s;
+  transition-duration: 0.2s, 0.2s;
   -webkit-transition-timing-function: linear, linear;
   transition-timing-function: linear, linear;
-  -webkit-overflow-scrolling: touch;
 }
 
 .content > * {
@@ -292,6 +292,7 @@ strong {
   height: 44px;
   padding: 5px 10px;
   background-color: rgba(247, 247, 247, 0.98);
+  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
 }
 [class*="bar-"].bar-header-secondary {
@@ -301,6 +302,7 @@ strong {
   bottom: 0;
 }
 [class*="bar-"].bar-footer.bar-standard, [class*="bar-"].bar-footer-secondary.bar-standard {
+  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
 }
 
@@ -342,6 +344,7 @@ strong {
   bottom: 0;
   height: 50px;
   padding: 0;
+  -webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
   box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
 }
 
@@ -385,6 +388,7 @@ strong {
   padding-left: 15px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 12px 12px 0 0;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .popover .bar-nav .title + [class*="button"]:last-child {
@@ -517,8 +521,8 @@ input[type="color"],
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 3px;
-  -webkit-appearance: none;
   outline: none;
+  -webkit-appearance: none;
 }
 
 input[type=search] {
@@ -544,8 +548,7 @@ select {
   height: auto;
   font-size: 14px;
   background-color: #f8f8f8;
-  background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
-  background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
@@ -564,6 +567,7 @@ select {
   border: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 0;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
@@ -620,8 +624,12 @@ select {
 [class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
   color: #fff;
   background-color: #929292;
-  -webkit-transition: background-color .1s linear, opacity .1s linear;
-  transition: background-color .1s linear, opacity .1s linear;
+  -webkit-transition: background-color, opacity;
+  transition: background-color, opacity;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -webkit-transition-timing-function: linear;
+  transition-timing-function: linear;
 }
 [class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active {
   opacity: .6;
@@ -668,8 +676,8 @@ select {
   line-height: 44px;
   color: #007aff;
   border: 0;
-  -webkit-transition: opacity .2s linear;
-  transition: opacity .2s linear;
+  -webkit-transition: opacity 0.2s linear;
+  transition: opacity 0.2s linear;
   -webkit-box-flex: 0;
   box-flex: 0;
 }
@@ -874,7 +882,8 @@ input[type="button"] {
 }
 .segmented-controller li.selected {
   background-color: #007aff;
-  transition: background-color .2s linear;
+  -webkit-transition: background-color 0.2s linear;
+  transition: background-color 0.2s linear;
 }
 .segmented-controller li.selected > a {
   color: #fff;
@@ -916,8 +925,8 @@ input[type="button"] {
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   -webkit-transform: translate3d(0, -15px, 0);
   transform: translate3d(0, -15px, 0);
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:after {
   position: absolute;
@@ -958,16 +967,18 @@ input[type="button"] {
   background-color: #fff;
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-  transition: transform .25s, opacity 1ms .25s;
+  -webkit-transition: -webkit-transform 0.25s, transform 0.25s, opacity 1ms 0.25s;
+  transition: -webkit-transform 0.25s, transform 0.25s, opacity 1ms 0.25s;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 .modal.active {
   opacity: 1;
   height: 100%;
-  -webkit-transition: -webkit-transform .25s;
-  transition: transform .25s;
+  -webkit-transition: -webkit-transform 0.25s, transform 0.25s;
+  transition: -webkit-transform 0.25s, transform 0.25s;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
@@ -1018,9 +1029,14 @@ input[type="button"] {
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 100px;
+  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
-  transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
+  -webkit-transition-property: -webkit-transform, border;
+  transition-property: -webkit-transform, border;
+  -webkit-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
 }
 .toggle.active {
   background-color: #4cd964;
@@ -1035,25 +1051,26 @@ input[type="button"] {
 .content.fade {
   left: 0;
   opacity: 0;
-  -webkit-transition: opacity .2s ease-in-out;
-  transition: opacity .2s ease-in-out;
+  -webkit-transition: opacity 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
 }
 .content.fade.in {
   opacity: 1;
 }
 .content.slide {
   z-index: 2;
-  -webkit-transition: -webkit-transform .5s;
-  transition: transform .5s;
+  -webkit-transition: -webkit-transform 0.4s;
+  transition: -webkit-transform 0.4s;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 .content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) {
   -webkit-animation-name: fadeOverlay;
   animation-name: fadeOverlay;
-  -webkit-animation-duration: .4s;
-  animation-duration: .4s;
+  -webkit-animation-duration: 0.4s;
+  animation-duration: 0.4s;
 }
 .content.slide.right:not([class*="sliding-in"]) {
   -webkit-animation-direction: reverse;
@@ -1072,10 +1089,12 @@ input[type="button"] {
 
 @-webkit-keyframes fadeOverlay {
   from {
+    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
   }
 
   to {
+    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
   }
 }
diff --git a/dist/theme-classic.css b/dist/theme-classic.css
index 6e95746..a1db084 100644
--- a/dist/theme-classic.css
+++ b/dist/theme-classic.css
@@ -21,6 +21,7 @@
 
 .bar-nav {
   top: 20px;
+  -webkit-box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
   box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
 }
 
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index 0a8a7b3..b13093b 100644
--- a/lib/sass/bars.scss
+++ b/lib/sass/bars.scss
@@ -10,7 +10,7 @@
   height: $bar-base-height;
   padding: 5px $bar-side-spacing;
   background-color: $chrome-color;
-  box-shadow: 0 0 1px rgba(0,0,0,.85);
+  @include box-shadow(0 0 1px rgba(0,0,0,.85));
 
   // Modifier class to dock any bar below .bar-nav
   &.bar-header-secondary {
@@ -25,7 +25,7 @@
   // Flip border position to top for footer bars
   &.bar-footer.bar-standard,
   &.bar-footer-secondary.bar-standard {
-    box-shadow: 0 0 1px rgba(0,0,0,.85);
+    @include box-shadow(0 0 1px rgba(0,0,0,.85));
   }
 }
 
@@ -38,8 +38,7 @@
   top: 0;
   display: -webkit-box;
   display: box;
-  -webkit-box-orient: horizontal;
-          box-orient: horizontal;
+  @include box-orient(horizontal);
 }
 
 // Centered text in the .bar-nav 
@@ -79,7 +78,7 @@
   bottom: 0;
   height: $bar-tab-height;
   padding: 0;
-  box-shadow: 0 0px 1px rgba(0,0,0,.85);
+  @include box-shadow(0 0px 1px rgba(0,0,0,.85));
 }
 
 // Wrapper for individual tab
@@ -90,8 +89,7 @@
   padding: 0;
   margin: 0;
   list-style: none;
-  -webkit-box-orient: horizontal;
-          box-orient: horizontal;
+  @include box-orient(horizontal);
 }
 
 // Navigational tab
@@ -99,8 +97,7 @@
   height: 100%;
   padding-top: 9px;
   text-align: center;
-  -webkit-box-flex: 1;
-          box-flex: 1;
+  @include box-flex(1);
 
   .icon {
     width: 24px;
@@ -128,7 +125,7 @@
   padding-left: 15px;
   border-bottom: 1px solid rgba(0,0,0,.15);
   border-radius: 12px 12px 0 0;
-  box-shadow: none;
+  @include box-shadow(none);
 
   .title + [class*="button"]:last-child {
     right: 15px;
diff --git a/lib/sass/base.scss b/lib/sass/base.scss
index dedb35f..faf6a5e 100644
--- a/lib/sass/base.scss
+++ b/lib/sass/base.scss
@@ -37,13 +37,10 @@ strong {
   left: 0;
   overflow: auto;
   background-color: #efeff4;
-  -webkit-transition-property: top, bottom;
-          transition-property: top, bottom;
-  -webkit-transition-duration: .2s, .2s;
-          transition-duration: .2s, .2s;
-  -webkit-transition-timing-function: linear, linear;
-          transition-timing-function: linear, linear;
   -webkit-overflow-scrolling: touch;
+  @include transition-property(top, bottom);
+  @include transition-duration(.2s, .2s);
+  @include transition-timing-function(linear, linear);
 }
 
 // Hack to force all relatively and absolutely positioned elements still render while scrolling
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index f3217bd..eb9313e 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -24,8 +24,9 @@
   &.button-filled {
     color: #fff;
     background-color: $default-color;
-    -webkit-transition: background-color .1s linear, opacity .1s linear;
-            transition: background-color .1s linear, opacity .1s linear;
+    @include transition(background-color, opacity);
+    @include transition-duration(.2s);
+    @include transition-timing-function(linear);
   }
 
   // Disabled styles & filled button active styles
@@ -100,10 +101,8 @@
     line-height: $bar-base-height;
     color: $primary-color;
     border: 0;
-    -webkit-transition: opacity .2s linear;
-            transition: opacity .2s linear;
-    -webkit-box-flex: 0;
-            box-flex: 0;
+    @include transition(opacity .2s linear);
+    @include box-flex(0);
   }
 
   // Hacky way to right align buttons outside of flex-box system
@@ -184,13 +183,11 @@
   // Rotate the chevrons
   .button-prev:before,
   .button-next:after {
-    -webkit-transform: rotate(-45deg);
-            transform: rotate(-45deg);
+    @include transform(rotate(-45deg));
   } 
   .button-prev:after,
   .button-next:before {
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
+    @include transform(rotate(45deg));
   }
 }
 
diff --git a/lib/sass/chevrons.scss b/lib/sass/chevrons.scss
index 53b4c00..eab740d 100644
--- a/lib/sass/chevrons.scss
+++ b/lib/sass/chevrons.scss
@@ -20,12 +20,10 @@
   // Position and rotate respective halves of the chevron
   &:before {
     top: 6px;
-    -webkit-transform: rotate(45deg);
-            transform: rotate(45deg);
+    @include transform(rotate(45deg));
   }
   &:after {
     top: 8px;
-    -webkit-transform: rotate(-45deg);
-            transform: rotate(-45deg);
+    @include transform(rotate(-45deg));
   }
 }
\ No newline at end of file
diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss
index da2a19d..633502f 100644
--- a/lib/sass/forms.scss
+++ b/lib/sass/forms.scss
@@ -36,8 +36,8 @@ input[type="color"],
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, .2);
   border-radius: 3px;
-  -webkit-appearance: none;
   outline: none;
+  -webkit-appearance: none;
 }
 
 // Fully round search input
@@ -65,9 +65,7 @@ select {
   height: auto;
   font-size: 14px;
   background-color: #f8f8f8;
-  background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
-  background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
+  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .1));
 }
 
 
@@ -91,7 +89,7 @@ select {
   border: 0;
   border-bottom: 1px solid rgba(0, 0, 0, .2);
   border-radius: 0;
-  box-shadow: none;
+  @include box-shadow(none);
 }
 
 // Remove bottom border on last input to avoid double bottom border
diff --git a/lib/sass/modals.scss b/lib/sass/modals.scss
index 6124075..5818675 100644
--- a/lib/sass/modals.scss
+++ b/lib/sass/modals.scss
@@ -11,20 +11,16 @@
   min-height: 100%;
   overflow: hidden;
   background-color: #fff;  
-  -webkit-transform: translate3d(0, 100%, 0);
-          transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-          transition:         transform .25s, opacity 1ms .25s;
-  -webkit-transition-timing-function: $timing-fuction;
+  @include transform(translate3d(0, 100%, 0));
+  @include transition(-webkit-transform .25s, transform .25s, opacity 1ms .25s);
+  @include transition-timing-function($timing-fuction);
 
   // Active modal
   &.active {
     opacity: 1;
     height: 100%;
-    -webkit-transition: -webkit-transform .25s;
-            transition:         transform .25s;
-    -webkit-transition-timing-function: $timing-fuction;
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
+    @include transition(-webkit-transform .25s, transform .25s);
+    @include transition-timing-function($timing-fuction);
+    @include transform(translate3d(0, 0, 0));
   }
 }
\ No newline at end of file
diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss
index 54c408a..b61e5e4 100644
--- a/lib/sass/popovers.scss
+++ b/lib/sass/popovers.scss
@@ -14,10 +14,8 @@
   border-radius: 12px;
   opacity: 0;
   box-shadow: 0 0 15px rgba(0, 0, 0, .1);
-  -webkit-transform: translate3d(0, -15px, 0);
-          transform: translate3d(0, -15px, 0);
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-          transition:         transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  @include transform(translate3d(0, -15px, 0));
+  @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 
   // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
   &:after {
@@ -38,8 +36,7 @@
 
   &.visible {
     opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
+    @include transform(translate3d(0, 0, 0));
   }
 }
 
diff --git a/lib/sass/push.scss b/lib/sass/push.scss
index 5d8199f..0e72124 100644
--- a/lib/sass/push.scss
+++ b/lib/sass/push.scss
@@ -8,8 +8,7 @@
   &.fade {
     left: 0;
     opacity: 0;
-    -webkit-transition: opacity .2s ease-in-out;
-            transition: opacity .2s ease-in-out;
+    @include transition(opacity .2s ease-in-out);
 
     &.in {
       opacity: 1;
@@ -19,42 +18,35 @@
   // Slide animation iOS7
   &.slide {
     z-index: 2;
-    -webkit-transition: -webkit-transform .5s;
-            transition:         transform .5s;
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    -webkit-transition-timing-function: $timing-fuction;
+    @include transition(-webkit-transform .4s);
+    @include transform(translate3d(0, 0, 0));
+    @include transition-timing-function ($timing-fuction);
 
     // Adding the overlay
     &.sliding-in,
     &.right:not([class*="sliding-in"]) {
-      -webkit-animation-name: fadeOverlay;
-              animation-name: fadeOverlay;
-      -webkit-animation-duration: .4s;
-              animation-duration: .4s;
+      @include animation-name(fadeOverlay);
+      @include animation-duration(.4s);
     }
 
     &.right:not([class*="sliding-in"]) {
-      -webkit-animation-direction: reverse;
-              animation-direction: reverse;
+      @include animation-direction(reverse);
     }
 
     &.left {
       z-index: 1;
-      -webkit-transform: translate3d(-20%, 0, 0); // Creates the parallax effect
-              transform: translate3d(-20%, 0, 0);
+      @include transform(translate3d(-20%, 0, 0)); // Creates the parallax effect
     }
 
     &.right {
       z-index: 3;
-      -webkit-transform: translate3d(100%, 0, 0);
-              transform: translate3d(100%, 0, 0);
+      @include transform(translate3d(100%, 0, 0));
     }
   }
 }
 
 // Overlay animation for the slide transition
 @-webkit-keyframes fadeOverlay {
-  from { box-shadow: 0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0); }
-  to   { box-shadow: 0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1); }
+  from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
+  to   { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); }
 }
\ No newline at end of file
diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss
index 3b38a00..ed321ef 100644
--- a/lib/sass/ratchet.scss
+++ b/lib/sass/ratchet.scss
@@ -1,6 +1,10 @@
+
 // Variables
 @import "variables.scss";
 
+// Mixins
+@import "mixins.scss";
+
 // Normalize & Base CSS
 @import "normalize.scss";
 @import "base.scss";
diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss
index b8b41ac..0f4819d 100644
--- a/lib/sass/segmented-controllers.scss
+++ b/lib/sass/segmented-controllers.scss
@@ -14,8 +14,7 @@
   background-color: transparent;
   border: 1px solid $primary-color;
   border-radius: 4px;
-  -webkit-box-orient: horizontal;
-          box-orient: horizontal;
+  @include box-orient(horizontal);
 
   // Section within controller
   li {
@@ -23,8 +22,7 @@
     text-align: center;
     white-space: nowrap;
     border-left: 1px solid $primary-color;
-    -webkit-box-flex: 1;
-            box-flex: 1;
+    @include box-flex(1);
     
     // Link that fills each section
     > a {
@@ -49,7 +47,7 @@
     // Selected segment of controller
     &.selected {
       background-color: $primary-color;
-      transition: background-color .2s linear;
+      @include transition(background-color .2s linear);
 
       // Set color of links to white
       > a {
@@ -74,8 +72,7 @@
 // Remove standard segmented bottom margin
 [class*="bar-"] .segmented-controller {
   margin: 3px 0;
-  -webkit-box-flex: 1;
-          box-flex: 1;
+  @include box-flex(1);
 }
 .bar-nav .segmented-controller {
   margin-bottom: 4px;
diff --git a/lib/sass/sliders.scss b/lib/sass/sliders.scss
index 6c6b207..abaa98c 100644
--- a/lib/sass/sliders.scss
+++ b/lib/sass/sliders.scss
@@ -20,8 +20,7 @@
     padding: 0;
     font-size: 0; // Remove spaces from inline-block children
     white-space: nowrap;
-    -webkit-transition: all 0 linear;
-            transition: all 0 linear;
+    @include transition(all 0 linear);
     
     // Individual slide
     > li {
diff --git a/lib/sass/theme-classic.scss b/lib/sass/theme-classic.scss
index 4a79779..4a64bfd 100644
--- a/lib/sass/theme-classic.scss
+++ b/lib/sass/theme-classic.scss
@@ -1,3 +1,5 @@
+@import "mixins.scss";
+
 //
 // Variable overrides
 // --------------------------------------------------
@@ -34,7 +36,7 @@ $negative-color: #e71e1e;
 }
 .bar-nav {
   top: 20px;
-  box-shadow: 0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85)
+  @include box-shadow(0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85));
 }
 [class*="bar-"].bar-header-secondary {
   top: 64px;
diff --git a/lib/sass/toggles.scss b/lib/sass/toggles.scss
index a6ec0ae..23bd0de 100644
--- a/lib/sass/toggles.scss
+++ b/lib/sass/toggles.scss
@@ -21,9 +21,10 @@
     background-color: #fff;
     border: 1px solid rgba(0, 0, 0, .1);
     border-radius: 100px;
-    box-shadow: 0 3px 3px rgba(0,0,0,.08);
-    -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
-                    transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
+    @include box-shadow(0 3px 3px rgba(0,0,0,.08));
+    @include transition-property(-webkit-transform, border);
+    @include transition-duration(.1s);
+    @include transition-timing-function(ease-in-out);
   }
 
   // Active state for toggle
@@ -35,7 +36,6 @@
   // Active state for toggle handle
   &.active .toggle-handle {
     border-color: $positive-color;
-    -webkit-transform: translate3d(17px,0,0);
-            transform: translate3d(17px,0,0);
+    @include transform(translate3d(17px,0,0));
   }
 }
\ No newline at end of file