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
19
@mixin animation($animation) {
20
-webkit-animation: $animation;
21
-o-animation: $animation;
22
animation: $animation;
24
@mixin animation-name($name) {
25
-webkit-animation-name: $name;
26
animation-name: $name;
28
@mixin animation-duration($duration) {
29
-webkit-animation-duration: $duration;
30
animation-duration: $duration;
32
@mixin animation-timing-function($timing-function) {
33
-webkit-animation-timing-function: $timing-function;
34
animation-timing-function: $timing-function;
36
@mixin animation-delay($delay) {
37
-webkit-animation-delay: $delay;
38
animation-delay: $delay;
40
@mixin animation-iteration-count($iteration-count) {
41
-webkit-animation-iteration-count: $iteration-count;
42
animation-iteration-count: $iteration-count;
44
@mixin animation-direction($direction) {
45
-webkit-animation-direction: $direction;
46
animation-direction: $direction;
48
@mixin animation-fill-mode($fill-mode) {
49
-webkit-animation-fill-mode: $fill-mode;
50
animation-fill-mode: $fill-mode;
53
// Backface visibility
54
// Prevent browsers from flickering when using CSS 3D transforms.
55
// Default value is `visible`, but can be changed to `hidden`
57
@mixin backface-visibility($visibility){
58
-webkit-backface-visibility: $visibility;
59
-moz-backface-visibility: $visibility;
60
backface-visibility: $visibility;
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.
68
@mixin box-shadow($shadow...) {
69
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
74
@mixin box-sizing($boxmodel) {
75
-webkit-box-sizing: $boxmodel;
76
-moz-box-sizing: $boxmodel;
77
box-sizing: $boxmodel;
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;
90
// Optional hyphenation
91
@mixin hyphens($mode: auto) {
92
word-wrap: break-word;
93
-webkit-hyphens: $mode;
95
-ms-hyphens: $mode; // IE10+
101
@mixin placeholder($color: $input-color-placeholder) {
102
&::-moz-placeholder { color: $color; // Firefox
103
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
104
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
105
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
109
@mixin scale($ratio...) {
110
-webkit-transform: scale($ratio);
111
-ms-transform: scale($ratio); // IE9 only
112
-o-transform: scale($ratio);
113
transform: scale($ratio);
116
@mixin scaleX($ratio) {
117
-webkit-transform: scaleX($ratio);
118
-ms-transform: scaleX($ratio); // IE9 only
119
-o-transform: scaleX($ratio);
120
transform: scaleX($ratio);
122
@mixin scaleY($ratio) {
123
-webkit-transform: scaleY($ratio);
124
-ms-transform: scaleY($ratio); // IE9 only
125
-o-transform: scaleY($ratio);
126
transform: scaleY($ratio);
128
@mixin skew($x, $y) {
129
-webkit-transform: skewX($x) skewY($y);
130
-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
131
-o-transform: skewX($x) skewY($y);
132
transform: skewX($x) skewY($y);
134
@mixin translate($x, $y) {
135
-webkit-transform: translate($x, $y);
136
-ms-transform: translate($x, $y); // IE9 only
137
-o-transform: translate($x, $y);
138
transform: translate($x, $y);
140
@mixin translate3d($x, $y, $z) {
141
-webkit-transform: translate3d($x, $y, $z);
142
transform: translate3d($x, $y, $z);
144
@mixin rotate($degrees) {
145
-webkit-transform: rotate($degrees);
146
-ms-transform: rotate($degrees); // IE9 only
147
-o-transform: rotate($degrees);
148
transform: rotate($degrees);
150
@mixin rotateX($degrees) {
151
-webkit-transform: rotateX($degrees);
152
-ms-transform: rotateX($degrees); // IE9 only
153
-o-transform: rotateX($degrees);
154
transform: rotateX($degrees);
156
@mixin rotateY($degrees) {
157
-webkit-transform: rotateY($degrees);
158
-ms-transform: rotateY($degrees); // IE9 only
159
-o-transform: rotateY($degrees);
160
transform: rotateY($degrees);
162
@mixin perspective($perspective) {
163
-webkit-perspective: $perspective;
164
-moz-perspective: $perspective;
165
perspective: $perspective;
167
@mixin perspective-origin($perspective) {
168
-webkit-perspective-origin: $perspective;
169
-moz-perspective-origin: $perspective;
170
perspective-origin: $perspective;
172
@mixin transform-origin($origin) {
173
-webkit-transform-origin: $origin;
174
-moz-transform-origin: $origin;
175
-ms-transform-origin: $origin; // IE9 only
176
transform-origin: $origin;
182
@mixin transition($transition...) {
183
-webkit-transition: $transition;
184
-o-transition: $transition;
185
transition: $transition;
187
@mixin transition-property($transition-property...) {
188
-webkit-transition-property: $transition-property;
189
transition-property: $transition-property;
191
@mixin transition-delay($transition-delay) {
192
-webkit-transition-delay: $transition-delay;
193
transition-delay: $transition-delay;
195
@mixin transition-duration($transition-duration...) {
196
-webkit-transition-duration: $transition-duration;
197
transition-duration: $transition-duration;
199
@mixin transition-timing-function($timing-function) {
200
-webkit-transition-timing-function: $timing-function;
201
transition-timing-function: $timing-function;
203
@mixin transition-transform($transition...) {
204
-webkit-transition: -webkit-transform $transition;
205
-moz-transition: -moz-transform $transition;
206
-o-transition: -o-transform $transition;
207
transition: transform $transition;
212
// For selecting text on the page
214
@mixin user-select($select) {
215
-webkit-user-select: $select;
216
-moz-user-select: $select;
217
-ms-user-select: $select; // IE10+
218
user-select: $select;