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