globalHeader.scss

TLDR

This file contains the styling for a global header component.

Classes

.GlobalHeaderComponent

This class represents the global header component. It applies the following styles:

• display: flex: Specifies that the component should be displayed as a flex container.
• flex-direction: row: Specifies that the flex items should be arranged horizontally.
• width: 100%: Specifies that the component should take up 100% of the available width.
• margin-right: -8px: Applies a negative margin to the right side of the component.

.spacer

This class represents a spacer element inside the global header component. It applies the following styles:

• flex-grow: 1: Specifies that the spacer should grow and take up any remaining space.

.GlobalHeaderComponent__button

This class represents a button inside the global header component. It applies the following styles:

• width: 28px: Specifies the width of the button.
• height: 28px: Specifies the height of the button.
• display: flex: Specifies that the button should be displayed as a flex container.
• align-items: center: Specifies the alignment of the content vertically within the button.
• justify-content: center: Specifies the alignment of the content horizontally within the button.
• border-radius: 4px: Specifies the border radius of the button.
• color: rgba(var(--sidebar-text-rgb), 0.56): Specifies the color of the button.
• margin-left: 8px: Specifies the left margin of the button.

.GlobalHeaderComponent__button i

This class represents the icon inside the button of the global header component. It applies the following styles:

• font-size: 18px: Specifies the font size of the icon.
• width: 18px: Specifies the width of the icon.
• height: 18px: Specifies the height of the icon.
• display: flex: Specifies that the icon should be displayed as a flex container.

.GlobalHeaderComponent__button i::before

This class represents a pseudo-element before the icon inside the button of the global header component. It applies the following styles:

• margin: 0: Sets the margin of the pseudo-element to 0.

.GlobalHeaderComponent__button:hover

This class represents the hover state of the button inside the global header component. It applies the following styles:

• background-color: rgba(var(--sidebar-text-rgb), 0.08): Specifies the background color of the button on hover.
• color: rgba(var(--sidebar-text-rgb), 0.72): Specifies the color of the button on hover.

.GlobalHeaderComponent__button:active

This class represents the active state of the button inside the global header component. It applies the following styles:

• background-color: rgba(var(--sidebar-text-rgb), 0.16): Specifies the background color of the button when active.
• color: rgba(var(--sidebar-text-rgb), 1): Specifies the color of the button when active.

.GlobalHeaderComponent {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-right: -8px;

    .spacer {
        flex-grow: 1;
    }

    .GlobalHeaderComponent__button {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        color: rgba(var(--sidebar-text-rgb), 0.56);
        margin-left: 8px;

        i {
            font-size: 18px;
            width: 18px;
            height: 18px;
            display: flex;

            &::before {
                margin: 0;
            }
        }

        &:hover {
            background-color: rgba(var(--sidebar-text-rgb), 0.08);
            color: rgba(var(--sidebar-text-rgb), 0.72);
        }

        &:active {
            background-color: rgba(var(--sidebar-text-rgb), 0.16);
            color: rgba(var(--sidebar-text-rgb), 1);
        }
    }

}