heroheman
9/4/2012 - 2:01 PM

CSS/LESS: Arrow Breadcrumb Navigation

CSS/LESS: Arrow Breadcrumb Navigation

//Registration Form Breadcrumb
.rf-breadcrumb {
    list-style: none;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    font: 16px Helvetica, Arial, Sans-Serif;
    li {
        float: left;
        a {
            color: white;
            text-decoration: none;
            padding: 10px 0 10px 65px;
            background: #950212;                   /* fallback color */
            background: hsla(353,97%,30%,1);
            position: relative;
            display: block;
            float: left;
            &:after {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
                border-bottom: 50px solid transparent;
                border-left: 50px solid @red;
                position: absolute;
                top: 50%;
                margin-top: -50px;
                left: 100%;
                z-index: 2;
            }
            &:before {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 50px solid transparent;
                border-bottom: 50px solid transparent;
                border-left: 50px solid darken(@red, 6%);
                position: absolute;
                top: 50%;
                margin-top: -50px;
                margin-left: 4px;
                left: 100%;
                z-index: 1;
            }
        }
    }
    //actives
    li.active a {
        background: #ebe7e6;
        color: @red;
        &:after { border-left-color: #ebe7e6 !important; }
    }
    li.visited a {
        background: @gold;
        color: white;
        &:after { border-left-color: @gold !important; }
    }
    li:first-child a{
        color: white;
        padding-left: 25px;
    }
}