Skip to content

Instantly share code, notes, and snippets.

@pcostesi
Created Nov 4, 2017
Embed
What would you like to do?
Nice Alert
<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>
(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');
})();
* {
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment