_modals.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. //
  2. // Component: Modals
  3. //
  4. // Overlay
  5. .modal-dialog {
  6. .overlay {
  7. display: flex;
  8. position: absolute;
  9. left: 0;
  10. top: 0;
  11. bottom: 0;
  12. right: 0;
  13. margin: -$modal-content-border-width;
  14. z-index: ($zindex-modal + 2);
  15. justify-content: center;
  16. align-items: center;
  17. background-color: rgba($black, .7);
  18. color: darken($gray-600, 2.5%);
  19. @include border-radius($modal-content-border-radius);
  20. }
  21. }
  22. // BG Color Variations Fixes
  23. .modal-content {
  24. &.bg-warning {
  25. .modal-header,
  26. .modal-footer {
  27. border-color: $gray-800;
  28. }
  29. }
  30. &.bg-primary,
  31. &.bg-secondary,
  32. &.bg-info,
  33. &.bg-danger,
  34. &.bg-success, {
  35. .close {
  36. color: $white;
  37. text-shadow: 0 1px 0 $black;
  38. }
  39. }
  40. }
  41. @include dark-mode () {
  42. .modal-header,
  43. .modal-footer {
  44. border-color: $gray-600;
  45. }
  46. .modal-content {
  47. background-color: $dark;
  48. &.bg-warning {
  49. .modal-header,
  50. .modal-footer {
  51. border-color: $gray-600;
  52. }
  53. .close {
  54. color: $dark !important;
  55. text-shadow: 0 1px 0 $gray-700 !important;
  56. }
  57. }
  58. &.bg-primary,
  59. &.bg-secondary,
  60. &.bg-info,
  61. &.bg-danger,
  62. &.bg-success {
  63. .modal-header,
  64. .modal-footer {
  65. border-color: $white;
  66. }
  67. }
  68. }
  69. }