cirrus-ui/src/components/toast.scss

A lightweight UI framework written in SCSS

@use 'sass:map';
@use '../src/internal' as *;

@if should-generate-classes($TOAST) {
    .toast {
        display: block;
        width: 100%;
        padding: 0.75rem 1.25rem;
        background-color: var(--toast-primary-bg);
        border: 1px solid var(--toast-primary-bg);
        border-radius: 2px;
        color: #fff;
        position: relative;
        margin: 0.5rem;

        &.toast--translucent {
            opacity: 0.5;

            &:hover {
                opacity: 1;
            }
        }

        p {
            margin: 0;
        }

        a {
            color: fill('light');
            transition: all 0.3s;

            &:hover {
                opacity: 0.8;
                transition: all 0.3s;
            }
        }

        .toast__title {
            margin: 0;
            margin-top: 1rem;
        }

        .btn-close {
            position: absolute;
            right: 1rem;
            top: 1rem;
        }

        /* TOAST TYPES */

        &.toast--primary {
            background-color: fill('primary');
            border-color: fill('primary');
        }

        @each $color, $value in $control-themes {
            &.toast--#{$color} {
                background-color: map.get($value, bg);
                border-color: map.get($value, bg);
            }
        }
    }
}