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

GAF mobile Web site

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

/* Site wide graphic components */

// 1. Landscape styling media query

.payment-verified-tag {
    display: inline-block;
    position: relative;
    height: 18px;
    padding: 3px 4px 0 22px;
    background-color: @septenary-color-xxlight;
    color: @septenary-color-xxxlight;
    font-size: 12px;
    line-height: 1em;
    text-transform: uppercase;
    -webkit-border-radius: 9px 2px 2px 9px;
    border-radius: 9px 2px 2px 9px;

    &.is-verified {
        background-color: @quinary-color-dark;
    }
}

.payment-verified-icon {
    position: absolute;
    display: inline-block;
    left: 5px;
    top: 3px;
    color: @septenary-color-xxxlight;
    font-size: @type-size-sml;
}

.verify-icon {
    position: absolute;
    left: 0;
    top: -1px;
    font-size: @type-size-xlge;
    color: @septenary-color-xlight;
    &.is-verified {
        color: @info-notify-color;
    }
}

/* Custom icon selectors */

.large-icon {
    display: block;
    position: relative;
    margin: 50px auto 30px;
    width: 140px;
    height: 140px;
    font-size: 140px;
    color: @primary-color;
    .large-icon-inner {
        display: block;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: 90px;
        width: 90px;
        font-size: 90px;
        color: @septenary-color-xxxlight;
    }
    &.watermark-icon {
        color: lighten(@septenary-color-xlight, 5%);
    }
}

// 1.
@media all and (orientation:landscape) and (max-height: 640px) {
    .large-icon {
        width: 110px;
        height: 110px;
        font-size: 110px;
        margin: 25px auto 10px;
        .large-icon-inner {
            height: 70px;
            width: 70px;
            font-size: 70px;
        }
    }
}

.has-succeeded  {
    color: @success-notify-color;
}

.bid-tag {
    position: absolute;
    left: -1px;
    top: -8px;
    height: 16px;
    padding: 4px 4px 0 8px;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    color: @septenary-color-xxxlight;
    white-space: nowrap;
    &:after {
        position: absolute;
        right: -8px;
        top: 0;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 16px 8px 0 0;
        content: '';
    }
}