/* ------------------------------------------------------------------------------
*
* # Sweet alerts
*
* Styles for sweet_alert.min.js - A beautiful replacement for JavaScript's "Alert"
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
/* # Core
-------------------------------------------------- */
// Overlay
.sweet-overlay {
background-color: fade(#000, 40%);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
z-index: @zindex-modal;
}
// Alert itself
.sweet-alert {
background-color: #fff;
width: 470px;
padding: @panel-body-padding;
border-radius: @border-radius-base;
text-align: center;
position: fixed;
left: 50%;
top: 50%;
margin-left: -235px;
margin-top: -200px;
overflow: hidden;
display: none;
z-index: @zindex-modal + 10;
// Heading
h2 {
text-align: center;
display: block;
position: relative;
}
// Paragraph
p {
text-align: center;
position: relative;
}
// Buttons
button {
background-color: @brand-primary;
color: #fff;
border: 0;
border-radius: @border-radius-base;
padding: @padding-base-vertical @padding-base-horizontal;
margin: (@line-height-computed / 2) 5px 0 5px;
box-shadow: none!important;
&:hover {
background-color: @color-primary-600;
}
&:focus {
outline: 0;
}
&:active {
background-color: @color-primary-400;
}
&.cancel {
background-color: transparent;
color: @text-color;
}
}
// Icons
.icon {
width: 80px;
height: 80px;
border: 4px solid #ddd;
border-radius: 50%;
margin: (@line-height-computed / 2) auto @line-height-computed auto;
padding: 0;
position: relative;
.box-sizing(content-box);
// Error
&.error {
border-color: @brand-danger;
.x-mark {
position: relative;
display: block;
}
.line {
position: absolute;
height: 5px;
width: 47px;
background-color: @brand-danger;
display: block;
top: 37px;
border-radius: @border-radius-small;
&.left {
left: 17px;
.rotate(45deg);
}
&.right {
right: 16px;
.rotate(-45deg);
}
}
}
// Success
&.success {
border-color: @brand-success;
&:before,
&:after {
content: '';
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background-color: #fff;
.rotate(45deg);
}
&:before {
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
.rotate(-45deg);
.transform-origin(60px 60px)
}
&:after {
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
.rotate(-45deg);
.transform-origin(0 60px)
}
.placeholder {
width: 80px;
height: 80px;
border: 4px solid fade(@brand-success, 20%);
border-radius: 50%;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
.box-sizing(content-box);
}
.fix {
width: 5px;
height: 90px;
background-color: #fff;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
.rotate(-45deg);
}
.line {
height: 5px;
background-color: @brand-success;
display: block;
border-radius: @border-radius-small;
position: absolute;
z-index: 2;
&.tip {
width: 25px;
left: 14px;
top: 46px;
.rotate(45deg);
}
&.long {
width: 47px;
right: 8px;
top: 38px;
.rotate(-45deg);
}
}
}
// Warning
&.warning {
border-color: @brand-warning;
.body {
position: absolute;
width: 5px;
height: 47px;
left: 50%;
top: 10px;
border-radius: @border-radius-small;
margin-left: -2px;
background-color: @brand-warning;
}
.dot {
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
left: 50%;
bottom: 10px;
background-color: @brand-warning;
}
}
// Info
&.info {
border-color: @brand-primary;
&:before {
content: "";
position: absolute;
width: 5px;
height: 29px;
left: 50%;
bottom: 17px;
border-radius: 2px;
margin-left: -2px;
background-color: @brand-primary;
}
&:after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
margin-left: -3px;
top: 19px;
background-color: @brand-primary;
}
}
// Custom icon
&.custom {
background-size: contain;
border-radius: 0;
border: 0;
background-position: center center;
background-repeat: no-repeat;
}
}
// Media queries
@media (max-width: @screen-xs) {
width: auto;
margin-left: 0;
margin-right: 0;
left: @grid-gutter-width;
right: @grid-gutter-width;
}
}
/* # Animations
-------------------------------------------------- */
// Show/Hide animations
// ----------------------------------------
// Show
@-webkit-keyframes showSweetAlert {
0% {
.scale(0.7);
}
45% {
.scale(1.05);
}
80% {
.scale(0.95);
}
100% {
.scale(1);
}
}
@-moz-keyframes showSweetAlert {
0% {
.scale(0.7);
}
45% {
.scale(1.05);
}
80% {
.scale(0.95);
}
100% {
.scale(1);
}
}
@keyframes showSweetAlert {
0% {
.scale(0.7);
}
45% {
.scale(1.05);
}
80% {
.scale(0.95);
}
100% {
.scale(1);
}
}
.showSweetAlert {
-webkit-animation: showSweetAlert 0.3s;
-moz-animation: showSweetAlert 0.3s;
animation: showSweetAlert 0.3s;
}
// Hide
@-webkit-keyframes hideSweetAlert {
0% {
.scale(1);
}
100% {
.scale(0.5);
}
}
@-moz-keyframes hideSweetAlert {
0% {
.scale(1);
}
100% {
.scale(0.5);
}
}
@keyframes hideSweetAlert {
0% {
.scale(1);
}
100% {
.scale(0.5);
}
}
.hideSweetAlert {
-webkit-animation: hideSweetAlert 0.2s;
-moz-animation: hideSweetAlert 0.2s;
animation: hideSweetAlert 0.2s;
}
// Success
// ----------------------------------------
// Success tip
@-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;
}
}
.animateSuccessTip {
-webkit-animation: animateSuccessTip 0.75s;
-moz-animation: animateSuccessTip 0.75s;
animation: animateSuccessTip 0.75s;
}
// Success line
@-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;
}
}
.animateSuccessLong {
-webkit-animation: animateSuccessLong 0.75s;
-moz-animation: animateSuccessLong 0.75s;
animation: animateSuccessLong 0.75s;
}
// Rotate placeholder
@-webkit-keyframes rotatePlaceholder {
0% {
.rotate(-45deg);
}
5% {
.rotate(-45deg);
}
12% {
.rotate(-405deg);
}
100% {
.rotate(-405deg);
}
}
@-moz-keyframes rotatePlaceholder {
0% {
.rotate(-45deg);
}
5% {
.rotate(-45deg);
}
12% {
.rotate(-405deg);
}
100% {
.rotate(-405deg);
}
}
@keyframes rotatePlaceholder {
0% {
.rotate(-45deg);
}
5% {
.rotate(-45deg);
}
12% {
.rotate(-405deg);
}
100% {
.rotate(-405deg);
}
}
.icon.success.animate::after {
-webkit-animation: rotatePlaceholder 4.25s ease-in;
-moz-animation: rotatePlaceholder 4.25s ease-in;
animation: rotatePlaceholder 4.25s ease-in;
}
// Error
// ----------------------------------------
// Icon
@-webkit-keyframes animateErrorIcon {
0% {
.rotateX(100deg);
.opacity(0);
}
100% {
.rotateX(0deg);
.opacity(1);
}
}
@-moz-keyframes animateErrorIcon {
0% {
.rotateX(100deg);
.opacity(0);
}
100% {
.rotateX(0deg);
.opacity(1);
}
}
@keyframes animateErrorIcon {
0% {
.rotateX(100deg);
.opacity(0);
}
100% {
.rotateX(0deg);
.opacity(1);
}
}
.animateErrorIcon {
-webkit-animation: animateErrorIcon 0.5s;
-moz-animation: animateErrorIcon 0.5s;
animation: animateErrorIcon 0.5s;
}
// X mark
@-webkit-keyframes animateXMark {
0% {
margin-top: 26px;
.scale(0.4);
.opacity(0);
}
50% {
margin-top: 26px;
.scale(0.4);
.opacity(0);
}
80% {
margin-top: -6px;
.scale(1.15);
.opacity(1);
}
100% {
margin-top: 0;
.scale(1);
.opacity(1);
}
}
@-moz-keyframes animateXMark {
0% {
margin-top: 26px;
.scale(0.4);
.opacity(0);
}
50% {
margin-top: 26px;
.scale(0.4);
.opacity(0);
}
80% {
margin-top: -6px;
.scale(1.15);
.opacity(1);
}
100% {
margin-top: 0;
.scale(1);
.opacity(1);
}
}
@keyframes animateXMark {
0% {
margin-top: 26px;
.scale(0.4);
.opacity(0);
}
50% {
margin-top: 26px;
.scale(0.4);
.opacity(0);
}
80% {
margin-top: -6px;
.scale(1.15);
.opacity(1);
}
100% {
margin-top: 0;
.scale(1);
.opacity(1);
}
}
.animateXMark {
-webkit-animation: animateXMark 0.5s;
-moz-animation: animateXMark 0.5s;
animation: animateXMark 0.5s;
}