src.assets.style.layout.sidebar._sidebar-base.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of ui Show documentation
The newest version!
// Sidebar Base
@import "../layout-variables";


.app-sidebar {
    display: flex;
    z-index: 20;
    overflow: auto;
    width: $app-sidebar-width;
    height: 100%;
    box-shadow: $sidebar-box-shadow;
    flex-direction: column;
    transition: all .3s ease;

    .app-sidebar-content {
        flex-grow: 1;
        display: flex;
        flex-direction: row-reverse;
        width: 100%;

        .app-sidebar-scroll {
            width: 98%;
            height: 100%;
        }
    }
}


// Sidebar Menu

.sidebar-menu {
    width: auto !important;
    padding: 0 .5rem $layout-spacer-x;

    %side-link-hover {
        font-weight: bold;
        color: var(--bs-primary);
    }

    & .menu-link {
        display: block;
        line-height: 2.4rem;
        height: 2.4rem;
        padding: 0 1.5rem 0 45px;
        position: relative;
        border-radius: .25rem;
        white-space: nowrap;
        transition: all .2s;
        text-decoration: none;
        border: 0;
        background: transparent;
        width: 100%;
        text-align: left;
        cursor: pointer;
        font-weight: lighter;
        color: var(--bs-dark);


        &:hover {
            @extend %side-link-hover;
        }

        &.active-item {
            @extend %side-link-hover;
        }

        &[disabled] {
            opacity: 0.4;
            pointer-events: none;
        }

    }

    & .menu-title {
        white-space: nowrap;
        position: relative;
    }

    & .menu-icon {
        text-align: center;
        width: 34px;
        height: 34px;
        line-height: 34px;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -17px;
        font-size: 1.2rem;
        transition: color 300ms;
    }

    & .menu-header {
        text-transform: uppercase;
        margin: calc($layout-spacer-x / 2) 0;
        font-weight: bold;
        white-space: nowrap;
        position: relative;
        color: var(--bs-primary);
    }

    & .collapse-btn {
        display: none;
    }

    .collapse {
        // transition: all .26s ease;
        transform: scaleY(0);
        transform-origin: top;
        height: auto;
        max-height: 0;
        display: block !important;
    }

    .collapse.show {
        transform: scaleY(1);
        max-height: 600px;
    }
}

.closed-sidebar-md.closed-sidebar-open {
    .close-sidebar-btn {
        display: none !important;
    }
}


// Modifiers

@import "modifiers/closed-sidebar";


// Sidebar Themes