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

GAF mobile Web site

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

/**
 * Section Details
 *
 * Show details for specific section of a page
 *
 * Markup: SectionDetails.html
 *
 * Styleguide 10
 */

.SectionDetails {
    @this: SectionDetails;

    background: @body-bg-light;
    padding: @padding;
    

    &-row {
        display: table;
        width: 100%;
        padding: 20px 0;

        &:not(:last-child) {
            border-bottom: 1px solid @border-color;
        }
    }

    &-column {
        display: table-cell;

        &:first-child:not(:only-child) {
            width: 50%;
        }
    }

    &-label {
        display: block;
        margin-bottom: 6px;
        font-size: @type-size-xsml;
        color: @quaternary-color-xxdark;
        text-transform: uppercase;

        &--note {
            text-transform: none;
        }
    }

    &-value {
        font-size: @type-size-xxlge;

        .project-info-countdown {
            font-size: inherit;
            margin-bottom: 0;
        }

        &--small {
            font-size: @type-size-lge;

            .@{this}-currency {
                top: -.4rem;
                margin-right: -2px;
            }
        }
    }

    &-currency {
        top: -0.5rem;
        margin-right: -5px;
        font-size: 60%;
    }

    &-currencyCode {
        bottom: 0;
        font-size: @type-size;
    }
}