_modals.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. // Modals
  2. .modal {
  3. align-items: center;
  4. bottom: 0;
  5. display: none;
  6. justify-content: center;
  7. left: 0;
  8. opacity: 0;
  9. overflow: hidden;
  10. padding: $layout-spacing;
  11. position: fixed;
  12. right: 0;
  13. top: 0;
  14. &:target,
  15. &.active {
  16. display: flex;
  17. opacity: 1;
  18. z-index: $zindex-4;
  19. .modal-overlay {
  20. background: rgba($bg-color, .75);
  21. bottom: 0;
  22. cursor: default;
  23. display: block;
  24. left: 0;
  25. position: absolute;
  26. right: 0;
  27. top: 0;
  28. }
  29. .modal-container {
  30. animation: slide-down .2s ease 1;
  31. max-width: $control-width-md;
  32. width: 100%;
  33. z-index: $zindex-0;
  34. }
  35. }
  36. &.modal-sm {
  37. .modal-container {
  38. max-width: $control-width-sm;
  39. padding: 0 $unit-2;
  40. }
  41. }
  42. &.modal-lg {
  43. .modal-overlay {
  44. background: $bg-color-light;
  45. }
  46. .modal-container {
  47. box-shadow: none;
  48. max-width: $control-width-lg;
  49. }
  50. }
  51. }
  52. .modal-container {
  53. @include shadow-variant(.2rem);
  54. background: $bg-color-light;
  55. border-radius: $border-radius;
  56. display: block;
  57. padding: 0 $unit-4;
  58. .modal-header {
  59. padding: $unit-4;
  60. }
  61. .modal-body {
  62. max-height: 50vh;
  63. overflow-y: auto;
  64. padding: $unit-4;
  65. position: relative;
  66. }
  67. .modal-footer {
  68. padding: $unit-4;
  69. text-align: right;
  70. }
  71. }