gaf-mobile/app/styles/modules/user-ratings.less

GAF mobile Web site

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

/**
 * Ratings
 *
 * Styleguide 12
 */

/**
 * User Ratings
 *
 * Display rating in stars
 *
 * .is-large - A more complex version of star rating
 *
 * Markup: user-rating.html
 *
 * Styleguide 12.1
 */

@user-rating-width: 80px;
@earnings-rating-width: 60px;

.user-rating,
.earnings-rating {
    display: inline-block;
    position: relative;
    line-height: 1;
    white-space: nowrap;
    font-weight: normal;
    vertical-align: top;
    color: @septenary-color;
}

.user-rating {
    & > * {
        vertical-align: top;
        margin: 0;
    }

    // 1. Star rating integer
    &::after {
        display: inline-block;
        color: @septenary-color;
        font-size: @type-size;
        line-height: 1.3;
        content: attr(data-rating);
    }

    &.is-large {
        margin-left: 52px;
        &::after {
            display: block;
            position: absolute;
            left: -52px;
            top: -1px;
            height: 36px;
            padding-left: 7px;
            padding-right: 7px;
            background-color: @tertiary-color-dark;
            color: @septenary-color-xxxlight;
            font-size: 21px;
            line-height: 36px;
            font-weight: bold;
        }

        .user-rating-label {
            position: relative;
            left: 0;
        }
    }

    &-progress {
        position: relative;
        display: inline-block;
        width: @user-rating-width;
        height: 14px;
        background-image: data-uri('image/svg+xml;charset=UTF-8', '../images/icons/user-rating-stars-bg.svg');
        background-size: @user-rating-width 14px;
        background-repeat: no-repeat;
        // 2.
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 1;
            content: '';
            background-repeat: no-repeat;
            background-image: data-uri('image/svg+xml;charset=UTF-8', '../images/icons/user-rating-stars.svg');
            background-size: @user-rating-width 14px;
            background-repeat: no-repeat;
        }
    }

    &-label {
        display: block;
        position: absolute;
        top: 3px;
        left: 104%;
        font-weight: normal;
        font-size: @type-size;
        line-height: @type-size-sml;
    }

    &--simple {
        &::after {
            content: "";
        }
    }

    &--labeled {
        &::before {
            margin-right: @spacing-xsmall;
            padding: 1px @spacing-xxsmall 0;
            border-radius: 2px;
            font-size: @type-size-sml;
            color: @text-color-light;
            background-color: @tertiary-color-dark;
            content: attr(data-rating);
        }
    }
}

/**
 * Earnings Ratings
 *
 * Display earnings of the user
 *
 * Markup: earnings-rating.html
 *
 * Styleguide 12.2
 */
.earnings-rating {

    // 3. Currency character
    &::before {
        display: inline-block;
        height: 16px;
        padding-left: 4px;
        padding-right: 4px;
        vertical-align:top;
        background-color: @quinary-color;
        color: @septenary-color-xxxlight;
        text-align: center;
        font-size: @type-size-sml;
        line-height: 16px;
        font-weight: bold;
        content: attr(data-currency);
    }

    // 4.
    &::after {
        display: inline-block;
        color: @septenary-color;
        font-size: @type-size-sml;
        content: attr(data-rating);
        vertical-align: top;
        margin-top: 2px;
    }

    &-progress {
        position: relative;
        display: inline-block;
        width: @earnings-rating-width;
        height: 16px;
        background-image: data-uri('image/svg+xml;charset=UTF-8', '../images/icons/user-earnings-pips-bg.svg');
        background-size: @earnings-rating-width 16px;
        background-position: 0 0;
        background-repeat: no-repeat;

        // 5.
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            z-index: 1;
            content: '';
            background-position: 0;
            background-repeat: no-repeat;
            background-image: data-uri('image/svg+xml;charset=UTF-8', '../images/icons/user-earnings-pips.svg');
            background-size: @earnings-rating-width 16px;
        }
    }
}


