topBar.scss

TLDR

This file defines the styling for the top bar component of the web application.

Classes

TopBar

The TopBar class represents the top bar component in the web application. It has the following styles:

• position: absolute; sets the position of the top bar to absolute.
• top: 8px; right: 32px; positions the top bar at the top right corner of the screen.
• display: flex; flex-direction: row; enables flexbox layout with a horizontal direction for the top bar.
• a selector represents links within the top bar. It has the following styles:
  • display: flex; align-items: center; aligns the content of the links vertically centered.
  • padding: 2px; sets padding around the links.
• a.link selector represents links with the class link. It has the following additional styles:
  • font-size: 12px; line-height: 14px; sets the font size and line height of the links.
  • padding: 2px 10px; sets padding on the top and bottom while keeping the horizontal padding set earlier.
  • color: rgba(var(--center-channel-color-rgb), 0.72); sets the color of the links to a dynamically generated value.
  • &:hover pseudo-class selector represents the link when hovered. It has the following styles:
    • color: rgba(var(--center-channel-color-rgb), 1); sets the color to a fully opaque value of the dynamically generated color.
• .HelpIcon class represents an icon specifically for the help functionality. It has the following styles:
  • font-size: 20px; sets the font size of the HelpIcon.
  • color: currentColor; matches the color of the element to the currentColor value.
• .versionFrame class represents the version frame within the top bar. It has the following styles:
  • display: flex; flex-direction: row; align-items: center; sets the version frame to a flexbox layout with horizontal direction and aligns the items vertically centered.
• .version class represents the version text within the version frame. It has the following styles:
  • font-size: 11px; line-height: 14px; font-weight: 500; sets the font size, line height, and font weight of the version text.
  • color: currentColor; matches the color of the element to the currentColor value.
• .versionBadge class represents the version badge within the version frame. It has the following styles:
  • font-size: 10px; line-height: 14px; font-weight: 500; sets the font size, line height, and font weight of the version badge.
  • margin-left: 3px; sets the left margin of the version badge.
  • color: currentColor; matches the color of the element to the currentColor value.

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

.TopBar {
    @include z-index(top-bar);
    position: absolute;
    top: 8px;
    right: 32px;

    display: flex;
    flex-direction: row;

    a {
        display: flex;
        align-items: center;
        padding: 2px;
    }

    a.link {
        font-size: 12px;
        line-height: 14px;
        padding: 2px 10px;
        color: rgba(var(--center-channel-color-rgb), 0.72);

        &:hover {
            color: rgba(var(--center-channel-color-rgb), 1);
        }
    }

    .HelpIcon {
        font-size: 20px;
        color: currentColor;
    }

    .versionFrame {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .version {
        font-size: 11px;
        line-height: 14px;
        font-weight: 500;
        color: currentColor;
    }

    .versionBadge {
        font-size: 10px;
        line-height: 14px;
        font-weight: 500;
        margin-left: 3px;
        color: currentColor;
    }
}