_faux-block-link.scss

/*------------------------------------*\
    # FAUX BLOCK LINK
\*------------------------------------*/

/*
* The `Faux Block Link` pattern allows you to make an entire block
* a link, whilst having links nested within in that block also clickable.
*
* The main link (i.e. the faux block link) is absolutely positioned across the entire
* block, any nested links have a little z-index bump to lift them on top. Nice.
*
* This implementation is not compatible with IE8 and below. On these browsers
* this falls back to being two standard anchors.
*
* EXAMPLE IMPLEMENTATION - http://codepen.io/anon/pen/NAwZpd

<div class="gs-o-faux-block-link">
    <a href="http://www.bbc.co.uk/news" class="gs-o-faux-block-link__overlay-link">
      <h3>Heading</h3>
    </a>
    <p>This is some summary <a href="http://www.bbc.co.uk/sport">text</a>/p>
</div>

Our implementation is based on http://codepen.io/IschaGast/pen/Qjxpxo
*/


/*
 * Fixes the issue where the faux block links work intermittently on
 * IE9 and IE10, and ensures that all areas of the block act as a link
 */
@mixin ie-background-fix {
    @if $enhanced {
        background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat 0 0;
    }
}

.gs-o-faux-block-link {
    position: relative;
}

.gs-o-faux-block-link a,
.gs-o-faux-block-link abbr[title] {
    position: relative;
    z-index: 2;
}

.gs-o-faux-block-link .gs-o-faux-block-link__overlay-link {
    position: static;

    &:before {
        bottom: 0;
        content: "";
        left: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
        white-space: nowrap;
        z-index: 1;

        // only applies to IE 9
        .ie9 & {
            @include ie-background-fix;
        }
    }
}

// only applies to IE 10
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .gs-o-faux-block-link .gs-o-faux-block-link__overlay-link:before {
        @include ie-background-fix;
    }
}

/**
 * This class allows you to have a seperate overlay href rather than using :before
 * Useful if you have a position relative between the link and the container div where the .gs-o-faux-block-link
 * should overlay.
 */
.gs-o-faux-block-link .gs-o-faux-block-link__overlay {

    display: none;
    visibility: hidden;

    @if $enhanced {
        @include ie-background-fix;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        display: block;
        visibility: visible;

        overflow: hidden;
        text-indent: 200%;

        white-space: nowrap;

        &:hover {
            cursor: pointer;
        }
    }
}

/**
 * Increased specificity so it trumps ".faux-block-link a"
 *
 * 1. IE Fix - Elements have a solid black background in high contrast mode on PC without this.
 */
.gs-o-faux-block-link__overlay.gs-o-faux-block-link__overlay {
    opacity: 0; /* [1] */

    position: absolute;
    z-index: 0;
}