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 have been 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@mixin animation($animation) {
20  -webkit-animation: $animation;
21       -o-animation: $animation;
22          animation: $animation;
23}
24@mixin animation-name($name) {
25  -webkit-animation-name: $name;
26          animation-name: $name;
27}
28@mixin animation-duration($duration) {
29  -webkit-animation-duration: $duration;
30          animation-duration: $duration;
31}
32@mixin animation-timing-function($timing-function) {
33  -webkit-animation-timing-function: $timing-function;
34          animation-timing-function: $timing-function;
35}
36@mixin animation-delay($delay) {
37  -webkit-animation-delay: $delay;
38          animation-delay: $delay;
39}
40@mixin animation-iteration-count($iteration-count) {
41  -webkit-animation-iteration-count: $iteration-count;
42          animation-iteration-count: $iteration-count;
43}
44@mixin animation-direction($direction) {
45  -webkit-animation-direction: $direction;
46          animation-direction: $direction;
47}
48@mixin 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@mixin 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@mixin box-shadow($shadow...) {
69  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
70          box-shadow: $shadow;
71}
72
73// Box sizing
74@mixin box-sizing($boxmodel) {
75  -webkit-box-sizing: $boxmodel;
76     -moz-box-sizing: $boxmodel;
77          box-sizing: $boxmodel;
78}
79
80// CSS3 Content Columns
81@mixin 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@mixin hyphens($mode: auto) {
92  -webkit-hyphens: $mode;
93     -moz-hyphens: $mode;
94      -ms-hyphens: $mode; // IE10+
95       -o-hyphens: $mode;
96          hyphens: $mode;
97  word-wrap: break-word;
98}
99
100// Placeholder text
101@mixin placeholder($color: $input-color-placeholder) {
102  // Firefox
103  &::-moz-placeholder {
104    color: $color;
105    opacity: 1; // Override Firefox's unusual default opacity; 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@mixin 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
119@mixin scaleX($ratio) {
120  -webkit-transform: scaleX($ratio);
121      -ms-transform: scaleX($ratio); // IE9 only
122       -o-transform: scaleX($ratio);
123          transform: scaleX($ratio);
124}
125@mixin scaleY($ratio) {
126  -webkit-transform: scaleY($ratio);
127      -ms-transform: scaleY($ratio); // IE9 only
128       -o-transform: scaleY($ratio);
129          transform: scaleY($ratio);
130}
131@mixin skew($x, $y) {
132  -webkit-transform: skewX($x) skewY($y);
133      -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
134       -o-transform: skewX($x) skewY($y);
135          transform: skewX($x) skewY($y);
136}
137@mixin translate($x, $y) {
138  -webkit-transform: translate($x, $y);
139      -ms-transform: translate($x, $y); // IE9 only
140       -o-transform: translate($x, $y);
141          transform: translate($x, $y);
142}
143@mixin translate3d($x, $y, $z) {
144  -webkit-transform: translate3d($x, $y, $z);
145          transform: translate3d($x, $y, $z);
146}
147@mixin rotate($degrees) {
148  -webkit-transform: rotate($degrees);
149      -ms-transform: rotate($degrees); // IE9 only
150       -o-transform: rotate($degrees);
151          transform: rotate($degrees);
152}
153@mixin rotateX($degrees) {
154  -webkit-transform: rotateX($degrees);
155      -ms-transform: rotateX($degrees); // IE9 only
156       -o-transform: rotateX($degrees);
157          transform: rotateX($degrees);
158}
159@mixin rotateY($degrees) {
160  -webkit-transform: rotateY($degrees);
161      -ms-transform: rotateY($degrees); // IE9 only
162       -o-transform: rotateY($degrees);
163          transform: rotateY($degrees);
164}
165@mixin perspective($perspective) {
166  -webkit-perspective: $perspective;
167     -moz-perspective: $perspective;
168          perspective: $perspective;
169}
170@mixin perspective-origin($perspective) {
171  -webkit-perspective-origin: $perspective;
172     -moz-perspective-origin: $perspective;
173          perspective-origin: $perspective;
174}
175@mixin transform-origin($origin) {
176  -webkit-transform-origin: $origin;
177     -moz-transform-origin: $origin;
178      -ms-transform-origin: $origin; // IE9 only
179          transform-origin: $origin;
180}
181
182
183// Transitions
184
185@mixin transition($transition...) {
186  -webkit-transition: $transition;
187       -o-transition: $transition;
188          transition: $transition;
189}
190@mixin transition-property($transition-property...) {
191  -webkit-transition-property: $transition-property;
192          transition-property: $transition-property;
193}
194@mixin transition-delay($transition-delay) {
195  -webkit-transition-delay: $transition-delay;
196          transition-delay: $transition-delay;
197}
198@mixin transition-duration($transition-duration...) {
199  -webkit-transition-duration: $transition-duration;
200          transition-duration: $transition-duration;
201}
202@mixin transition-timing-function($timing-function) {
203  -webkit-transition-timing-function: $timing-function;
204          transition-timing-function: $timing-function;
205}
206@mixin transition-transform($transition...) {
207  -webkit-transition: -webkit-transform $transition;
208     -moz-transition: -moz-transform $transition;
209       -o-transition: -o-transform $transition;
210          transition: transform $transition;
211}
212
213
214// User select
215// For selecting text on the page
216
217@mixin user-select($select) {
218  -webkit-user-select: $select;
219     -moz-user-select: $select;
220      -ms-user-select: $select; // IE10+
221          user-select: $select;
222}
223