Sass Bug Demo

by Daniel Mason

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//jsfiddle.net/css/normalize.css">
<nav class="tab-collection left-active">
    <ul class="tabs">
        <li class="tab active">
            <a class="tab-fill" href="">
                <i class="fa fa-user fa-2x"></i><br />
                My Profile
            </a>
        </li>
        <li class="tab">
            <a class="tab-fill" href="">
                <i class="fa fa-picture-o fa-2x"></i><br />
                My Artwork
            </a>
        </li>
        <li class="tab">
            <a class="tab-fill" href="">
                <i class="fa fa-comment fa-2x"></i><br />
                My Notifications
            </a>
        </li>
    </ul>
</nav>
<br />
<nav class="tab-collection-simple right-active">
    <ul class="tabs">
        <li class="tab">
            <a class="tab-fill" href="">
                Artwork
            </a>
        </li>
        <li class="tab active">
            <a class="tab-fill" href="">
                .art Files
            </a>
        </li>
    </ul>
</nav>

SCSS

$greyVeryDark: #3b3b45;

body { 
    zoom: 0.5;
}

.tab-collection {
    $activeColor: white;
    $inactiveColor: $greyVeryDark;

    text-align: center;
    clear: both;

    background-color: $inactiveColor;
    &.left-active {
        background: linear-gradient(to left, $inactiveColor 50%, $activeColor 50%);
    }
    &.right-active {
        background: linear-gradient(to right, $inactiveColor 50%, $activeColor 50%);
    }

    .tabs {
        color: #696975;
        display: inline-block;
        background-color: $inactiveColor;
        .tab {
            display: inline-block;
            height: 130px;
            width: 300px;
            &.active {
                background-color: $activeColor;
            }
            .tab-fill {
                display: block;
                height: 100%;
                width: 100%;
                font-size: 1.4em;
                line-height: 1.5em;
                padding-top: 0.8em;
            }
        }
        a {
            color: inherit;
        }
    }
}

.tab-collection-simple {
    @extend .tab-collection;
    $inactiveColor: white;
}