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; // 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