riot-web/res/css/structures/_LeftPanel2.scss

/*
Copyright 2020 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367

$tagPanelWidth: 70px; // only applies in this file, used for calculations

.mx_LeftPanel2 {
    background-color: $roomlist2-bg-color;
    min-width: 260px;
    max-width: 50%;

    // Create a row-based flexbox for the TagPanel and the room list
    display: flex;

    .mx_LeftPanel2_tagPanelContainer {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: $tagPanelWidth;
        height: 100%;

        // Create another flexbox so the TagPanel fills the container
        display: flex;

        // TagPanel handles its own CSS
    }

    &:not(.mx_LeftPanel2_hasTagPanel) {
        .mx_LeftPanel2_roomListContainer {
            width: 100%;
        }
    }

    // Note: The 'room list' in this context is actually everything that isn't the tag
    // panel, such as the menu options, breadcrumbs, filtering, etc
    .mx_LeftPanel2_roomListContainer {
        width: calc(100% - $tagPanelWidth);

        // Create another flexbox (this time a column) for the room list components
        display: flex;
        flex-direction: column;

        .mx_LeftPanel2_userHeader {
            /* 12px top, 12px sides, 20px bottom (using 13px bottom to account
             * for internal whitespace in the breadcrumbs)
             */
            padding: 12px 12px 13px;
            flex-shrink: 0; // to convince safari's layout engine the flexbox is fine

            // Create another flexbox column for the rows to stack within
            display: flex;
            flex-direction: column;

            // This is basically just breadcrumbs. The row above that is handled by the UserMenu
            .mx_LeftPanel2_headerRow {
                // Create yet another flexbox, this time within the row, to ensure items stay
                // aligned correctly. This is also a row-based flexbox.
                display: flex;
                align-items: center;
            }

            .mx_LeftPanel2_breadcrumbsContainer {
                width: 100%;
                overflow-y: hidden;
                overflow-x: scroll;
                margin-top: 20px;
                padding-bottom: 2px;

                &.mx_IndicatorScrollbar_leftOverflow {
                    mask-image: linear-gradient(90deg, transparent, black 10%);
                }

                &.mx_IndicatorScrollbar_rightOverflow {
                    mask-image: linear-gradient(90deg, black, black 90%, transparent);
                }

                &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
                    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
                }
            }
        }

        .mx_LeftPanel2_filterContainer {
            margin-left: 12px;
            margin-right: 12px;

            flex-shrink: 0; // to convince safari's layout engine the flexbox is fine

            // Create a flexbox to organize the inputs
            display: flex;
            align-items: center;

            .mx_RoomSearch_expanded + .mx_LeftPanel2_exploreButton {
                // Cheaty way to return the occupied space to the filter input
                flex-basis: 0;
                margin: 0;
                width: 0;

                // Don't forget to hide the masked ::before icon,
                // using display:none or visibility:hidden would break accessibility
                &::before {
                    content: none;
                }
            }

            .mx_LeftPanel2_exploreButton {
                width: 28px;
                height: 28px;
                border-radius: 20px;
                background-color: $roomlist2-button-bg-color;
                position: relative;
                margin-left: 8px;

                &::before {
                    content: '';
                    position: absolute;
                    top: 6px;
                    left: 6px;
                    width: 16px;
                    height: 16px;
                    mask-image: url('$(res)/img/feather-customised/compass.svg');
                    mask-position: center;
                    mask-size: contain;
                    mask-repeat: no-repeat;
                    background: $primary-fg-color;
                }
            }
        }

        .mx_LeftPanel2_roomListWrapper {
            // Create a flexbox to ensure the containing items cause appropriate overflow.
            display: flex;

            flex-grow: 1;
            overflow: hidden;
            min-height: 0;
            margin-top: 12px; // so we're not up against the search/filter

            &.mx_LeftPanel2_roomListWrapper_stickyBottom {
                padding-bottom: 32px;
            }

            &.mx_LeftPanel2_roomListWrapper_stickyTop {
                padding-top: 32px;
            }
        }

        .mx_LeftPanel2_actualRoomListContainer {
            flex-grow: 1; // fill the available space
            overflow-y: auto;
            width: 100%;
            max-width: 100%;
            position: relative; // for sticky headers

            // Create a flexbox to trick the layout engine
            display: flex;
        }
    }

    // These styles override the defaults for the minimized (66px) layout
    &.mx_LeftPanel2_minimized {
        min-width: unset;

        // We have to forcefully set the width to override the resizer's style attribute.
        &.mx_LeftPanel2_hasTagPanel {
            width: calc(68px + $tagPanelWidth) !important;
        }
        &:not(.mx_LeftPanel2_hasTagPanel) {
            width: 68px !important;
        }

        .mx_LeftPanel2_roomListContainer {
            width: 68px;

            .mx_LeftPanel2_filterContainer {
                // Organize the flexbox into a centered column layout
                flex-direction: column;
                justify-content: center;

                .mx_LeftPanel2_exploreButton {
                    margin-left: 0;
                    margin-top: 8px;
                    background-color: transparent;
                }
            }
        }
    }
}