flashMessages.scss

TLDR

This file provides styling for the flash messages component in the project. It sets the position, dimensions, colors, and animations for the flash messages.

Classes

FlashMessages

This class defines the styling for the flash messages component. It includes properties for positioning, dimensions, colors, font size, font weight, and border radius. It also includes animations for showing and hiding the flash messages.

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

.FlashMessages {
    @include z-index(flash-messages);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 48px;
    left: 50%;
    margin-left: -160px;
    padding: 10px 20px;
    width: 320px;
    min-height: 48px;
    color: rgba(var(--center-channel-bg-rgb), 1);
    background-color: rgba(var(--center-channel-color-rgb), 0.8);
    font-size: 16px;
    font-weight: 600;
    vertical-align: middle;
    border-radius: 4px;

    &.flashIn {
        visibility: visible;
        opacity: 1;
    }

    &.flashOut {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s linear 200ms, opacity ease-in 200ms;
    }
}