From e70e9c0ce273b903dcb2e83eb3e0f689ea7f1fc8 Mon Sep 17 00:00:00 2001 From: Dmitry Pytkin Date: Thu, 6 Feb 2014 02:04:34 +0800 Subject: [PATCH] Add .animation() mixins. https://github.com/twbs/bootstrap/pull/11244 --- css/flat-ui.css | 10 ---------- less/mixins.less | 45 +++++++++++++++++++++++++++++++++++---------- 2 files changed, 35 insertions(+), 20 deletions(-) diff --git a/css/flat-ui.css b/css/flat-ui.css index 3e6dd047..52c5b5ad 100644 --- 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 index 6a9e5ee4..ae4ebe07 100644 --- 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.