chill-bundles/src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss

/*
*  FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
*/

div.flex-bloc,
div.flex-table {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    box-sizing: border-box;
    margin: 1.5em 0;

    div.item-bloc {
        display: flex;
        @include border-collapse;
        padding: 1em;

        div.item-row {
            display: flex;

            div.item-col:last-child {
                display: flex;
            }
        }
    }

    h2, h3, h4, dl, p {
        margin: 0;
    }
    h2, h3, h4 {
        color: $blue;
    }

    ul.record_actions {
        margin: 0;
        li {
            margin-right: 5px;
        }
    }
}

/*
* Bloc appearance
*/

div.flex-bloc {
    flex-direction: row;
    flex-wrap: wrap;

    div.item-bloc {
        flex-grow: 0; flex-shrink: 1; flex-basis: auto;
        flex-direction: column;
        margin: 0;
        hyphens: auto;

        div.item-row {
            flex-grow: 1; flex-shrink: 1; flex-basis: auto;
            flex-direction: column;

            div.item-col {
                &.separator {
                    margin-top: 0.5em;
                    border-top: 1px dotted $gray-900;
                    padding-top: 0.5em;
                }

                &:first-child {
                    flex-grow: 0; flex-shrink: 0; flex-basis: auto;
                }

                &:last-child {
                    flex-grow: 1; flex-shrink: 1; flex-basis: auto;

                    ul.record_actions {
                        align-self: flex-end;
                        flex-grow: 1; flex-shrink: 0; flex-basis: auto;
                        margin: 0;

                        li {
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
    }
}

/*
* Table appearance
*/

div.flex-table {
    flex-direction: column;

    div.item-bloc {
        flex-direction: column;

        &:nth-child(even) {
            background-color: $gray-200;

            .chill-user-quote {
                background-color: shade-color($gray-200, 5%)
            }
        }

        div.item-row {
            flex-direction: row;

            &.separator {
                margin-top: 0.5em;
                border-top: 1px dotted $gray-900;
                padding-top: 0.5em;
                //flex-direction: column;
            }

            div.item-col {
                &:first-child {
                    flex-grow: 0; flex-shrink: 0; flex-basis: auto;
                }

                &:last-child {
                    flex-grow: 1; flex-shrink: 1; flex-basis: auto;
                    justify-content: flex-end;

                    ul.record_actions {
                        flex-grow: 1; flex-shrink: 0; flex-basis: auto;
                        align-self: flex-start;
                    }
                }
            }

            @media only screen and (max-width: 900px) {
                flex-direction: column;
                div.item-col {
                    &:last-child {
                        ul.record_actions {
                            align-self: flex-end;
                        }
                    }
                }
            }
        }
    }
}