gaf-mobile/app/styles/modules/banners.less

GAF mobile Web site

@import (reference) '../themes/variables';

.app-banner {
    display: block;
    position: relative;
    height: 220px;
    padding: 20px 15px;
    background-color: @septenary-color-xxlight;
    background-repeat: no-repeat;
    background-size: 540px 220px;
}

.app-banner-close {
    position: absolute;
    top: 20px;
    right: 10px;
    padding: 0;
    background-color: @septenary-color-xxxlight;
    border-radius: 13px;
    .icon-circled-plus {
        color: @septenary-color-dark;
        &:hover {
            color: @link-color;
        }
    }
}

.app-banner-getbadge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    height: 42px;
}


// Android app banenr

.app-banner-android {
    background-position: 65% center;
    background-image: url(/images/banners/android-app-banner.jpg);

    .app-banner-title {
        display: inline-block;
        max-width: 220px;
        padding: 10px 12px;
        margin: 0;
        background-color: @septenary-color-xxxlight;
        border-left: 4px solid @primary-color;
        font-size: @type-size-xxlge;
        color: @primary-color;
    }
}


// iOS app banner

.app-banner-ios {
    color: @septenary-color-xxxlight;
    background-position: 40% center;
    background-image: url(/images/banners/ios-app-banner.jpg);

    .app-banner-title {
        max-width: 166px;
        color: @septenary-color-xxxlight;
    }

    .app-banner-content {
        display: block;
        max-width: 166px;
        font-size: @type-size-lge;
    }
}


// Media Queries

@media only screen and (max-width: 568px) and (orientation:landscape) {
    .app-banner {
        padding: 20px 30px;
    }
    .app-banner-getbadge {
        left: 30px;
    }
}

@media only screen and (min-width: 569px) and (orientation:landscape) {
    .app-banner {
        padding: 20px 50px;
    }
    .app-banner-getbadge {
        left: 50px;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.5) {
    .app-banner-android {
        background-image: url(/images/banners/android-app-banner-1080x440.jpg);
    }
    .app-banner-ios {
        background-image: url(/images/banners/ios-app-banner-1080x440.jpg);
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5) {
    .app-banner-android {
        background-image: url(/images/banners/android-app-banner-1620x660.jpg);
    }
    .app-banner-ios {
        background-image: url(/images/banners/ios-app-banner-1620x660.jpg);
    }
}