ext-component-sweet-alerts.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. @import '../../bootstrap-extended/include'; // Bootstrap includes
  2. @import '../../components/include'; // Components includes
  3. .swal2-container {
  4. .swal2-popup {
  5. border-radius: $card-border-radius;
  6. padding-bottom: 1.5rem;
  7. // close button
  8. .swal2-close:focus {
  9. outline: none;
  10. box-shadow: none;
  11. }
  12. // content
  13. .swal2-content {
  14. color: $body-color;
  15. }
  16. // header styling
  17. .swal2-title {
  18. font-size: $h3-font-size;
  19. font-weight: $headings-font-family;
  20. color: $headings-color;
  21. }
  22. // remove box-shadow on focus of buttons
  23. button.swal2-confirm:focus {
  24. box-shadow: none;
  25. }
  26. // input
  27. input.swal2-input {
  28. height: $input-height;
  29. font-size: $font-size-base;
  30. padding: $input-padding-y $input-padding-x;
  31. color: $body-color;
  32. border-color: $custom-control-border-color;
  33. border-radius: $border-radius;
  34. line-height: $line-height-base;
  35. &:focus {
  36. border-color: $primary !important;
  37. box-shadow: $input-focus-box-shadow;
  38. }
  39. }
  40. // steps
  41. .swal2-progress-steps {
  42. .swal2-progress-step {
  43. background-color: $primary;
  44. &.swal2-active-progress-step {
  45. ~ .swal2-progress-step-line,
  46. ~ .swal2-progress-step {
  47. background-color: lighten(theme-color('primary'), 15%);
  48. }
  49. }
  50. }
  51. .swal2-progress-step-line {
  52. background-color: $primary;
  53. }
  54. }
  55. // pre code
  56. pre {
  57. min-height: 1.35rem;
  58. margin-top: 0.5rem;
  59. }
  60. // footer
  61. .swal2-footer {
  62. border-color: $border-color;
  63. color: $body-color;
  64. }
  65. }
  66. }
  67. // Dark Layout
  68. .dark-layout {
  69. .swal2-container {
  70. .swal2-popup .swal2-title {
  71. color: $theme-dark-headings-color;
  72. }
  73. .swal2-modal {
  74. background-color: $theme-dark-card-bg;
  75. .swal2-header {
  76. .swal2-title {
  77. color: $theme-dark-headings-color;
  78. }
  79. .swal2-icon-text {
  80. color: inherit;
  81. }
  82. .swal2-success-circular-line-left,
  83. .swal2-success-circular-line-right,
  84. .swal2-success-fix,
  85. .swal2-animate-success-icon {
  86. background-color: $theme-dark-card-bg !important;
  87. }
  88. }
  89. input.swal2-input {
  90. border-color: $theme-dark-border-color;
  91. color: $theme-dark-body-color;
  92. }
  93. .swal2-content,
  94. .swal2-html-container {
  95. color: $theme-dark-body-color;
  96. }
  97. pre,
  98. code {
  99. color: $theme-dark-body-color;
  100. }
  101. .swal2-input {
  102. background-color: $theme-dark-card-bg;
  103. }
  104. // footer
  105. .swal2-footer {
  106. border-color: $theme-dark-border-color;
  107. color: $theme-dark-body-color;
  108. }
  109. }
  110. .swal2-validation-message {
  111. background-color: $theme-dark-body-bg;
  112. color: $theme-dark-body-color;
  113. }
  114. }
  115. }