sass.n2o.components.Page.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!

@keyframes fix-block-animation-down {
    0% {
        transform: translate(0, -100px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes fix-block-animation-up {
    0% {
        transform: translate(0, 100px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.n2o-page__title {
    font-size: 2rem;
}

.n2o-page-actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: $spacer;
}

.n2o-page__left-right-layout {
    display: flex;

    .n2o-page__left,
    .n2o-page__right {
        width: 49%;
    }

    .n2o-page__left + .n2o-page__right {
        margin-left: 20px;
    }
}

.n2o-page__fixed-container {
    position: relative;
}

.n2o-page__fixed-container--fixed {
    position: sticky;
    top: $spacer;
    width: 100%;
}

.n2o-page__scroll-to-top {
    position: fixed !important;
    right: 100px;
    bottom: 100px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    z-index: 5;
    transition: 0.5s;
    opacity: 0;
    pointer-events: none;
}

.n2o-page__scroll-to-top--show {
    opacity: 1;
    pointer-events: auto;
}

.n2o-disabled-page {
    pointer-events: none;
}

@media screen and (max-width: $desktops-max-width) {
    .n2o-page__left-right-layout {
        flex-wrap: wrap;

        .n2o-page__left,
        .n2o-page__right {
            width: 100% !important;
        }

        .n2o-page__right {
            margin-left: 0 !important;
        }
    }
}