_mixin.scss 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. // Mixin
  2. @mixin hover-state {
  3. &:hover, &:active, &:focus {
  4. @content;
  5. }
  6. }
  7. @mixin hover-full-state {
  8. &:hover, &:active, &:focus, &.active {
  9. @content;
  10. }
  11. }
  12. @mixin hover-focus-state {
  13. &:hover, &:focus {
  14. @content;
  15. }
  16. }
  17. @mixin active-focus-state {
  18. &:active, &.active, &:focus {
  19. @content;
  20. }
  21. }
  22. @mixin hover-active-state {
  23. &:hover, &:active, &.active {
  24. @content;
  25. }
  26. }
  27. @mixin before-after-state {
  28. &:before, &:after {
  29. @content;
  30. }
  31. }
  32. @mixin clear() {
  33. overflow:hidden;
  34. clear:both;
  35. float:none;
  36. }
  37. @mixin placeholder {
  38. &::-webkit-input-placeholder {@content}
  39. &:-moz-placeholder {@content}
  40. &::-moz-placeholder {@content}
  41. &:-ms-input-placeholder {@content}
  42. }
  43. @mixin transition($transition...) {
  44. -moz-transition: $transition;
  45. -o-transition: $transition;
  46. -webkit-transition: $transition;
  47. transition: $transition;
  48. }
  49. @mixin transition-property($property...) {
  50. -moz-transition-property: $property;
  51. -o-transition-property: $property;
  52. -webkit-transition-property: $property;
  53. transition-property: $property;
  54. }
  55. @mixin transition-duration($duration...) {
  56. -moz-transition-property: $duration;
  57. -o-transition-property: $duration;
  58. -webkit-transition-property: $duration;
  59. transition-property: $duration;
  60. }
  61. @mixin transition-timing-function($timing...) {
  62. -moz-transition-timing-function: $timing;
  63. -o-transition-timing-function: $timing;
  64. -webkit-transition-timing-function: $timing;
  65. transition-timing-function: $timing;
  66. }
  67. @mixin transition-delay($delay...) {
  68. -moz-transition-delay: $delay;
  69. -o-transition-delay: $delay;
  70. -webkit-transition-delay: $delay;
  71. transition-delay: $delay;
  72. }
  73. @mixin box-shadow($value) {
  74. -webkit-box-shadow: $value;
  75. -moz-box-shadow: $value;
  76. box-shadow: $value;
  77. }