Nice Alert

index.html

<div class="controls">
            <button id="toggle">Toggle</button>
            <button id="normal">Normal</button>
            <button id="danger">Danger</button>
        </div>
        <div class="alert-overlay alert-danger">
            <div class="alert-container">
                <h1>Danger</h1>
                <div class="alert-body">
                    <p>This is a sample text</p>
                </div>
                <div class="alert-actions">
                    <button class="alert-cancel">Cancel</button>
                    <button class="alert-accept">Accept</button>
                </div>
            </div>
        </div>

nice-alert.markdown

Nice Alert

A Pen by Pablo Alejandro Costesich on CodePen.

License.

script.js

(function() {
    function toggleClass(targetSelector, cls) {
        const toggler = document.querySelector(targetSelector);
        toggler.addEventListener('click', function(ev) {
            const overlay = document.querySelector('.alert-overlay');
            if (overlay.classList.contains(cls)) {
                overlay.classList.remove(cls);
            } else {
                overlay.classList.add(cls);
            }
        });
    }

    toggleClass('#toggle', 'hide');
    toggleClass('#normal', 'alert-info');
    toggleClass('#danger', 'alert-danger');
    
})();

style.css

* {
    box-sizing: border-box;
}

html, div, body {
    margin: 0;
}

body {
    background: white;
    color: #333;
}

.controls {
    position: fixed;
    height: 3em;
    z-index: 1000;
    left: 10px;
    right: 10px;
    top: 10px;
}

@keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 0.4em 0.2em; }
}

.alert-overlay.hide .alert-container {
    margin-left: 100%;
    opacity: 0;

    transition: margin-left 100ms cubic-bezier(0.95, 0.05, 0.795, 0.035),
                opacity 100ms ease-out;
}

.alert-overlay.hide{
    visibility: hidden;
    opacity: 0;

    transition: opacity 100ms ease-out 125ms,
                visibility 100ms ease-out 125ms;
}

.alert-overlay.alert-danger {
    background-color: #ee1111;
}

.alert-overlay.alert-danger .alert-container h1:before {
    content: '\26a0';
    vertical-align: middle;
    font-size: 3rem;
    line-height: 3rem;
}

.alert-overlay.alert-danger .alert-actions button:hover {
    color: #ee1111;
}

.alert-overlay {
    background: #2d89ef;
    color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;

    transition: opacity 100ms ease-out,
                visibility 100ms ease-out;
}

.alert-container {
    font-family: Arial, Helvetica, sans-serif;
    min-width: 66%;
    max-width: calc(100% - 15px);
    min-height: 50%;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    opacity: 1;

    transition: margin-left 225ms cubic-bezier(0.19, 1, 0.22, 1) 80ms,
                opacity 100ms ease-in 125ms;
}

.alert-container > h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    align-self: flex-start;
    width: 100%;
    font-weight: 100;
    font-size: 3rem;
    text-transform: uppercase;
    position: relative;
}

.alert-container > h1:after {
    content: " ";
    background-size: 0.2em 0.2em;
    background-image: -webkit-linear-gradient(bottom left, #f4f4f4 25%, transparent 25%, transparent 50%, #f4f4f4 50%, #f4f4f4 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(bottom left, #f4f4f4 25%, transparent 25%, transparent 50%, #f4f4f4 50%, #f4f4f4 75%, transparent 75%, transparent);
    background-image: linear-gradient(to top right, #f4f4f4 25%, transparent 25%, transparent 50%, #f4f4f4 50%, #f4f4f4 75%, transparent 75%, transparent);
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    height: 0.2rem;
    animation: barberpole 0.5s linear infinite;
}

.alert-container .alert-body {
    flex-grow: 2;
    display: flex;
    align-items: center;
}

.alert-container > .alert-actions {
    padding-top: 0.5rem;
    align-self: flex-end;
}

.alert-actions button {
    background: transparent;
    color: #f4f4f4;
    border: 1px solid #f4f4f4;
    text-transform: uppercase;
    padding-left: 3em;
    padding-right: 3em;
}


.alert-actions button:hover {
    background: #f4f4f4;
    color: #2d89ef;
}