[data-rating="0.1"] .user-rating-progress::before{
    width:2%;
}
[data-rating="0.2"] .user-rating-progress::before{
    width:4%;
}
[data-rating="0.3"] .user-rating-progress::before{
    width:6%;
}
[data-rating="0.4"] .user-rating-progress::before{
    width:8%;
}
[data-rating="0.5"] .user-rating-progress::before{
    width:10%;
}
[data-rating="0.6"] .user-rating-progress::before{
    width:12%;
}
[data-rating="0.7"] .user-rating-progress::before{
    width:14%;
}
[data-rating="0.8"] .user-rating-progress::before{
    width:16%;
}
[data-rating="0.9"] .user-rating-progress::before{
    width:18%;
}
[data-rating="1.0"] .user-rating-progress::before{
    width:20%;
}
[data-rating="1.1"] .user-rating-progress::before{
    width:22%;
}
[data-rating="1.2"] .user-rating-progress::before{
    width:24%;
}
[data-rating="1.3"] .user-rating-progress::before{
    width:26%;
}
[data-rating="1.4"] .user-rating-progress::before{
    width:28%;
}
[data-rating="1.5"] .user-rating-progress::before{
    width:30%;
}
[data-rating="1.6"] .user-rating-progress::before{
    width:32%;
}
[data-rating="1.7"] .user-rating-progress::before{
    width:34%;
}
[data-rating="1.8"] .user-rating-progress::before{
    width:36%;
}
[data-rating="1.9"] .user-rating-progress::before{
    width:38%;
}
[data-rating="2.0"] .user-rating-progress::before{
    width:40%;
}
[data-rating="2.1"] .user-rating-progress::before{
    width:42%;
}
[data-rating="2.2"] .user-rating-progress::before{
    width:44%;
}
[data-rating="2.3"] .user-rating-progress::before{
    width:46%;
}
[data-rating="2.4"] .user-rating-progress::before{
    width:48%;
}
[data-rating="2.5"] .user-rating-progress::before{
    width:50%;
}
[data-rating="2.6"] .user-rating-progress::before{
    width:52%;
}
[data-rating="2.7"] .user-rating-progress::before{
    width:54%;
}
[data-rating="2.8"] .user-rating-progress::before{
    width:56%;
}
[data-rating="2.9"] .user-rating-progress::before{
    width:58%;
}
[data-rating="3.0"] .user-rating-progress::before{
    width:60%;
}
[data-rating="3.1"] .user-rating-progress::before{
    width:62%;
}
[data-rating="3.2"] .user-rating-progress::before{
    width:64%;
}
[data-rating="3.3"] .user-rating-progress::before{
    width:66%;
}
[data-rating="3.4"] .user-rating-progress::before{
    width:68%;
}
[data-rating="3.5"] .user-rating-progress::before{
    width:70%;
}
[data-rating="3.6"] .user-rating-progress::before{
    width:72%;
}
[data-rating="3.7"] .user-rating-progress::before{
    width:74%;
}
[data-rating="3.8"] .user-rating-progress::before{
    width:76%;
}
[data-rating="3.9"] .user-rating-progress::before{
    width:78%;
}
[data-rating="4.0"] .user-rating-progress::before{
    width:80%;
}
[data-rating="4.1"] .user-rating-progress::before{
    width:82%;
}
[data-rating="4.2"] .user-rating-progress::before{
    width:84%;
}
[data-rating="4.3"] .user-rating-progress::before{
    width:86%;
}
[data-rating="4.4"] .user-rating-progress::before{
    width:88%;
}
[data-rating="4.5"] .user-rating-progress::before{
    width:90%;
}
[data-rating="4.6"] .user-rating-progress::before{
    width:92%;
}
[data-rating="4.7"] .user-rating-progress::before{
    width:94%;
}
[data-rating="4.8"] .user-rating-progress::before{
    width:96%;
}
[data-rating="4.9"] .user-rating-progress::before{
    width:98%;
}
[data-rating="5.0"] .user-rating-progress::before{
    width:100%;
}

