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

/*
*  __FLEX-TABLE_________
*  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 {

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

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

                    ul.record_actions {
                        align-self: flex-end;
                    }
                }
            }
        }
    }
}

/*
* 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;

            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;

                    @include media-breakpoint-down(md) {
                        @include separator;
                    }

                    ul.record_actions {
                        align-self: flex-start;
                    }
                }
            }

            @include media-breakpoint-down(md) {
                flex-direction: column;
                div.item-col {
                    &:last-child {
                        ul.record_actions {
                            align-self: flex-end;
                        }
                    }
                }
            }
        }
    }
}

/*
*  __WRAP_LIST_INLINE_________
*  FLEX RESPONSIVE INLINE DEFINITION LIST
*/

div.wrap-list {
    padding: 0;
    width: 100%;

    div.wl-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        div.wl-col.title {
            width: auto;
            flex-shrink: 0;

            @include media-breakpoint-up(md) {
                //margin-left: 1.5em;
            }

            & > * {
                padding-right: 1em;
            }
        }

        div.wl-col.list {
            width: 75%;
            margin: auto 0 0 auto;

            .wl-item {
                margin: 0.1em;
                padding: 0em;
                display: inline-block;
            }
        }
    }

    &.debug .wl-row {
        border: 1px solid $black;

        div.wl-col.title {
            background-color: $yellow;
        }
        div.wl-col.list {
            background-color: $green;

            p.wl-item {
                background-color: $orange;
            }
        }
    }
}

/*
*  __WRAP_HEADER_BLOC________
*  HEADER ROW FOR FLEX-TABLE ELEMENTS
*/

div.wrap-header {
    width: 100%;

    div.wh-row {
        display: flex;
        flex-direction: row;

        &:first-child {
            align-items: baseline;
        }
        &:last-child {}

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

                display: flex;
                justify-content: flex-end;
            }
        }
    }

    &.debug {
        border: 1px solid $black;
        div.wh-row {
            &:first-child div.wh-col {
                &:first-child { background-color: $yellow; }
                &:last-child { background-color: $beige; }
            }
            &:last-child div.wh-col {
                &:first-child { background-color: $orange; }
                &:last-child { background-color: $pink; }
            }
        }
    }
}

/*
*  COMMON
*/

div.flex-bloc,
div.flex-table,
div.wrap-list,
div.wrap-header {

    div.separator {
        @include separator;
    }

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

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