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

.n2o-wireframe {
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    background: #d9edf7;
    border-radius: $border-radius-base;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $alert-info-text;
    text-transform: uppercase;

    &.l-10 {
        background: lighten($info, 2%);
    }

    &.l-20 {
        background: lighten($info, 4%);
    }

    &.l-30 {
        background: lighten($info, 6%);
    }

    &.d-10 {
        background: darken($info, 10%);
        color: darken($info, 30%);
    }

    &.d-20 {
        background: darken($info, 20%);
    }

    &.d-30 {
        background: darken($info, 30%);
    }

    &.disabled {
        background: $gray-lighter;
        color: $gray;
    }

    &.gradient-top {
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    }

    &.gradient-bottom {
        -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    }
}