API tools faq
paste
JasoN_Sy

Sass mixin used

JasoN_Sy
Dec 1st, 2016
587
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
SAS 2.75 KB | None | 0 0
raw download clone embed print report
  1. //mixins:
  2. //boxshadow with or without inset
  3. @mixin box-shadow($left, $top, $blur, $color, $inset:"") {
  4.  
  5.       -webkit-box-shadow:$left $top $blur $color #{$inset};
  6.       -moz-box-shadow:$left $top $blur $color #{$inset};
  7.       box-shadow:$left $top $blur $color #{$inset};
  8. }
  9. @mixin flex-direction($FlexDirection) {
  10.  
  11.       -webkit-flex-direction: $FlexDirection;
  12.       -ms-flex-direction: $FlexDirection;
  13.       flex-direction: $FlexDirection;
  14. }
  15. @mixin align-items($AlignItem) {
  16.  
  17.       -webkit-flex-align: $AlignItem;
  18.       -ms-flex-align: $AlignItem;
  19.       align-items: $AlignItem;
  20. }
  21. // justify
  22. @mixin justify-content($JustifyContent) {
  23.  
  24.       -webkit-justify-content: $JustifyContent;
  25.       -ms-flex-pack: $JustifyContent;
  26.       justify-content: $JustifyContent;
  27. }
  28. //transtion itself
  29. @mixin transition($transition...) {
  30.  
  31.     -moz-transition:    $transition;
  32.     -o-transition:      $transition;
  33.     -webkit-transition: $transition;
  34.     transition:         $transition;
  35. }
  36. //transition property
  37. @mixin transition-property($property...) {
  38.  
  39.     -moz-transition-property:    $property;
  40.     -o-transition-property:      $property;
  41.     -webkit-transition-property: $property;
  42.     transition-property:         $property;
  43. }
  44. // transition duration
  45. @mixin transition-duration($duration...) {
  46.  
  47.     -moz-transition-property:    $duration;
  48.     -o-transition-property:      $duration;
  49.     -webkit-transition-property: $duration;
  50.     transition-property:         $duration;
  51. }
  52. //transition timer
  53. @mixin transition-timing-function($timing...) {
  54.  
  55.     -moz-transition-timing-function:    $timing;
  56.     -o-transition-timing-function:      $timing;
  57.     -webkit-transition-timing-function: $timing;
  58.     transition-timing-function:         $timing;
  59. }
  60. //transition delay
  61. @mixin transition-delay($delay...) {
  62.  
  63.     -moz-transition-delay:    $delay;
  64.     -o-transition-delay:      $delay;
  65.     -webkit-transition-delay: $delay;
  66.     transition-delay:         $delay;
  67. }
  68. // generic transform
  69. @mixin transform($transforms) {
  70.  
  71.      -moz-transform: $transforms;
  72.        -o-transform: $transforms;
  73.       -ms-transform: $transforms;
  74.   -webkit-transform: $transforms;
  75.           transform: $transforms;
  76. }
  77. // rotate
  78. @mixin rotate ($deg) {
  79.   @include transform(rotate(#{$deg}deg));
  80. }
  81.  
  82. // scale
  83. @mixin scale($scale) {
  84.    @include transform(scale($scale));
  85. }
  86. // translate
  87. @mixin translate ($x, $y) {
  88.    @include transform(translate($x, $y));
  89. }
  90. // skew
  91. @mixin skew ($x, $y) {
  92.    @include transform(skew(#{$x}deg, #{$y}deg));
  93. }
  94. //transform origin
  95. @mixin transform-origin ($origin) {
  96.     moz-transform-origin: $origin;
  97.        -o-transform-origin: $origin;
  98.       -ms-transform-origin: $origin;
  99.   -webkit-transform-origin: $origin;
  100.           transform-origin: $origin;
  101. }
Advertisement
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!