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