cardBadges.scss

TLDR

This file defines the styling for the "CardBadges" component in the web application.

Classes

.CardBadges

This class represents the container for the badges inside the "CardBadges" component. It applies the following styles:

• display: flex;: Displays the badges in a flex container.
• align-items: center;: Aligns the badges vertically centered.
• margin-top: 4px;: Adds a margin of 4 pixels to the top of the container.
• height: 24px;: Sets the height of the container to 24 pixels.

.CardBadges span

This class represents the individual badge elements inside the "CardBadges" component. It applies the following styles:

• display: flex;: Displays the badge contents in a flex container.
• align-items: center;: Aligns the badge contents vertically centered.
• margin-right: 4px;: Adds a margin of 4 pixels to the right of each badge.

.CardBadges span .Icon, .CardBadges span .CompassIcon

This class represents the icon elements inside each badge. It applies the following styles:

• color: rgba(var(--center-channel-color-rgb), 0.64);: Sets the color of the icons to a semi-transparent value based on the "center-channel-color" variable.
• fill: currentColor;: Sets the fill color of the icons to be the same as their parent element.
• margin-right: 4px;: Adds a margin of 4 pixels to the right of each icon.

.CardBadges {
    display: flex;
    align-items: center;
    margin-top: 4px;
    height: 24px;

    span {
        display: flex;
        align-items: center;
        margin-right: 4px;

        .Icon,
        .CompassIcon {
            color: rgba(var(--center-channel-color-rgb), 0.64);
            fill: currentColor;
            margin-right: 4px;
        }
    }
}