gaf-mobile/app/styles/layout/SkillSelect.less

GAF mobile Web site

/* Skill Select Page Layout
 *
 * 1. Overrides specificity of default form element styling.
 */

.SkillSelect {
    @this: SkillSelect;

    margin-bottom: 38px;

    /* 1. */
    & &-searchInput {
        margin: 16px 0;
    }

    &-section {
        padding-top: 12px;
        padding-bottom: 12px;

        &--mySkills {
            background: @body-bg-light;
        }
    }

    &-sectionHeading {
        font-size: @type-size;
        color: @text-color-mid;
    }

    &-sectionSubheading {
        font-size: @type-size-sml;
        color: @quaternary-color-xlight;
    }

    &-list {
        list-style: none;
        padding: 0;
    }

    &-listItem {
          .flex();
          .flex-justify-content(space-between);
          border-bottom: 1px solid @septenary-color-xxxlight;
          padding: 10px 0;
          font-weight: @type-weight-medium;

        &:last-child {
            border-bottom: none;
        }

        &--mySkills {
            border-color: @septenary-color-xxlight;
        }

        &--newSelected {
            background: @septenary-color-xxlight;
            padding: 10px;
        }
    }

    &-listItemControl {
        border: none;
        padding: 4px;
        background: none;
    }

    &-controls {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    &-status {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 4px 0;
        color: @text-color-light;
        text-align: center;
        background: @site-bg--dark;
        /* Fix bug on safari browsers not fixing div at the bottom */
        -webkit-transform: translate3d(0,0,0);

        &.is-@{this}-status-alert {
            background: @secondary-color-xxxdark;
        }
    }
}