From deb791a2d77b3baed2fbbb481bea76fddd856e23 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Wed, 27 Nov 2013 08:27:26 -0600
Subject: [PATCH] updated to use mixins

---
 dist/css/ionic.css     | 173 +++++++++++++++++++++++------------------
 scss/_menu.scss        |  19 ++---
 scss/_popup.scss       |  16 +---
 scss/_scaffolding.scss |  71 ++++++++---------
 scss/_slide-box.scss   |  16 ++--
 scss/_toggle.scss      |   8 +-
 6 files changed, 153 insertions(+), 150 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 287a9587fe..27c9d78418 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1,4 +1,4 @@
-/**
+/*!
  * Copyright 2013 Drifty Co.
  * http://drifty.com/
 
@@ -2206,6 +2206,15 @@ img {
   -webkit-user-drag: none; }
 
 body, .ionic-body {
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  @incude text-size-adjust(none);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   position: fixed;
   top: 0;
   right: 0;
@@ -2220,20 +2229,14 @@ body, .ionic-body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 20px;
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-user-drag: none;
-  -webkit-user-select: none; }
+  -webkit-user-drag: none; }
 
 .content:before,
 .content:after {
   display: block;
   overflow: hidden;
   height: 0;
-  content: "\00a0";
-  /* No-break space character */ }
+  content: "\00a0"; }
 
 .content {
   position: absolute;
@@ -2253,54 +2256,55 @@ body, .ionic-body {
  * scroll view functionality.
  */
 .scroll {
-  position: absolute;
-  z-index: 1;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  width: 100%;
-  height: 100%;
-  -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-touch-callout: none;
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
-  -ms-text-size-adjust: none;
-  -o-text-size-adjust: none;
-  text-size-adjust: none; }
+  text-size-adjust: none;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  height: 100%; }
 
 .scroll-refresher {
   display: none;
   overflow: hidden;
-  height: 100px;
-  margin-top: -100px; }
+  margin-top: -100px;
+  height: 100px; }
 
 .scroll-refresher-content {
-  height: 100%;
+  position: relative;
   width: 100%;
-  text-align: center;
-  position: relative; }
+  height: 100%;
+  text-align: center; }
 
 .ionic-refresher-content {
-  height: 100%;
+  position: relative;
   width: 100%;
-  text-align: center;
-  position: relative; }
+  height: 100%;
+  text-align: center; }
 
 .ionic-refresher {
+  position: absolute;
+  bottom: 25px;
+  left: 50%;
+  margin-left: -5px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: #4a87ee;
-  position: absolute;
-  left: 50%;
-  margin-left: -5px;
-  bottom: 25px; }
+  background-color: #4a87ee; }
 
 .scroll-refreshing {
-  -webkit-transition: height 0.1s ease-in-out; }
+  -webkit-transition: height 0.1s ease-in-out;
+  -moz-transition: height 0.1s ease-in-out;
+  transition: height 0.1s ease-in-out; }
   .scroll-refreshing .ionic-refresher {
     -webkit-animation: refresher-pulsate 1.5s linear;
+    -moz-animation: refresher-pulsate 1.5s linear;
+    animation: refresher-pulsate 1.5s linear;
     -webkit-animation-iteration-count: infinite; }
 
 @-webkit-keyframes refresher-pulsate {
@@ -2468,18 +2472,6 @@ blockquote {
     line-height: 1.42857; }
     blockquote small:before {
       content: '\2014 \00A0'; }
-  blockquote.pull-right {
-    padding-right: 15px;
-    padding-left: 0;
-    border-right: 5px solid gray;
-    border-left: 0; }
-    blockquote.pull-right p,
-    blockquote.pull-right small {
-      text-align: right; }
-    blockquote.pull-right small:before {
-      content: ''; }
-    blockquote.pull-right small:after {
-      content: '\00A0 \2014'; }
 
 q:before,
 q:after,
@@ -3222,8 +3214,8 @@ a.subdued {
   right: 0; }
 
 .menu-animated {
-  -webkit-transition: -webkit-transform 200ms ease;
-  -moz-transition: -moz-transform 200ms ease;
+  -webkit-transition: transform 200ms ease;
+  -moz-transition: transform 200ms ease;
   transition: transform 200ms ease; }
 
 /**
@@ -3257,18 +3249,22 @@ a.subdued {
   padding: 10px; }
 
 .loading-backdrop {
+  -webkit-transition: visibility 0s linear 0.3s;
+  -moz-transition: visibility 0s linear 0.3s;
+  transition: visibility 0s linear 0.3s;
   position: fixed;
   top: 0;
   left: 0;
   visibility: hidden;
   width: 100%;
-  height: 100%;
-  -webkit-transition: visibility 0s linear 0.3s; }
+  height: 100%; }
   .loading-backdrop.enabled {
     background-color: rgba(0, 0, 0, 0.7); }
   .loading-backdrop.active {
-    visibility: visible;
-    -webkit-transition-delay: 0s; }
+    -webkit-transition-delay: 0s;
+    -moz-transition-delay: 0s;
+    transition-delay: 0s;
+    visibility: visible; }
 
 .loading {
   position: fixed;
@@ -3281,7 +3277,7 @@ a.subdued {
   text-align: center;
   text-overflow: ellipsis;
   font-size: 15px; }
-  .loading h1, .loading h2, .loading h3, .loading h4, .loading h5 {
+  .loading h1, .loading h2, .loading h3, .loading h4, .loading h5, .loading h6 {
     color: #fff; }
 
 /**
@@ -3292,6 +3288,9 @@ a.subdued {
   color: #444444;
   background-color: white;
   border-color: #dddddd;
+  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
+  -moz-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
+  transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
   position: relative;
   z-index: 2;
   display: block;
@@ -3299,8 +3298,7 @@ a.subdued {
   padding: 15px;
   border-width: 1px;
   border-style: solid;
-  font-size: 16px;
-  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
+  font-size: 16px; }
   .item h2 {
     margin: 0 0 4px 0;
     font-size: 16px; }
@@ -3438,17 +3436,19 @@ button.item.item-complex {
 
 .item-complex .item-content,
 .item-radio .item-content {
+  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
+  -moz-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
+  transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
   /**
    * The content area of a complex list item. This area can
    * Slide left and right and be dragged to support different
    * UI interactions.
    */
   position: relative;
-  background-color: white;
   z-index: 2;
   padding: 15px 40px 15px 15px;
   border: none;
-  -webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
+  background-color: white; }
 
 .item-text-wrap,
 .item-text-wrap h1,
