centerPanel.scss

TLDR

This file (centerPanel.scss) contains the styling for the center panel component of the Demo Projects application. It defines the styles for the .CenterPanel and .BoardComponent classes.

Classes

.CenterPanel

This class defines the styling for the center panel component. It sets the flexbox properties, such as flex direction, and contains a nested .octo-board class.

.BoardComponent

This class defines the styling for the board component within the center panel. It sets the flexbox properties, handles overflow, and contains nested styles for its child elements, such as .top-head, .ViewTitle, .shareButtonWrapper, and .NotificationBox.

@import '../styles/z-index';

.CenterPanel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;

    .octo-board {
        flex: 0 1 auto;

        display: flex;
        flex-direction: column;
    }
}


.BoardComponent {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    > * {
        padding: 0 32px;

        @media screen and (max-width: 768px) {
            padding: 0 40px;
        }

        &:first-child {
            padding-top: 8px;

            @media screen and (max-width: 768px) {
                padding: 0 8px;
            }
        }

        &:last-child {
            padding-bottom: 8px;
        }
    }

    > .top-head {
        @include z-index(center-panel);
        position: sticky;
        top: 0;
        left: 0;
        background: rgb(var(--center-channel-bg-rgb));

        > .mid-head {
            margin-top: 24px;
            flex: 0 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .ViewTitle {
            flex: 1;
            padding: 0 16px 0 0;
            position: relative;
            min-height: 40px;
            justify-content: center;
            display: flex;
            flex-direction: column;
        }
    }


    > div:nth-child(2) {
        padding: 0 0 0 1px;
        margin-left: 32px;

        @media (max-width: 768px) {
            margin-left: 0;
            padding-left: 20px;
            -webkit-overflow-scrolling: touch;
        }
    }

    .shareButtonWrapper {
        position: relative;
        flex: 0 0 auto;
    }

    .NotificationBox {
        .AlertIcon {
            color: #ffbc1f;
            font-size: 24px;
        }
    }
}