// user earnings
[data-rating="0.0"] .earnings-rating-progress::before{
    width:0%;
}
[data-rating="0.1"] .earnings-rating-progress::before{
    width:1%;
}
[data-rating="0.2"] .earnings-rating-progress::before{
    width:2%;
}
[data-rating="0.3"] .earnings-rating-progress::before{
    width:3%;
}
[data-rating="0.4"] .earnings-rating-progress::before{
    width:4%;
}
[data-rating="0.5"] .earnings-rating-progress::before{
    width:5%;
}
[data-rating="0.6"] .earnings-rating-progress::before{
    width:6%;
}
[data-rating="0.7"] .earnings-rating-progress::before{
    width:7%;
}
[data-rating="0.8"] .earnings-rating-progress::before{
    width:8%;
}
[data-rating="0.9"] .earnings-rating-progress::before{
    width:9%;
}

[data-rating="1.0"] .earnings-rating-progress::before{
    width:10%;
}
[data-rating="1.1"] .earnings-rating-progress::before{
    width:11%;
}
[data-rating="1.2"] .earnings-rating-progress::before{
    width:12%;
}
[data-rating="1.3"] .earnings-rating-progress::before{
    width:13%;
}
[data-rating="1.4"] .earnings-rating-progress::before{
    width:14%;
}
[data-rating="1.5"] .earnings-rating-progress::before{
    width:15%;
}
[data-rating="1.6"] .earnings-rating-progress::before{
    width:16%;
}
[data-rating="1.7"] .earnings-rating-progress::before{
    width:17%;
}
[data-rating="1.8"] .earnings-rating-progress::before{
    width:18%;
}
[data-rating="1.9"] .earnings-rating-progress::before{
    width:19%;
}

[data-rating="2.0"] .earnings-rating-progress::before{
    width:20%;
}
[data-rating="2.1"] .earnings-rating-progress::before{
    width:21%;
}
[data-rating="2.2"] .earnings-rating-progress::before{
    width:22%;
}
[data-rating="2.3"] .earnings-rating-progress::before{
    width:23%;
}
[data-rating="2.4"] .earnings-rating-progress::before{
    width:24%;
}
[data-rating="2.5"] .earnings-rating-progress::before{
    width:25%;
}
[data-rating="2.6"] .earnings-rating-progress::before{
    width:26%;
}
[data-rating="2.7"] .earnings-rating-progress::before{
    width:27%;
}
[data-rating="2.8"] .earnings-rating-progress::before{
    width:28%;
}
[data-rating="2.9"] .earnings-rating-progress::before{
    width:29%;
}

[data-rating="3.0"] .earnings-rating-progress::before{
    width:30%;
}
[data-rating="3.1"] .earnings-rating-progress::before{
    width:31%;
}
[data-rating="3.2"] .earnings-rating-progress::before{
    width:32%;
}
[data-rating="3.3"] .earnings-rating-progress::before{
    width:33%;
}
[data-rating="3.4"] .earnings-rating-progress::before{
    width:34%;
}
[data-rating="3.5"] .earnings-rating-progress::before{
    width:35%;
}
[data-rating="3.6"] .earnings-rating-progress::before{
    width:36%;
}
[data-rating="3.7"] .earnings-rating-progress::before{
    width:37%;
}
[data-rating="3.8"] .earnings-rating-progress::before{
    width:38%;
}
[data-rating="3.9"] .earnings-rating-progress::before{
    width:39%;
}

[data-rating="4.0"] .earnings-rating-progress::before{
    width:40%;
}
[data-rating="4.1"] .earnings-rating-progress::before{
    width:41%;
}
[data-rating="4.2"] .earnings-rating-progress::before{
    width:42%;
}
[data-rating="4.3"] .earnings-rating-progress::before{
    width:43%;
}
[data-rating="4.4"] .earnings-rating-progress::before{
    width:44%;
}
[data-rating="4.5"] .earnings-rating-progress::before{
    width:45%;
}
[data-rating="4.6"] .earnings-rating-progress::before{
    width:46%;
}
[data-rating="4.7"] .earnings-rating-progress::before{
    width:47%;
}
[data-rating="4.8"] .earnings-rating-progress::before{
    width:48%;
}
[data-rating="4.9"] .earnings-rating-progress::before{
    width:49%;
}