@@ -3620,6 +3620,8 @@ button.item:after {
   -webkit-align-items: center;
   -moz-align-items: center;
   align-items: center;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
   position: absolute;
   top: 0;
   right: 11px;
@@ -3633,8 +3635,7 @@ button.item:after {
   font-size: 16px;
   font-family: 'Ionicons';
   line-height: 1;
-  speak: none;
-  -webkit-font-smoothing: antialiased; }
+  speak: none; }
 
 a.item-icon-right:after,
 button.item-icon-right:after,
@@ -3706,7 +3707,9 @@ button.item-button-right:after {
   font-size: 14px; }
 
 .item-sliding {
-  -webkit-transition: -webkit-transform 0.1s ease-in-out; }
+  -webkit-transition: transform 0.1s ease-in-out;
+  -moz-transition: transform 0.1s ease-in-out;
+  transition: transform 0.1s ease-in-out; }
 
 .item-reordering {
   position: absolute;
@@ -3720,14 +3723,16 @@ button.item-button-right:after {
  * whe the list item is in edit mode.
  */
 .item-edit {
+  -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  -moz-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
   position: absolute;
   top: 0;
   left: 8px;
   z-index: 0;
   width: 48px;
   height: 100%;
-  line-height: 100%;
-  -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+  line-height: 100%; }
   .item-edit .button {
     height: 100%; }
     .item-edit .button .icon, .item-edit .button i {
@@ -3748,16 +3753,20 @@ button.item-button-right:after {
       color: #ef4e3a;
       font-size: 24px; }
   .item-edit.ng-enter {
+    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    -moz-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
     left: -48px;
-    opacity: 0;
-    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+    opacity: 0; }
   .item-edit.ng-enter-active {
     left: 8px;
     opacity: 1; }
   .item-edit.ng-leave {
+    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    -moz-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
     left: 0px;
-    opacity: 1;
-    -webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
+    opacity: 1; }
   .item-edit.ng-leave-active {
     left: -48px;
     opacity: 0; }
@@ -3959,24 +3968,26 @@ button.item-button-right:after {
  * --------------------------------------------------
  */
 .slide-box {
-  background-color: #000;
   position: relative;
-  overflow: hidden; }
+  overflow: hidden;
+  background-color: #000; }
 
 .slide-box-slides {
   position: relative;
   white-space: nowrap;
-  -webkit-transition: -webkit-transform 0 ease-in-out;
-  font-size: 0; }
+  font-size: 0;
+  -webkit-transition: -webkit-transform 0 ease-in-out; }
 
 .slide-box-animating {
-  -webkit-transition-duration: 0.2s; }
+  -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
+  transition-duration: 0.2s; }
 
 .slide-box-slide {
   display: inline-block;
-  vertical-align: top;
   width: 100%;
-  height: 100%; }
+  height: 100%;
+  vertical-align: top; }
   .slide-box-slide img {
     width: 100%; }
 
@@ -3987,13 +3998,15 @@ button.item-button-right:after {
   text-align: center; }
   .slide-box-pager > * {
     display: inline-block;
-    text-decoration: none;
     margin: 0px 5px;
     color: #fff;
+    text-decoration: none;
     opacity: 0.3; }
     .slide-box-pager > *.active {
+      opacity: 1;
       -webkit-transition: opacity 0.4s ease-in;
-      opacity: 1; }
+      -moz-transition: opacity 0.4s ease-in;
+      transition: opacity 0.4s ease-in; }
 
 /**
  * Split Pane
@@ -4351,6 +4364,15 @@ input[type="checkbox"][readonly] {
 
 /* the track appearance when the toggle is "off" */
 .toggle .track {
+  -webkit-transition-timing-function: ease-in-out;
+  -moz-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  -webkit-transition-duration: 0.1s;
+  -moz-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+  -webkit-transition-property: background-color, border;
+  -moz-transition-property: background-color, border;
+  transition-property: background-color, border;
   display: inline-block;
   box-sizing: border-box;
   width: 54px;
@@ -4359,10 +4381,7 @@ input[type="checkbox"][readonly] {
   border-radius: 20px;
   background-color: #e5e5e5;
   content: ' ';
-  cursor: pointer;
-  transition-timing-function: ease-in-out;
-  transition-duration: 0.1s;
-  transition-property: background-color, border; }
+  cursor: pointer; }
 
 /* the handle (circle) thats inside the toggle's track area */
 /* also the handle's appearance when it is "off" */
