// SweetAlert
// 2014 (c) - Tristan Edwards
// github.com/t4t5/sweetalert
(function() {
var modalClass = '.sweet-alert',
overlayClass = '.sweet-overlay',
alertTypes = ['error', 'warning', 'info', 'success'];
/*
* Manipulate DOM
*/
var getModal = function() {
return document.querySelector(modalClass);
},
getOverlay = function() {
return document.querySelector(overlayClass);
},
hasClass = function(elem, className) {
return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
},
addClass = function(elem, className) {
if (!hasClass(elem, className)) {
elem.className += ' ' + className;
}
},
removeClass = function(elem, className) {
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
if (hasClass(elem, className)) {
while (newClass.indexOf(' ' + className + ' ') >= 0) {
newClass = newClass.replace(' ' + className + ' ', ' ');
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
}
},
escapeHtml = function(str) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(str));
return div.innerHTML;
},
_show = function(elem) {
elem.style.opacity = '';
elem.style.display = 'block';
},
show = function(elems) {
if (elems && !elems.length) {
return _show(elems);
}
for (var i = 0; i < elems.length; ++i) {
_show(elems[i]);
}
},
_hide = function(elem) {
elem.style.opacity = '';
elem.style.display = 'none';
},
hide = function(elems) {
if (elems && !elems.length) {
return _hide(elems);
}
for (var i = 0; i < elems.length; ++i) {
_hide(elems[i]);
}
},
isDescendant = function(parent, child) {
var node = child.parentNode;
while (node !== null) {
if (node === parent) {
return true;
}
node = node.parentNode;
}
return false;
},
getTopMargin = function(elem) {
elem.style.left = '-9999px';
elem.style.display = 'block';
var height = elem.clientHeight;
var padding = parseInt(getComputedStyle(elem).getPropertyValue('padding'), 10);
elem.style.left = '';
elem.style.display = 'none';
return ('-' + parseInt(height / 2 + padding) + 'px');
},
fadeIn = function(elem, interval) {
interval = interval || 16;
elem.style.opacity = 0;
elem.style.display = 'block';
var last = +new Date();
var tick = function() {
elem.style.opacity = +elem.style.opacity + (new Date() - last) / 100;
last = +new Date();
if (+elem.style.opacity < 1) {
setTimeout(tick, interval);
}
};
tick();
},
fadeOut = function(elem, interval) {
interval = interval || 16;
elem.style.opacity = 1;
var last = +new Date();
var tick = function() {
elem.style.opacity = +elem.style.opacity - (new Date() - last) / 100;
last = +new Date();
if (+elem.style.opacity > 0) {
setTimeout(tick, interval);
} else {
elem.style.display = 'none';
}
};
tick();
},
fireClick = function(node) {
// Taken from http://www.nonobtrusive.com/2011/11/29/programatically-fire-crossbrowser-click-event-with-javascript/
// Then fixed for today's Chrome browser.
if (MouseEvent) {
// Up-to-date approach
var mevt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
node.dispatchEvent(mevt);
} else if (document.createEvent) {
// Fallback
var evt = document.createEvent('MouseEvents');
evt.initEvent('click', false, false);
node.dispatchEvent(evt);
} else if (document.createEventObject) {
node.fireEvent('onclick');
} else if (typeof node.onclick === 'function') {
node.onclick();
}
},
stopEventPropagation = function(e) {
// In particular, make sure the space bar doesn't scroll the main window.
if (typeof e.stopPropagation === 'function') {
e.stopPropagation();
e.preventDefault();
} else if (window.event && window.event.hasOwnProperty('cancelBubble')) {
window.event.cancelBubble = true;
}
};
// Remember state in cases where opening and handling a modal will fiddle with it.
var previousActiveElement,
previousDocumentClick,
previousWindowKeyDown,
lastFocusedButton;
/*
* Add modal + overlay to DOM
*/
function initialize() {
var sweetHTML = '<div class="sweet-overlay" tabIndex="-1"></div><div class="sweet-alert" tabIndex="-1"><div class="icon error"><span class="x-mark"><span class="line left"></span><span class="line right"></span></span></div><div class="icon warning"> <span class="body"></span> <span class="dot"></span> </div> <div class="icon info"></div> <div class="icon success"> <span class="line tip"></span> <span class="line long"></span> <div class="placeholder"></div> <div class="fix"></div> </div> <div class="icon custom"></div> <h2>Title</h2><p>Text</p><button class="cancel" tabIndex="2">Cancel</button><button class="confirm" tabIndex="1">OK</button></div>',
sweetWrap = document.createElement('div');
sweetWrap.innerHTML = sweetHTML;
// For readability: check sweet-alert.html
document.body.appendChild(sweetWrap);
// For development use only!
/*jQuery.ajax({
url: '../lib/sweet-alert.html', // Change path depending on file location
dataType: 'html'
})
.done(function(html) {
jQuery('body').append(html);
});*/
}
/*
* Global sweetAlert function
*/
window.sweetAlert = window.swal = function() {
// Default parameters
var params = {
title: '',
text: '',
type: null,
allowOutsideClick: false,
showCancelButton: false,
confirmButtonText: 'OK',
confirmButtonColor: '#AEDEF4',
cancelButtonText: 'Cancel',
imageUrl: null,
imageSize: null
};
if (arguments[0] === undefined) {
window.console.error('sweetAlert expects at least 1 attribute!');
return false;
}
switch (typeof arguments[0]) {
case 'string':
params.title = arguments[0];
params.text = arguments[1] || '';
params.type = arguments[2] || '';
break;
case 'object':
if (arguments[0].title === undefined) {
window.console.error('Missing "title" argument!');
return false;
}
params.title = arguments[0].title;
params.text = arguments[0].text || params.text;
params.type = arguments[0].type || params.type;
params.allowOutsideClick = arguments[0].allowOutsideClick || params.allowOutsideClick;
params.showCancelButton = arguments[0].showCancelButton || params.showCancelButton;
// Show "Confirm" instead of "OK" if cancel button is visible
params.confirmButtonText = (params.showCancelButton) ? 'Confirm' : params.confirmButtonText;
params.confirmButtonText = arguments[0].confirmButtonText || params.confirmButtonText;
params.confirmButtonColor = arguments[0].confirmButtonColor || params.confirmButtonColor;
params.cancelButtonText = arguments[0].cancelButtonText || params.cancelButtonText;
params.imageUrl = arguments[0].imageUrl || params.imageUrl;
params.imageSize = arguments[0].imageSize || params.imageSize;
params.doneFunction = arguments[1] || null;
break;
default:
window.console.error('Unexpected type of argument! Expected "string" or "object", got ' + typeof arguments[0]);
return false;
}
//console.log(params.confirmButtonColor);
setParameters(params);
fixVerticalPosition();
openModal();
// Modal interactions
var modal = getModal();
// Mouse interactions
var onButtonEvent = function(e) {
var target = e.target || e.srcElement,
targetedConfirm = (target.className === 'confirm'),
modalIsVisible = hasClass(modal, 'visible'),
doneFunctionExists = (params.doneFunction && modal.getAttribute('data-has-done-function') === 'true');
switch (e.type) {
case ("mouseover"):
if (targetedConfirm) {
e.target.style.backgroundColor = colorLuminance(params.confirmButtonColor, - 0.04);
}
break;
case ("mouseout"):
if (targetedConfirm) {
e.target.style.backgroundColor = params.confirmButtonColor;
}
break;
case ("mousedown"):
if (targetedConfirm) {
e.target.style.backgroundColor = colorLuminance(params.confirmButtonColor, - 0.14);
}
break;
case ("mouseup"):
if (targetedConfirm) {
e.target.style.backgroundColor = colorLuminance(params.confirmButtonColor, - 0.04);
}
break;
case ("focus"):
var $confirmButton = modal.querySelector('button.confirm'),
$cancelButton = modal.querySelector('button.cancel');
if (targetedConfirm) {
$cancelButton.style.boxShadow = 'none';
} else {
$confirmButton.style.boxShadow = 'none';
}
break;
case ("click"):
if (targetedConfirm && doneFunctionExists && modalIsVisible) {
params.doneFunction();
}
closeModal();
break;
}
};
var $buttons = modal.querySelectorAll('button');
for (var i = 0; i < $buttons.length; i++) {
$buttons[i].onclick = onButtonEvent;
$buttons[i].onmouseover = onButtonEvent;
$buttons[i].onmouseout = onButtonEvent;
$buttons[i].onmousedown = onButtonEvent;
//$buttons[i].onmouseup = onButtonEvent;
$buttons[i].onfocus = onButtonEvent;
}
// Remember the current document.onclick event.
previousDocumentClick = document.onclick;
document.onclick = function(e) {
var target = e.target || e.srcElement;
var clickedOnModal = (modal === target),
clickedOnModalChild = isDescendant(modal, e.target),
modalIsVisible = hasClass(modal, 'visible'),
outsideClickIsAllowed = modal.getAttribute('data-allow-ouside-click') === 'true';
if (!clickedOnModal && !clickedOnModalChild && modalIsVisible && outsideClickIsAllowed) {
closeModal();
}
};
// Keyboard interactions
var $okButton = modal.querySelector('button.confirm'),
$cancelButton = modal.querySelector('button.cancel'),
$modalButtons = modal.querySelectorAll('button:not([type=hidden])');
function handleKeyDown(e) {
var keyCode = e.keyCode || e.which;
if ([9, 13, 32, 27].indexOf(keyCode) === -1) {
// Don't do work on keys we don't care about.
return;
}
var $targetElement = e.target || e.srcElement;
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
for (var i = 0; i < $modalButtons.length; i++) {
if ($targetElement === $modalButtons[i]) {
btnIndex = i;
break;
}
}
if (keyCode === 9) {
// TAB
if (btnIndex === -1) {
// No button focused. Jump to the confirm button.
$targetElement = $okButton;
} else {
// Cycle to the next button
if (btnIndex === $modalButtons.length - 1) {
$targetElement = $modalButtons[0];
} else {
$targetElement = $modalButtons[btnIndex + 1];
}
}
stopEventPropagation(e);
$targetElement.focus();
setFocusStyle($targetElement, params.confirmButtonColor); // TODO
} else {
if (keyCode === 13 || keyCode === 32) {
if (btnIndex === -1) {
// ENTER/SPACE clicked outside of a button.
$targetElement = $okButton;
} else {
// Do nothing - let the browser handle it.
$targetElement = undefined;
}
} else if (keyCode === 27 && !($cancelButton.hidden || $cancelButton.style.display === 'none')) {
// ESC to cancel only if there's a cancel button displayed (like the alert() window).
$targetElement = $cancelButton;
} else {
// Fallback - let the browser handle it.
$targetElement = undefined;
}
if ($targetElement !== undefined) {
fireClick($targetElement, e);
}
}
}
previousWindowKeyDown = window.onkeydown;
window.onkeydown = handleKeyDown;
function handleOnBlur(e) {
var $targetElement = e.target || e.srcElement,
$focusElement = e.relatedTarget,
modalIsVisible = hasClass(modal, 'visible');
if (modalIsVisible) {
var btnIndex = -1; // Find the button - note, this is a nodelist, not an array.
if ($focusElement !== null) {
// If we picked something in the DOM to focus to, let's see if it was a button.
for (var i = 0; i < $modalButtons.length; i++) {
if ($focusElement === $modalButtons[i]) {
btnIndex = i;
break;
}
}
if (btnIndex === -1) {
// Something in the dom, but not a visible button. Focus back on the button.
$targetElement.focus();
}
} else {
// Exiting the DOM (e.g. clicked in the URL bar);
lastFocusedButton = $targetElement;
}
}
}
$okButton.onblur = handleOnBlur;
$cancelButton.onblur = handleOnBlur;
window.onfocus = function() {
// When the user has focused away and focused back from the whole window.
window.setTimeout(function() {
// Put in a timeout to jump out of the event sequence. Calling focus() in the event
// sequence confuses things.
if (lastFocusedButton !== undefined) {
lastFocusedButton.focus();
lastFocusedButton = undefined;
}
}, 0);
};
};
/*
* Set type, text and actions on modal
*/
function setParameters(params) {
var modal = getModal();
var $title = modal.querySelector('h2'),
$text = modal.querySelector('p'),
$cancelBtn = modal.querySelector('button.cancel'),
$confirmBtn = modal.querySelector('button.confirm');
// Title
$title.innerHTML = escapeHtml(params.title);
// Text
$text.innerHTML = escapeHtml(params.text || '');
if (params.text) {
show($text);
}
// Icon
hide(modal.querySelectorAll('.icon'));
if (params.type) {
var validType = false;
for (var i = 0; i < alertTypes.length; i++) {
if (params.type === alertTypes[i]) {
validType = true;
break;
}
}
if (!validType) {
window.console.error('Unknown alert type: ' + params.type);
return false;
}
var $icon = modal.querySelector('.icon.' + params.type);
show($icon);
// Animate icon
switch (params.type) {
case "success":
addClass($icon, 'animate');
addClass($icon.querySelector('.tip'), 'animateSuccessTip');
addClass($icon.querySelector('.long'), 'animateSuccessLong');
break;
case "error":
addClass($icon, 'animateErrorIcon');
addClass($icon.querySelector('.x-mark'), 'animateXMark');
break;
case "warning":
addClass($icon, 'pulseWarning');
addClass($icon.querySelector('.body'), 'pulseWarningIns');
addClass($icon.querySelector('.dot'), 'pulseWarningIns');
break;
}
}
// Custom image
if (params.imageUrl) {
var $customIcon = modal.querySelector('.icon.custom');
$customIcon.style.backgroundImage = 'url(' + params.imageUrl + ')';
show($customIcon);
var _imgWidth = 80,
_imgHeight = 80;
if (params.imageSize) {
var imgWidth = params.imageSize.split('x')[0];
var imgHeight = params.imageSize.split('x')[1];
if (!imgWidth || !imgHeight) {
window.console.error("Parameter imageSize expects value with format WIDTHxHEIGHT, got " + params.imageSize);
} else {
_imgWidth = imgWidth;
_imgHeight = imgHeight;
$customIcon.css({
'width': imgWidth + 'px',
'height': imgHeight + 'px'
});
}
}
$customIcon.setAttribute('style', $customIcon.getAttribute('style') + 'width:' + _imgWidth + 'px; height:' + _imgHeight + 'px');
}
// Cancel button
modal.setAttribute('data-has-cancel-button', params.showCancelButton);
if (params.showCancelButton) {
$cancelBtn.style.display = 'inline-block';
} else {
hide($cancelBtn);
}
// Edit text on cancel and confirm buttons
if (params.cancelButtonText) {
$cancelBtn.innerHTML = escapeHtml(params.cancelButtonText);
}
if (params.confirmButtonText) {
$confirmBtn.innerHTML = escapeHtml(params.confirmButtonText);
}
// Set confirm button to selected background color
$confirmBtn.style.backgroundColor = params.confirmButtonColor;
// Set box-shadow to default focused button
setFocusStyle($confirmBtn, params.confirmButtonColor);
// Allow outside click?
modal.setAttribute('data-allow-ouside-click', params.allowOutsideClick);
// Done-function
var hasDoneFunction = (params.doneFunction) ? true : false;
modal.setAttribute('data-has-done-function', hasDoneFunction);
}
/*
* Set hover, active and focus-states for buttons (source: http://www.sitepoint.com/javascript-generate-lighter-darker-color)
*/
function colorLuminance(hex, lum) {
// Validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
lum = lum || 0;
// Convert to decimal and change luminosity
var rgb = "#",
c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i * 2, 2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00" + c).substr(c.length);
}
return rgb;
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) : null;
}
// Add box-shadow style to button (depending on its chosen bg-color)
function setFocusStyle($button, bgColor) {
var rgbColor = hexToRgb(bgColor);
$button.style.boxShadow = '0 0 2px rgba(' + rgbColor + ', 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)';
}
/*
* Animations
*/
function openModal() {
var modal = getModal();
fadeIn(getOverlay(), 10);
show(modal);
addClass(modal, 'showSweetAlert');
removeClass(modal, 'hideSweetAlert');
previousActiveElement = document.activeElement;
var $okButton = modal.querySelector('button.confirm');
$okButton.focus();
setTimeout(function() {
addClass(modal, 'visible');
}, 500);
}
function closeModal() {
var modal = getModal();
fadeOut(getOverlay(), 5);
fadeOut(modal, 5);
removeClass(modal, 'showSweetAlert');
addClass(modal, 'hideSweetAlert');
removeClass(modal, 'visible');
// Reset icon animations
var $successIcon = modal.querySelector('.icon.success');
removeClass($successIcon, 'animate');
removeClass($successIcon.querySelector('.tip'), 'animateSuccessTip');
removeClass($successIcon.querySelector('.long'), 'animateSuccessLong');
var $errorIcon = modal.querySelector('.icon.error');
removeClass($errorIcon, 'animateErrorIcon');
removeClass($errorIcon.querySelector('.x-mark'), 'animateXMark');
var $warningIcon = modal.querySelector('.icon.warning');
removeClass($warningIcon, 'pulseWarning');
removeClass($warningIcon.querySelector('.body'), 'pulseWarningIns');
removeClass($warningIcon.querySelector('.dot'), 'pulseWarningIns');
// Reset the page to its previous state
window.onkeydown = previousWindowKeyDown;
document.onclick = previousDocumentClick;
if (previousActiveElement) {
previousActiveElement.focus();
}
lastFocusedButton = undefined;
}
/*
* Set "margin-top"-property on modal based on its computed height
*/
function fixVerticalPosition() {
var modal = getModal();
modal.style.marginTop = getTopMargin(getModal());
}
/*
* If library is injected after page has loaded
*/
(function() {
if (document.readyState === "complete" || document.readyState === "interactive") {
initialize();
} else {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function factorial() {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
initialize();
}, false);
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function() {
if (document.readyState === 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
initialize();
}
});
}
}
})();
})();
$('.foo').click(function(){
swal({
title: "アラートです！",
text: "メッセージがココに入ります",
imageUrl: 'http://placehold.it/500x500',
confirmButtonText: '了解！',
confirmButtonColor: '#aee861'
});
});
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);
.sweet-overlay {
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
z-index: 1000;
}
.sweet-alert {
background-color: white;
font-family: 'Open Sans', sans-serif;
width: 478px;
padding: 17px;
border-radius: 5px;
text-align: center;
position: fixed;
left: 50%;
top: 50%;
margin-left: -256px;
margin-top: -200px;
overflow: hidden;
display: none;
z-index: 2000;
}
@media all and (max-width: 540px) {
.sweet-alert {
width: auto;
margin-left: 0;
margin-right: 0;
left: 15px;
right: 15px;
}
}
.sweet-alert h2 {
color: #575757;
font-size: 30px;
text-align: center;
font-weight: 600;
text-transform: none;
position: relative;
}
.sweet-alert p {
color: #797979;
font-size: 16px;
text-align: center;
font-weight: 300;
position: relative;
margin: 0;
line-height: normal;
}
.sweet-alert button {
background-color: #AEDEF4;
color: white;
border: none;
box-shadow: none;
font-size: 17px;
font-weight: 500;
border-radius: 5px;
padding: 10px 32px;
margin: 26px 5px 0 5px;
cursor: pointer;
}
.sweet-alert button:focus {
outline: none;
box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.sweet-alert button:hover {
background-color: #a1d9f2;
}
.sweet-alert button:active {
background-color: #81ccee;
}
.sweet-alert button.cancel {
background-color: #D0D0D0;
}
.sweet-alert button.cancel:hover {
background-color: #c8c8c8;
}
.sweet-alert button.cancel:active {
background-color: #b6b6b6;
}
.sweet-alert button.cancel:focus {
box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important;
}
.sweet-alert[data-has-cancel-button=false] button {
box-shadow: none !important;
}
.sweet-alert .icon {
width: 80px;
height: 80px;
border: 4px solid gray;
border-radius: 50%;
margin: 20px auto;
position: relative;
}
.sweet-alert .icon.error {
border-color: #F27474;
}
.sweet-alert .icon.error .x-mark {
position: relative;
display: block;
}
.sweet-alert .icon.error .line {
position: absolute;
height: 5px;
width: 47px;
background-color: #F27474;
display: block;
top: 37px;
border-radius: 2px;
}
.sweet-alert .icon.error .line.left {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: 17px;
}
.sweet-alert .icon.error .line.right {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 16px;
}
.sweet-alert .icon.warning {
border-color: #F8BB86;
}
.sweet-alert .icon.warning .body {
position: absolute;
width: 5px;
height: 47px;
left: 50%;
top: 10px;
border-radius: 2px;
margin-left: -2px;
background-color: #F8BB86;
}
.sweet-alert .icon.warning .dot {
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
bottom: 10px;
background-color: #F8BB86;
}
.sweet-alert .icon.info {
border-color: #C9DAE1;
}
.sweet-alert .icon.info::before {
content: "";
position: absolute;
width: 5px;
height: 29px;
left: 50%;
bottom: 17px;
border-radius: 2px;
margin-left: -2px;
background-color: #C9DAE1;
}
.sweet-alert .icon.info::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
top: 19px;
background-color: #C9DAE1;
}
.sweet-alert .icon.success {
border-color: #A5DC86;
}
.sweet-alert .icon.success::before, .sweet-alert .icon.success::after {
content: '';
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
transform: rotate(45deg);
}
.sweet-alert .icon.success::before {
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px;
}
.sweet-alert .icon.success::after {
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0px 60px;
transform-origin: 0px 60px;
}
.sweet-alert .icon.success .placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(165, 220, 134, 0.2);
border-radius: 50%;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.sweet-alert .icon.success .fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sweet-alert .icon.success .line {
height: 5px;
background-color: #A5DC86;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.sweet-alert .icon.success .line.tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sweet-alert .icon.success .line.long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sweet-alert .icon.custom {
background-size: contain;
border-radius: 0;
border: none;
background-position: center center;
background-repeat: no-repeat;
}
/*
* Animations
*/
@-webkit-keyframes showSweetAlert {
0% {
transform: scale(0.7);
-webkit-transform: scale(0.7);
}
45% {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}
80% {
transform: scale(0.95);
-webkit-tranform: scale(0.95);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@-moz-keyframes showSweetAlert {
0% {
transform: scale(0.7);
-webkit-transform: scale(0.7);
}
45% {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}
80% {
transform: scale(0.95);
-webkit-tranform: scale(0.95);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@keyframes showSweetAlert {
0% {
transform: scale(0.7);
-webkit-transform: scale(0.7);
}
45% {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}
80% {
transform: scale(0.95);
-webkit-tranform: scale(0.95);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@-webkit-keyframes hideSweetAlert {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-moz-keyframes hideSweetAlert {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@keyframes hideSweetAlert {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
.showSweetAlert {
-webkit-animation: showSweetAlert 0.3s;
-moz-animation: showSweetAlert 0.3s;
animation: showSweetAlert 0.3s;
}
.hideSweetAlert {
-webkit-animation: hideSweetAlert 0.2s;
-moz-animation: hideSweetAlert 0.2s;
animation: hideSweetAlert 0.2s;
}
@-webkit-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
@-moz-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
@keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
@-webkit-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
@-moz-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
@keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
@-webkit-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
@-moz-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
@keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
.animateSuccessTip {
-webkit-animation: animateSuccessTip 0.75s;
-moz-animation: animateSuccessTip 0.75s;
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
-webkit-animation: animateSuccessLong 0.75s;
-moz-animation: animateSuccessLong 0.75s;
animation: animateSuccessLong 0.75s;
}
.icon.success.animate::after {
-webkit-animation: rotatePlaceholder 4.25s ease-in;
-moz-animation: rotatePlaceholder 4.25s ease-in;
animation: rotatePlaceholder 4.25s ease-in;
}
@-webkit-keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0;
}
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1;
}
}
@-moz-keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0;
}
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1;
}
}
@keyframes animateErrorIcon {
0% {
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg);
opacity: 0;
}
100% {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
opacity: 1;
}
}
.animateErrorIcon {
-webkit-animation: animateErrorIcon 0.5s;
-moz-animation: animateErrorIcon 0.5s;
animation: animateErrorIcon 0.5s;
}
@-webkit-keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0;
}
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0;
}
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px;
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1;
}
}
@-moz-keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0;
}
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0;
}
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px;
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1;
}
}
@keyframes animateXMark {
0% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0;
}
50% {
transform: scale(0.4);
-webkit-transform: scale(0.4);
margin-top: 26px;
opacity: 0;
}
80% {
transform: scale(1.15);
-webkit-transform: scale(1.15);
margin-top: -6px;
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
margin-top: 0;
opacity: 1;
}
}
.animateXMark {
-webkit-animation: animateXMark 0.5s;
-moz-animation: animateXMark 0.5s;
animation: animateXMark 0.5s;
}
/*@include keyframes(simpleRotate) {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-360deg); }
}
.simpleRotate {
@include animation('simpleRotate 0.75s');
}*/
@-webkit-keyframes pulseWarning {
0% {
border-color: #F8D486;
}
100% {
border-color: #F8BB86;
}
}
@-moz-keyframes pulseWarning {
0% {
border-color: #F8D486;
}
100% {
border-color: #F8BB86;
}
}
@keyframes pulseWarning {
0% {
border-color: #F8D486;
}
100% {
border-color: #F8BB86;
}
}
.pulseWarning {
-webkit-animation: pulseWarning 0.75s infinite alternate;
-moz-animation: pulseWarning 0.75s infinite alternate;
animation: pulseWarning 0.75s infinite alternate;
}
@-webkit-keyframes pulseWarningIns {
0% {
background-color: #F8D486;
}
100% {
background-color: #F8BB86;
}
}
@-moz-keyframes pulseWarningIns {
0% {
background-color: #F8D486;
}
100% {
background-color: #F8BB86;
}
}
@keyframes pulseWarningIns {
0% {
background-color: #F8D486;
}
100% {
background-color: #F8BB86;
}
}
.pulseWarningIns {
-webkit-animation: pulseWarningIns 0.75s infinite alternate;
-moz-animation: pulseWarningIns 0.75s infinite alternate;
animation: pulseWarningIns 0.75s infinite alternate;
}
<button class="foo">アラート！</button>