From d96456a234f68c50ab278b5257fda284abbce150 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Tue, 26 Nov 2013 23:18:41 -0600
Subject: [PATCH] mixins cleanup

---
 dist/css/ionic.css |   8 ++-
 scss/_mixins.scss  | 149 ++++++++++++++++++++++++++++-----------------
 2 files changed, 98 insertions(+), 59 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index c06d14c271..bebf1c298b 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1953,7 +1953,6 @@ html {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  -o-user-select: none;
   user-select: none;
   font-family: sans-serif;
   /* 1 */
@@ -2633,7 +2632,6 @@ a.subdued {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  -o-user-select: none;
   user-select: none;
   position: absolute;
   right: 0;
@@ -3197,6 +3195,7 @@ a.subdued {
  */
 .modal {
   -webkit-transform: translate3d(0, 100%, 0);
+  -moz-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
   position: fixed;
   top: 0;
@@ -4328,6 +4327,7 @@ input[type="checkbox"][readonly] {
 /* also the handle's appearance when it is "off" */
 .toggle .handle {
   -webkit-transition: 0.1s ease-in-out;
+  -moz-transition: 0.1s ease-in-out;
   transition: 0.1s ease-in-out;
   position: absolute;
   top: 2px;
@@ -4353,6 +4353,7 @@ input[type="checkbox"][readonly] {
 /* the handle when the toggle is "on" */
 .toggle input:checked + .track .handle {
   -webkit-transform: translate3d(22px, 0, 0);
+  -moz-transform: translate3d(22px, 0, 0);
   transform: translate3d(22px, 0, 0);
   background-color: white; }
 
@@ -4812,6 +4813,7 @@ input[type="range"] {
 
 .button-icon {
   -webkit-transition: opacity 0.1s;
+  -moz-transition: opacity 0.1s;
   transition: opacity 0.1s;
   padding: 0 6px;
   min-width: initial;
@@ -4828,6 +4830,7 @@ input[type="range"] {
 
 .button-clear {
   -webkit-transition: opacity 0.1s;
+  -moz-transition: opacity 0.1s;
   transition: opacity 0.1s;
   padding: 0 6px;
   max-height: 42px;
@@ -4847,6 +4850,7 @@ input[type="range"] {
 
 .button-outline {
   -webkit-transition: opacity 0.1s;
+  -moz-transition: opacity 0.1s;
   transition: opacity 0.1s;
   background: none;
   box-shadow: none; }
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index cfa857cc62..4eab877a79 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -117,12 +117,9 @@
 }
 
 
-// Utility Mixins
+// Clearfix
 // --------------------------------------------------
 
-// Clearfix
-// --------
-// For clearing floats like a boss h5bp.com/q
 @mixin clearfix {
   *zoom: 1;
   &:before,
@@ -137,28 +134,11 @@
     clear: both;
   }
 }
-// Center-align a block level element
-// ----------------------------------
-@mixin center-block() {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-
-// Sizing shortcuts
-// -------------------------
-@mixin size($height, $width) {
-  width: $width;
-  height: $height;
-}
-@mixin square($size) {
-  @include size($size, $size);
-}
 
 
 // Placeholder text
-// -------------------------
+// --------------------------------------------------
+
 @mixin placeholder($color: $input-color-placeholder) {
   &:-moz-placeholder {
     color: $color;
@@ -173,8 +153,8 @@
 
 
 // Text overflow
-// -------------------------
-// Requires inline-block or block for proper styling
+// --------------------------------------------------
+
 @mixin text-overflow() {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -182,7 +162,7 @@
 }
 
 
-// FONTS
+// Fonts
 // --------------------------------------------------
 
 @mixin font-family-serif() {
@@ -214,19 +194,19 @@
 
 
 
-
-
-// CSS3 PROPERTIES
+// Appearance
 // --------------------------------------------------
 
-// Appearance
 @mixin appearance($val) {
   -webkit-appearance: $val;
   -moz-appearance: $val;
   appearance: $val;
 }
 
+
 // Border Radius
+// --------------------------------------------------
+
 @mixin border-radius($radius) {
   -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
@@ -273,93 +253,158 @@
   @include border-bottom-left-radius($radius);
 }
 
-// Drop shadows
+
+// Box shadows
+// --------------------------------------------------
+
 @mixin box-shadow($shadow...) {
   -webkit-box-shadow: $shadow;
      -moz-box-shadow: $shadow;
           box-shadow: $shadow;
 }
 
+
 // Transitions
+// --------------------------------------------------
+
 @mixin transition($transition...) {
   -webkit-transition: $transition;
+     -moz-transition: $transition;
           transition: $transition;
 }
 @mixin transition-delay($transition-delay) {
   -webkit-transition-delay: $transition-delay;
+     -moz-transition-delay: $transition-delay;
           transition-delay: $transition-delay;
 }
 @mixin transition-duration($transition-duration) {
   -webkit-transition-duration: $transition-duration;
+     -moz-transition-duration: $transition-duration;
           transition-duration: $transition-duration;
 }
+@mixin transition-timing-function($transition-timing) {
+   -webkit-transition-timing-function: $transition-timing;
+      -moz-transition-timing-function: $transition-timing;
+           transition-timing-function: $transition-timing;
+ }
+@mixin animation($animation) {
+ -webkit-animation: $animation;
+    -moz-animation: $animation;
+         animation: $animation;
+}
+@mixin animation-duration($duration) {
+ -webkit-animation-duration: $duration;
+    -moz-animation-duration: $duration;
+         animation-duration: $duration;
+}
+@mixin animation-timing-function($animation-timing) {
+ -webkit-animation-timing-function: $animation-timing;
+    -moz-animation-timing-function: $animation-timing;
+         animation-timing-function: $animation-timing;
+}
+@mixin animation-fill-mode($fill-mode) {
+ -webkit-animation-fill-mode: $fill-mode;
+    -moz-animation-fill-mode: $fill-mode;
+         animation-fill-mode: $fill-mode;
+}
+@mixin animation-name($name) {
+ -webkit-animation-name: $name;
+    -moz-animation-name: $name;
+         animation-name: $name;
+}
+@mixin animation-iteration-count($count) {
+ -webkit-animation-iteration-count: $count;
+    -moz-animation-iteration-count: $count;
+         animation-iteration-count: $count;
+ }
+
 
 // Transformations
+// --------------------------------------------------
+
 @mixin rotate($degrees) {
   -webkit-transform: rotate($degrees);
+     -moz-transform: rotate($degrees);
           transform: rotate($degrees);
 }
 @mixin scale($ratio) {
   -webkit-transform: scale($ratio);
+     -moz-transform: scale($ratio);
           transform: scale($ratio);
 }
 @mixin translate($x, $y) {
   -webkit-transform: translate($x, $y);
+     -moz-transform: translate($x, $y);
           transform: translate($x, $y);
 }
 @mixin skew($x, $y) {
   -webkit-transform: skew($x, $y);
+     -moz-transform: skew($x, $y);
           transform: skew($x, $y);
-  -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
+  -webkit-backface-visibility: hidden;
 }
 @mixin translate3d($x, $y, $z) {
   -webkit-transform: translate3d($x, $y, $z);
+     -moz-transform: translate3d($x, $y, $z);
           transform: translate3d($x, $y, $z);
 }
 
+
 // Backface visibility
+// --------------------------------------------------
 // Prevent browsers from flickering when using CSS 3D transforms.
 // Default value is `visible`, but can be changed to `hidden
-// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
+
 @mixin backface-visibility($visibility){
   -webkit-backface-visibility: $visibility;
           backface-visibility: $visibility;
 }
 
+
 // Background clipping
+// --------------------------------------------------
+
 @mixin background-clip($clip) {
   -webkit-background-clip: $clip;
      -moz-background-clip: $clip;
           background-clip: $clip;
 }
 
+
 // Background sizing
+// --------------------------------------------------
+
 @mixin background-size($size) {
   -webkit-background-size: $size;
      -moz-background-size: $size;
-       -o-background-size: $size;
           background-size: $size;
 }
 
 
 // Box sizing
+// --------------------------------------------------
+
 @mixin box-sizing($boxmodel) {
   -webkit-box-sizing: $boxmodel;
      -moz-box-sizing: $boxmodel;
           box-sizing: $boxmodel;
 }
 
+
 // User select
-// For selecting text on the page
+// --------------------------------------------------
+
 @mixin user-select($select) {
   -webkit-user-select: $select;
      -moz-user-select: $select;
       -ms-user-select: $select;
-       -o-user-select: $select;
           user-select: $select;
 }
 
-// CSS3 Content Columns
+
+// Content Columns
+// --------------------------------------------------
+
 @mixin content-columns($columnCount, $columnGap: $grid-gutter-width) {
   -webkit-column-count: $columnCount;
      -moz-column-count: $columnCount;
@@ -369,16 +414,6 @@
           column-gap: $columnGap;
 }
 
-// Optional hyphenation
-@mixin hyphens($mode: auto) {
-  word-wrap: break-word;
-  -webkit-hyphens: $mode;
-     -moz-hyphens: $mode;
-      -ms-hyphens: $mode;
-       -o-hyphens: $mode;
-          hyphens: $mode;
-}
-
 
 // Flexbox Mixins
 // --------------------------------------------------
@@ -404,17 +439,17 @@
 
 @mixin flex-direction($value: row) {
   @if $value == row-reverse {
-          -webkit-box-direction: reverse;
-          -webkit-box-orient: horizontal;
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
   } @else if $value == column {
-          -webkit-box-direction: normal;
-          -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
   } @else if $value == column-reverse {
-          -webkit-box-direction: reverse;
-          -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
   } @else {
-          -webkit-box-direction: normal;
-          -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
   }
   -webkit-flex-direction: $value;
   -moz-flex-direction: $value;
@@ -427,9 +462,9 @@
   -webkit-flex-wrap: $value;
   -moz-flex-wrap: $value;
   @if $value == nowrap {
-          -ms-flex-wrap: none;
+      -ms-flex-wrap: none;
   } @else { 
-          -ms-flex-wrap: $value; 
+      -ms-flex-wrap: $value; 
   }
   flex-wrap: $value;
 }