Modernizr

// Modernizr mixins
// ––––––––––––––––––––––––––––––––––––––––––––––––––

// https://www.npmjs.com/package/modernizr

// Provide a hover effect for non-touch devices, turn it into an Active state for mobile, and maintain a fallback.
// @requires Modernizr as a JS dependency to get .no-touch classes
// Adds styles via @content
//
// To apply it to a specific class, the mixin must be applied inside that class, like so (since it relies on the & operator):
// .anchor {
//     @include touch-hover() {
//         color: purple;
//     }
// }
//
@mixin touch-hover() {
  .no-js &:hover, // the fallback
  .no-js &:focus,
  .js.no-touch &:hover, // enhanced for no-touch
  .js.no-touch &:focus,
  .js.touch &:active { // relay same styles to active for touch devices
    @content;
  }
}

// Applies transition to element but removes it from the same element on touch devices.
// Useful for making all pseudo hover effects on mobile instant on click.
//
// @requires Modernizr
//
@mixin transition-no-touch($properties) {
  transition: $properties;

  .js.touch & {
    transition: none;
  }
}