git.roojs.org Git - bootswatch/blob - MDB Free/sass/mdb/free/data/_prefixer.scss

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