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.
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) {
103 &::-moz-placeholder {
105 opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
107 &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
108 &::-webkit-input-placeholder { color: $color; } // Safari and Chrome
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);
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);
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);
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);
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);
143 @mixin translate3d($x, $y, $z) {
144 -webkit-transform: translate3d($x, $y, $z);
145 transform: translate3d($x, $y, $z);
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);
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);
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);
165 @mixin perspective($perspective) {
166 -webkit-perspective: $perspective;
167 -moz-perspective: $perspective;
168 perspective: $perspective;
170 @mixin perspective-origin($perspective) {
171 -webkit-perspective-origin: $perspective;
172 -moz-perspective-origin: $perspective;
173 perspective-origin: $perspective;
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;
185 @mixin transition($transition...) {
186 -webkit-transition: $transition;
187 -o-transition: $transition;
188 transition: $transition;
190 @mixin transition-property($transition-property...) {
191 -webkit-transition-property: $transition-property;
192 transition-property: $transition-property;
194 @mixin transition-delay($transition-delay) {
195 -webkit-transition-delay: $transition-delay;
196 transition-delay: $transition-delay;
198 @mixin transition-duration($transition-duration...) {
199 -webkit-transition-duration: $transition-duration;
200 transition-duration: $transition-duration;
202 @mixin transition-timing-function($timing-function) {
203 -webkit-transition-timing-function: $timing-function;
204 transition-timing-function: $timing-function;
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;
215 // For selecting text on the page
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;