notificationBox.scss

TLDR

The notificationBox.scss file contains styles for a notification box widget used in the project.

Classes

.NotificationBox

This class represents the notification box widget. It includes styles for the position, border radius, background, box shadow, display, padding, and width of the widget. It also includes nested styles for the icon, content, IconButtons, and octo-tooltip elements.

.NotificationBox__icon

This class represents the icon element within the notification box. It includes styles for the right margin.

.content

This class represents the content element within the notification box. It includes styles for the font size, font weight, and nested styles for the title element.

.title

This class represents the title element within the content of the notification box. It includes styles for the font size, font weight, margin bottom, and line height.

.IconButton

This class represents the icon button within the notification box and octo-tooltip elements. It includes styles for the margin left.

.octo-tooltip

This class represents the octo-tooltip element within the notification box widget. It includes styles for the font size, font weight, and nested styles for the IconButton element.

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

.NotificationBox {
    @include z-index(notification-box);
    position: fixed;
    bottom: 52px;
    right: 32px;
    border-radius: 4px;
    background: rgb(var(--center-channel-bg-rgb));
    box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
        rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px;
    display: flex;
    padding: 22px;
    width: 400px;

    .NotificationBox__icon {
        margin-right: 10px;
    }

    .content {
        font-size: 14px;
        font-weight: 400;

        .title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 0;
            line-height: 25px;
        }
    }

    .IconButton {
        margin-left: auto;
    }

    .octo-tooltip {
        font-size: 12px;
        font-weight: 600;

        .IconButton {
            font-size: 14px;
            font-weight: 400;
        }
    }
}