_list-inline.scss

/*------------------------------------*\
    # LIST-INLINE
\*------------------------------------*/

/**
 * The list-inline object simply displays a list of items in one line.
 *
 * E.g:
 *
    Item 1 Item 2 Item 3 Item 4
 *
 */
.gs-o-list-inline {
    margin: 0;
    padding: 0;
    list-style: none;

    > li {
        display: inline-block;
        vertical-align: middle;
    }
}

/**
 * Comma delimited list to semantically mark up lists of tags, etc.
 *
 * E.g:
 *
    Item 1, Item 2, Item 3, Item 4
 *
 * N.B. This component requires that you remove the whitespace between LIs.
 *
 */
.gs-o-list-inline--delimited {
    > li + li {
        &:before {
            content: ',\00A0';
        }
    }
}

/**
 * Solid line divided list of items
 *
 * Eg.
 *
    Item 1 | Item 2 | Item 3 | Item 4
 *
 * 1. Offset the margin-top applied to items
 *
 */
.gs-o-list-inline--divided {
    margin-top: halve(-$gel-spacing-unit); /* [1] */

    > li {
        #{$margin-right}: halve($gel-alt-spacing-unit);
        margin-top: halve($gel-spacing-unit);
        #{$padding-right}: halve($gel-alt-spacing-unit);
        #{$border-right}: 1px solid $sp-c-silver;
    }

    > li:last-child {
        #{$margin-right}: 0;
        #{$padding-right}: 0;
        #{$border-right}: 0;
    }
 }

/**
 * Solid line spaced list of items
 *
 * Eg.
 *
    Item 1   Item 2   Item 3   Item 4
 *
 * 1. Offset the margin-top applied to items
 */
.gs-o-list-inline--spaced {
    margin-top: halve(-$gel-spacing-unit); /* [1] */

    > li {
        #{$margin-right}: $gel-spacing-unit;
        margin-top: halve($gel-spacing-unit);
    }

    > li:last-child {
        #{$margin-right}: 0;
    }
 }