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

GAF mobile Web site

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

/**
 * Card
 *
 * A Generic Card used to display information
 *
 * .Card--primary - with border-top @primary-color
 * .Card--primaryLight - with border-top @primaryLight-color
 * .Card--secondary - with border-top @secondary-color
 * .Card--tertiary - with border-top @tertiary-color
 * .Card--senary - with border-top @senary-color
 * .Card--quinary - with border-top @quinary-color
 *
 * Markup: cards/Card.html
 *
 * Styleguide 3
 */

/**
 * Card with Content Toggle
 *
 * Markup: cards/Card-multiple-bodySection.html
 *
 * Styleguide 3.1
 */

/**
 * Card with multiple bodySection
 *
 * Markup: cards/Card-multiple-bodySection.html
 *
 * Styleguide 3.2
 */


/* Private vars */
@Card-horizontalPadding: 20px;
@Card-border: 1px solid;

/* Private Mixin */
.Card-skinConstructor(@border-color) {
    border-top: 2px solid @border-color;
}

/***************************************/
/* Card Module */
/***************************************/
.Card {
    position: relative;
    margin-bottom: 10px;
    border: @Card-border @border-color--dark;
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 fadeout(@septenary-color-xxxdark, 96%);
    overflow: hidden;

    &-noMilestones {
        margin-top: 10px;
    }

    &-header,
    &-footer {
        padding: 16px @Card-horizontalPadding 12px;
        background: @cards-bg-color;
    }

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

    &-bodySection {
        padding: 12px @Card-horizontalPadding;
        border-top: @Card-border @border-color;
        line-height: 1.4;
        background: @septenary-color-xxxlight;
    }

    &-title {
        margin: 0;
        font-size: @type-size-xsml;
        font-weight: @type-weight-bold;
        color: @text-color-xdark;
        text-transform: uppercase;
    }

    &-headerBtn {
        margin-left: auto;
    }

    &-desc {
        line-height: 1.4;
        margin-top: 0;

        &:only-child {
            margin-bottom: 0;
        }
    }

    &-footnote {
        color: @text-color-mid;
        font-size: @type-size-xsml;
        font-style: italic;
    }

    &-toggledList {
        list-style-type: none;
        padding: 0;
        background-color: @cards-bg-color;

        &-item {
            padding-right: @Card-horizontalPadding;
            padding-left: @Card-horizontalPadding;
            border-top: 1px solid @border-color;
        }
    }

    &-btn {
        width: 100%;
    }

    &-footer {
        border-top: @Card-border @border-color;
    }

    /* Color Modifiers */
    &--primary {
        .Card-skinConstructor(@primary-color);
    }

    &--primaryLight {
        .Card-skinConstructor(@primary-color-xlight);
    }

    &--secondary {
        .Card-skinConstructor(@secondary-color);
    }

    &--tertiary {
        .Card-skinConstructor(@tertiary-color);
    }

    &--senary {
        .Card-skinConstructor(@senary-color);
    }

    &--quinary {
        .Card-skinConstructor(@quinary-color);
    }
}