nukeop/nuclear

View on GitHub
packages/ui/lib/components/FullscreenForm/styles.scss

Summary

Maintainability
Test Coverage
@import "../../common.scss";

.fullscreen_form_container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    width: 100%;

    .fullscreen_form_box {
        position: relative;
        display: flex;
        flex-flow: row;

        .ui.message {
            position: absolute;
            left: 0;
            bottom: 100%;
            width: 100%;
            color: $white;
            border: none;
            box-shadow: none;

            .icon {
                font-size: 1.5em;
            }

            &.error {
                background: $red;
            }

            &.success {
                background: darken($green, 10%);
            }
        }
    }

    .fullscreen_form {
        flex: 0 0 50%;
        min-width: 28em;

        &.loading {
            min-height: 10em;
            &::before {
                @include roundCorners-lg;
                background: transparent;
            }

            &::after {
                border-color: $green rgba($bgdarker,.25) rgba($bgdarker,.25) rgba($bgdarker,.25);
            }
        }
    }
}