mixin.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. @mixin border-radius($topleft: 0, $topright: 0, $bottomright: 0, $bottomleft: 0) {
  2. -webkit-border-radius: $topleft $topright $bottomright $bottomleft;
  3. -moz-border-radius: $topleft $topright $bottomright $bottomleft;
  4. -ms-border-radius: $topleft $topright $bottomright $bottomleft;
  5. -o-border-radius: $topleft $topright $bottomright $bottomleft;
  6. border-radius: $topleft $topright $bottomright $bottomleft;
  7. }
  8. @mixin box-shadow($value) {
  9. -webkit-box-shadow: $value;
  10. -moz-box-shadow: $value;
  11. -ms-box-shadow: $value;
  12. -o-box-shadow: $value;
  13. box-shadow: $value;
  14. }
  15. @mixin background($from, $to) {
  16. @if $to == $from {
  17. background: $to;
  18. } @else {
  19. background: $to;
  20. background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  21. background: -moz-linear-gradient(top, $from, $to);
  22. background: -ms-linear-gradient(top, $from, $to);
  23. background: -o-linear-gradient(top, $from, $to);
  24. background: linear-gradient(to bottom, $from, $to);
  25. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie_hex_str($from)}', endColorstr='#{ie_hex_str($to)}');
  26. }
  27. }
  28. @mixin mobile {
  29. @media only screen and (max-width : $responsive_breakpoint) {
  30. @content;
  31. }
  32. }
  33. @mixin desktop {
  34. @media only screen and (min-width : $responsive_breakpoint + 1) {
  35. @content;
  36. }
  37. }