workspace.scss

TLDR

This file is a SCSS file that contains styles for the Workspace component in the Demo Projects project.

Classes

Workspace

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

• flex: 1 1 auto: Allows the container to grow and shrink based on available space
• display: flex: Sets the container to use flexbox layout
• flex-direction: row: Sets the direction of the flex items to be in a row
• overflow: hidden: Hides any content that overflows the container
• position: relative: Positions the container relatively to its normal position

Subclasses

mainFrame

The .mainFrame class represents the main frame within the Workspace component. It has the following styles:

• @include z-index(workspace-main-frame): Includes the z-index value for the main frame from the z-index SCSS file
• position: relative: Positions the main frame relatively to its normal position
• flex: 1 1 auto: Allows the main frame to grow and shrink based on available space
• display: flex: Sets the main frame to use flexbox layout
• flex-direction: column: Sets the direction of the flex items to be in a column
• overflow: hidden: Hides any content that overflows the main frame

banner

The .banner class represents the banner within the main frame of the Workspace component. It has the following styles:

• background-color: rgba(230, 220, 192, 0.9): Sets the background color of the banner to a semi-transparent beige
• text-align: center: Centers the text within the banner
• padding: 10px: Adds 10 pixels of padding around the content of the banner
• color: rgb(63, 67, 80): Sets the color of the text within the banner to a dark gray
• font-weight: bold: Sets the font weight of the text within the banner to 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;
        }
    }
}