// SweetAlert // 2014 (c) - Tristan Edwards // github.com/t4t5/sweetalert @import 'vars'; $sweet-alert-width: 478px; $sweet-alert-padding-horizontal: 30px; $sweet-alert-padding-vertical: 20px; $sweet-alert-bg: $inverse; // z-index $sweet-alert-z-index: $zindex-modal; body.stop-scrolling { height: 100%; overflow: hidden; } .sweet-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: $sweet-alert-z-index; display: none; background-color: rgba(#000, (40/100)); } .sweet-alert { @include media-breakpoint-down(sm) { right: ($grid-gutter-width / 2); left: ($grid-gutter-width / 2); width: auto; margin-right: 0; margin-left: 0; } position: fixed; top: 50%; left: 50%; z-index: $sweet-alert-z-index; display: none; width: $sweet-alert-width; padding: $sweet-alert-padding-vertical $sweet-alert-padding-horizontal; margin-top: -200px; margin-left: -($sweet-alert-width / 2 + $sweet-alert-padding-horizontal); overflow: hidden; text-align: center; background-color: $sweet-alert-bg; border-radius: $border-radius; .form-group { display: none; .sa-input-error { display: none; } } &.show-input .form-group { display: block; } .sa-confirm-button-container { position: relative; display: inline-block; } .la-ball-fall { position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: -27px; visibility: hidden; opacity: 0; } button { &[disabled] { cursor: default; opacity: .6; } &.confirm[disabled] { color: transparent; ~ .la-ball-fall { visibility: visible; opacity: 1; transition-delay: 0s; } } } .sa-icon { position: relative; box-sizing: content-box; width: 80px; height: 80px; margin: 20px auto; border: 4px solid gray; border-radius: 50%; &.sa-error { border-color: $btn-danger-border; .sa-x-mark { position: relative; display: block; } .sa-line { position: absolute; top: 37px; display: block; width: 47px; height: 5px; background-color: $btn-danger-bg; border-radius: 2px; &.sa-left { left: 17px; transform: rotate(45deg); } &.sa-right { right: 16px; transform: rotate(-45deg); } } } &.sa-warning { border-color: $btn-warning-border; .sa-body { // Exclamation mark body position: absolute; top: 10px; left: 50%; width: 5px; height: 47px; margin-left: -2px; background-color: $btn-warning-bg; border-radius: 2px; } .sa-dot { // Exclamation mark dot position: absolute; bottom: 10px; left: 50%; width: 7px; height: 7px; margin-left: -3px; background-color: $btn-warning-bg; border-radius: 50%; } } &.sa-info { border-color: $btn-info-border; &::before { // i-letter body position: absolute; bottom: 17px; left: 50%; width: 5px; height: 29px; margin-left: -2px; content: ""; background-color: $btn-info-bg; border-radius: 2px; } &::after { // i-letter dot position: absolute; top: 19px; width: 7px; height: 7px; margin-left: -3px; content: ""; background-color: $btn-info-bg; border-radius: 50%; } } &.sa-success { border-color: $btn-success-border; &::before, &::after { // Emulate moving circular line position: absolute; width: 60px; height: 120px; content: ""; background: $body-bg; border-radius: 50%; transform: rotate(45deg); } &::before { top: -7px; left: -33px; border-radius: 120px 0 0 120px; transform: rotate(-45deg); transform-origin: 60px 60px; } &::after { top: -11px; left: 30px; border-radius: 0 120px 120px 0; transform: rotate(-45deg); transform-origin: 0 60px; } .sa-placeholder { // Ring position: absolute; top: -4px; left: -4px; z-index: 2; box-sizing: content-box; width: 80px; height: 80px; border: 4px solid rgba($brand-success, (20/100)); border-radius: 50%; } .sa-fix { // Hide corners left from animation position: absolute; top: 8px; left: 27px; z-index: 1; width: 7px; height: 90px; background-color: $sweet-alert-bg; transform: rotate(-45deg); } .sa-line { position: absolute; z-index: 2; display: block; height: 5px; background-color: $btn-success-bg; border-radius: 2px; &.sa-tip { top: 46px; left: 14px; width: 25px; transform: rotate(45deg); } &.sa-long { top: 38px; right: 8px; width: 47px; transform: rotate(-45deg); } } } &.sa-custom { background-repeat: no-repeat; background-position: center center; background-size: contain; border: none; border-radius: 0; } } .btn-default { @include form-control-focus($btn-default-border); } .btn-success { @include form-control-focus($btn-success-border); } .btn-info { @include form-control-focus($btn-info-border); } .btn-danger { @include form-control-focus($btn-danger-border); } .btn-warning { @include form-control-focus($btn-warning-border); } button::-moz-focus-inner { border: 0; } } @keyframes showSweetAlert { 0% { transform: scale(.7); } 45% { transform: scale(1.05); } 80% { transform: scale(.95); } 100% { transform: scale(1); } } @keyframes hideSweetAlert { 0% { transform: scale(1); } 100% { transform: scale(.5); } } @keyframes slideFromTop { 0% { top: 0%; } 100% { top: 50%; } } @keyframes slideToTop { 0% { top: 50%; } 100% { top: 0%; } } @keyframes slideFromBottom { 0% { top: 70%; } 100% { top: 50%; } } @keyframes slideToBottom { 0% { top: 50%; } 100% { top: 70%; } } .showSweetAlert { animation: showSweetAlert .3s; &[data-animation=none] { animation: none; } &[data-animation=slide-from-top] { animation: slideFromTop .3s; } &[data-animation=slide-from-bottom] { animation: slideFromBottom .3s; } } .hideSweetAlert { animation: hideSweetAlert .3s; &[data-animation=none] { animation: none; } &[data-animation=slide-from-top] { animation: slideToTop .3s; } &[data-animation=slide-from-bottom] { animation: slideToBottom .3s; } } @keyframes animateSuccessTip { 0% { top: 19px; left: 1px; width: 0; } 54% { top: 19px; left: 1px; width: 0; } 70% { top: 37px; left: -8px; width: 50px; } 84% { top: 48px; left: 21px; width: 17px; } 100% { top: 45px; left: 14px; width: 25px; } } @keyframes animateSuccessLong { 0% { top: 54px; right: 46px; width: 0; } 65% { top: 54px; right: 46px; width: 0; } 84% { top: 35px; right: 0; width: 55px; } 100% { top: 38px; right: 8px; width: 47px; } } @keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); } 5% { transform: rotate(-45deg); } 12% { transform: rotate(-405deg); } 100% { transform: rotate(-405deg); } } .animateSuccessTip { animation: animateSuccessTip .75s; } .animateSuccessLong { animation: animateSuccessLong .75s; } .sa-icon.sa-success.animate::after { animation: rotatePlaceholder 4.25s ease-in; } @keyframes animateErrorIcon { 0% { opacity: 0; transform: rotateX(100deg); } 100% { opacity: 1; transform: rotateX(0deg); } } .animateErrorIcon { animation: animateErrorIcon .5s; } @keyframes animateXMark { 0% { margin-top: 26px; opacity: 0; transform: scale(.4); } 50% { margin-top: 26px; opacity: 0; transform: scale(.4); } 80% { margin-top: -6px; transform: scale(1.15); } 100% { margin-top: 0; opacity: 1; transform: scale(1); } } .animateXMark { animation: animateXMark .5s; } @keyframes pulseWarning { 0% { border-color: #f8d486; } 100% { border-color: #f8bb86; } } .pulseWarning { animation: pulseWarning .75s infinite alternate; } @keyframes pulseWarningIns { 0% { background-color: #f8d486; } 100% { background-color: #f8bb86; } } .pulseWarningIns { animation: pulseWarningIns .75s infinite alternate; } @keyframes rotate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }