No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

sweetalert2.scss 4.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. @import "../../scss/_bootstrap-extended/include";
  2. @import "sweetalert2/src/sweetalert2";
  3. /* Sweet Alert2 Modal */
  4. .swal2-container {
  5. $progress-bg-amoumnt: 15%;
  6. $progress-mix-bg: var(--#{$prefix}white);
  7. --#{$prefix}progress-bg-amount: #{$progress-bg-amoumnt};
  8. --#{$prefix}progress-mix-bg: #{$progress-mix-bg};
  9. --#{$prefix}modal-bg: #{$modal-content-bg};
  10. --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  11. z-index: $zindex-modal;
  12. .tooltip {
  13. z-index: $zindex-modal + 2;
  14. }
  15. .popover {
  16. z-index: $zindex-modal + 1;
  17. }
  18. &.swal2-shown {
  19. background: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
  20. }
  21. .swal2-modal.swal2-popup {
  22. background-color: var(--#{$prefix}modal-bg);
  23. box-shadow: var(--#{$prefix}modal-box-shadow);
  24. font-family: $font-family-base;
  25. @include border-radius($border-radius);
  26. .swal2-title {
  27. line-height: $line-height-base;
  28. margin-block: 1.875rem 1rem;
  29. max-inline-size: $swal2-width * .5;
  30. }
  31. .swal2-actions {
  32. margin-block-start: 1rem;
  33. button + button {
  34. margin-inline-start: 1rem;
  35. }
  36. }
  37. .swal2-input,
  38. .swal2-file,
  39. .swal2-textarea {
  40. box-shadow: none;
  41. }
  42. .swal2-icon {
  43. margin-block-end: 0;
  44. }
  45. .swal2-close {
  46. color: var(--#{$prefix}secondary-color);
  47. &:hover {
  48. color: var(--#{$prefix}body-color);
  49. }
  50. }
  51. }
  52. .swal2-popup {
  53. .swal2-title {
  54. color: var(--#{$prefix}body-color);
  55. font-size: $h2-font-size;
  56. font-weight: $headings-font-weight;
  57. }
  58. .swal2-html-container {
  59. color: var(--#{$prefix}body-color);
  60. line-height: $line-height-base;
  61. }
  62. .swal2-input,
  63. .swal2-file,
  64. .swal2-textarea {
  65. border: $input-border-width solid $input-border-color;
  66. color: var(--#{$prefix}body-color);
  67. font-size: $font-size-lg;
  68. @include border-radius($border-radius-lg);
  69. }
  70. .swal2-validation-message {
  71. background: var(--#{$prefix}gray-100);
  72. color: var(--#{$prefix}body-color);
  73. }
  74. /* Colors */
  75. .swal2-icon.swal2-success {
  76. border-color: var(--#{$prefix}success);
  77. .swal2-success-ring {
  78. border-color: rgba(var(--#{$prefix}success-rgb), .2);
  79. }
  80. [class^="swal2-success-line"] {
  81. background-color: var(--#{$prefix}success);
  82. }
  83. }
  84. .swal2-icon.swal2-question {
  85. border-color: rgba(var(--#{$prefix}secondary-rgb), .4);
  86. color: var(--#{$prefix}secondary);
  87. }
  88. .swal2-icon.swal2-info {
  89. border-color: rgba(var(--#{$prefix}info-rgb), .4);
  90. color: var(--#{$prefix}info);
  91. }
  92. .swal2-icon.swal2-warning {
  93. border-color: rgba(var(--#{$prefix}warning-rgb), .8);
  94. color: var(--#{$prefix}warning);
  95. }
  96. .swal2-icon.swal2-error {
  97. border-color: rgba(var(--#{$prefix}danger-rgb), .6);
  98. [class^="swal2-x-mark-line"] {
  99. border-color: var(--#{$prefix}danger);
  100. }
  101. }
  102. .swal2-footer {
  103. border-block-start: 1px solid var(--#{$prefix}border-color);
  104. color: var(--#{$prefix}body-color);
  105. }
  106. }
  107. .swal2-progress-steps[class] {
  108. .swal2-progress-step.swal2-active-progress-step,
  109. .swal2-progress-step-line,
  110. .swal2-active-progress-step,
  111. .swal2-progress-step {
  112. background: var(--#{$prefix}primary);
  113. color: var(--#{$prefix}primary-contrast);
  114. }
  115. .swal2-progress-step.swal2-active-progress-step {
  116. ~ .swal2-progress-step,
  117. ~ .swal2-progress-step-line {
  118. background: color-mix(in sRGB, var(--#{$prefix}primary) var(--#{$prefix}progress-bg-amount), var(--#{$prefix}progress-mix-bg));
  119. }
  120. }
  121. }
  122. }
  123. /* Dark Style */
  124. @if $enable-dark-mode {
  125. @include color-mode(dark) {
  126. .swal2-container {
  127. --#{$prefix}progress-bg-amount: 45%;
  128. --#{$prefix}progress-mix-bg: var(--#{$prefix}dark);
  129. }
  130. }
  131. }
  132. /* IE Specific */
  133. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  134. .swal2-modal:not([style="display: none;"]),
  135. .swal2-icon:not([style="display: none;"]),
  136. .swal2-actions:not([style="display: none;"]),
  137. .swal2-image:not([style="display: none;"]),
  138. .swal2-input:not([style="display: none;"]),
  139. .swal2-file:not([style="display: none;"]),
  140. .swal2-range:not([style="display: none;"]),
  141. .swal2-select:not([style="display: none;"]),
  142. .swal2-radio:not([style="display: none;"]),
  143. .swal2-checkbox:not([style="display: none;"]),
  144. .swal2-textarea:not([style="display: none;"]),
  145. .swal2-footer:not([style="display: none;"]) {
  146. display: flex;
  147. }
  148. }