cirrus-ui/src/components/breadcrumb.scss

A lightweight UI framework written in SCSS

@use '../src/internal' as *;

@if should-generate-classes($BREADCRUMB) {
    $separators: (
        'arrow': '\02192',
        'bullet': '\02022',
        'dot': '\000b7',
        'gt': '\0227B',
    );

    .breadcrumb {
        margin: 0.5rem 0;
        padding: 0.5rem 0;

        align-items: flex-start;
        display: flex;
        justify-content: flex-start;
        list-style: none;
        white-space: nowrap;

        // Breadcrumb layout
        &.breadcrumb--center {
            justify-content: center;
        }
        &.breadcrumb--right {
            justify-content: flex-end;
        }

        // Breadcrumb separators
        @each $name, $separator in $separators {
            &.breadcrumb--#{$name} {
                .breadcrumb__item {
                    &:not(:first-child) {
                        &::before {
                            content: $separator;
                        }
                    }
                }
            }
        }

        .breadcrumb__item {
            margin: 0;

            &:not(:last-child) {
                margin-right: 0.5rem;
            }

            &:not(:first-child) {
                &::before {
                    content: '/';

                    padding-right: 0.5rem;
                }
            }

            &.breadcrumb__item--active {
                a {
                    color: $cirrus-fg;
                }

                cursor: default;
                pointer-events: none;
            }
        }
    }
}