scrolltabs.scss

$white: #fff;
$gray-lighter: #eee;
$gray-light: #ccc;
$gray: #bbb;
$gray-dark: #aaa;
$tab-padding: 10px;
$border-color: $gray-light;
$background-color: $gray-lighter;
$count-background-color: $gray-dark;

%tab {
    background: $background-color;
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    border-left: 1px solid $border-color;
    border-collapse: collapse;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: $tab-padding 0 $tab-padding $tab-padding;
    white-space: nowrap;
}

%count {
    border-radius: 7px;
    color: $white;
    display: inline-block;
    font-size: 11px;
    background: $count-background-color;
    padding: 0 7px;
    height: 14px;
    text-align: center;
}

.scroll-tabs {
    font: 13px arial;
    white-space: nowrap;
}

.scroll-tabs-more-link {
    @extend %tab;
    padding-right: $tab-padding;
    position: relative;
    width: 28px;

    &.tail {
        border-right: 1px solid $border-color;
    }

    & > .label {
        // To make text vertically aligned with tab text
        display: inline-block;
        overflow: hidden;

        &::before {
            content: '\00a0';
        }
    }

    &.show {
        cursor: pointer;

        &.head {
            & > .label::before {
                content: '<';
            }
        }

        &.tail  {
            & > .label::before {
                content: '>';
            }
        }
    }
}

.scroll-tabs-more {
    display: table;
    position: absolute;
    margin-top: 10px;
    z-index: 100;

    &.head {
        left: 0;
        margin-left: -1px;
    }

    &.tail {
        right: 0;
        margin-right: -1px;
    }
}

.scroll-tabs-tabs {
    box-sizing: border-box;
    display: inline-block;
}

.scroll-tab {
    @extend %tab;
    position: relative;

    .label {
        display: inline-block;
        overflow: hidden;
        width: 100%;
    }

    .count {
        @extend %count;
        position: absolute;
        right: 5px;
        top: -7px;
    }

    &::before {
        content:'';
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        background:linear-gradient(to left, $background-color, $background-color 2px, transparent 15px);
    }

    &.selected {
        border-bottom-color: $white;
        background: $white;
        cursor: default;

        &::before {
            background:linear-gradient(to left, $white, $white 2px, transparent 15px);
        }
    }
}

.scroll-tab-more {
    border-right: 1px solid $border-color;
    display: table-row-group;

    &::before {
        content: none;
    }

    .tab {
        @extend %tab;
        display: table-row;
        vertical-align: middle;
    }

    .label {
        display: table-cell;
        padding: $tab-padding;
    }

    .count-container {
        display: table-cell;
        padding: $tab-padding;
        text-align: right;
    }

    .count {
        @extend %count;
        position: static;
    }
}