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