_mixins.scss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. // opacity
  2. @mixin opacity($opacity) {
  3. opacity: $opacity;
  4. $opacity-ie: $opacity * 100;
  5. filter: alpha(opacity=$opacity-ie); //IE8
  6. }
  7. // transition
  8. @mixin transition($args...) {
  9. -webkit-transition: $args;
  10. -moz-transition: $args;
  11. -ms-transition: $args;
  12. -o-transition: $args;
  13. transition: $args;
  14. }// transition
  15. @mixin border-radius($man) {
  16. -webkit-border-radius: $man;
  17. -moz-border-radius: $man;
  18. border-radius: $man;
  19. }
  20. // Flexbox display
  21. @mixin flexbox() {
  22. display: -webkit-box;
  23. display: -moz-box;
  24. display: -ms-flexbox;
  25. display: -webkit-flex;
  26. display: flex;
  27. }
  28. // justify-content
  29. @mixin justify-content($justify) {
  30. -webkit-justify-content: $justify;
  31. -moz-justify-content: $justify;
  32. -ms-justify-content: $justify;
  33. justify-content: $justify;
  34. -ms-flex-pack: $justify;
  35. }
  36. // align-content
  37. @mixin align-content($align) {
  38. -webkit-align-content: $align;
  39. -moz-align-content: $align;
  40. -ms-align-content: $align;
  41. align-content: $align;
  42. }
  43. // Cross-axis Alignment
  44. @mixin align-items($align) {
  45. -webkit-align-items: $align;
  46. -moz-align-items: $align;
  47. -ms-align-items: $align;
  48. align-items: $align;
  49. }
  50. // transform
  51. // Browser Prefixes
  52. @mixin transform($transforms) {
  53. -webkit-transform: $transforms;
  54. -moz-transform: $transforms;
  55. -ms-transform: $transforms;
  56. transform: $transforms;
  57. }
  58. // Translate
  59. @mixin translate ($x, $y) {
  60. @include transform(translate($x, $y));
  61. }
  62. // TranslateY
  63. @mixin translateY ($y) {
  64. @include transform(translateY($y));
  65. }
  66. // TranslateY
  67. @mixin translateX ($x) {
  68. @include transform(translateX($x));
  69. }
  70. // Box shadows
  71. @mixin box-shadow($shadow...) {
  72. -webkit-box-shadow: $shadow;
  73. -moz-box-shadow: $shadow;
  74. box-shadow: $shadow;
  75. }
  76. @mixin background($imgpath,$position: center,$size: cover,$repeat: no-repeat) {
  77. background: {
  78. image: url($imgpath);
  79. position: $position;
  80. repeat: $repeat;
  81. size: $size;
  82. }
  83. }
  84. @mixin transform_time($total_time) {
  85. -webkit-transition: $total_time;
  86. transition: $total_time;
  87. }
  88. @mixin placeholder {
  89. &.placeholder {
  90. @content;
  91. }
  92. &:-moz-placeholder {
  93. @content;
  94. }
  95. &::-moz-placeholder {
  96. @content;
  97. }
  98. &::-webkit-input-placeholder {
  99. @content;
  100. }
  101. }
  102. @mixin transition($args: all 0.6s ease 0s) {
  103. -webkit-transition: $args;
  104. -moz-transition: $args;
  105. -o-transition: $args;
  106. transition: $args;
  107. }
  108. @mixin keyframes ($animation-name) {
  109. @-webkit-keyframes #{$animation-name} {
  110. @content;
  111. }
  112. @-moz-keyframes #{$animation-name} {
  113. @content;
  114. }
  115. @-o-keyframes #{$animation-name} {
  116. @content;
  117. }
  118. @keyframes #{$animation-name} {
  119. @content;
  120. }
  121. }