workspace.scss

TLDR

The workspace.scss file is responsible for styling the workspace component in the web application. It imports a file called z-index.scss and defines the styles for the workspace and its child elements.

Classes

Workspace

The Workspace class represents the main container for the workspace component. It has the following styles:

• flex: 1 1 auto; - Specifies that the workspace should fill the available space.
• display: flex; - Displays the workspace as a flex container.
• flex-direction: row; - Arranges the child elements of the workspace horizontally.
• overflow: hidden; - Hides any content that exceeds the boundaries of the workspace.
• position: relative; - Positions the workspace relative to its normal position.

mainFrame

The .mainFrame class represents the main frame within the workspace. It inherits the styles from the Workspace class and has additional styles:

• @include z-index(workspace-main-frame); - Includes the z-index value defined in the z-index.scss file for the main frame.
• position: relative; - Positions the main frame relative to its normal position.
• flex: 1 1 auto; - Specifies that the main frame should fill the available space.
• display: flex; - Displays the main frame as a flex container.
• flex-direction: column; - Arranges the child elements of the main frame vertically.
• overflow: hidden; - Hides any content that exceeds the boundaries of the main frame.

banner

The .banner class represents the banner element within the main frame. It has the following styles:

• background-color: rgba(230, 220, 192, 0.9); - Sets the background color of the banner.
• text-align: center; - Centers the text within the banner.
• padding: 10px; - Specifies the padding around the banner.
• color: rgb(63, 67, 80); - Sets the text color of the banner.
• font-weight: bold; - Makes the text within the banner bold.

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

.Workspace {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;

    > .mainFrame {
        @include z-index(workspace-main-frame);
        position: relative;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        > .banner {
            background-color: rgba(230, 220, 192, 0.9);
            text-align: center;
            padding: 10px;
            color: rgb(63, 67, 80);
            font-weight: bold;
        }
    }
}