Add .animation() mixins.

twbs/bootstrap#11244
designmodo · Feb 5, 2014 · e70e9c0 · e70e9c0
1 parent 65c8f3e
commit e70e9c0
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 20 deletions.
diff --git a/css/flat-ui.css b/css/flat-ui.css
@@ -1106,7 +1106,6 @@ label {
 }
 .form-control:-moz-placeholder {
   color: #b2bcc5;
-  opacity: 1;
 }
 .form-control::-moz-placeholder {
   color: #b2bcc5;
@@ -1220,7 +1219,6 @@ textarea.input-hg {
 }
 .has-warning .form-control:-moz-placeholder {
   color: #f1c40f;
-  opacity: 1;
 }
 .has-warning .form-control::-moz-placeholder {
   color: #f1c40f;
@@ -1261,7 +1259,6 @@ textarea.input-hg {
 }
 .has-error .form-control:-moz-placeholder {
   color: #e74c3c;
-  opacity: 1;
 }
 .has-error .form-control::-moz-placeholder {
   color: #e74c3c;
@@ -1302,7 +1299,6 @@ textarea.input-hg {
 }
 .has-success .form-control:-moz-placeholder {
   color: #2ecc71;
-  opacity: 1;
 }
 .has-success .form-control::-moz-placeholder {
   color: #2ecc71;
@@ -2302,7 +2298,6 @@ textarea.navbar-form .btn {
 }
 .navbar-default .navbar-form .form-control:-moz-placeholder {
   color: #aeb6bf;
-  opacity: 1;
 }
 .navbar-default .navbar-form .form-control::-moz-placeholder {
   color: #aeb6bf;
@@ -2467,7 +2462,6 @@ textarea.navbar-form .btn {
 }
 .navbar-inverse .navbar-form .form-control:-moz-placeholder {
   color: #536a81;
-  opacity: 1;
 }
 .navbar-inverse .navbar-form .form-control::-moz-placeholder {
   color: #536a81;
@@ -2773,7 +2767,6 @@ fieldset[disabled] .navbar-inverse .navbar-btn.active {
 .twitter-typeahead .tt-query:-moz-placeholder,
 .twitter-typeahead .tt-hint:-moz-placeholder {
   color: #b2bcc5;
-  opacity: 1;
 }
 .twitter-typeahead .tt-query::-moz-placeholder,
 .twitter-typeahead .tt-hint::-moz-placeholder {
@@ -3832,7 +3825,6 @@ input.todo-search-field {
 }
 input.todo-search-field:-moz-placeholder {
   color: #34495e;
-  opacity: 1;
 }
 input.todo-search-field::-moz-placeholder {
   color: #34495e;
@@ -4317,8 +4309,6 @@ body.vjs-full-window {
   width: 16px;
   border-radius: 10px;
   -webkit-animation: sharp 2s ease infinite;
-  -moz-animation: sharp 2s ease infinite;
-  -o-animation: sharp 2s ease infinite;
   animation: sharp 2s ease infinite;
 }
 .login {

diff --git a/less/mixins.less b/less/mixins.less
@@ -53,8 +53,9 @@
 
 // Placeholder text
 .placeholder(@color: @input-color-placeholder) {
-  &:-moz-placeholder            { color: @color; opacity: 1; } // Firefox 4-18
-  &::-moz-placeholder           { color: @color; opacity: 1; } // Firefox 19+
+  &:-moz-placeholder            { color: @color; } // Firefox 4-18
+  &::-moz-placeholder           { color: @color;   // Firefox 19+
+                                  opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
   &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
   &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
   &.placeholder                 { color: @color; } // Fallback
@@ -121,13 +122,6 @@
           box-shadow: @shadow;
 }
 
-.animation(@properties) {
-  -webkit-animation: @properties;
-     -moz-animation: @properties;
-       -o-animation: @properties;
-          animation: @properties;
-}
-
 // Transitions
 .transition(@transition) {
   -webkit-transition: @transition;
@@ -198,12 +192,43 @@
      -moz-perspective-origin: @perspective;
           perspective-origin: @perspective;
 }
-.transform-origin(@origin){
+.transform-origin(@origin) {
   -webkit-transform-origin: @origin;
      -moz-transform-origin: @origin;
+      -ms-transform-origin: @origin; // IE9 only
           transform-origin: @origin;
 }
 
+// Animations
+.animation(@animation) {
+  -webkit-animation: @animation;
+          animation: @animation;
+}
+.animation-name(@name) {
+  -webkit-animation-name: @name;
+          animation-name: @name;
+}
+.animation-duration(@duration) {
+  -webkit-animation-duration: @duration;
+          animation-duration: @duration;
+}
+.animation-timing-function(@timing-function) {
+  -webkit-animation-timing-function: @timing-function;
+          animation-timing-function: @timing-function;
+}
+.animation-delay(@delay) {
+  -webkit-animation-delay: @delay;
+          animation-delay: @delay;
+}
+.animation-iteration-count(@iteration-count) {
+  -webkit-animation-iteration-count: @iteration-count;
+          animation-iteration-count: @iteration-count;
+}
+.animation-direction(@direction) {
+  -webkit-animation-direction: @direction;
+          animation-direction: @direction;
+}
+
 
 // Backface visibility
 // Prevent browsers from flickering when using CSS 3D transforms.