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

GAF mobile Web site

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

/* Project Status
   - A module indicating what the status of the project is

    Notes:
    1. this will allow the stroke width of lineicons to not be scaled when the icon's size changed
*/

/* Private Var */
@ProjectStatus-fontSize: @type-size-sml;
@ProjectStatus-color--closed: @senary-color;
@ProjectStauts-color--completed: @quinary-color-xxdark;

/* Private Mixin */
.ProjectStatus-color-constructor(@color, @this:@this) {
    color: @color;

    .@{this}-icon {
        stroke: @color;
    }
}

.ProjectStatus {
    @this: ProjectStatus;

    margin-bottom: 10px;
    line-height: 1;
    color: @text-color-dark;

    &-icon {
        display: inline-block;
        vertical-align: middle;
        width: @ProjectStatus-fontSize;
        height: @ProjectStatus-fontSize;
        margin-bottom: 2px;
        padding: 0.5px;
        stroke-width: 1;

        /* 1 */
        polygon, path, polyline, rect, circle, line, ellipse {
            vector-effect: non-scaling-stroke;
        }
    }

    &-text {
        font-size: @ProjectStatus-fontSize;
        font-weight: @type-weight-medium;
        color: inherit;
        text-transform: capitalize;
    }

    /* Modifiers */
    &--incomplete {
        .ProjectStatus-color-constructor(@ProjectStatus-color--closed);
    }

    &--complete {
        .ProjectStatus-color-constructor(@ProjectStauts-color--completed);
    }
}