diff --git a/scss/_menu.scss b/scss/_menu.scss
index d73a8de834..ed18d4384c 100644
--- a/scss/_menu.scss
+++ b/scss/_menu.scss
@@ -10,26 +10,27 @@
   top: 0;
   bottom: 0;
   z-index: 0;
-
   overflow: hidden;
+
   min-height: 100%;
   max-height: 100%;
   width: $menu-width;
 
   background-color: #fff;
-
 }
 
 .menu-content {
   box-shadow: $menu-side-shadow;
 }
 
-.menu-left { left: 0; }
-.menu-right { right: 0; }
-
-.menu-animated {
-  -webkit-transition: -webkit-transform $menu-animation-speed ease;
-  -moz-transition: -moz-transform $menu-animation-speed ease;
-  transition: transform $menu-animation-speed ease;
+.menu-left { 
+  left: 0; 
 }
 
+.menu-right { 
+  right: 0; 
+}
+
+.menu-animated {
+  @include transition(transform $menu-animation-speed ease);
+}
diff --git a/scss/_popup.scss b/scss/_popup.scss
index 37b0c764b6..2dcf9670b6 100644
--- a/scss/_popup.scss
+++ b/scss/_popup.scss
@@ -8,35 +8,27 @@
   position: fixed;
 }
 
-.popup-title {
-}
-
 .popup-content {
   padding: 10px;
 }
 
-.popup-buttons {
-
-}
-
 .loading-backdrop {
+  @include transition(visibility 0s linear 0.3s);
   position: fixed;
-
   top: 0;
   left: 0;
+
   visibility: hidden;
   width: 100%;
   height: 100%;
 
-  -webkit-transition: visibility 0s linear 0.3s;
-
   &.enabled {
     background-color: rgba(0,0,0,0.7);
   }
 
   &.active {
+    @include transition-delay(0s);
     visibility: visible;
-    -webkit-transition-delay: 0s;
   }
 }
 
@@ -55,7 +47,7 @@
   text-overflow: ellipsis;
   font-size: 15px;
 
