1// Vendor Prefixes
2//
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.
5
6// - Animations
7// - Backface visibility
8// - Box shadow
9// - Box sizing
10// - Content columns
11// - Hyphens
12// - Placeholder text
13// - Transformations
14// - Transitions
15// - User Select
16
17
18// Animations
19.animation(@animation) {
20  -webkit-animation: @animation;
21       -o-animation: @animation;
22          animation: @animation;
23}
24.animation-name(@name) {
25  -webkit-animation-name: @name;
26          animation-name: @name;
27}
28.animation-duration(@duration) {
29  -webkit-animation-duration: @duration;
30          animation-duration: @duration;
31}
32.animation-timing-function(@timing-function) {
33  -webkit-animation-timing-function: @timing-function;
34          animation-timing-function: @timing-function;
35}
36.animation-delay(@delay) {
37  -webkit-animation-delay: @delay;
38          animation-delay: @delay;
39}
40.animation-iteration-count(@iteration-count) {
41  -webkit-animation-iteration-count: @iteration-count;
42          animation-iteration-count: @iteration-count;
43}
44.animation-direction(@direction) {
45  -webkit-animation-direction: @direction;
46          animation-direction: @direction;
47}
48.animation-fill-mode(@fill-mode) {
49  -webkit-animation-fill-mode: @fill-mode;
50          animation-fill-mode: @fill-mode;
51}
52
53// Backface visibility
54// Prevent browsers from flickering when using CSS 3D transforms.
55// Default value is `visible`, but can be changed to `hidden`
56
57.backface-visibility(@visibility){
58  -webkit-backface-visibility: @visibility;
59     -moz-backface-visibility: @visibility;
60          backface-visibility: @visibility;
61}
62
63// Drop shadows
64//
65// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
66// supported browsers that have box shadow capabilities now support it.
67
68.box-shadow(@shadow) {
69  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
70          box-shadow: @shadow;
71}
72
73// Box sizing
74.box-sizing(@boxmodel) {
75  -webkit-box-sizing: @boxmodel;
76     -moz-box-sizing: @boxmodel;
77          box-sizing: @boxmodel;
78}
79
80// CSS3 Content Columns
81.content-columns(@column-count; @column-gap: @grid-gutter-width) {
82  -webkit-column-count: @column-count;
83     -moz-column-count: @column-count;
84          column-count: @column-count;
85  -webkit-column-gap: @column-gap;
86     -moz-column-gap: @column-gap;
87          column-gap: @column-gap;
88}
89
90// Optional hyphenation
91.hyphens(@mode: auto) {
92  word-wrap: break-word;
93  -webkit-hyphens: @mode;
94     -moz-hyphens: @mode;
95      -ms-hyphens: @mode; // IE10+
96       -o-hyphens: @mode;
97          hyphens: @mode;
98}
99
100// Placeholder text
101.placeholder(@color: @input-color-placeholder) {
102  // Firefox
103  &::-moz-placeholder {
104    color: @color;
105    opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
106  }
107  &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
108  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
109}
110
111// Transformations
112.scale(@ratio) {
113  -webkit-transform: scale(@ratio);
114      -ms-transform: scale(@ratio); // IE9 only
115       -o-transform: scale(@ratio);
116          transform: scale(@ratio);
117}
118.scale(@ratioX; @ratioY) {
119  -webkit-transform: scale(@ratioX, @ratioY);
120      -ms-transform: scale(@ratioX, @ratioY); // IE9 only
121       -o-transform: scale(@ratioX, @ratioY);
122          transform: scale(@ratioX, @ratioY);
123}
124.scaleX(@ratio) {
125  -webkit-transform: scaleX(@ratio);
126      -ms-transform: scaleX(@ratio); // IE9 only
127       -o-transform: scaleX(@ratio);
128          transform: scaleX(@ratio);
129}
130.scaleY(@ratio) {
131  -webkit-transform: scaleY(@ratio);
132      -ms-transform: scaleY(@ratio); // IE9 only
133       -o-transform: scaleY(@ratio);
134          transform: scaleY(@ratio);
135}
136.skew(@x; @y) {
137  -webkit-transform: skewX(@x) skewY(@y);
138      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
139       -o-transform: skewX(@x) skewY(@y);
140          transform: skewX(@x) skewY(@y);
141}
142.translate(@x; @y) {
143  -webkit-transform: translate(@x, @y);
144      -ms-transform: translate(@x, @y); // IE9 only
145       -o-transform: translate(@x, @y);
146          transform: translate(@x, @y);
147}
148.translate3d(@x; @y; @z) {
149  -webkit-transform: translate3d(@x, @y, @z);
150          transform: translate3d(@x, @y, @z);
151}
152.rotate(@degrees) {
153  -webkit-transform: rotate(@degrees);
154      -ms-transform: rotate(@degrees); // IE9 only
155       -o-transform: rotate(@degrees);
156          transform: rotate(@degrees);
157}
158.rotateX(@degrees) {
159  -webkit-transform: rotateX(@degrees);
160      -ms-transform: rotateX(@degrees); // IE9 only
161       -o-transform: rotateX(@degrees);
162          transform: rotateX(@degrees);
163}
164.rotateY(@degrees) {
165  -webkit-transform: rotateY(@degrees);
166      -ms-transform: rotateY(@degrees); // IE9 only
167       -o-transform: rotateY(@degrees);
168          transform: rotateY(@degrees);
169}
170.perspective(@perspective) {
171  -webkit-perspective: @perspective;
172     -moz-perspective: @perspective;
173          perspective: @perspective;
174}
175.perspective-origin(@perspective) {
176  -webkit-perspective-origin: @perspective;
177     -moz-perspective-origin: @perspective;
178          perspective-origin: @perspective;
179}
180.transform-origin(@origin) {
181  -webkit-transform-origin: @origin;
182     -moz-transform-origin: @origin;
183      -ms-transform-origin: @origin; // IE9 only
184          transform-origin: @origin;
185}
186
187
188// Transitions
189
190.transition(@transition) {
191  -webkit-transition: @transition;
192       -o-transition: @transition;
193          transition: @transition;
194}
195.transition-property(@transition-property) {
196  -webkit-transition-property: @transition-property;
197          transition-property: @transition-property;
198}
199.transition-delay(@transition-delay) {
200  -webkit-transition-delay: @transition-delay;
201          transition-delay: @transition-delay;
202}
203.transition-duration(@transition-duration) {
204  -webkit-transition-duration: @transition-duration;
205          transition-duration: @transition-duration;
206}
207.transition-timing-function(@timing-function) {
208  -webkit-transition-timing-function: @timing-function;
209          transition-timing-function: @timing-function;
210}
211.transition-transform(@transition) {
212  -webkit-transition: -webkit-transform @transition;
213     -moz-transition: -moz-transform @transition;
214       -o-transition: -o-transform @transition;
215          transition: transform @transition;
216}
217
218
219// User select
220// For selecting text on the page
221
222.user-select(@select) {
223  -webkit-user-select: @select;
224     -moz-user-select: @select;
225      -ms-user-select: @select; // IE10+
226          user-select: @select;
227}
228