filestash/client/components/breadcrumb.scss

.component_breadcrumb{
    .breadcrumb{
        background: white;
        margin: 0 0 0px 0;
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
        z-index: 1000;
        padding: 1px 0;
        position: relative;

        ul{
            list-style-type: none;
            margin: 0 auto;
            width: 95%;
            max-width: 800px;
            padding: 0;
            span{display: block; padding: 7px 0;}
            div, li{
                display: inline-block;
            }
        }
    }
    .component_logout{
        float: right;
        display: inline-block;
        margin: 0 0px 0 5px;
        line-height: 25px;
        padding: 7px 0;
        a{display: block; vertical-align: middle;}
        .component_icon{
            height: 20px;
            vertical-align: middle;
        }
    }

    .component_path-element{
        display: inline-block;
        .label{color: var(--color);padding: 2px 5px;}
        a.label{color: var(--light);}

        .component_path-element-wrapper{
            font-size: 18px;
            display: inline-block;

            a{border-radius: 2px;}
            &.highlight a{
                background: var(--emphasis-primary);
                border: 2px solid var(--primary);
                box-sizing: border-box;
            }
        }
    }

    .component_separator img{
        vertical-align: middle;
    }
}

body.touch-no{
    .component_path-element-wrapper:hover a{
        background: var(--super-light);
    }
}

// mobile user have a scrollable breadcrumb
body.touch-yes{
    ul span{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        white-space: nowrap;
        &::-webkit-scrollbar {
            height: 3px;
        }

        &::-webkit-scrollbar-track {
            background: var(--super-light);
        }

        &::-webkit-scrollbar-thumb {
            background: #d2d2d2;
            border-radius: 1px;
        }
    }
}


/* ANIMATION */
.component_breadcrumb{
    .breadcrumb-leave{
        display: inline-block;
        opacity: 1;
        transform: translateY(0px);
    }
    .breadcrumb-leave.breadcrumb-leave-active{
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.15s ease-out;
    }

    .breadcrumb-enter{
        transform: translateX(10px);
        opacity: 0;
        display: inline-block;
    }
    .breadcrumb-enter.breadcrumb-enter-active{
        opacity: 1;
        transform: translateX(0);
        transition: all 0.2s ease-out;
    }
}