Няма описание
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.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  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. /* Sass non può moltiplicare var(--swal2-width); usa calc (fallback = larghezza default SWAL2) */
  30. max-inline-size: calc(var(--swal2-width, 32em) * 0.5);
  31. }
  32. .swal2-actions {
  33. margin-block-start: 1rem;
  34. button + button {
  35. margin-inline-start: 1rem;
  36. }
  37. }
  38. .swal2-input,
  39. .swal2-file,
  40. .swal2-textarea {
  41. box-shadow: none;
  42. }
  43. .swal2-icon {
  44. margin-block-end: 0;
  45. }
  46. .swal2-close {
  47. color: var(--#{$prefix}secondary-color);
  48. &:hover {
  49. color: var(--#{$prefix}body-color);
  50. }
  51. }
  52. }
  53. .swal2-popup {
  54. .swal2-title {
  55. color: var(--#{$prefix}body-color);
  56. font-size: $h2-font-size;
  57. font-weight: $headings-font-weight;
  58. }
  59. .swal2-html-container {
  60. color: var(--#{$prefix}body-color);
  61. line-height: $line-height-base;
  62. }
  63. .swal2-input,
  64. .swal2-file,
  65. .swal2-textarea {
  66. border: $input-border-width solid $input-border-color;
  67. color: var(--#{$prefix}body-color);
  68. font-size: $font-size-lg;
  69. @include border-radius($border-radius-lg);
  70. }
  71. .swal2-validation-message {
  72. background: var(--#{$prefix}gray-100);
  73. color: var(--#{$prefix}body-color);
  74. }
  75. /* Colors */
  76. .swal2-icon.swal2-success {
  77. border-color: var(--#{$prefix}success);
  78. .swal2-success-ring {
  79. border-color: rgba(var(--#{$prefix}success-rgb), .2);
  80. }
  81. [class^="swal2-success-line"] {
  82. background-color: var(--#{$prefix}success);
  83. }
  84. }
  85. .swal2-icon.swal2-question {
  86. border-color: rgba(var(--#{$prefix}secondary-rgb), .4);
  87. color: var(--#{$prefix}secondary);
  88. }
  89. .swal2-icon.swal2-info {
  90. border-color: rgba(var(--#{$prefix}info-rgb), .4);
  91. color: var(--#{$prefix}info);
  92. }
  93. .swal2-icon.swal2-warning {
  94. border-color: rgba(var(--#{$prefix}warning-rgb), .8);
  95. color: var(--#{$prefix}warning);
  96. }
  97. .swal2-icon.swal2-error {
  98. border-color: rgba(var(--#{$prefix}danger-rgb), .6);
  99. [class^="swal2-x-mark-line"] {
  100. border-color: var(--#{$prefix}danger);
  101. }
  102. }
  103. .swal2-footer {
  104. border-block-start: 1px solid var(--#{$prefix}border-color);
  105. color: var(--#{$prefix}body-color);
  106. }
  107. }
  108. .swal2-progress-steps[class] {
  109. .swal2-progress-step.swal2-active-progress-step,
  110. .swal2-progress-step-line,
  111. .swal2-active-progress-step,
  112. .swal2-progress-step {
  113. background: var(--#{$prefix}primary);
  114. color: var(--#{$prefix}primary-contrast);
  115. }
  116. .swal2-progress-step.swal2-active-progress-step {
  117. ~ .swal2-progress-step,
  118. ~ .swal2-progress-step-line {
  119. background: color-mix(in sRGB, var(--#{$prefix}primary) var(--#{$prefix}progress-bg-amount), var(--#{$prefix}progress-mix-bg));
  120. }
  121. }
  122. }
  123. }
  124. /* Dark Style */
  125. @if $enable-dark-mode {
  126. @include color-mode(dark) {
  127. .swal2-container {
  128. --#{$prefix}progress-bg-amount: 45%;
  129. --#{$prefix}progress-mix-bg: var(--#{$prefix}dark);
  130. }
  131. }
  132. }
  133. /* IE Specific */
  134. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  135. .swal2-modal:not([style="display: none;"]),
  136. .swal2-icon:not([style="display: none;"]),
  137. .swal2-actions:not([style="display: none;"]),
  138. .swal2-image:not([style="display: none;"]),
  139. .swal2-input:not([style="display: none;"]),
  140. .swal2-file:not([style="display: none;"]),
  141. .swal2-range:not([style="display: none;"]),
  142. .swal2-select:not([style="display: none;"]),
  143. .swal2-radio:not([style="display: none;"]),
  144. .swal2-checkbox:not([style="display: none;"]),
  145. .swal2-textarea:not([style="display: none;"]),
  146. .swal2-footer:not([style="display: none;"]) {
  147. display: flex;
  148. }
  149. }