cssOMS/alert.scss

@each $tuple in
    'ok' #aaffad #81e27d #459442,
    'warning' #f8ffa8 #d6d949 #94972f,
    'error' #ff7d79 #ee5649 #a5302a,
    'info' #b6d2ff #85b0ee #4865a5 {
    .log-lvl-#{nth($tuple, 1)} {
        background: #{nth($tuple, 2)};
        border: 1px solid #{nth($tuple, 3)};
        color: #{nth($tuple, 4)};
    }
}

#dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 5;
}

#app-message-container {
    position: absolute;
    margin: 0 auto;
    right: 10px;
    top: 85px;
    padding: 0;

    .log-msg {
        z-index: 11;
        margin: 0 auto;
        right: 0;
        top: 0;
        margin-bottom: 10px;
    }
}

.log-msg {
    position: relative;
    max-width: 250px;
    padding: 1rem;
    margin: 1rem;

    .close {
        position: absolute;
        top: 5px;
        right: 5px;
    }
}