Expanded Target

[chandlervdw]

I'm unfamiliar with how you guys build your mixins, so I'll just suggest this one here. Sorry if this isn't the best way to do this...

This mixin allows you to use the :after pseudo-element to make the target hit area of an element bigger, for both hover states and touch tappable areas. See http://thirdroute.com/blog/css-expanded-hit-areas.

I'm not sure if this is the best way to go about creating the different scenarios, but I tried to mimic how you might use CSS shorthand for something like margin (top, right, bottom, left).

Note: this mixin automatically converts your px, % or em to negative values.

Uses:

.expanded-target(10px); 
.expanded-target(10px, 5px);
.expanded-target(10px, 5px, 7px);
.expanded-target(10px, 5px, 7px, 8px);

Mixin:

// // For an expanded target hit area
// .expanded-target(10px);
.expanded-target(@top, @right: null, @bottom: null, @left: null) when (@right = null) {
  position: relative;
  &:after {
    position: absolute;
    content: ' ';
    top: -@top;
    right: -@top;
    bottom: -@top;
    left: -@top;
  }
}

// .expanded-target(10px, 0);
.expanded-target(@top, @right: null, @bottom: null, @left: null) when not (@right = null) and (@bottom = null) {
  position: relative;
  &:after {
    position: absolute;
    content: ' ';
    top: -@top;
    right: -@right;
    bottom: -@top;
    left: -@right;
  }
}

// .expanded-target(10px, 0, 20px);
.expanded-target(@top, @right: null, @bottom: null, @left: null) when not (@bottom = null) and (@left = null) {
    position: relative;
  &:after {
    position: absolute;
    content: ' ';
    top: -@top;
    right: -@right;
    bottom: -@bottom;
    left: -@right;
  }
}

// .expanded-target(10px, 0, 20px, 5px);
.expanded-target(@top, @right: null, @bottom: null, @left: null) when not (@left = null) {
  position: relative;
  &:after {
    position: absolute;
    content: ' ';
    top: -@top;
    right: @right;
    bottom: -@bottom;
    left: -@left;
  }
}