artistry/src/styl/breadcrumb/breadcrumb.styl

A powerful and configurable stylesheet

@require "breadcrumb-settings.styl";
$breadcrumb-height = 2 * $breadcrumb-padding + $breadcrumb-line-height;
$breadcrumb-curve-offset = ($breadcrumb-border-radius) * (1 - cos(45deg));
$breadcrumb-adjusted-height = $breadcrumb-height - 2 * $breadcrumb-curve-offset;
$breadcrumb-diagonal = $breadcrumb-adjusted-height * math(2, 'sqrt') / 2;
$breadcrumb-corner-right = $breadcrumb-curve-offset - $breadcrumb-border-width;
$breadcrumb-corner-border-width = $breadcrumb-border-width;
$breadcrumb-gradient-percentage = 60%;
.breadcrumb {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: $breadcrumb-line-height;
    flex-direction: row-reverse;
    justify-content: flex-end;
    &:after {
        content: '';
        clear: both;
        display: table;
    }
    & > li {
        position: relative;
        margin: 0;
        margin-left: -1 * $breadcrumb-border-radius;
        padding: 0;
        float: left;
        &:last-child {
            margin-left: 0;
            & > a {
                padding-left: $breadcrumb-padding;
                border-left: $breadcrumb-border-width solid $breadcrumb-border-color;
                border-top-left-radius: $breadcrumb-border-radius;
                border-bottom-left-radius: $breadcrumb-border-radius;
            }
        }
        & > span,
        & > a {
            display: block;
            position: relative;
            margin: 0;
            padding: $breadcrumb-padding;
            padding-left: ($breadcrumb-padding + $breadcrumb-height / 2);
            border-top: $breadcrumb-border-width solid $breadcrumb-border-color;
            border-right: $breadcrumb-border-width solid $breadcrumb-border-color;
            border-bottom: $breadcrumb-border-width solid $breadcrumb-border-color;
            border-top-right-radius: $breadcrumb-border-radius;
            border-bottom-right-radius: $breadcrumb-border-radius;
            text-decoration: none;
            float: left;
            height: $breadcrumb-height;
            background-color: $breadcrumb-background-color;
            font-weight: bold;
            white-space: nowrap;
            z-index: 1;
            &:after {
                display: block;
                content: '';
                position: absolute;
                right: $breadcrumb-corner-right;
                top: 50%;
                transform: translateX(50%) translateY(-50%) rotate(45deg);
                border-top: $breadcrumb-border-width solid $breadcrumb-border-color;
                border-right: $breadcrumb-border-width solid $breadcrumb-border-color;
                if ($breadcrumb-border-radius = 0) {
                    if ($breadcrumb-border-width > 1) {
                        border-top: $breadcrumb-border-width * (2 / math(2, 'sqrt')) - $breadcrumb-border-radius solid $breadcrumb-border-color;
                        border-right: $breadcrumb-border-width * (2 / math(2, 'sqrt')) - $breadcrumb-border-radius solid $breadcrumb-border-color;
                    }
                }
                if ($breadcrumb-border-width > $breadcrumb-border-radius) {
                    border-top: $breadcrumb-border-width + $breadcrumb-border-radius * (math(2, 'sqrt') - 1) solid $breadcrumb-border-color;
                    border-right: $breadcrumb-border-width + $breadcrumb-border-radius * (math(2, 'sqrt') - 1) solid $breadcrumb-border-color;
                }
                border-top-right-radius: $breadcrumb-border-radius;
                height: $breadcrumb-diagonal;
                width: $breadcrumb-diagonal;
                background-image: linear-gradient(225deg, $breadcrumb-background-color $breadcrumb-gradient-percentage, transparent $breadcrumb-gradient-percentage);
                z-index: 100;
            }
        }
        & > a:hover {
            background-color: $breadcrumb-hover-background-color;
            &:after {
                background-image: linear-gradient(225deg, $breadcrumb-hover-background-color $breadcrumb-gradient-percentage, transparent $breadcrumb-gradient-percentage);
            }
        }
        & > span {
            cursor: default;
        }
    }
}