@talentsoft-opensource/hylia/organisms/side-panel.less

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

@sidebar-default-size: 30rem;
@sidebar-medium-size: 60rem;
@sidebar-large-size: 90rem;
@sidebar-minimized: 5.4rem;
@sidebar-full-minimized: 1.8rem;

.Hylia-o-sidepanel {
    overflow: hidden;

    &__overlaid {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 998;
        width: 100%;
        height: 100%;
        visibility: hidden;
        opacity: 0;
        background-color: rgba(51, 51, 51, 0.4);
        transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, visibility 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    }

    &__sidebar {
        position: fixed;
        top: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
        padding: 1.5rem 2rem;
        background-color: #fff;
        transform: translate3d(0, 0, 0);
        transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;

        &:before {
            content: "";
            position: absolute;
            top: 0;
            width: 0.8rem;
            height: 100%;
            transition: opacity 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
        }

        //-- Sidebar sizes
        .--default-size & {
            max-width: @sidebar-default-size;
        }

        .--medium-size & {
            max-width: @sidebar-medium-size;
        }

        .--large-size & {
            max-width: @sidebar-large-size;
        }

        //-- Sidebar positions
        .--right-position & {
            right: 0;
            left: auto;

            &:before {
                left: -0.8rem;
                background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
            }
        }

        .--left-position & {
            right: auto;
            left: 0;

            &:before {
                right: -0.8rem;
                background: linear-gradient(-90deg, rgba(238, 238, 238, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
            }
        }
    }

    &__overlaid + &__sidebar {
        &:before {
            opacity: 0;
            visibility: hidden;
        }

        .--closed &:before {
            visibility: visible;
            opacity: 1;
        }
    }

    &__toggle-button {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.4rem;
        height: 2.4rem;
        background-color: @stormtrooper;
        border: 0.1rem solid #e1e3e5;
        border-radius: 50%;
        box-shadow: -0.4rem 0 0.6rem 0 rgba(0, 0, 0, 0.1);
        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
            border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
            color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        color: @smart;
        cursor: pointer;

        //-- Toggle positions
        .--right-position & {
            top: 3.5rem;
            left: -1.2rem;
        }

        .--left-position & {
            top: 0.6rem;
            right: 0.6rem;
        }

        &:hover {
            background-color: @smart;
            border-color: @smart;
            color: @stormtrooper;
        }

        &:focus {
            animation: onPress 1s;
        }
    }

    &:not(.--closed) {
        .Hylia-o-sidepanel__overlaid {
            opacity: 1;
            visibility: visible;
        }
    }

    &.--right-position.--closed {
        &.--minimized .Hylia-o-sidepanel__sidebar {
            transform: translate3d(~"calc(100% - @{sidebar-minimized})", 0, 0);
        }

        &.--full-minimized .Hylia-o-sidepanel__sidebar {
            transform: translate3d(~"calc(100% - @{sidebar-full-minimized})", 0, 0);
        }
    }

    &.--left-position.--closed {
        .Hylia-o-sidepanel__sidebar,
        &.--minimized .Hylia-o-sidepanel__sidebar,
        &.--full-minimized .Hylia-o-sidepanel__sidebar {
            transform: translate3d(-100%, 0, 0);
        }
    }
}

@keyframes onPress {
    0% {
        box-shadow: 0 0 0 0 @smart;
    }
    100% {
        box-shadow: 0 0 0 0.6rem fade(@smart, 0);
    }
}