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 | }
|
---|