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

GAF mobile Web site

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

/* User Profile module */

.user-profile {
    @this: user-profile;

    display: table;
    width: 100%;
    line-height: 1;

    &--listItem {
        border-bottom: 1px solid @septenary-color-xxlight;
    }

    &.has-upgrade {
        margin-top: 15px;
    }

    &.is-link {
        a {
            color: @text-color-dark;
        }
    }

    &-avatar,
    &-details {
        display: table-cell;
        vertical-align: middle;
    }

    &-details {
        width: 100%;
        color: @text-color-dark;
    }

    &-username {
        margin-bottom: 4px;
        .country-flag {
            margin-left: 3px;
        }
    }

    &-footer {
        .flex();
        .flex-align-items(center);
    }

    &-onlineStatus {
        &[data-status="online"] {
            + .@{this}-location-container {
                position: relative;
                padding-left: 60px;

                &:not(:first-child)::before {
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 50px;
                    width: 1px;
                    height: 100%;
                    border-right: 1px solid @septenary-color-xxxlight;
                    content: "";
                }
            }
        }
    }

    &-onlinestatus {
        margin-left: 4px;
    }

    &-rating,
    &-payment-verified  {
        margin-bottom: 4px;
    }

    &-rating,
    &-rate,
    &-footer {
        margin-top: 4px;
    }

    &-rate {
        font-weight: 400;

        &-value {
            font-size: @type-size-xlge;
        }
    }

    &-location {
        position: relative;
    }

    &-location-icon {
        position: absolute;
        left: 0;
        top: 1px;
        .location-pin {
            height: 14px;
            width: 14px;
            stroke: none;
            path {
                fill: @secondary-color;
            }
        }
    }

    &-location-content {
        padding-left: 18px;
        color: @septenary-color;
    }

}