sass.n2o.components.Drawer.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
.drawer-animation > * {
    transition: transform $drawer-animation, opacity $drawer-animation, box-shadow $drawer-animation;
}

.drawer-footer {
    padding: 16px;
}

.drawer-footer--fixed {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: none;
    background: #fff;
}

.drawer-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 0;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    opacity: 0.5;
}

.drawer-handle-icon::before {
    transform: translateX(-6px) rotate(45deg);
}

.drawer-handle-icon::after {
    transform: translateX(-6px) rotate(-45deg);
}

.drawer-handle:hover,
.drawer-handle:active {
    opacity: 1;
}

.drawer-handle-icon::before,
.drawer-handle-icon::after {
    content: '';
    display: block;
    position: absolute;
    background: $drawer-icon-color;
    width: 14px;
    height: 3px;
}

.drawer-children {
    padding: 16px;
}

.drawer-title {
    border-bottom: $drawer-border;
    padding: 16px;
}

.drawer-content-wrapper {
    position: fixed;
    background: $drawer-content-bg;
    min-width: max-content;
}

.drawer-bottom {
    bottom: 0;
    left: 0;

    .drawer-content-wrapper {
        bottom: 0;
    }

    .drawer-content-wrapper,
    .drawer-content {
        width: 100%;
    }

    .drawer-content {
        height: 100%;
    }
}

.drawer-top {
    top: 0;
    left: 0;

    .drawer-content-wrapper,
    .drawer-content {
        width: 100%;
    }

    .drawer-content {
        height: 100%;
    }
}

.drawer-left {
    left: 0;
    width: 0;
    height: 100%;

    .drawer-content-wrapper {
        height: 100%;
    }

    .drawer-content {
        height: 100%;
    }
}

.drawer-right {
    width: 0;
    height: 100%;
    right: 0;

    .drawer-content-wrapper {
        right: 0;
        height: 100%;
    }

    .drawer-content {
        height: 100%;
    }
}

.drawer-right.drawer-open {
    width: 100%;

    .drawer-content-wrapper {
        box-shadow: $drawer-right-shadow;
    }
}

.drawer-right.drawer-open.no-mask,
.drawer-left.drawer-open.no-mask {
    width: 0;
}

.drawer-top.drawer-open.no-mask,
.drawer-bottom.drawer-open.no-mask {
    height: 0;
}

.drawer-left.drawer-open {
    width: 100%;

    .drawer-content-wrapper {
        box-shadow: $drawer-left-shadow;
    }
}

.drawer-mask {
    background: $drawer-backdrop-bg;
    opacity: 0;
    width: 100%;
    height: 0;
    position: fixed;
    top: 0;
    left: 0;
    transition: opacity $drawer-animation, height 0s ease 0.3s;
}

.drawer-top,
.drawer-bottom {
    width: 100%;
    height: 0;
}

.drawer-top.drawer-open {
    height: 100%;

    .drawer-content-wrapper {
        box-shadow: $drawer-top-shadow;
    }
}

.drawer-bottom.drawer-open {
    height: 100%;

    .drawer-content-wrapper {
        box-shadow: $drawer-bottom-shadow;
    }
}

.drawer.drawer-open {
    .drawer-mask {
        opacity: 0.3;
        height: 100%;
        animation: rcDrawerFadeIn $drawer-animation;
        transition: none;
    }
}

.drawer-page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 198;
}

.drawer-spinner {
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
    width: 3rem;
    height: 3rem;
}

.drawer {
    position: fixed;
    top: 0;
    z-index: 199;

    .row {
        margin-right: 0;
        margin-left: 0;
    }

    .n2o-modal-actions {
        .buttons-toolbar {
            .btn-group {
                flex-wrap: wrap;
                justify-content: flex-end;
                gap: 10px;
                padding-right: 10px;

                > div {
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }
}

.n2o-drawer-children-wrapper {
    overflow: auto;
    height: 100%;
}

.n2o-drawer-content-wrapper {
    padding: $drawer-content-pd;
    height: 100%;
}

@keyframes rcDrawerFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.3;
    }
}

.without-close-button {
    .drawer-handle {
        display: none;
    }
}