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

GAF mobile Web site

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

/*
    Reputation

    Notes:
    - Currently being used in PvP
    - Null is the default color of this module using the variable @Reputation-defaultColor
*/

/* Private Var */
@Reputation-color: @text-color-light;
@Reputation-defaultColor: @quaternary-color-xxxlight;

/* Private Mixin */
.Reputation-colorConstructor(@bg-color, @this: @this) {
    .@{this}-state {
        background-color: @bg-color;
    }
}

.Reputation {
    @this: Reputation;

    font-weight: @type-weight-medium;
    text-align: center;

    &:not(:only-child):not(:last-child) {
        margin-right: 10px;
    }

    &-icon {
        display: inline-block;
        vertical-align: middle;
        height: 12px;
        margin-bottom: 2px;
        fill: @Reputation-color;
    }

    &-state {
        display: block;
        padding: 8px 10px;
        border-radius: 5px;
        font-size: @type-size-xlge - 2;
        line-height: 1;
        color: @Reputation-color;
        background-color: @Reputation-defaultColor;
    }

    &-label {
        display: inline-block;
        padding-top: 7px;
        font-size: @type-size-sml;
        color: @Reputation-defaultColor;
    }

    &-list {
        .flex();
        padding: 0;
        list-style-type: none;

        .@{this} {
            width: 33.33%;
        }
    }

    /* Modifiers */
    &--rating,
    &--verified,
    &--prepaid {
        .@{this}-label {
            color: @text-color-dark;
        }
    }

    &--rating {
        .Reputation-colorConstructor(@star-ratings);
    }

    &--verified {
        .Reputation-colorConstructor(@quinary-color);
    }

    &--prepaid {
        .Reputation-colorConstructor(@primary-color);
    }
}