3 // All vendor mixins are deprecated as of v3.2.0 due to the introduction of
4 // Autoprefixer in our Gruntfile. They will be removed in v4.
7 // - Backface visibility
18 .animation(@animation) {
19 -webkit-animation: @animation;
20 -o-animation: @animation;
21 animation: @animation;
24 .animation-name(@name) {
25 -webkit-animation-name: @name;
26 animation-name: @name;
29 .animation-duration(@duration) {
30 -webkit-animation-duration: @duration;
31 animation-duration: @duration;
34 .animation-timing-function(@timing-function) {
35 -webkit-animation-timing-function: @timing-function;
36 animation-timing-function: @timing-function;
39 .animation-delay(@delay) {
40 -webkit-animation-delay: @delay;
41 animation-delay: @delay;
44 .animation-iteration-count(@iteration-count) {
45 -webkit-animation-iteration-count: @iteration-count;
46 animation-iteration-count: @iteration-count;
49 .animation-direction(@direction) {
50 -webkit-animation-direction: @direction;
51 animation-direction: @direction;
54 .animation-fill-mode(@fill-mode) {
55 -webkit-animation-fill-mode: @fill-mode;
56 animation-fill-mode: @fill-mode;
59 // Backface visibility
60 // Prevent browsers from flickering when using CSS 3D transforms.
61 // Default value is `visible`, but can be changed to `hidden`
63 .backface-visibility(@visibility) {
64 -webkit-backface-visibility: @visibility;
65 -moz-backface-visibility: @visibility;
66 backface-visibility: @visibility;
71 // Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
72 // supported browsers that have box shadow capabilities now support it.
74 .box-shadow(@shadow) {
75 -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
80 .box-sizing(@boxmodel) {
81 -webkit-box-sizing: @boxmodel;
82 -moz-box-sizing: @boxmodel;
83 box-sizing: @boxmodel;
86 // CSS3 Content Columns
87 .content-columns(@column-count; @column-gap: @grid-gutter-width) {
88 -webkit-column-count: @column-count;
89 -moz-column-count: @column-count;
90 column-count: @column-count;
91 -webkit-column-gap: @column-gap;
92 -moz-column-gap: @column-gap;
93 column-gap: @column-gap;
96 // Optional hyphenation
97 .hyphens(@mode: auto) {
98 word-wrap: break-word;
99 -webkit-hyphens: @mode;
101 -ms-hyphens: @mode; // IE10+
107 .placeholder(@color: @input-color-placeholder) {
109 &::-moz-placeholder {
111 opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
113 &:-ms-input-placeholder {
116 // Internet Explorer 10+
117 &::-webkit-input-placeholder {
125 -webkit-transform: scale(@ratio);
126 -ms-transform: scale(@ratio); // IE9 only
127 -o-transform: scale(@ratio);
128 transform: scale(@ratio);
131 .scale(@ratioX; @ratioY) {
132 -webkit-transform: scale(@ratioX, @ratioY);
133 -ms-transform: scale(@ratioX, @ratioY); // IE9 only
134 -o-transform: scale(@ratioX, @ratioY);
135 transform: scale(@ratioX, @ratioY);
139 -webkit-transform: scaleX(@ratio);
140 -ms-transform: scaleX(@ratio); // IE9 only
141 -o-transform: scaleX(@ratio);
142 transform: scaleX(@ratio);
146 -webkit-transform: scaleY(@ratio);
147 -ms-transform: scaleY(@ratio); // IE9 only
148 -o-transform: scaleY(@ratio);
149 transform: scaleY(@ratio);
153 -webkit-transform: skewX(@x) skewY(@y);
154 -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
155 -o-transform: skewX(@x) skewY(@y);
156 transform: skewX(@x) skewY(@y);
160 -webkit-transform: translate(@x, @y);
161 -ms-transform: translate(@x, @y); // IE9 only
162 -o-transform: translate(@x, @y);
163 transform: translate(@x, @y);
166 .translate3d(@x; @y; @z) {
167 -webkit-transform: translate3d(@x, @y, @z);
168 transform: translate3d(@x, @y, @z);
172 -webkit-transform: rotate(@degrees);
173 -ms-transform: rotate(@degrees); // IE9 only
174 -o-transform: rotate(@degrees);
175 transform: rotate(@degrees);
179 -webkit-transform: rotateX(@degrees);
180 -ms-transform: rotateX(@degrees); // IE9 only
181 -o-transform: rotateX(@degrees);
182 transform: rotateX(@degrees);
186 -webkit-transform: rotateY(@degrees);
187 -ms-transform: rotateY(@degrees); // IE9 only
188 -o-transform: rotateY(@degrees);
189 transform: rotateY(@degrees);
192 .perspective(@perspective) {
193 -webkit-perspective: @perspective;
194 -moz-perspective: @perspective;
195 perspective: @perspective;
198 .perspective-origin(@perspective) {
199 -webkit-perspective-origin: @perspective;
200 -moz-perspective-origin: @perspective;
201 perspective-origin: @perspective;
204 .transform-origin(@origin) {
205 -webkit-transform-origin: @origin;
206 -moz-transform-origin: @origin;
207 -ms-transform-origin: @origin; // IE9 only
208 transform-origin: @origin;
213 .transition(@transition) {
214 -webkit-transition: @transition;
215 -o-transition: @transition;
216 transition: @transition;
219 .transition-property(@transition-property) {
220 -webkit-transition-property: @transition-property;
221 transition-property: @transition-property;
224 .transition-delay(@transition-delay) {
225 -webkit-transition-delay: @transition-delay;
226 transition-delay: @transition-delay;
229 .transition-duration(@transition-duration) {
230 -webkit-transition-duration: @transition-duration;
231 transition-duration: @transition-duration;
234 .transition-timing-function(@timing-function) {
235 -webkit-transition-timing-function: @timing-function;
236 transition-timing-function: @timing-function;
239 .transition-transform(@transition) {
240 -webkit-transition: -webkit-transform @transition;
241 -moz-transition: -moz-transform @transition;
242 -o-transition: -o-transform @transition;
243 transition: transform @transition;
247 // For selecting text on the page
249 .user-select(@select) {
250 -webkit-user-select: @select;
251 -moz-user-select: @select;
252 -ms-user-select: @select; // IE10+
253 user-select: @select;