$modal-icon-size: 6rem !default;
$modal-icon-animations: true !default;
$modal-icon-svg: true !default;
$modal-icon-font-family: inherit !default;
$modal-icon-font-size: $modal-icon-size * 0.6 !default;
$modal-icon-border-size: $modal-icon-size * 0.075 !default;
$modal-success: $green-500 !default;
$modal-error: $red-500 !default;
$modal-warning: $orange-500 !default;
$modal-info: $cyan-500 !default;
$modal-question: $teal-500 !default;
$modal-animation-delay: 0.5s !default;
// @link https://www.potlabicons.com/
$modal-success-icon: 'url("data:image/svg+xml,")';
$modal-question-icon: 'url("data:image/svg+xml,")';
$modal-info-icon: 'url("data:image/svg+xml,")';
$modal-warning-icon: 'url("data:image/svg+xml,")';
$modal-error-icon: 'url("data:image/svg+xml,")';
@keyframes modal-animate-circle-icon {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
// Without svg, we need dedicated animations
@if not $modal-icon-svg {
// Question mark animation
@keyframes modal-animate-question-mark {
0% {
transform: rotateY(-360deg);
}
100% {
transform: rotateY(0);
}
}
// Info and Warning mark animation
@keyframes modal-animate-i-mark {
0% {
transform: rotateZ(45deg);
opacity: 0;
}
25% {
transform: rotateZ(-25deg);
opacity: 0.4;
}
50% {
transform: rotateZ(15deg);
opacity: 0.8;
}
75% {
transform: rotateZ(-5deg);
opacity: 1;
}
100% {
transform: rotateX(0);
opacity: 1;
}
}
// Error icon animations
@keyframes modal-animate-error-x-mark {
0% {
margin-top: 1.625em;
transform: scale(0.4);
opacity: 0;
}
50% {
margin-top: 1.625em;
transform: scale(0.4);
opacity: 0;
}
80% {
margin-top: -0.375em;
transform: scale(1.15);
}
100% {
margin-top: 0;
transform: scale(1);
opacity: 1;
}
}
@keyframes modal-animate-error-icon {
0% {
transform: rotateX(100deg);
opacity: 0;
}
100% {
transform: rotateX(0deg);
opacity: 1;
}
}
// Success icon animations
@keyframes modal-animate-success-v-mark {
0% {
transform: scale(3);
opacity: 0;
}
25% {
transform: scale(2);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
}
.modal-icon {
--modal-color: #666;
display: flex;
position: relative;
justify-content: center;
width: $modal-icon-size;
height: $modal-icon-size;
margin: 0 auto;
font-family: $modal-icon-font-family;
line-height: $modal-icon-size;
cursor: default;
user-select: none;
@if $modal-icon-svg {
background-position: center;
background-size: 120%; // Fix svg sizing
border-radius: 0;
border: 0;
&.modal-icon-show {
@if $modal-icon-animations {
animation: modal-animate-circle-icon 0.5s;
}
}
} @else {
opacity: 0;
&:before {
border: $modal-icon-border-size solid transparent;
border-radius: 50%;
border-color: var(--modal-color);
content: "";
width: 100%;
height: 100%;
position: absolute;
opacity: 0.2;
}
&:after {
display: flex;
align-items: center;
font-size: $modal-icon-font-size;
color: var(--modal-color);
}
&.modal-icon-show {
opacity: 1;
}
}
&.modal-error {
--modal-color: #{$modal-error};
@if $modal-icon-svg {
&.modal-icon-show {
background-image: escape-svg($modal-error-icon);
}
} @else {
&:after {
content: "✕";
}
// Error icon animation
&.modal-icon-show {
@if $modal-icon-animations {
animation: modal-animate-error-icon 0.5s;
&:after {
animation: modal-animate-error-x-mark 0.5s;
}
}
}
}
}
&.modal-warning {
--modal-color: #{$modal-warning};
@if $modal-icon-svg {
&.modal-icon-show {
background-image: escape-svg($modal-warning-icon);
}
} @else {
&:after {
content: "!";
}
// Warning icon animation
&.modal-icon-show {
@if $modal-icon-animations {
animation: modal-animate-error-icon 0.5s;
&:after {
animation: modal-animate-i-mark 0.5s;
}
}
}
}
}
&.modal-info {
--modal-color: #{$modal-info};
@if $modal-icon-svg {
&.modal-icon-show {
background-image: escape-svg($modal-info-icon);
}
} @else {
&:after {
content: "i";
}
// Info icon animation
&.modal-icon-show {
@if $modal-icon-animations {
animation: modal-animate-error-icon 0.5s;
&:after {
animation: modal-animate-i-mark 0.8s;
}
}
}
}
}
&.modal-question {
--modal-color: #{$modal-question};
@if $modal-icon-svg {
&.modal-icon-show {
background-image: escape-svg($modal-question-icon);
}
} @else {
&:after {
content: "?";
}
&.modal-icon-show {
@if $modal-icon-animations {
animation: modal-animate-error-icon 0.5s;
&:after {
animation: modal-animate-question-mark 0.8s;
}
}
}
}
}
&.modal-success {
--modal-color: #{$modal-success};
@if $modal-icon-svg {
&.modal-icon-show {
background-image: escape-svg($modal-success-icon);
}
} @else {
&:after {
content: "✓";
}
// Success icon animation
&.modal-icon-show {
@if $modal-icon-animations {
animation: modal-animate-circle-icon 0.5s;
&:after {
animation: modal-animate-success-v-mark 0.5s;
}
}
}
}
}
}
.modal-dialog.modal-dialog-centered {
// Centered modals should not fade down but scale instead
.modal.fade & {
transform: scale(0.8);
}
.modal.show & {
transform: scale(1);
}
.modal.modal-static & {
transform: $modal-scale-transform;
}
}