github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/_prefixer.scss (about) 1 //--------------------------------------------------- 2 // Sass Prefixer 3 // ------------------------------------------------- 4 // TABLE OF CONTENTS 5 // (*) denotes a syntax-sugar helper 6 // ------------------------------------------------- 7 // 8 // animation($args) 9 // animation-delay($delay) 10 // animation-direction($direction) 11 // animation-duration($duration) 12 // animation-fill-mode($mode) 13 // animation-iteration-count($count) 14 // animation-name($name) 15 // animation-play-state($state) 16 // animation-timing-function($function) 17 // background-size($args) 18 // inner-shadow($args) * 19 // box-sizing($args) 20 // border-box() * 21 // content-box() * 22 // columns($args) 23 // column-count($count) 24 // column-gap($gap) 25 // column-rule($args) 26 // column-width($width) 27 // flexbox() 28 // flex($args) 29 // order($args) 30 // align($args) 31 // justify-content($args) 32 // gradient($default,$start,$stop) * 33 // linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])* 34 // linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])* 35 // perspective($pixels) 36 // transform($args) 37 // transform-origin($args) 38 // transform-style($style) 39 // rotate($deg) 40 // scale($factor) 41 // translate($x,$y) 42 // translate3d($x,$y,$z) 43 // translateHardware($x,$y) * 44 // text-shadow($args) 45 // transition($args) 46 // transition-delay($delay) 47 // transition-duration($duration) 48 // transition-property($property) 49 // transition-timing-function($function) 50 51 52 // Animation 53 54 // @mixin animation($args) { 55 // -webkit-animation: $args; 56 // -moz-animation: $args; 57 // -ms-animation: $args; 58 // -o-animation: $args; 59 // animation: $args; 60 // } 61 // @mixin animation-delay($delay) { 62 // -webkit-animation-delay: $delay; 63 // -moz-animation-delay: $delay; 64 // -ms-animation-delay: $delay; 65 // -o-animation-delay: $delay; 66 // animation-delay: $delay; 67 // } 68 // @mixin animation-direction($direction) { 69 // -webkit-animation-direction: $direction; 70 // -moz-animation-direction: $direction; 71 // -ms-animation-direction: $direction; 72 // -o-animation-direction: $direction; 73 // } 74 // @mixin animation-duration($duration) { 75 // -webkit-animation-duration: $duration; 76 // -moz-animation-duration: $duration; 77 // -ms-animation-duration: $duration; 78 // -o-animation-duration: $duration; 79 // } 80 // @mixin animation-fill-mode($mode) { 81 // -webkit-animation-fill-mode: $mode; 82 // -moz-animation-fill-mode: $mode; 83 // -ms-animation-fill-mode: $mode; 84 // -o-animation-fill-mode: $mode; 85 // animation-fill-mode: $mode; 86 // } 87 // @mixin animation-iteration-count($count) { 88 // -webkit-animation-iteration-count: $count; 89 // -moz-animation-iteration-count: $count; 90 // -ms-animation-iteration-count: $count; 91 // -o-animation-iteration-count: $count; 92 // animation-iteration-count: $count; 93 // } 94 // @mixin animation-name($name) { 95 // -webkit-animation-name: $name; 96 // -moz-animation-name: $name; 97 // -ms-animation-name: $name; 98 // -o-animation-name: $name; 99 // animation-name: $name; 100 // } 101 // @mixin animation-play-state($state) { 102 // -webkit-animation-play-state: $state; 103 // -moz-animation-play-state: $state; 104 // -ms-animation-play-state: $state; 105 // -o-animation-play-state: $state; 106 // animation-play-state: $state; 107 // } 108 // @mixin animation-timing-function($function) { 109 // -webkit-animation-timing-function: $function; 110 // -moz-animation-timing-function: $function; 111 // -ms-animation-timing-function: $function; 112 // -o-animation-timing-function: $function; 113 // animation-timing-function: $function; 114 // } 115 116 // Keyframes 117 // @mixin keyframes($animation-name) { 118 // @-webkit-keyframes #{$animation-name} { 119 // @content; 120 // } 121 // @-moz-keyframes #{$animation-name} { 122 // @content; 123 // } 124 // @keyframes #{$animation-name} { 125 // @content; 126 // } 127 // } 128 129 // Backface-visibility 130 131 // @mixin backface-visibility($args) { 132 // -webkit-backface-visibility: $args; 133 // -moz-backface-visibility: $args; 134 // -ms-backface-visibility: $args; 135 // backface-visibility: $args; 136 // } 137 138 139 // Background Size 140 141 // @mixin background-size($args) { 142 // -webkit-background-size: $args; 143 // background-size: $args; 144 // } 145 146 // Box Sizing 147 148 // @mixin box-sizing($args) { 149 // -webkit-box-sizing: $args; 150 // -moz-box-sizing: $args; 151 // box-sizing: $args; 152 // } 153 // @mixin border-box(){ 154 // @include box-sizing(border-box); 155 // } 156 // @mixin content-box(){ 157 // @include box-sizing(content-box); 158 // } 159 160 161 // Columns 162 163 // @mixin columns($args) { 164 // -webkit-columns: $args; 165 // -moz-columns: $args; 166 // columns: $args; 167 // } 168 // @mixin column-count($count) { 169 // -webkit-column-count: $count; 170 // -moz-column-count: $count; 171 // column-count: $count; 172 // } 173 // @mixin column-gap($gap) { 174 // -webkit-column-gap: $gap; 175 // -moz-column-gap: $gap; 176 // column-gap: $gap; 177 // } 178 // @mixin column-width($width) { 179 // -webkit-column-width: $width; 180 // -moz-column-width: $width; 181 // column-width: $width; 182 // } 183 // @mixin column-rule($args) { 184 // -webkit-column-rule: $args; 185 // -moz-column-rule: $args; 186 // column-rule: $args; 187 // } 188 189 // Filter 190 // @mixin filter($args) { 191 // -webkit-filter: $args; 192 // -moz-filter: $args; 193 // -o-filter: $args; 194 // -ms-filter: $args; 195 // } 196 197 // Flexbox 198 // @mixin flexbox() { 199 // display: -webkit-box; 200 // display: -moz-box; 201 // display: -ms-flexbox; 202 // display: -webkit-flex; 203 // display: flex; 204 // } 205 // @mixin flex($values) { 206 // -webkit-box-flex: $values; 207 // -moz-box-flex: $values; 208 // -webkit-flex: $values; 209 // -ms-flex: $values; 210 // flex: $values; 211 // } 212 // @mixin order($val) { 213 // -webkit-box-ordinal-group: $val; 214 // -moz-box-ordinal-group: $val; 215 // -ms-flex-order: $val; 216 // -webkit-order: $val; 217 // order: $val; 218 // } 219 // @mixin align($align) { 220 // -webkit-flex-align: $align; 221 // -ms-flex-align: $align; 222 // -webkit-align-items: $align; 223 // align-items: $align; 224 // } 225 // @mixin justify-content($val) { 226 // -webkit-justify-content: $val; 227 // justify-content: $val; 228 // } 229 // Gradients 230 231 // @mixin gradient($default: #F5F5F5, $start: #EEE, $stop: #FFF) { 232 // @include linear-gradient-top($default,$start,0%,$stop,100%); 233 // } 234 // @mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2) { 235 // background-color: $default; 236 // background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2)); 237 // background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2); 238 // background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2); 239 // background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2); 240 // background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2); 241 // background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2); 242 // } 243 // @mixin linear-gradient-top2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) { 244 // background-color: $default; 245 // background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3)); 246 // background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 247 // background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 248 // background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 249 // background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 250 // background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 251 // } 252 // @mixin linear-gradient-top3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) { 253 // background-color: $default; 254 // background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4)); 255 // background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 256 // background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 257 // background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 258 // background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 259 // background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 260 // } 261 // @mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2) { 262 // background-color: $default; 263 // background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2)); 264 // background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2); 265 // background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2); 266 // background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2); 267 // background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2); 268 // background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2); 269 // } 270 // @mixin linear-gradient-left2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) { 271 // background-color: $default; 272 // background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3)); 273 // background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 274 // background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 275 // background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 276 // background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 277 // background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 278 // } 279 // @mixin linear-gradient-left3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) { 280 // background-color: $default; 281 // background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4)); 282 // background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 283 // background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 284 // background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 285 // background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 286 // background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 287 // } 288 289 // Perspective 290 @mixin perspective($pixels) { 291 perspective: $pixels; 292 -webkit-perspective: $pixels; 293 } 294 295 296 // Text Shadow 297 298 // @mixin text-shadow($args) { 299 // text-shadow: $args; 300 // } 301 302 303 // Transforms 304 305 // @mixin transform($args) { 306 // -webkit-transform: $args; 307 // -moz-transform: $args; 308 // -ms-transform: $args; 309 // -o-transform: $args; 310 // transform: $args; 311 // } 312 // @mixin transform-origin($args) { 313 // -webkit-transform-origin: $args; 314 // -moz-transform-origin: $args; 315 // -ms-transform-origin: $args; 316 // -o-transform-origin: $args; 317 // transform-origin: $args; 318 // } 319 // @mixin transform-style($style) { 320 // -webkit-transform-style: $style; 321 // -moz-transform-style: $style; 322 // -ms-transform-style: $style; 323 // -o-transform-style: $style; 324 // transform-style: $style; 325 // } 326 // @mixin rotate($deg:45deg){ 327 // @include transform(rotate($deg)); 328 // } 329 // @mixin scale($factor:.5){ 330 // @include transform(scale($factor)); 331 // } 332 // @mixin translate($x,$y){ 333 // @include transform(translate($x,$y)); 334 // } 335 // @mixin translate3d($x,$y,$z) { 336 // @include transform(translate3d($x,$y,$z)); 337 // } 338 // @mixin translateHardware($x,$y) { 339 // @include translate($x,$y); 340 // -webkit-transform: translate3d($x,$y,0); 341 // -moz-transform: translate3d($x,$y,0); 342 // -o-transform: translate3d($x,$y,0); 343 // -ms-transform: translate3d($x,$y,0); 344 // transform: translate3d($x,$y,0); 345 // } 346 347 348 // Transitions 349 350 // @mixin transition($args:200ms) { 351 // -webkit-transition: $args; 352 // -moz-transition: $args; 353 // -o-transition: $args; 354 // -ms-transition: $args; 355 // transition: $args; 356 // } 357 // @mixin transition-delay($delay:0) { 358 // -webkit-transition-delay: $delay; 359 // -moz-transition-delay: $delay; 360 // -o-transition-delay: $delay; 361 // -ms-transition-delay: $delay; 362 // transition-delay: $delay; 363 // } 364 // @mixin transition-duration($duration:200ms) { 365 // -webkit-transition-duration: $duration; 366 // -moz-transition-duration: $duration; 367 // -o-transition-duration: $duration; 368 // -ms-transition-duration: $duration; 369 // transition-duration: $duration; 370 // } 371 // @mixin transition-property($property:all) { 372 // -webkit-transition-property: $property; 373 // -moz-transition-property: $property; 374 // -o-transition-property: $property; 375 // -ms-transition-property: $property; 376 // transition-property: $property; 377 // } 378 // @mixin transition-timing-function($function:ease) { 379 // -webkit-transition-timing-function: $function; 380 // -moz-transition-timing-function: $function; 381 // -o-transition-timing-function: $function; 382 // -ms-transition-timing-function: $function; 383 // transition-timing-function: $function; 384 // }