// SweetAlert // github.com/limonte/sweetalert2 .sweet-overlay{background-color:rgba(255,255,255,.7);position:fixed;left:0;right:0;top:0;bottom:0;display:none;z-index:1000}.sweet-alert{background-color:#e7004a;box-sizing:border-box;text-align:center;border:1px solid #777;position:fixed;left:50%;top:50%;margin-top:-200px;max-height:90%;overflow-x:hidden;overflow-y:auto;display:none;z-index:2000}.sweet-alert h2{font-size:20px}// Animations @mixin keyframes($animation-name){@keyframes #{$animation-name;}45%{transform:scale(1.05)}80%{transform:scale(.95)}100%{transform:scale(1)}100%{transform:scale(.5)}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}65%{width:0;right:46px;top:54px}84%{width:55px;right:0;top:35px}100%{width:47px;right:8px;top:38px}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}.animate-success-long{@include animation('animate-success-long 0.75s');}.icon.success.animate::after{@include animation('rotatePlaceholder 4.25s ease-in');}// Error icon animation @include keyframes(animate-error-icon){opacity:0}100%{transform:rotateX(0);opacity:1}@include keyframes(animate-x-mark){margin-top:26px;opacity:0}50%{transform:scale(.4);margin-top:26px;opacity:0}80%{transform:scale(1.15);margin-top:-6px}100%{transform:scale(1);margin-top:0;opacity:1}100%{border-color:#f8bb86}100%{background-color:#f8bb86}100%{transform:rotate(360deg)}