app-preview.styl

/**
 * App preview area styles.
 */

@import 'lib';

$app-preview-background-color = #72C9B0;

.app-preview {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: $app-preview-height;
    padding: 7.2rem 18.5rem 6.9rem 15rem;

    background-color: $app-preview-background-color;
    background-image: url('../img/Pattern_overlay.png');

    .suggested {
        position: absolute;
        top: 1.6rem;
        left: 0;

        padding: 0 .5rem 0 1rem;

        font-size: 1.9rem;
        font-style: italic;
        line-height: 4.2rem;

        color: $greyscale-white;
        background: linear-gradient(90deg,
                                    $suggested-star-color,
                                    $suggested-flag-color);

        &::before {
            float: left;
            margin-right: .5rem;

            font-size: 4.2rem;
        }

        &::after {
            content: '';

            position: absolute;
            top: 0;
            right: -4rem;

            width: 4rem;
            height: 4.2rem;

            background-image: url('../img/flag_R.png');
        }
    }

    .preview,
    .detail {
        height: 100%;
    }

    .preview {
        float: right;
        width: 57.5rem;

        border-radius: .6rem;
        overflow: hidden;

        color: transparent;
    }

    img {
        width: 100%;
    }

    .detail {
        position: relative;

        width: 89rem;
        padding-top: 1rem;

        color: $greyscale-white;
    }

    .name,
    .provider {
        margin-right: 12rem;
        overflow: hidden;

        font-style: italic;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .name {
        height: 6.4rem;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 1.2rem;

        font-size: 5.2rem;
        font-weight: normal;
    }

    .provider {
        height: 6.3rem;
        padding-bottom: 4rem;

        font-size: 2.3rem;
        white-space: nowrap;

        color: $greyscale-white;
    }

    .price {
        position: absolute;
        top: 3rem;
        right: 0;

        width: 10rem;
        height: 3.2rem;

        font-size: 3.2rem;
        font-weight: bold;
        text-align: right;
        text-transform: uppercase;
    }

    .installed {
        top: 1rem;

        width: 5.4rem;
        height: 5.4rem;

        color: transparent;
        background-size: cover;
        background-image: url('../img/install.png');
    }

    .description {
        height: 19rem;
        overflow: hidden;

        font-size: 2.6rem;
        font-style: italic;
        line-height: 3.1rem;

        a {
            color: $greyscale-white;

            text-decoration: none;
        }
    }
}