_modal.scss 924 B

12345678910111213141516171819202122232425262728293031323334353637
  1. // Actual modal
  2. .modal-content {
  3. color: $modal-content-color-alt;
  4. background-color: $modal-content-bg-alt;
  5. border: $modal-content-border-width solid $modal-content-border-color-alt;
  6. @include box-shadow($modal-content-box-shadow-xs-alt);
  7. }
  8. // Modal background
  9. .modal-backdrop {
  10. background-color: $modal-backdrop-bg-alt;
  11. // Fade for backdrop
  12. &.fade { opacity: 0; }
  13. &.show { opacity: $modal-backdrop-opacity-alt; }
  14. }
  15. // Modal header
  16. // Top section of the modal w/ title and dismiss
  17. .modal-header {
  18. border-bottom: $modal-header-border-width solid $modal-header-border-color-alt;
  19. }
  20. // Footer (for actions)
  21. .modal-footer {
  22. border-top: $modal-footer-border-width solid $modal-footer-border-color-alt;
  23. }
  24. // Scale up the modal
  25. @include media-breakpoint-up(sm) {
  26. // Automatically set modal's width for larger viewports
  27. .modal-content {
  28. @include box-shadow($modal-content-box-shadow-sm-up-alt);
  29. }
  30. }