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

GAF mobile Web site

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

/***************************************/
/* Project Category */
// - Currently used in hire freelancers page
/***************************************/
@ProjectCategory-border: 1px solid @border-color;

.ProjectCategory {
    display: block;
    height: 190px;
    padding: 27px 15px 10px;
    vertical-align: middle;
    text-align: center;

    &:hover,
    &:active,
    &.fl-touch-active {
        background-color: @septenary-color-xxlight;
        text-decoration: none;
    }

    /* reset hover state to prevent sticky hover on touch screens */
    html.touch &:hover {
        background-color: transparent;
        color: @septenary-color-xxxlight;
    }

    &-list {
        .list-unstyled();
        .clearfix();

        &Item {
            float: left;
            width: 50%;
            background-color: @body-bg-light;
            border-bottom: @ProjectCategory-border;

            &:nth-child(odd) {
                border-right: @ProjectCategory-border;
            }

            &:nth-child(n+7) {
                border-bottom: 0;
            }

            @media (min-width: 490px) {
                width: 33.33%;

                &:nth-child(odd) {
                    border-right: 0;
                }

                &:nth-child(3n+2) {
                    border-right: @ProjectCategory-border;
                    border-left: @ProjectCategory-border;
                }
            }
        }

        &Item--withNewTemplates {
            float: left;
            width: 50%;
            background-color: @body-bg-light;
            border-bottom: @ProjectCategory-border;

            &:nth-child(odd) {
                border-right: @ProjectCategory-border;
            }

            &:nth-child(n+9) {
                border-bottom: 0;
            }

            @media (min-width: 490px) {
                width: 33.33%;

                &:nth-child(odd) {
                    border-right: 0;
                }

                &:nth-child(3n+2) {
                    border-right: @ProjectCategory-border;
                    border-left: @ProjectCategory-border;
                }
            }
        }
    }

    &-icon {
        display: block;
        height: 80px;
        margin: 0 auto;
    }

    &-title,
    &-desc {
        display: block;
        font-weight: @type-weight-regular;
    }

    &-title {
        margin-top: 12px;
        font-size: @type-size-lge;
        color: @quaternary-color-xdark;
    }

    &-desc {
        margin-top: -2px;
        font-size: @type-size;
        color: @quaternary-color-light;
    }
}