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

// See Assets Album page:
// http://localhost:8001/_dev/assets

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

            div.item-two-col-grid {
                display: grid;
                width: 100%;
                justify-content: stretch;

                @include media-breakpoint-up(lg) {
                    grid-template-areas:
                        "title aside";
                    grid-template-columns: 1fr minmax(8rem, 1fr);
                    column-gap: 0.5em;
                }
                @include media-breakpoint-down(lg) {
                    grid-template-areas:
                        "aside"
                        "title";
                }

                & > div.title {
                    grid-area: title;
                }

                & > div.aside {
                    grid-area: aside;
                }
            }
        }

    }

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

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

    div.item-meta {
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        width: unset !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

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

        &:not(.no-altern) { // class to avoid even/odd

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

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

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

            &.column { // exception
                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;

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

                    ul.record_actions {
                        align-self: flex-start; // !! conflict with .float-button.bottom see L297
                    }
                }
            }

            @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;
            }

            h3, h4 {
                font-weight: 700;
                font-size: 100%;
                font-family: 'Open Sans';
            }
        }

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

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

            blockquote.chill-user-quote {
                margin: 0.7em 0;
            }
        }
    }

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

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

            .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;
            margin-bottom: 5px;
        }
    }
}


/*
*  FLOATBUTTON
*  p-ê pas convaincant: cet asset est toujours en observation
*/

div.float-button {
    width: 100%;

    div.box {
        width: 100%;

        div.action {
            float: right;
            position: relative;
            z-index: 1;
        }

        a {
            word-break: break-all; // break email address
        }
    }
    &.top {
        div.action {
            padding: 0 0 1em 1em;
        }
    }
    &.bottom {
        display: flex;
        overflow: hidden;

        div.action {
            height: calc(100% - 0em);
            shape-outside: inset(calc(100% - 2em) 0 0);
            display: flex;
            align-items: flex-end;
            padding: 0 0 0 1em;
            * {
                align-self: flex-end !important; // neutralize flex-table rule L118
            }
            ul.record_actions {
                margin: 0;
                padding: 0;
            }
        }

        .chill-entity.entity-address .address p {
            display: unset;
        }
    }
    &.debug {
        padding: 1em;
        border: 1px solid black;
        background-color: yellow;
        div.box {
            div.action {
                background-color: transparentize(cyan, 0.4);
            }
            & > ul li,
            & > div,
            & > p {
                background-color: transparentize(orange, 0.4);
            }
            & > div  {
                margin-bottom: 1em;
            }
        }
    }

}