-  h1,h2,h3,h4,h5 {
+  h1, h2, h3, h4, h5, h6 {
     color: #fff;
   }
 }
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index be149d3168..c2663a3011 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -19,38 +19,37 @@ img {
 }
 
 body, .ionic-body {
+  @include font-smoothing(antialiased);
+  @incude text-size-adjust(none);
+  @include tap-highlight-transparent();
+  @include user-select(none);
+
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
+
   margin: 0;
   padding: 0;
+  
   color: $base-color;
   word-wrap: break-word;
   font-size: $font-size-base;
   font-family: $font-family-base;
   line-height: $line-height-computed;
   text-rendering: optimizeLegibility;
-
-  -webkit-font-smoothing: antialiased;
-
-  -webkit-text-size-adjust: none;
-          text-size-adjust: none;
-
-  -webkit-tap-highlight-color: transparent;
   -webkit-user-drag: none;
-  -webkit-user-select: none;
 }
 
 .content:before,
 .content:after {
+  // Uncollapse content margin if child elements DO have an margin
   display: block;
   overflow: hidden;
   height: 0;
-  // Uncollapse content margin if child elements DO have an margin
-  content: "\00a0"; /* No-break space character */
+  content: "\00a0"; // No-break space character
 }
 
 .content {
@@ -73,60 +72,54 @@ body, .ionic-body {
  * scroll view functionality.
  */
 .scroll {
+  @include user-select(none);
+  @include touch-callout(none);
+  @include text-size-adjust(none);
   position: absolute;
-	z-index: 1;
-	-webkit-tap-highlight-color: rgba(0,0,0,0);
-	width: 100%;
+  z-index: 1;
+  width: 100%;
   height: 100%;
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	-webkit-text-size-adjust: none;
-	-moz-text-size-adjust: none;
-	-ms-text-size-adjust: none;
-	-o-text-size-adjust: none;
-	text-size-adjust: none;
 }
 
 // Scroll refresher (for pull to refresh)
 .scroll-refresher {
   display: none;
   overflow: hidden;
-  height: 100px;
   margin-top: -100px;
+  height: 100px;
 }
+
 .scroll-refresher-content {
-  height: 100%;
-  width: 100%;
-  text-align: center;
   position: relative;
-  //@include display-flex();
-  //@include align-items(center);
+  width: 100%;
+  height: 100%;
+  text-align: center;
 }
+
 .ionic-refresher-content {
-  height: 100%;
-  width: 100%;
-  text-align: center;
   position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
 }
+
 .ionic-refresher {
+  position: absolute;
+  bottom: 25px;
+  left: 50%;
+  margin-left: -5px;
   // A custom refresher
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: $positive;
-  position: absolute;
-  left: 50%;
-  margin-left: -5px;
-  bottom: 25px;
 }
+
 .scroll-refreshing {
-  -webkit-transition: height 0.1s ease-in-out;
+  @include transition(height 0.1s ease-in-out);
 
   .ionic-refresher {
-    -webkit-animation: refresher-pulsate 1.5s linear;
+    @include animation(refresher-pulsate 1.5s linear);
     -webkit-animation-iteration-count: infinite; 
   }
 }
@@ -145,7 +138,6 @@ body, .ionic-body {
   .scroll {
     position: static;
     height: 100%;
-
   }
 }
 
@@ -180,4 +172,3 @@ body, .ionic-body {
   height: 100%;
   background-color: #fff;
 }
-
diff --git a/scss/_slide-box.scss b/scss/_slide-box.scss
index 2d564a5a33..6b74c85d71 100644
--- a/scss/_slide-box.scss
+++ b/scss/_slide-box.scss
@@ -5,27 +5,27 @@
  */
 
 .slide-box {
-  background-color: #000;
   position: relative;
   // Make sure items don't scroll over ever
   overflow: hidden;
+  background-color: #000;
 }
 .slide-box-slides {
   position: relative;
   white-space: nowrap;
+  font-size: 0; // Remove the gaps between slide content items
   -webkit-transition: -webkit-transform 0 ease-in-out;
+}
 
-  // Remove the gaps between slide content items
-  font-size: 0;
-}
 .slide-box-animating {
-  -webkit-transition-duration: 0.2s;
+  @include transition-duration(0.2s);
 }
+
 .slide-box-slide {
   display: inline-block;
-  vertical-align: top;
   width: 100%;
   height: 100%;
+  vertical-align: top;
 
   img {
     width: 100%;
@@ -40,15 +40,15 @@
 
   > * {
     display: inline-block;
-    text-decoration: none;
     margin: 0px 5px;
     color: #fff;
+    text-decoration: none;
 
     opacity: 0.3;
 
     &.active {
-      -webkit-transition: opacity 0.4s ease-in;
       opacity: 1;
+      @include transition(opacity 0.4s ease-in);
     }
   }
 }
diff --git a/scss/_toggle.scss b/scss/_toggle.scss
index 1a3c42ad4f..3129f33041 100644
--- a/scss/_toggle.scss
+++ b/scss/_toggle.scss
@@ -17,6 +17,10 @@
 
 /* the track appearance when the toggle is "off" */
 .toggle .track {
+  @include transition-timing-function(ease-in-out);
+  @include transition-duration($toggle-transition-duration);
+  @include transition-property((background-color, border));
+
   display: inline-block;
   box-sizing: border-box;
   width: $toggle-width;
@@ -26,10 +30,6 @@
   background-color: $toggle-off-bg-color;
   content: ' ';
   cursor: pointer;
-
-  transition-timing-function: ease-in-out;
-  transition-duration: $toggle-transition-duration;
-  transition-property: background-color, border;
 }
 
 /* the handle (circle) thats inside the toggle's track area */