[data-rating="5.0"] .earnings-rating-progress::before{
    width:50%;
}
[data-rating="5.1"] .earnings-rating-progress::before{
    width:51%;
}
[data-rating="5.2"] .earnings-rating-progress::before{
    width:52%;
}
[data-rating="5.3"] .earnings-rating-progress::before{
    width:53%;
}
[data-rating="5.4"] .earnings-rating-progress::before{
    width:54%;
}
[data-rating="5.5"] .earnings-rating-progress::before{
    width:55%;
}
[data-rating="5.6"] .earnings-rating-progress::before{
    width:56%;
}
[data-rating="5.7"] .earnings-rating-progress::before{
    width:57%;
}
[data-rating="5.8"] .earnings-rating-progress::before{
    width:58%;
}
[data-rating="5.9"] .earnings-rating-progress::before{
    width:59%;
}

[data-rating="6.0"] .earnings-rating-progress::before{
    width:60%;
}
[data-rating="6.1"] .earnings-rating-progress::before{
    width:61%;
}
[data-rating="6.2"] .earnings-rating-progress::before{
    width:62%;
}
[data-rating="6.3"] .earnings-rating-progress::before{
    width:63%;
}
[data-rating="6.4"] .earnings-rating-progress::before{
    width:64%;
}
[data-rating="6.5"] .earnings-rating-progress::before{
    width:65%;
}
[data-rating="6.6"] .earnings-rating-progress::before{
    width:66%;
}
[data-rating="6.7"] .earnings-rating-progress::before{
    width:67%;
}
[data-rating="6.8"] .earnings-rating-progress::before{
    width:68%;
}
[data-rating="6.9"] .earnings-rating-progress::before{
    width:69%;
}

[data-rating="7.0"] .earnings-rating-progress::before{
    width:70%;
}
[data-rating="7.1"] .earnings-rating-progress::before{
    width:71%;
}
[data-rating="7.2"] .earnings-rating-progress::before{
    width:72%;
}
[data-rating="7.3"] .earnings-rating-progress::before{
    width:73%;
}
[data-rating="7.4"] .earnings-rating-progress::before{
    width:74%;
}
[data-rating="7.5"] .earnings-rating-progress::before{
    width:75%;
}
[data-rating="7.6"] .earnings-rating-progress::before{
    width:76%;
}
[data-rating="7.7"] .earnings-rating-progress::before{
    width:77%;
}
[data-rating="7.8"] .earnings-rating-progress::before{
    width:78%;
}
[data-rating="7.9"] .earnings-rating-progress::before{
    width:79%;
}

[data-rating="8.0"] .earnings-rating-progress::before{
    width:80%;
}
[data-rating="8.1"] .earnings-rating-progress::before{
    width:81%;
}
[data-rating="8.2"] .earnings-rating-progress::before{
    width:82%;
}
[data-rating="8.3"] .earnings-rating-progress::before{
    width:83%;
}
[data-rating="8.4"] .earnings-rating-progress::before{
    width:84%;
}
[data-rating="8.5"] .earnings-rating-progress::before{
    width:85%;
}
[data-rating="8.6"] .earnings-rating-progress::before{
    width:86%;
}
[data-rating="8.7"] .earnings-rating-progress::before{
    width:87%;
}
[data-rating="8.8"] .earnings-rating-progress::before{
    width:88%;
}
[data-rating="8.9"] .earnings-rating-progress::before{
    width:89%;
}

[data-rating="9.0"] .earnings-rating-progress::before{
    width:90%;
}
[data-rating="9.1"] .earnings-rating-progress::before{
    width:91%;
}
[data-rating="9.2"] .earnings-rating-progress::before{
    width:92%;
}
[data-rating="9.3"] .earnings-rating-progress::before{
    width:93%;
}
[data-rating="9.4"] .earnings-rating-progress::before{
    width:94%;
}
[data-rating="9.5"] .earnings-rating-progress::before{
    width:95%;
}
[data-rating="9.6"] .earnings-rating-progress::before{
    width:96%;
}
[data-rating="9.7"] .earnings-rating-progress::before{
    width:97%;
}
[data-rating="9.8"] .earnings-rating-progress::before{
    width:98%;
}
[data-rating="9.9"] .earnings-rating-progress::before{
    width:99%;
}

[data-rating="10.0"] .earnings-rating-progress::before{
    width:100%;
}